登录页修改

cph4 · Jun 8, 2019 · 1091ac0 · 1091ac0
1 parent b6a77fd
commit 1091ac0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
@@ -4,23 +4,27 @@
     <v-head goBack="true" title="登录">
     </v-head>
     <form action="" class="login-form">
-      <div class="username">
-        <label for="username">账号</label>
+
+      <label class="form-label" for="username">
+        <span class="label">账号</span>
         <input id="username" type="text" placeholder="请输入用户名" v-model="username">
-      </div>
-      <div class="password">
-        <label for="password">密码</label>
+      </label>
+
+      <label class="form-label" for="password">
+        <span class="label">密码</span>
         <input
           id="password"
           :type="passwordVisible?'text':'password'"
           placeholder="请输入密码"
           v-model="password"
-          @keyup.enter="login()">
-        <span @click="changeVisible()">
+          @keyup.enter="login">
+
+        <span @click="changeVisible">
           <i class="iconfont icon" v-if="!passwordVisible">&#xe60a;</i>
           <i class="iconfont icon" v-else>&#xe6d0;</i>
         </span>
-      </div>
+      </label>
+
       <div class="button" @click.prevent="login();">
         <span>登录</span>
       </div>
@@ -86,32 +90,38 @@
         @include px2rem(line-height, 85);
         font-weight: bold;
       }
-      .username, .password {
-        margin: 0.4rem 0.6rem;
-        border-bottom: 1px solid $bottomLine;
-        label, ::-webkit-input-placeholder {
+
+      .form-label {
+        display: flex;
+        line-height: 1rem;
+        margin: 0 0.4rem;
+
+        .label {
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+        }
+
+        .icon {
           font-size: 0.4rem;
         }
+
         input {
+          flex: 1;
           font-size: 0.4rem;
-          width: 70%;
-          margin-left: 0.8rem;
         }
+
+        ::-webkit-input-placeholder {
+          font-size: 0.4rem;
+        }
+
         input:-webkit-autofill {
           -webkit-box-shadow: 0 0 0 1000px white inset !important;
         }
         input:focus {
           outline: none;
         }
       }
-      .password {
-        span {
-          float: right;
-          .icon {
-            font-size: 0.5rem;
-          }
-        }
-      }
+
       .button {
         text-align: center;
         margin-top: 0.1rem;

diff --git a/src/views/store/menu/bottom.vue b/src/views/store/menu/bottom.vue
@@ -257,7 +257,7 @@
         font-size: 0.4rem;
         background: #2c2c2c;
         text-align: center;
-        &.goBuy {
+        &.go-buy {
           color: #000;
           background: $mtYellow;
         }