C端登陆注册找回密码业务：自测UI bug修复

web/src/views/layout/index.vue

@@ -12,8 +12,8 @@
           <input type="password" @keyup.enter="login" v-model="password" placeholder="密码" />
         </div>
         <p class="sub">
-          <span @click="$router.push({ path: '/register' })">注册账号</span>
-          <span @click="$router.push({ path: '/forget' })">忘记密码</span>
+          <span class="register-account" @click="onClickRegisterAccount">注册账号</span>
+          <span class="forget-passcode" @click="onClickForgetPasscode">忘记密码</span>
         </p>
         <div class="button primarybtn" @click="login">登录</div>
       </div>
@@ -49,6 +49,20 @@ export default {
     },
   },
   methods: {
+    onClickRegisterAccount() {
+      if (this.$route.name === 'register') {
+        this.closeLogin()
+      } else {
+        this.$router.push({ name: 'register' })
+      }
+    },
+    onClickForgetPasscode() {
+      if (this.$route.name === 'forget') {
+        this.closeLogin()
+      } else {
+        this.$router.push({ name: 'forget' })
+      }
+    },
     handleKD(e){
       if(this.$route.name!='scene'){
         e.stopPropagation()
@@ -110,36 +124,45 @@ export default {
   top: 0;
   width: 310px;
   background-color: rgba(255, 255, 255, 0.9);
-  padding: 30px 20px;
+  padding: 28px 15px 25px;
   .title {
-    font-size: 20px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: -9px;
   }
   .linput {
-    height: 42px;
+    height: 50px;
+    border-radius: 5px;
+    margin-top: 30px;
+    padding-left: 11px;
     background-color: #fff;
-    border-radius: 4px;
-    margin-top: 40px;
-    width: 100%;
-    padding-left: 20px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid #999999;
     > input {
       border: none;
       background: none;
-      line-height: 42px;
-      height: 42px;
+      height: 100%;
       width: 100%;
     }
   }
   .sub {
     text-align: right;
-    font-size: 14px;
-    margin-top: 10px;
+    margin-top: 9px;
     > span {
-      margin-left: 30px;
+      font-size: 14px;
+      color: #999999;
       cursor: pointer;
     }
+    .register-account {
+      margin-right: 18px;
+    }
+    .forget-passcode {
+      margin-right: 6px;
+    }
   }
   .button {
-    margin-top: 30px;
+    margin-top: 39px;
     width: 100%;
   }
 }

web/src/views/user/forget.vue

@@ -19,9 +19,9 @@
                   type="text"
                 />
               </div>
-              <span class="requiretxt primaryColor">
-                <!-- {{ sub.showValidate && sub.required ? sub.validate : "" }} -->
-              </span>
+              <!-- <span class="requiretxt primaryColor">
+                {{ sub.showValidate && sub.required ? sub.validate : "" }}
+              </span> -->
             </li>
           </ul>
         </div>
@@ -236,7 +236,6 @@ export default {
     .form {
       margin-top: 30px;
       ul {
-        padding: 0 100px;
         border-bottom: 1px solid #ebebeb;
         margin-bottom: 20px;
         &:last-of-type {
@@ -244,21 +243,20 @@ export default {
         }
         > li {
           display: flex;
-          justify-content: space-between;
+          justify-content: center;
           align-items: center;
-          margin-bottom: 20px;
-          .input {
-            border: #ebebeb 1px solid;
-            width: 320px;
-          }
+          margin-bottom: 25px;
           > span {
+            width: 140px;
+            flex: 0 0 auto;
+            color: #333;
             display: inline-block;
-            flex: 1;
-            text-align: left;
-            margin: 0 20px;
-            &:first-of-type {
-              text-align: right;
-            }
+            margin-right: 12px;
+            text-align: right;
+          }
+          .input {
+            border: #ebebeb 1px solid;
+            width: 310px;
           }
           .require {
             &::before {

web/src/views/user/register.vue

@@ -8,7 +8,7 @@
     <div class="register">
       <p class="title primaryColor">欢迎申请福州基地数字史馆账号</p>
       <p class="sub">
-        福州基地数字史馆管理系统实行实名制注册，请如实填写已下信息，我们将对用户资料实行实名制验证，信息不实的将被锁定。
+        福州基地数字史馆管理系统实行实名制注册，请如实填写以下信息，我们将对用户资料实行实名制验证，信息不实的将被锁定。
       </p>
       <div class="form">
         <ul
@@ -17,7 +17,7 @@
           :key="index"
         >
           <li v-for="(sub, i) in item.arr" :key="i">
-            <span :class="{ require: sub.required }">{{ sub.label }}:</span>
+            <span class="form-item-name" :class="{ require: sub.required }">{{ sub.label }}:</span>
             <div class="normalradio" v-if="sub.type === 'radio'">
               <input id="man" type="radio" value="0" v-model="sub.val" />
               <label for="man">男</label>
@@ -224,8 +224,13 @@ export default {
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
+          .form-item-name {
+            width: 100px;
+            flex: 0 0 auto;
+          }
           .input {
             border: #ebebeb 1px solid;
+            width: 310px;
           }
           .normalradio {
             min-width: 207px;