写了一点样式

src/views/Login.vue

@@ -63,7 +63,7 @@
 					>
 				</el-form-item>
 			</el-form> -->
-			<div class="login-box" id="login-container">
+			<div class="login-box" id="login-container" v-if="activeModel!=='forgetPassModel'">
 				<span class="login-title">ETA — 让投研领先市场半步</span>
 				<el-tabs v-model="activeModel" @tab-click="handleClick">
 					<el-tab-pane label="账号登录" name="ordinaryModel">
@@ -71,6 +71,7 @@
 							:loginCheck="loginCheck"
 							:accountCheck="accountCheck"
 							@clearnHint="clearnHint"
+							@changeModel="activeModel = 'forgetPassModel'"
 						/>
 					</el-tab-pane>
 					<el-tab-pane label="手机号登录" name="mobileModel">
@@ -88,6 +89,10 @@
 					class="submit_btn"
 					>登录</el-button>
 			</div>
+			<div class="login-box" v-else>
+				<ForgetPassModel 
+					@changeModel="activeModel = 'ordinaryModel'"/>
+			</div>
 		</div>
 	</div>
 </template>
@@ -97,10 +102,11 @@ import { userLogin, departInterence } from "@/api/api.js";
 import http from "@/api/http.js";
 import md5 from "@/utils/md5.js";
 import EmailModel from "./login_manage/EmailModel.vue";
