fix: 修复整体样式问题

xinkeaboard-web/app.vue

@@ -9,6 +9,9 @@
 
 <script setup>
 import { ID_INJECTION_KEY } from 'element-plus'
+import { useFiltersStore } from "@/store/filter.js";
+
+const filtersStore = useFiltersStore();
 
 useHead({
   link: [
@@ -51,6 +54,7 @@ provide(ID_INJECTION_KEY, {
 const googleTranslateInit = () => {
   let checkIfGoogleLoaded = setInterval(() => {
     if (window.google && window.google.translate?.TranslateElement != null) {
+        filtersStore.setGoogleTanslateStatus('1')
         clearInterval(checkIfGoogleLoaded);
       googleTranslateElement('google_translate_element');
     }
@@ -59,7 +63,6 @@ const googleTranslateInit = () => {
 
 const googleTranslateElement = (id) => {
   new window.google.translate.TranslateElement({pageLanguage: 'en',layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, id);
-
 }
 
 onMounted(() => {

xinkeaboard-web/components/NavTopBar.vue

@@ -77,11 +77,11 @@
           <li @click="goToByPush('/article')">
             <div class="li_item">{{ L["服务中心"] }}</div>
           </li>
-          <li>
-          <div class="li_item">
-            <div id=google_translate_element></div>
+          <li v-if="googleTranslateStatus === '1'">
+            <div class="li_item">
+              <div id=google_translate_element></div>
 
-          </div>
+            </div>
        
           </li>
         </ul>
@@ -101,6 +101,7 @@ const route = useRoute()
 const filtersStore = useFiltersStore();
 const loginFlag = computed(() => filtersStore.getLoginFlag)
 const memberInfo = computed(() => filtersStore.getMemberInfo);
+const googleTranslateStatus = computed(() => filtersStore.getGoogleTanslateStatus);
 const L = getCurLanguage();
 
 // 判断当前页面是否为注册页面
@@ -280,8 +281,12 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
           align-items: center;
           width: max-content;
           white-space: nowrap;
-          border-right: 1px solid #ddd;
+          border-left: 1px solid #ddd;
           padding: 0 10px;
+
+          &:first-child {
+            border-left: none;
+          }
           .li_item {
             position: relative;
             cursor: pointer;

xinkeaboard-web/components/login/Email.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 19px; padding-top: 7px"
+        style="color: #bbb; font-size: 19px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -27,7 +27,7 @@
     </div>
     <div class="item password">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-mima1"
       ></span>
       <input

xinkeaboard-web/components/login/Phone.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 19px; padding-top: 7px"
+        style="color: #bbb; font-size: 19px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -27,7 +27,7 @@
     </div>
     <div class="item password">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-mima1"
       ></span>
       <input

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -25,7 +25,7 @@
     </div>
     <div class="item password">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-mima1"
       ></span>
       <input
@@ -60,7 +60,7 @@
       {{ checkPwdErrorMsg }}
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
+      <span style="color: #bbb; font-size: 21px;" class="icon"
         ><img src="/register/pwd_confirm.png" alt=""
       /></span>
       <input
@@ -282,7 +282,8 @@ watch(name, (val) => {
       top: 1px;
       width: 50px;
       text-align: center;
-      height: 38px;
+      line-height: 46px;
+      height: 46px;
       background: #f8f8f8;
 
       img {
@@ -292,7 +293,7 @@ watch(name, (val) => {
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
     }
@@ -310,14 +311,10 @@ watch(name, (val) => {
     right: 0;
     top: 1px;
     width: 44px;
-    height: 38px;
+    height: 46px;
+    text-align: center;
+    line-height: 46px;
     cursor: pointer;
-
-    :before {
-      position: absolute;
-      top: 9px;
-      left: 14px;
-    }
   }
 
   .error {

xinkeaboard-web/components/register/RegisterMail.vue

@@ -5,7 +5,7 @@
     </p>
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 19px; padding-top: 7px"
+        style="color: #bbb; font-size: 19px"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -296,20 +296,14 @@ const clearInputVal = (type) => {
       top: 1px;
       width: 50px;
       text-align: center;
-      height: 38px;
+      height: 46px;
+      line-height: 46px;
       background: #f8f8f8;
-
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 326px;
-      }
     }
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
 
@@ -324,17 +318,13 @@ const clearInputVal = (type) => {
 
   .cancel {
     position: absolute;
-    right: -20px;
+    right: 0px;
     top: 2px;
     width: 44px;
-    height: 38px;
+    height: 46px;
+    text-align: center;
+    line-height: 46px;
     cursor: pointer;
-
-    :before {
-      position: absolute;
-      top: 9px;
-      left: -5px;
-    }
   }
 
   .error {
@@ -348,7 +338,7 @@ const clearInputVal = (type) => {
   .verify-code {
     display: flex;
     width: 431px;
-    height: 40px;
+    height: 48px;
     margin-top: 10px;
 
     input::placeholder {
@@ -397,7 +387,7 @@ const clearInputVal = (type) => {
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
-      height: 40px;
+      height: 48px;
       padding: 0 0 0 10px;
     }
 

xinkeaboard-web/components/register/RegisterPhone.vue

@@ -5,7 +5,7 @@
     </p>
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 19px; padding-top: 7px"
+        style="color: #bbb; font-size: 19px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -267,21 +267,15 @@ const clearInputVal = (type) => {
       left: 1px;
       top: 1px;
       width: 50px;
+      line-height: 46px;
       text-align: center;
-      height: 38px;
+      height: 46px;
       background: #f8f8f8;
-
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 326px;
-      }
     }
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
     }
@@ -299,14 +293,10 @@ const clearInputVal = (type) => {
     right: 0;
     top: 1px;
     width: 44px;
-    height: 38px;
+    height: 46px;
+    line-height: 46px;
+    text-align: center;
     cursor: pointer;
-
-    :before {
-      position: absolute;
-      top: 9px;
-      left: 14px;
-    }
   }
 
   .error {
@@ -320,7 +310,7 @@ const clearInputVal = (type) => {
   .verify-code {
     display: flex;
     width: 431px;
-    height: 40px;
+    height: 48px;
     margin-top: 10px;
 
     &-icon {
@@ -342,7 +332,7 @@ const clearInputVal = (type) => {
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
-      height: 40px;
+      height: 48px;
       padding: 0 0 0 10px;
       width: 100%;
     }

xinkeaboard-web/components/retrieve/RetrievePassword.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -60,7 +60,7 @@
     </div>
     <div class="item password">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-mima1"
       ></span>
       <input
@@ -95,7 +95,7 @@
       </div>
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
+      <span style="color: #bbb; font-size: 21px;" class="icon"
         ><img src="/register/pwd_confirm.png" alt=""
       /></span>
       <input
@@ -371,31 +371,28 @@ watch(emailCode, (val) => {
     }
 
     .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      text-align: center;
-      height: 38px;
+      // text-align: center;
+      // line-height: 46px;
+      height: 46px;
       background: #f8f8f8;
 
       img {
         width: 20px;
       }
-
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 431px;
-      }
     }
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
-        width: 431px;
+      width: 431px;
     }
 
     &.code {
@@ -410,15 +407,11 @@ watch(emailCode, (val) => {
     position: absolute;
     right: 0;
     top: 1px;
+    text-align: center;
+    line-height: 46px;
     width: 44px;
-    height: 38px;
+    height: 46px;
     cursor: pointer;
-
-    :before {
-      position: absolute;
-      top: 9px;
-      left: 14px;
-    }
   }
 
   .error {
@@ -432,7 +425,7 @@ watch(emailCode, (val) => {
   .verify-code {
     display: flex;
     width: 431px;
-    height: 40px;
+    height: 48px;
     margin-top: 10px;
 
     &-icon {
@@ -455,7 +448,7 @@ watch(emailCode, (val) => {
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
-      height: 40px;
+      height: 48px;
       padding: 0 0 0 10px;
     }
 

xinkeaboard-web/components/retrieve/RetrievePwdByPhone.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item account">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-wode"
       ></span>
       <input
@@ -60,7 +60,7 @@
     </div>
     <div class="item password">
       <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
+        style="color: #bbb; font-size: 21px;"
         class="icon iconfont icon-mima1"
       ></span>
       <input
@@ -95,7 +95,7 @@
       </div>
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
+      <span style="color: #bbb; font-size: 21px;" class="icon"
         ><img src="/register/pwd_confirm.png" alt=""
       /></span>
       <input
@@ -371,29 +371,26 @@ watch(mobileCode, (val) => {
     }
 
     .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      text-align: center;
-      height: 38px;
+      // text-align: center;
+      // line-height: 46px;
+      height: 46px;
       background: #f8f8f8;
 
       img {
         width: 20px;
       }
-
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 431px;
-      }
     }
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
     }
@@ -411,14 +408,10 @@ watch(mobileCode, (val) => {
     right: 0;
     top: 1px;
     width: 44px;
-    height: 38px;
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
     cursor: pointer;
-
-    :before {
-      position: absolute;
-      top: 9px;
-      left: 14px;
-    }
   }
 
   .error {
@@ -432,7 +425,7 @@ watch(mobileCode, (val) => {
   .verify-code {
     display: flex;
     width: 431px;
-    height: 40px;
+    height: 48px;
     margin-top: 10px;
 
     &-icon {
@@ -455,7 +448,7 @@ watch(mobileCode, (val) => {
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
-      height: 40px;
+      height: 48px;
       padding: 0 0 0 10px;
       width: 190px;
     }

xinkeaboard-web/pages/login.vue

@@ -200,22 +200,16 @@ onMounted(() => {
       position: absolute;
       left: 1px;
       top: 1px;
+      line-height: 46px;
       width: 50px;
       text-align: center;
-      height: 38px;
+      height: 46px;
       background: #f8f8f8;
-
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 431px;
-      }
     }
 
     .input {
       border: 1px solid #e8e8e8;
-      height: 40px;
+      height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
     }
@@ -252,13 +246,15 @@ onMounted(() => {
     right: 0;
     top: 1px;
     width: 44px;
-    height: 38px;
+    line-height: 46px;
+    height: 46px;
+    text-align: center;
     cursor: pointer;
 
     :before {
-      position: absolute;
-      top: 9px;
-      left: 14px;
+      // position: absolute;
+      // top: 9px;
+      // left: 14px;
     }
   }
 

xinkeaboard-web/pages/member/account.vue

@@ -23,22 +23,18 @@
           ></i>
           <div class="item_info flex_row_start_center">
             <span class="s1">{{ L[contactType === 'email' ? "电子邮箱" : '手机号'] }}</span>
-            <span v-if="contactType === 'email'">
-              <span class="tips" v-if="memberInfo.data.memberEmail"
-                >{{L["绑定邮箱"]}}：{{
-                  memberInfo.data.memberEmail
-                }}，{{L["若邮箱已停用，请及时更换"]}}</span
-              >
-              <span class="no tips" v-else>{{L['尚未绑定邮箱']}}</span>
-            </span>
-            <span v-else>
-              <span class="tips" v-if="memberInfo.data.memberMobile"
+            <span class="tips" v-if="memberInfo.data.memberEmail && contactType === 'email'"
+              >{{L["绑定邮箱"]}}：{{
+                memberInfo.data.memberEmail
+              }}，{{L["若邮箱已停用，请及时更换"]}}</span
+            >
+            <span class="no tips" v-if="!memberInfo.data.memberEmail && contactType === 'email'">{{L['尚未绑定邮箱']}}</span>
+            <span class="tips" v-if="memberInfo.data.memberMobile && contactType === 'mobile'"
                 >{{L["绑定手机号"]}}：{{
                   memberInfo.data.memberMobile
                 }}，{{L["若手机已停用，请及时更换"]}}</span
               >
-              <span class="no tips" v-else>{{L['尚未绑定手机号']}}</span>
-            </span>
+            <span class="no tips" v-if="!memberInfo.data.memberMobile && contactType === 'mobile'">{{L['尚未绑定手机号']}}</span>
             <div class="s2" v-if="contactType === 'email'">
               <span
                 class="oprate pointer"
@@ -165,6 +161,7 @@ const toPage = (url, type) => {
       font-size: 14px;
 
       .item {
+        display: flex;
         width: 100%;
         border-bottom: 1px dashed #eaeaea;
         box-sizing: border-box;
@@ -174,6 +171,12 @@ const toPage = (url, type) => {
           margin-right: 10px;
         }
 
+        .item_info {
+          flex: 1;
+          width: 100%;
+          overflow: hidden;
+        }
+
         .icon-jubao {
           color: $colorMain;
         }
@@ -187,14 +190,21 @@ const toPage = (url, type) => {
         }
 
         .s2{
-          min-width: 100px;
+          width: 200px;
           text-align: right;
         }
 
         .tips {
+          width: 100%;
           margin-left: 60px;
           color: #999;
-          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+          word-break: normal;
         }
 
         .oprate {

xinkeaboard-web/store/filter.js

@@ -10,11 +10,15 @@ export const useFiltersStore =  defineStore("user", {
       time:"",
       memberInfo:{},
       siteLogo:'/images/admin/setting/u57SOSFwenNMgOSavog.png',
-      uuid:''
+      uuid:'',
+      googleTranslateStatus: '0'
     };
   },
   persist: true, // 开启数据持久化，所有store数据将被持久化到指定仓库
   actions: {
+    setGoogleTanslateStatus(val) {
+      this.googleTranslateStatus = val;
+    },
     setLoginStatus(val) {
       this.loginFlag = val;
     },
@@ -38,6 +42,9 @@ export const useFiltersStore =  defineStore("user", {
     },
   },
   getters: {
+    getGoogleTanslateStatus() {
+      return this.googleTranslateStatus;
+    },
     getLoginFlag() {
       return this.loginFlag;
     },