验证码功能相关UI

game/src/views/FindPassword.vue

@@ -52,11 +52,11 @@
     </div>
     <div class="form-item form-item-verifi">
       <div class="title">
-        <img
+        <!-- <img
           src="@/assets/images/icon-lock.png"
           alt=""
           draggable="false"
-        >
+        > -->
         <span>验证码</span>
       </div>
       <div class="row">
@@ -69,11 +69,11 @@
           @blur="isVerifiCodeInputOver=true"
         >
         <button
-          v-if="isShowVerifiCode"
-          class="verifi-code"
+          class="get-verifi-code"
           @click="onClickVerifiCode"
         >
           <img
+            v-if="isShowVerifiCode"
             class=""
             src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
             alt=""
@@ -147,12 +147,12 @@ const isPhoneInputOver = ref(false)
 const isVerifiCodeInputOver = ref(false)
 
 const isShowVerifiCode = ref(true)
-function onClickVerifiCode() {
+const onClickVerifiCode = utils.throttle(() => {
   isShowVerifiCode.value = false
   nextTick(() => {
     isShowVerifiCode.value = true
   })
-}
+}, 333)
 
 function submit() {
   if (!isAccountValid.value) {
@@ -287,7 +287,8 @@ function submit() {
     >div.row{
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-end;
+      margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >input{
         width: 50%;
         height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -309,7 +310,10 @@ function submit() {
         border-bottom: 1px solid red;
       }
       >button.get-verifi-code{
-        width: 50%;
+        height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >img{
+          height: 100%;
+        }
       }
     }
   }

game/src/views/LoginView.vue

@@ -52,11 +52,11 @@
     </div>
     <div class="form-item form-item-verifi">
       <div class="title">
-        <img
+        <!-- <img
           src="@/assets/images/icon-lock.png"
           alt=""
           draggable="false"
-        >
+        > -->
         <span>验证码</span>
       </div>
       <div class="row">
@@ -69,11 +69,11 @@
           @blur="isVerifiCodeInputOver=true"
         >
         <button
-          v-if="isShowVerifiCode"
-          class="verifi-code"
+          class="get-verifi-code"
           @click="onClickVerifiCode"
         >
           <img
+            v-if="isShowVerifiCode"
             class=""
             src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
             alt=""
@@ -83,14 +83,7 @@
       </div>
     </div>
 
-    <button
-      class="forget"
-      @click="router.push({
-        name: 'FindPassword',
-      })"
-    >
-      忘记密码？
-    </button>
+
 
     <button
       class="submit"
@@ -98,14 +91,24 @@
     >
       登录
     </button>
-    <button
-      class="sign-up"
-      @click="$router.push({
-        name: 'SignUp',
-      })"
-    >
-      暂无账号，去注册
-    </button>
+    <div class="row-wrapper">
+      <button
+        class="sign-up"
+        @click="$router.push({
+          name: 'SignUp',
+        })"
+      >
+        暂无账号，去注册
+      </button>
+      <button
+        class="forget"
+        @click="router.push({
+          name: 'FindPassword',
+        })"
+      >
+        忘记密码？
+      </button>
+    </div>
     <button
       class="return"
       @click="$router.go(-1)"
@@ -160,12 +163,12 @@ const isPasswordInputOver = ref(false)
 const isVerifiCodeInputOver = ref(false)
 
 const isShowVerifiCode = ref(true)
-function onClickVerifiCode() {
+const onClickVerifiCode = utils.throttle(() => {
   isShowVerifiCode.value = false
   nextTick(() => {
     isShowVerifiCode.value = true
   })
-}
+}, 333)
 
 function submit() {
   if (!isAccountValid.value) {
@@ -295,7 +298,8 @@ function submit() {
     >div.row{
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-end;
+      margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >input{
         width: 50%;
         height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -317,20 +321,13 @@ function submit() {
         border-bottom: 1px solid red;
       }
       >button.get-verifi-code{
-        width: 50%;
+        height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >img{
+          height: 100%;
+        }
       }
     }
   }
-  >button.forget{
-    margin-top: calc(-14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    margin-left: auto;
-    margin-right: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: Source Han Sans SC, Source Han Sans SC;
-    font-weight: 400;
-    color: #B4B4B4;
-    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  }
   >button.submit{
     margin-top: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -343,27 +340,40 @@ function submit() {
     color: #FFFFFF;
     line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
-  >button.sign-up{
-    margin-top: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >.row-wrapper{
+    margin-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    background: rgba(197, 161, 108, 0.8);
-    border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: Source Han Sans SC, Source Han Sans SC;
-    font-weight: 400;
-    color: #FFFFFF;
-    line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    >button.sign-up{
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #D1B489;
+      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button.forget{
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #B4B4B4;
+      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
   }
   >button.return{
-    margin-top: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: Source Han Sans SC, Source Han Sans SC;
     font-weight: 400;
-    color: #A97C46;
+    color: #0D0D0D;
     line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     opacity: 0.5;
+    padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
 }
 </style>

game/src/views/SignUp.vue

@@ -90,11 +90,11 @@
     </div>
     <div class="form-item form-item-verifi">
       <div class="title">
-        <img
+        <!-- <img
           src="@/assets/images/icon-lock.png"
           alt=""
           draggable="false"
-        >
+        > -->
         <span>验证码</span>
       </div>
       <div class="row">
@@ -107,11 +107,11 @@
           @blur="isVerifiCodeInputOver=true"
         >
         <button
-          v-if="isShowVerifiCode"
-          class="verifi-code"
+          class="get-verifi-code"
           @click="onClickVerifiCode"
         >
           <img
+            v-if="isShowVerifiCode"
             class=""
             src="https://sit-cnzhengquan.4dage.com/api/show/getRandCode"
             alt=""
@@ -197,12 +197,12 @@ const isPasswordRepeatInputOver = ref(false)
 const isVerifiCodeInputOver = ref(false)
 
 const isShowVerifiCode = ref(true)
-function onClickVerifiCode() {
+const onClickVerifiCode = utils.throttle(() => {
   isShowVerifiCode.value = false
   nextTick(() => {
     isShowVerifiCode.value = true
   })
-}
+}, 333)
 
 function submit() {
   if (!isAccountValid.value) {
@@ -360,7 +360,8 @@ function submit() {
     >div.row{
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-end;
+      margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >input{
         width: 50%;
         height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -382,7 +383,10 @@ function submit() {
         border-bottom: 1px solid red;
       }
       >button.get-verifi-code{
-        width: 50%;
+        height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >img{
+          height: 100%;
+        }
       }
     }
   }