+import ForgetPassModel from "./login_manage/ForgetPassModel.vue";
 import MobileModel from "./login_manage/MobileModel.vue";
 import OrdinaryModel from "./login_manage/OrdinaryModel.vue";
 export default {
-    components: { OrdinaryModel, MobileModel, EmailModel },
+    components: { OrdinaryModel, MobileModel, EmailModel, ForgetPassModel },
     data() {
         return {
             b: new http.Base64(),
@@ -129,12 +135,13 @@ export default {
             visible: true,
             
             activeModel: 'ordinaryModel',
-            /* form check */
+            /* form check 错误提示标识*/
             loginCheck:false, //账号或密码错误
             accountCheck:false,//账号异常：多次输错密码、长时间未登录
             accountForbidden:false,//账号被禁用
             mobileCheck:false,//手机号未绑定
             emailCheck:false,//邮箱未绑定
+
         };
     },
     created() {
@@ -316,11 +323,11 @@ export default {
 			margin-bottom: 60px;
 		}
 
-		#login-container {
+		#login-container ,.login-box{
 			box-sizing: border-box;
 			border-radius: 10px;
 			position: absolute;
-			top: 31%;
+			top: 27%;
 			right: 12%;
 			z-index: 100;
 			input::-webkit-input-placeholder {
@@ -384,7 +391,7 @@ export default {
 			.login-bg{ 
 				display: block;
 			}
-			#login-container {
+			#login-container ,.login-box{
 				width: 31%;
 			}
 		}
@@ -392,7 +399,7 @@ export default {
 			.login-bg{ 
 				display: none; 
 			}
-			#login-container {
+			#login-container ,.login-box{
 				width: 70%;
 			}
 		}

src/views/login_manage/ForgetPassModel.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="forget-pass-model">
+        <div class="header-nav" @click="changeModel">
+            <span><i class="el-icon-back"></i></span>
+            <span>返回登录</span>
+        </div>
+        <div class="step-container model-wrap" v-show="currentStep===0">
+            <el-form 
+                ref="modelForm" 
+                label-position="right" 
+                label-width="0px"
+                :model="form"
+                :rules="rules">
+                <el-form-item prop="account">
+                    <el-input
+                        type="text"
+                        v-model="form.account"
+                        auto-complete="off"
+                        placeholder="请输入账号">
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="picCode">
+                    <el-input
+                        class="input-with-slot"
+                        type="text"
+                        v-model="form.picCode"
+                        auto-complete="off"
+                        placeholder="请输入图形验证码"
+                    >
+                        <div class="pic-box" slot="append">
+                            <img :src="formPic.src" alt="图形验证码"/>
+                        </div>
+                    </el-input>
+                </el-form-item>
+            </el-form>
+            <el-button class="submit_btn" @click="getUserInfo">下一步</el-button>
+        </div>
+        <div class="step-container" v-show="currentStep>0">
+            <div class="container-header">
+                <p>您正在找回账号qychen@it的密码</p>
+                
+                <el-steps :active="currentStep-1" finish-status="success">
+                    <el-step title="选择验证方式"></el-step>
+                    <el-step title="进行安全验证"></el-step>
+                    <el-step title="设置密码"></el-step>
+                </el-steps>
+            </div>
+            <div class="container-inner model-wrap" v-show="currentStep===1">
+                <VerificationBox
+                    verifies-type="mobile"
+                    :info-text="userMobile||'暂未绑定'"
+                    :hideBtn="!userMobile"
+                    @goNext="getCode"
+                />
+                <VerificationBox
+                    verifies-type="email"
+                    :info-text="userEmail||'暂未绑定'"
+                    :hideBtn="!userEmail"
+                    @goNext="getCode"
+                />
+            </div>
+            <div class="container-inner" v-show="currentStep===2">
+                输入验证码
+                <el-button class="submit_btn" @click="goSteps">下一步</el-button>
+            </div>
+            <div class="container-inner" v-show="currentStep===3">
+                输入新密码
+                <el-button class="submit_btn">去登录</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import VerificationBox from './components/VerificationBox.vue';
+export default {
+    props:{
+        autoAccount:{//自动填写的账号,如果有,作为form.accout的初始值
+            type:'String',
+            default:''
+        }
+    },
+    components: { VerificationBox },
+    data() {
+        return {
+            currentStep:0,
+            form:{//步骤0的表单
+                account:'',
+                picCode:''
+            },
+            formPic:{//步骤0的图片
+                src:'',
+                id:''
+            },
+            userMobile:'',
+            userEmail:'',
+            authCode:''
+        };
+    },
+    methods: {
+        getUserInfo(){
+            //检查form是否填写完整
+            //请求接口获取账号数据，赋值userMobile,userEmail
+            this.userMobile = '123456'
+            this.userEmail = '123456@qq.com'
+            this.goSteps()
+        },
+        getCode(way){
+            //发送请求后60秒倒计时
+            
+        },
+        goSteps(){
+            this.currentStep++
+        },
+        changeModel(){
+            this.$emit('changeModel')
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+@import "./css/formStyle.scss";
+</style>
+<style scoped lang="scss">
+.forget-pass-model{
+    .header-nav{
+        font-size: 38px;
+        margin-bottom: 60px;
+    }
+    .step-container{
+        .container-header{
+            p{
+               font-size: 18px;
+               padding-bottom: 20px;
+               border-bottom: 1px solid #DCDFE6; 
+            }
+            .el-steps{
+                margin-top: 60px;
+            }
+        }
+    }
+}
+</style>

src/views/login_manage/OrdinaryModel.vue

@@ -38,7 +38,7 @@
                         </span>
                     </el-tooltip>
                 </el-checkbox>
-                <el-button type="text" style="font-size: 16px;" @click="goPage">忘记密码</el-button>
+                <el-button type="text" style="font-size: 16px;" @click="changeModel">忘记密码</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -100,8 +100,8 @@ export default {
         }
     },
     methods: {
-        goPage(){
-            this.$router.push('/fogetpassword')
+        changeModel(){
+            this.$emit('changeModel')
         }
     },
 };

src/views/login_manage/components/VerificationBox.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="verification-box-wrap">
         <div class="icon">
-            <i :class="verifiesType==='mobile'?'el-icon-phone-outline':'el-icon-picture'"></i>
+            <img :src="verifiesType==='mobile'?mobile_src:email_src" />
         </div>
         <div class="text">{{infoText}}</div>
-        <el-button @click="goNext" v-if="!hideBtn">{{btnText}}</el-button>
+        <el-button  type="primary" @click="goNext" v-if="!hideBtn" :disabled="countDown">{{countDown?`重发（${countDown}秒）`:btnText}}</el-button>
     </div>
 </template>
 
@@ -23,6 +23,10 @@ export default {
             type:Boolean,
             default:false
         },
+        countDown:{
+            type:Number,
+            default:0
+        },
         btnText:{
             type:String,
             default:'开始验证'
@@ -30,7 +34,8 @@ export default {
     },
     data() {
         return {
-
+            mobile_src:require('@/assets/img/home/phone_icon.png'),
+            email_src:require('@/assets/img/home/email_icon.png'),
         };
     },
     methods: {
@@ -42,5 +47,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.verification-box-wrap{
+    display: flex;
+    align-items: center;
+    margin-bottom: 60px;
+    cursor: pointer;
+    .icon{
+        width:40px;
+        height:40px;
+        box-sizing: border-box;
+        padding:8px;
+        border-radius: 50%;
+        box-shadow: 0px 2px 12px 0px #0000001A;
+        text-align: center;
+        img{
+            width: 24px;
+            height: 24px;
+        }
+    }
+    .text{
+        margin-left: 20px;
+        font-size: 18px;
+    }
+    .el-button{
+        /* background-color: #3654C1;
+        color: #fff; */
+        margin-left: auto;
+    }
+}
 
 </style>

src/views/login_manage/css/formStyle.scss

@@ -86,4 +86,12 @@
             cursor: pointer;
         }
     }
+    .submit_btn {
+        width: 100%;
+        height: 60px;
+        background: #3654C1;
+        font-size: 20px;
+        border-radius: 5px;
+        color: #fff;
+    }
 }