fixed

src/views/login.vue

@@ -4,7 +4,7 @@
     <div class="right">
       <div class="content">
         <p class="title"><img src="../assets/image/logo.svg" alt="">云鹊医工作站</p>
-        <!--<div class="input-info">
+        <div class="input-info" v-if="loginFlag">
           <div class="title-div">
             <p class="title-input">账号登录</p>
             <img src="../assets/image/underline.svg" alt="">
@@ -23,13 +23,13 @@
           </el-form>
           <div class="button-div">
             <div class="forget-password">
-              <p>忘记密码？</p>
+              <p @click="goToResetPassword">忘记密码？</p>
             </div>
             <button>登 录</button>
           </div>
-        </div>-->
+        </div>
 
-        <div class="input-info">
+        <div class="input-info" v-else>
           <div class="title-div">
             <p class="title-input">重设密码</p>
             <img src="../assets/image/underline.svg" alt="">
@@ -43,7 +43,7 @@
             <el-form-item label="">
               <el-input v-model="resetPassword.authCode" placeholder="短信验证码">
                 <i slot="prefix" class="el-input__icon my-icon auth-code-icon"></i>
-                <i slot="suffix" class="el-input__icon">获取短信验证码</i>
+                <i slot="suffix" class="el-input__icon get-auth-code">获取验证码</i>
               </el-input>
             </el-form-item>
             <el-form-item label="">
@@ -56,15 +56,16 @@
             <!--<div class="forget-password">
               <p>忘记密码？</p>
             </div>-->
-            <div class="login-btn">
-              <button>登 录</button>
-              <p class="shadow"></p>
-            </div>
+            <button>登 录</button>
             <div class="login-now">
-              <p>立即登录</p>
+              <p @click="goToLogin">立即登录</p>
             </div>
           </div>
         </div>
+
+        <div class="vrcode">
+          <p></p>
+        </div>
       </div>
     </div>
   </div>
@@ -75,10 +76,19 @@
     name: "login",
     data() {
       return {
+        loginFlag: true,
         loginData: {},
         resetPassword: {}
       }
     },
+    methods: {
+      goToLogin() {
+        this.loginFlag = true
+      },
+      goToResetPassword() {
+        this.loginFlag = false
+      }
+    }
   }
 </script>
 
@@ -142,6 +152,10 @@
                     border: none;
                     border-bottom: 1px solid #D9D9D9;
                   }
+                  .get-auth-code {
+                    color: #666666;
+                    cursor: pointer;
+                  }
                 }
 
               }
@@ -149,23 +163,15 @@
 
           }
           .button-div {
-            .login-btn {
-              button {
-                width: 100%;
-                height: 70px;
-                background: #449284;
-                color: #ffffff;
-                font-size: 24px;
-                margin-top: 20px;
-                cursor: pointer;
-                box-shadow: 0px 10px 12px 0px rgba(59,132,119,0.2);
-              }
-              /*.shadow {
-                width: 100%;
-                height: 20px;
-                background: url("../assets/image/shadow.svg") no-repeat;
-                background-size: cover;
-              }*/
+            button {
+              width: 100%;
+              height: 70px;
+              background: #449284;
+              color: #ffffff;
+              font-size: 24px;
+              margin-top: 20px;
+              cursor: pointer;
+              box-shadow: 0px 10px 8px 0px rgba(59,132,119,0.2);
             }
             .forget-password {
               margin-top: 52px;
@@ -178,6 +184,16 @@
                 color: #449284;
               }
             }
+            .login-now {
+              margin-top: 24px;
+              p {
+                width: 80px;
+                margin: 0 auto;
+                font-size:20px;
+                color: #449284;
+                cursor: pointer;
+              }
+            }
           }
         }