超管登录验证码优化

src/modules/portal/views/Login.vue

@@ -14,9 +14,14 @@
       <div class="right_login">
         <h1 style="font-size: 20px; color: #666">欢迎登录</h1>
         <div class="username">
-          <v-icon name="user" scale="2" style="padding: 5px 0px; z-index: 3;" />
+          <v-icon
+            name="user"
+            scale="1.4"
+            style="padding: 5px 0px; z-index: 3;"
+          />
           <input
             @keyup.enter="login"
+            @change="nameChange"
             type="text"
             id="accountValue"
             v-model="loginInfo.accountValue"
@@ -24,7 +29,11 @@
           />
         </div>
         <div class="password">
-          <v-icon name="lock" scale="2" style="padding: 5px 0px; z-index: 3;" />
+          <v-icon
+            name="lock"
+            scale="1.4"
+            style="padding: 5px 0px; z-index: 3;"
+          />
           <input
             @keyup.enter="login"
             type="password"
@@ -33,30 +42,28 @@
             placeholder="请输入密码"
           />
         </div>
+        <div class="smscode">
+          <v-icon
+            v-if="dialogVisible"
+            name="lock"
+            scale="1.4"
+            style="padding: 5px 0px; z-index: 3;"
+          />
+          <input
+            v-if="dialogVisible"
+            @keyup.enter="login"
+            type="text"
+            id="smsCode"
+            v-model="loginInfo.smsCode"
+            placeholder="请输入短信验证码"
+          />
+        </div>
         <button class="login-btn" @click="login">登 录</button>
       </div>
       <footer class="login-footer">
         Copyright &copy; 2019 <a href="javascript:void(0)">武汉启明软件</a>.
       </footer>
     </main>
-
-    <el-dialog
-      title="请输入手机短信验证码"
-      :visible.sync="dialogVisible"
-      width="30%"
-    >
-      <input
-        @keyup.enter="loginWithSms"
-        type="number"
-        v-model="loginInfo.smsCode"
-        style="width: 80%"
-        placeholder="请向王伟咨询手机验证码"
-      />
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="loginWithSms">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
@@ -84,7 +91,9 @@ export default {
   },
   methods: {
     ...mapActions([USER_SIGNIN]),
-
+    nameChange() {
+      this.dialogVisible = false;
+    },
     checkAccountValue() {
       this.errorInfo = "";
       if (!this.loginInfo.accountValue) {
@@ -245,23 +254,28 @@ export default {
 }
 
 .right_login .username {
-  height: 46px;
   display: flex;
   align-items: center;
   justify-items: center;
 }
 .right_login .password {
-  height: 46px;
   display: flex;
   align-items: center;
   justify-items: center;
-  margin-top: 30px;
+  margin-top: 10px;
+}
+.right_login .smscode {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin-top: 10px;
 }
 
 .right_login input {
   width: 100%;
-  padding: 10px 30px;
-  margin-left: -28px;
+  padding: 5px 30px;
+  margin-left: -21px;
   font-size: 16px;
   border-radius: 10px;
 }
@@ -273,7 +287,7 @@ export default {
 }
 
 .login-btn {
-  margin-top: 30px;
+  margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
   background-color: #4d7cc4;