fix: 调整登录/注册/找回密码页面样式

xinkeaboard-web/assets/language/en.js

@@ -66,7 +66,7 @@ export const lang_en = {
     '发送验证邮件': 'Send verification email',
     '请同意用户注册协议及隐私政策': 'Please agree to the user agreement and privacy agreement',
     '注册验证邮件已发送到': 'Registration verification email has been sent to ',
-    '请输入用户名': 'Please enter one user name',
+    '请输入用户名': 'Please enter one full name',
     '请输入6～20位英文、数字、符号': 'Please input 6~20 English characters, numbers and symbols',
     '会员邮箱账户激活成功，请登录': 'Member email account activated successfully, please sign in',
 
@@ -836,12 +836,14 @@ export const lang_en = {
         '验证码已发送': 'The verification code has been sent',
         '校验不通过': 'The verification fails',
         '注册成功': 'Registration Successful',
-        '我们将向您的手机号发送验证码，该手机号将用作登录用户名': 'We will send a verification code to your phone, which will be used as your login username',
-        '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': 'We will send a verification code to your email address, which will be used as your login username',
+        '我们将向您的手机号发送验证码，该手机号将用作登录用户名': 'We will send a verification code to your phone',
+        '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': 'We will send a verification code to your email address',
         '请确认密码': 'Please confirm the password',
         '两次输入的密码不一致': 'The passwords entered twice are inconsistent',
         '注册成功': 'Registration successful',
-        '您已注册成功, 5s内跳转到登录页': 'You have registered successfully. You will be redirected to the login page within 5 seconds',
+        's内跳转到登录页': ' You will be redirected to the login page within ',
+        '秒': ' seconds',
+        '您已注册成功': 'You have registered successfully.',
         '立即登录': 'Log in now',
         '重置成功': 'Reset successful',
         '密码重置成功, 5s内跳转至登录页': 'The password reset was successful. You will be redirected to the login page within 5 seconds'

xinkeaboard-web/assets/language/zh.js

@@ -869,7 +869,10 @@ export const lang_zn = {
       '请确认密码': '请确认密码',
       '两次输入的密码不一致': '两次输入的密码不一致',
       '注册成功': '注册成功',
-      '您已注册成功, 5s内跳转到登录页': '您已注册成功, 5s内跳转到登录页',
+      's内跳转到登录页': ' 秒内跳转到登录页',
+      '秒': '',
+      '您已注册成功': '您已注册成功,',
+    //   '您已注册成功, 5s内跳转到登录页': '您已注册成功, 5s内跳转到登录页',
       '立即登录': '立即登录',
       '重置成功': '重置成功',
       '密码重置成功, 5s内跳转至登录页': '密码重置成功, 5s内跳转至登录页'

xinkeaboard-web/assets/style/base.scss

@@ -1,6 +1,6 @@
 $colorMain: #e2231a !default; //主色、文字选中、搜索
 *{
-  font-family: Arial,sans-serif,Roboto,Helvetica Neue,Arial,Noto Sans
+  font-family: Roboto;
 }
 /**
 * 全局通用样式

xinkeaboard-web/assets/style/register.scss

@@ -55,8 +55,12 @@
   }
 
   .sld_login_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     width: 100%;
-    height: 600px;
+    height: 750px;
     position: relative;
     .bg {
       position: absolute;
@@ -80,16 +84,19 @@
       position: relative;
 
       .login_box {
+        display: flex;
+        flex-direction: column;
+        width: 487px;
+        height: 598px;
         position: relative;
         z-index: 10000;
         background: #fff;
-        padding: 10px 2px 50px;
+        // padding: 10px 2px 50px;
 
         .top {
           margin-top: 20px;
-          padding: 0 20px;
           display: flex;
-          width: 356px;
+          width: 100%;
           cursor: default;
           .item1 {
             flex: 1;
@@ -106,10 +113,10 @@
           height: 51px;
           background: #fcfcfc;
           border-top: 1px solid #eee;
-          position: absolute;
+          // position: absolute;
           width: 100%;
-          bottom: 0;
-          left: 0;
+          // bottom: 0;
+          // left: 0;
           display: flex;
           padding: 0 16px;
           box-sizing: border-box;

xinkeaboard-web/components/login/Email.vue

@@ -17,8 +17,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="emailErrorMsg">
+    <div class="error">
       <span
+        v-if="emailErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -45,8 +46,9 @@
       </div>
     </div>
 
-    <div class="error" v-if="errorMsg">
+    <div class="error">
       <span
+        v-if="errorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>

xinkeaboard-web/components/login/Phone.vue

@@ -17,8 +17,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="phoneErrorMsg">
+    <div class="error">
       <span
+        v-if="phoneErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -45,8 +46,9 @@
       </div>
     </div>
 
-    <div class="error" v-if="errorMsg">
+    <div class="error">
       <span
+        v-if="errorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -14,8 +14,9 @@
       <div data-type="userName" class="cancel" @click="clearInputVal">
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
-      <div class="error" v-if="nameErrorMsg">
+      <div class="error">
         <span
+          v-if="nameErrorMsg"
           style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
@@ -50,8 +51,9 @@
         ></span>
       </div>
     </div>
-    <div class="error" v-if="checkPwdErrorMsg">
+    <div class="error" >
       <span
+        v-if="checkPwdErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -83,8 +85,9 @@
         ></span>
       </div>
     </div>
-    <div class="error" v-if="checkErrorMsg">
+    <div class="error">
       <span
+        v-if="checkErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -120,8 +123,9 @@
         </nuxt-link>
       </span>
     </div>
-    <div class="error" v-if="agreeErrorMsg">
+    <div class="error">
       <span
+        v-if="agreeErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -257,7 +261,11 @@ watch(name, (val) => {
 
 <style lang="scss" scoped>
 .center {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
 
   .item {
     position: relative;
@@ -286,7 +294,7 @@ watch(name, (val) => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+      width: 431px;
     }
 
     &.code {
@@ -308,7 +316,7 @@ watch(name, (val) => {
     :before {
       position: absolute;
       top: 9px;
-      // left: 14px;
+      left: 14px;
     }
   }
 
@@ -321,7 +329,7 @@ watch(name, (val) => {
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 100px;
     background: $colorMain;
     color: #fff;
     text-align: center;

xinkeaboard-web/components/register/RegisterMail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center">
-    <p style="width: 296px">
+    <p style="width: 100%; text-align: center;">
       {{ L["register"]["我们将向您的邮箱发送验证码，该邮件将用作登录用户名"] }}
     </p>
     <div class="item account">
@@ -19,8 +19,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="emailErrorMsg">
+    <div class="error">
       <span
+        v-if="emailErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -50,8 +51,9 @@
         </el-button>
       </span>
     </div>
-    <div class="error" v-if="emailCodeErrorMsg">
+    <div class="error">
       <span
+        v-if="emailCodeErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -247,35 +249,39 @@ const clearInputVal = (type) => {
 </style>
 <style lang="scss" scoped>
 .center {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
 
   .item {
     position: relative;
-    margin-top: 15px;
+    margin-top: 25px;
     border-radius: 2px;
 
     input::placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     ::-webkit-input-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     /* 使用webkit内核的浏览器 */
     :-moz-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     /* Firefox版本19+ */
     :-ms-input-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
@@ -305,7 +311,8 @@ const clearInputVal = (type) => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+      width: 431px;
+
     }
     &.code {
       .input {
@@ -317,8 +324,8 @@ const clearInputVal = (type) => {
 
   .cancel {
     position: absolute;
-    right: 0;
-    top: 1px;
+    right: -20px;
+    top: 2px;
     width: 44px;
     height: 38px;
     cursor: pointer;
@@ -340,32 +347,32 @@ const clearInputVal = (type) => {
 
   .verify-code {
     display: flex;
-    width: 350px;
+    width: 431px;
     height: 40px;
     margin-top: 10px;
 
     input::placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     ::-webkit-input-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     /* 使用webkit内核的浏览器 */
     :-moz-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
 
     /* Firefox版本19+ */
     :-ms-input-placeholder {
-      font-weight: 400;
+      // font-weight: 400;
       font-size: $fontE;
       color: rgba(40,46,48,0.6);
     }
@@ -385,12 +392,13 @@ const clearInputVal = (type) => {
     }
 
     input {
+      flex: 1;
+      width: 100%;
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
       height: 40px;
       padding: 0 0 0 10px;
-      width: 200px;
     }
 
     &-accept {
@@ -402,12 +410,12 @@ const clearInputVal = (type) => {
       .el-button {
         width: 100%;
         height: 100%;
-        font-weight: bold;
+        // font-weight: bold;
         color: #FFFFFF;
         background: $colorMain;
         border-left: none;
         border-radius: 0;
-        font-size: $fontE;
+        font-size: 12px;
 
         &:hover {
           // border-color: #e8e8e8;
@@ -418,7 +426,7 @@ const clearInputVal = (type) => {
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 160px;
     background: $colorMain;
     color: #fff;
     text-align: center;

xinkeaboard-web/components/register/RegisterPhone.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center">
-    <p style="width: 296px">
+    <p style="width: 100%; text-align: center;">
       {{ L["register"]["我们将向您的手机号发送验证码，该手机号将用作登录用户名"] }}
     </p>
     <div class="item account">
@@ -19,8 +19,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="phoneErrorMsg">
+    <div class="error">
       <span
+        v-if="phoneErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -49,8 +50,9 @@
         </el-button>
       </span>
     </div>
-    <div class="error" v-if="phoneCodeErrorMsg">
+    <div class="error">
       <span
+        v-if="phoneCodeErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -245,7 +247,11 @@ const clearInputVal = (type) => {
 </style>
 <style lang="scss" scoped>
 .center {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
 
   .item {
     position: relative;
@@ -277,7 +283,7 @@ const clearInputVal = (type) => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+      width: 431px;
     }
 
     &.code {
@@ -313,7 +319,7 @@ const clearInputVal = (type) => {
 
   .verify-code {
     display: flex;
-    width: 326px;
+    width: 431px;
     height: 40px;
     margin-top: 10px;
 
@@ -332,12 +338,13 @@ const clearInputVal = (type) => {
     }
 
     input {
+      flex: 1;
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
       height: 40px;
       padding: 0 0 0 10px;
-      width: 190px;
+      width: 100%;
     }
 
     &-accept {
@@ -349,22 +356,22 @@ const clearInputVal = (type) => {
       .el-button {
         width: 100%;
         height: 100%;
-        color: #666;
-        background: #f8f8f8;
+        color: #fff;
+        background: $colorMain;
         border-left: none;
         border-radius: 0;
         font-size: 12px;
 
         &:hover {
-          border-color: #e8e8e8;
-          color: $colorMain;
+          // border-color: #e8e8e8;
+          // color: $colorMain;
         }
       }
     }
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 160px;
     background: $colorMain;
     color: #fff;
     text-align: center;

xinkeaboard-web/components/register/RegisterSuccess.vue

@@ -1,28 +1,23 @@
 <template>
   <div class="register-success">
     <div class="register-success-content">
-      <div class="register-success-content__icon">
-        <div class="icon-circle">
-          <img src="/register/success.png" />
-        </div>
+      <img src="/register/success.png" />
+      <div class="register-success-title">
+        {{ L["register"]["注册成功"] }}
       </div>
-      <div class="register-success-content__tip">
-        <div class="tip-title">{{ L["register"]["注册成功"] }}</div>
-        <div class="tip-content">
-          {{ L["register"]["您已注册成功, 5s内跳转到登录页"] }}
-        </div>
-        <div class="line"></div>
-        <div class="login-button">
-          <el-button size="large" @click="goLogin">{{
-            L["register"]["立即登录"]
-          }}</el-button>
-        </div>
+      <div class="register-success-tip">
+        <span>{{ L["register"]["您已注册成功"] }}</span>
+        <span>{{ L["register"]["s内跳转到登录页"] }}</span>
+        <span class="register-success-tip__seconds">{{ countDownM }}</span>
+        <span>{{ L["register"]["秒"] }}</span>
       </div>
     </div>
+    <div class="register-success-bottom">
+      <el-button @click="goLogin">{{ L["register"]["立即登录"] }}</el-button>
+    </div>
   </div>
 </template>
 
-
 <script setup>
 import { getCurLanguage } from "@/composables/common.js";
 import { useRouter } from "vue-router";
@@ -30,17 +25,29 @@ import { useRouter } from "vue-router";
 const L = getCurLanguage();
 const router = useRouter();
 
+const countDownM = ref(6);
+const timeOutId = ref(""); //定时器的返回值
+
 const goLogin = () => {
   router.replace({
     path: "/login",
   });
 };
 
-setTimeout(() => {
-  goLogin()
-}, 5000)
-</script>
+//倒计时
+const countDown = () => {
+  countDownM.value--;
+  if (countDownM.value == 0) {
+    clearTimeout(timeOutId.value);
+    goLogin()
+  } else {
+    timeOutId.value = setTimeout(countDown, 1000);
+  }
+};
+
+countDown();
 
+</script>
 
 <style lang="scss" scoped>
 .register-success {
@@ -48,61 +55,53 @@ setTimeout(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 386px;
+  height: 100%;
   padding: 0 20px;
 
   &-content {
-    width: 240px;
-    height: 150px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 431px;
+    height: 268px;
+    margin-bottom: 100px;
+  }
 
-    &__icon {
-      margin-right: 15px;
-      .icon-circle {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-        border-radius: 100%;
-        background-color: $colorMain;
-
-        img {
-          width: 20px;
-        }
-      }
-    }
-
-    &__tip {
-      display: flex;
-      flex-direction: column;
-
-      .tip-title {
-        font-size: 25px;
-      }
+  img {
+    width: 88px;
+    height: 88px;
+  }
 
-      .tip-content {
-        font-size: 12px;
-        color: #85899e;
-        margin-top: 10px;
-      }
+  &-title {
+    font-weight: bold;
+    font-size: 32px;
+    color: #282e30;
+    margin: 30px 0 20px 0;
+  }
 
-      .line {
-        width: 200px;
-        height: 0px;
-        border: 0.5px solid #dcdfe6;
-        margin: 30px 0;
-      }
+  &-tip {
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(40, 46, 48, 0.6);
+    text-align: center;
 
-      .login-button {
-        // margin-top: 10px;
+    &__seconds {
+      color: $colorMain
+    }
+  }
 
-        .el-button {
-          background-color: $colorMain;
-          color: #fff;
-        }
-      }
+  &-bottom {
+    width: 100%;
+    :deep(.el-button) {
+      width: 100%;
+      height: 46px;
+      background-color: $colorMain;
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      // margin-top: 100px;
     }
   }
 }
-</style>
+</style>

xinkeaboard-web/components/retrieve/RetrievePassword.vue

@@ -19,8 +19,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="emailErrorMsg">
+    <div class="error">
       <span
+        v-if="emailErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -49,8 +50,9 @@
         </el-button>
       </span>
     </div>
-    <div class="error" v-if="emailCodeErrorMsg">
+    <div class="error">
       <span
+        v-if="emailCodeErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -83,8 +85,9 @@
           }"
         ></span>
       </div>
-      <div class="error" v-if="checkPwdErrorMsg">
+      <div class="error">
         <span
+          v-if="checkPwdErrorMsg"
           style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
@@ -117,8 +120,9 @@
         ></span>
       </div>
     </div>
-    <div class="error" v-if="checkErrorMsg">
+    <div class="error">
       <span
+        v-if="checkErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -351,7 +355,11 @@ watch(emailCode, (val) => {
 
 <style lang="scss" scoped>
 .center {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
 
   .item {
     position: relative;
@@ -379,7 +387,7 @@ watch(emailCode, (val) => {
         border: 1px solid #e8e8e8;
         height: 40px;
         padding: 0 44px 0 60px;
-        width: 326px;
+        width: 431px;
       }
     }
 
@@ -387,7 +395,7 @@ watch(emailCode, (val) => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+        width: 431px;
     }
 
     &.code {
@@ -409,7 +417,7 @@ watch(emailCode, (val) => {
     :before {
       position: absolute;
       top: 9px;
-      // left: 14px;
+      left: 14px;
     }
   }
 
@@ -423,7 +431,7 @@ watch(emailCode, (val) => {
 
   .verify-code {
     display: flex;
-    width: 326px;
+    width: 431px;
     height: 40px;
     margin-top: 10px;
 
@@ -442,12 +450,13 @@ watch(emailCode, (val) => {
     }
 
     input {
+      flex: 1;
+      width: 100%;
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
       height: 40px;
       padding: 0 0 0 10px;
-      width: 190px;
     }
 
     &-accept {
@@ -466,15 +475,15 @@ watch(emailCode, (val) => {
         font-size: 12px;
 
         &:hover {
-          border-color: #e8e8e8;
-          color: $colorMain;
+          // border-color: #e8e8e8;
+          // color: $colorMain;
         }
       }
     }
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 50px;
     background: $colorMain;
     color: #fff;
     text-align: center;

xinkeaboard-web/components/retrieve/RetrievePwdByPhone.vue

@@ -19,8 +19,9 @@
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
-    <div class="error" v-if="mobileErrorMsg">
+    <div class="error">
       <span
+        v-if="mobileErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -49,8 +50,9 @@
         </el-button>
       </span>
     </div>
-    <div class="error" v-if="mobileCodeErrorMsg">
+    <div class="error">
       <span
+        v-if="mobileCodeErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -83,8 +85,9 @@
           }"
         ></span>
       </div>
-      <div class="error" v-if="checkPwdErrorMsg">
+      <div class="error">
         <span
+          v-if="checkPwdErrorMsg"
           style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
@@ -117,8 +120,9 @@
         ></span>
       </div>
     </div>
-    <div class="error" v-if="checkErrorMsg">
+    <div class="error">
       <span
+        v-if="checkErrorMsg"
         style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
@@ -351,7 +355,11 @@ watch(mobileCode, (val) => {
 
 <style lang="scss" scoped>
 .center {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
 
   .item {
     position: relative;
@@ -379,7 +387,7 @@ watch(mobileCode, (val) => {
         border: 1px solid #e8e8e8;
         height: 40px;
         padding: 0 44px 0 60px;
-        width: 326px;
+        width: 431px;
       }
     }
 
@@ -387,7 +395,7 @@ watch(mobileCode, (val) => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+      width: 431px;
     }
 
     &.code {
@@ -409,7 +417,7 @@ watch(mobileCode, (val) => {
     :before {
       position: absolute;
       top: 9px;
-      // left: 14px;
+      left: 14px;
     }
   }
 
@@ -423,7 +431,7 @@ watch(mobileCode, (val) => {
 
   .verify-code {
     display: flex;
-    width: 326px;
+    width: 431px;
     height: 40px;
     margin-top: 10px;
 
@@ -442,6 +450,8 @@ watch(mobileCode, (val) => {
     }
 
     input {
+      flex: 1;
+      width: 100%;
       border: 1px solid #e8e8e8;
       border-left: none;
       border-right: none;
@@ -466,15 +476,15 @@ watch(mobileCode, (val) => {
         font-size: 12px;
 
         &:hover {
-          border-color: #e8e8e8;
-          color: $colorMain;
+          // border-color: #e8e8e8;
+          // color: $colorMain;
         }
       }
     }
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 50px;
     background: $colorMain;
     color: #fff;
     text-align: center;

xinkeaboard-web/components/retrieve/RetrieveSuccess.vue

@@ -1,28 +1,23 @@
 <template>
-  <div class="retrieve-success">
-    <div class="retrieve-success-content">
-      <div class="retrieve-success-content__icon">
-        <div class="icon-circle">
-          <img src="/register/success.png" />
-        </div>
+  <div class="register-success">
+    <div class="register-success-content">
+      <img src="/register/success.png" />
+      <div class="register-success-title">
+        {{ L["register"]["重置成功"] }}
       </div>
-      <div class="retrieve-success-content__tip">
-        <div class="tip-title">{{ L["register"]["重置成功"] }}</div>
-        <div class="tip-content">
-          {{ L["register"]["密码重置成功, 5s内跳转至登录页"] }}
-        </div>
-        <div class="line"></div>
-        <div class="login-button">
-          <el-button size="large" @click="goLogin">{{
-            L["register"]["立即登录"]
-          }}</el-button>
-        </div>
+      <div class="register-success-tip">
+        <span>{{ L["register"]["重置成功"] }}</span>
+        <span>{{ L["register"]["s内跳转到登录页"] }}</span>
+        <span class="register-success-tip__seconds">{{ countDownM }}</span>
+        <span>{{ L["register"]["秒"] }}</span>
       </div>
     </div>
+    <div class="register-success-bottom">
+      <el-button @click="goLogin">{{ L["register"]["立即登录"] }}</el-button>
+    </div>
   </div>
 </template>
 
-
 <script setup>
 import { getCurLanguage } from "@/composables/common.js";
 import { useRouter } from "vue-router";
@@ -30,79 +25,84 @@ import { useRouter } from "vue-router";
 const L = getCurLanguage();
 const router = useRouter();
 
+const countDownM = ref(6);
+const timeOutId = ref(""); //定时器的返回值
+
 const goLogin = () => {
   router.replace({
     path: "/login",
   });
 };
 
-setTimeout(() => {
-  goLogin()
-}, 5000)
-</script>
+//倒计时
+const countDown = () => {
+  countDownM.value--;
+  if (countDownM.value == 0) {
+    clearTimeout(timeOutId.value);
+    goLogin()
+  } else {
+    timeOutId.value = setTimeout(countDown, 1000);
+  }
+};
+
+countDown();
 
+</script>
 
 <style lang="scss" scoped>
-.retrieve-success {
+.register-success {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 386px;
+  height: 100%;
   padding: 0 20px;
 
   &-content {
-    width: 240px;
-    height: 150px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 431px;
+    height: 268px;
+    margin-bottom: 100px;
+  }
 
-    &__icon {
-      margin-right: 15px;
-      .icon-circle {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-        border-radius: 100%;
-        background-color: $colorMain;
-
-        img {
-          width: 20px;
-        }
-      }
-    }
-
-    &__tip {
-      display: flex;
-      flex-direction: column;
-
-      .tip-title {
-        font-size: 25px;
-      }
+  img {
+    width: 88px;
+    height: 88px;
+  }
 
-      .tip-content {
-        font-size: 12px;
-        color: #85899e;
-        margin-top: 10px;
-      }
+  &-title {
+    font-weight: bold;
+    font-size: 32px;
+    color: #282e30;
+    margin: 30px 0 20px 0;
+  }
 
-      .line {
-        width: 200px;
-        height: 0px;
-        border: 0.5px solid #dcdfe6;
-        margin: 30px 0;
-      }
+  &-tip {
+    width: 80%;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(40, 46, 48, 0.6);
+    text-align: center;
 
-      .login-button {
-        // margin-top: 10px;
+    &__seconds {
+      color: $colorMain
+    }
+  }
 
-        .el-button {
-          background-color: $colorMain;
-          color: #fff;
-        }
-      }
+  &-bottom {
+    width: 100%;
+    :deep(.el-button) {
+      width: 100%;
+      height: 46px;
+      background-color: $colorMain;
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      // margin-top: 100px;
     }
   }
 }
-</style>
+</style>

xinkeaboard-web/pages/login.vue

@@ -43,11 +43,12 @@
               flex_row_between_center: wxEnable == 0,
               flex_row_end_center: wxEnable != 0,
             }"
+            style="padding: 0 30px;"
           >
             <a class="a_link" href="javascript:void(0)" @click="goToPage('/register')">{{
               L["立即注册"]
             }}</a>
-            <router-link class="a_link" tag="a" :to="`/member/login/forget`">{{
+            <router-link class="a_link" tag="a" :to="`/member/login/forget`" style="margin-right: 0px">{{
               L["忘记密码"]
             }}</router-link>
           </div>
@@ -178,7 +179,12 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "@/assets/style/register.scss";
 :deep(.center) {
-  padding: 30px 30px 40px;
+  flex: 1;
+  height: 100%;
+  position: relative;
+  padding: 0 28px;
+  margin-top: 60px;
+  // padding: 30px 30px 40px;
 
   .item {
     position: relative;
@@ -202,7 +208,7 @@ onMounted(() => {
         border: 1px solid #e8e8e8;
         height: 40px;
         padding: 0 44px 0 60px;
-        width: 326px;
+        width: 431px;
       }
     }
 
@@ -210,7 +216,7 @@ onMounted(() => {
       border: 1px solid #e8e8e8;
       height: 40px;
       padding: 0 44px 0 60px;
-      width: 326px;
+      width: 431px;
     }
 
     input::placeholder {
@@ -264,7 +270,7 @@ onMounted(() => {
   }
 
   .submit {
-    margin-top: 35px;
+    margin-top: 180px;
     background: $colorMain;
     font-weight: bold;
     font-size: 20px;

xinkeaboard-web/pages/register.vue

@@ -32,7 +32,7 @@
       />
       <div class="login">
         <div class="login_box">
-          <div class="top">
+          <div class="top" v-if="currentStep !== 'finish'">
             <div class="item1">{{ title }}</div>
           </div>
           <RegisterPhone v-if="currentStep === 'first' && appType === 'distributor'" @success="(val) => { currentStep = 'second'; mobile = val  }" />