fix: 登录页面图标替换

xinkeaboard-web/components/login/Email.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="center">
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 19px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/Mail.png" alt="">
+      </span>
       <input
         type="text"
         v-model="name"
@@ -26,10 +25,9 @@
       {{ emailErrorMsg }}
     </div>
     <div class="item password">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         type="password"
         v-model="password"

xinkeaboard-web/components/login/Phone.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="center">
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 19px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/User.png" alt="">
+      </span>
       <input
         type="text"
         v-model="phone"
@@ -26,10 +25,9 @@
       {{ phoneErrorMsg }}
     </div>
     <div class="item password">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         type="password"
         v-model="password"

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="center">
     <div class="item">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/User.png" alt="">
+      </span>
       <input
         type="text"
         v-model="name"
@@ -24,10 +23,9 @@
       </div>
     </div>
     <div class="item password">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         :type="showPwdFlag ? 'text' : 'password'"
         v-model="password"
@@ -60,9 +58,9 @@
       {{ checkPwdErrorMsg }}
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px;" class="icon"
-        ><img src="/register/pwd_confirm.png" alt=""
-      /></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         class="input"
         v-model="confirmPassword"
@@ -277,17 +275,20 @@ watch(name, (val) => {
     }
 
     .icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      text-align: center;
-      line-height: 46px;
       height: 46px;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 

xinkeaboard-web/components/register/RegisterMail.vue

@@ -4,10 +4,9 @@
       {{ L["register"]["我们将向您的邮箱发送验证码，该邮件将用作登录用户名"] }}
     </p>
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 19px"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/Mail.png" alt="">
+      </span>
       <input
         type="text"
         v-model="email"
@@ -30,7 +29,7 @@
     <!-- 邮箱验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/register/mail_success.png" alt="" />
+        <img src="/login/Code.png" alt="">
       </span>
       <input
         type="text"
@@ -291,14 +290,21 @@ const clearInputVal = (type) => {
     }
 
     .icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      text-align: center;
       height: 46px;
-      line-height: 46px;
-      background: #f8f8f8;
+
+      img {
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
+      }
     }
 
     .input {
@@ -368,16 +374,19 @@ const clearInputVal = (type) => {
     }
 
     &-icon {
-      width: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;     
+      width: 50px;
+      height: 48px;
       border: 1px solid #e8e8e8;
       border-right: none;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 

xinkeaboard-web/components/register/RegisterPhone.vue

@@ -4,10 +4,9 @@
       {{ L["register"]["我们将向您的手机号发送验证码，该手机号将用作登录用户名"] }}
     </p>
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 19px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/User.png" alt="">
+      </span>
       <input
         type="text"
         v-model="mobile"
@@ -30,7 +29,7 @@
     <!-- 手机号验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/register/mail_success.png" alt="" />
+        <img src="/login/Code.png" alt="">
       </span>
       <input
         type="text"
@@ -263,14 +262,21 @@ const clearInputVal = (type) => {
     }
 
     .icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      line-height: 46px;
-      text-align: center;
       height: 46px;
-      background: #f8f8f8;
+
+      img {
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
+      }
     }
 
     .input {
@@ -314,16 +320,19 @@ const clearInputVal = (type) => {
     margin-top: 10px;
 
     &-icon {
-      width: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;     
+      width: 50px;
+      height: 48px;
       border: 1px solid #e8e8e8;
       border-right: none;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 

xinkeaboard-web/components/retrieve/RetrievePassword.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="center">
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/Mail.png" alt="">
+      </span>
       <input
         type="text"
         v-model="memberEmail"
@@ -30,7 +29,7 @@
     <!-- 邮箱验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/register/mail_success.png" alt="" />
+        <img src="/login/Code.png" alt="">
       </span>
       <input
         type="text"
@@ -59,10 +58,9 @@
       {{ emailCodeErrorMsg }}
     </div>
     <div class="item password">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         :type="showPwdFlag ? 'text' : 'password'"
         v-model="password"
@@ -95,9 +93,9 @@
       </div>
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px;" class="icon"
-        ><img src="/register/pwd_confirm.png" alt=""
-      /></span>
+     <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         class="input"
         v-model="confirmPassword"
@@ -372,19 +370,19 @@ watch(emailCode, (val) => {
 
     .icon {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      // text-align: center;
-      // line-height: 46px;
       height: 46px;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 
@@ -429,16 +427,19 @@ watch(emailCode, (val) => {
     margin-top: 10px;
 
     &-icon {
-      width: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;     
+      width: 50px;
+      height: 48px;
       border: 1px solid #e8e8e8;
       border-right: none;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 

xinkeaboard-web/components/retrieve/RetrievePwdByPhone.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="center">
     <div class="item account">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-wode"
-      ></span>
+      <span class="icon">
+        <img src="/login/User.png" alt="">
+      </span>
       <input
         type="text"
         v-model="memberMobile"
@@ -30,7 +29,7 @@
     <!-- 邮箱验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/register/mail_success.png" alt="" />
+        <img src="/login/Code.png" alt="">
       </span>
       <input
         type="text"
@@ -59,10 +58,9 @@
       {{ mobileCodeErrorMsg }}
     </div>
     <div class="item password">
-      <span
-        style="color: #bbb; font-size: 21px;"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         :type="showPwdFlag ? 'text' : 'password'"
         v-model="password"
@@ -95,9 +93,9 @@
       </div>
     </div>
     <div class="item confirm">
-      <span style="color: #bbb; font-size: 21px;" class="icon"
-        ><img src="/register/pwd_confirm.png" alt=""
-      /></span>
+      <span class="icon">
+        <img src="/login/Password.png" alt="">
+      </span>
       <input
         class="input"
         v-model="confirmPassword"
@@ -372,19 +370,19 @@ watch(mobileCode, (val) => {
 
     .icon {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
       width: 50px;
-      // text-align: center;
-      // line-height: 46px;
       height: 46px;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 
@@ -429,16 +427,19 @@ watch(mobileCode, (val) => {
     margin-top: 10px;
 
     &-icon {
-      width: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: flex-end;     
+      width: 50px;
+      height: 48px;
       border: 1px solid #e8e8e8;
       border-right: none;
-      background: #f8f8f8;
 
       img {
-        width: 20px;
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
       }
     }
 

xinkeaboard-web/pages/login.vue

@@ -197,14 +197,22 @@ onMounted(() => {
     }
 
     .icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
       position: absolute;
       left: 1px;
       top: 1px;
-      line-height: 46px;
       width: 50px;
-      text-align: center;
       height: 46px;
-      background: #f8f8f8;
+
+      img {
+        width: 22px;
+        height: 22px;
+        position: relative;
+        right: 5px;
+      }
+      // background: #f8f8f8;
     }
 
     .input {