增加

src/App.vue

@@ -11,14 +11,14 @@ export default {
 </script>
 
 <style>
-@import "//at.alicdn.com/t/font_1769104_02vy4h75rlau.css";
+@import "//at.alicdn.com/t/font_1769104_qg9btfnng5.css";
 html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
 }
-p{
+*{
   margin:0;
   padding:0;
 }

src/components/Forgetpassword.vue

+<style>
+    .Forgetpassword .resHeader{
+        width:100%;
+        height:190px;
+        background-image: url("../assets/img/fpassword.png");
+    }
+    .Forgetpassword .resHeader .title{
+        height: 50px;
+        font-size: 26px;
+        width: 274px;
+        margin: 0 auto 5px;
+        display: flex;
+        flex-wrap: nowrap;
+    }
+    .Forgetpassword .resHeader .title div {
+        padding: 0 10px;
+        width: 125px;
+    }
+    .Forgetpassword .resHeader .title{
+        font-size: 26px;
+        color: #333;
+        padding-top: 75px;
+        text-align: center;
+    }
+    .Forgetpassword .regisLogo {
+        float: right;
+        height: 50px;
+    }
+    .Forgetpassword .regisLine {
+        height: 25px; 
+        width: 1px!important; 
+        background: rgb(68, 68, 68); 
+        padding: 0px!important;
+        margin:21px 0 0 10px;
+    }
+    .Forgetpassword .regisWelcome{
+        padding:0!important;
+        margin:14px 0 0 10px;
+    }
+    .Forgetpassword .login {
+        color: #409EFF;
+        cursor: pointer;
+    }
+    .Forgetpassword .regisLogin{
+        color: rgb(125, 125, 125);
+        text-align:center;
+        margin-top:15px;
+    }
+    .Forgetpassword .regisMain{
+        display: block;
+        -webkit-box-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        -ms-flex-preferred-size: auto;
+        flex-basis: auto;
+        overflow: auto;
+        box-sizing: border-box;
+        padding: 20px;
+        flex:1;
+    }
+    .Forgetpassword .box-card{
+        width:700px;
+        margin:40px auto 0;
+    }
+    .Forgetpassword .box-card .el-input .el-input__inner {
+        height: 45px;
+        border-radius: 22.5px;
+    }
+    .Forgetpassword .box-card .el-form-item__content {
+        width: 420px;
+    }
+    .Forgetpassword .NextStep{
+        width:300px;
+        text-align: left;
+        margin:40px auto 20px;
+    }
+    .Forgetpassword .box-card .code .el-input__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .Forgetpassword .box-card .code .el-input-group__append {
+        background-color: #007BFF;
+        color: #fff;
+        border-top-right-radius: 22.5px;
+        border-bottom-right-radius: 22.5px;
+        border: 1px solid #007BFF;
+    }
+    .Forgetpassword .el-footer {
+        color: #ACACAC;
+        text-align: center;
+        line-height: 60px;
+        background-color: #F6F6F6;
+        font-size:14px;
+    }
+    .Forgetpassword .forgetBtn{
+        font-size:16px;
+        width:120px;
+        height:45px;
+        border-radius:23px;
+    }
+</style>
+<template>
+    <div class="Forgetpassword">
+        <div class="resHeader">
+            <div class="title">
+                <div>
+                    <img src="../assets/img/logo.png" alt="" class="regisLogo"/>
+                </div>
+                <div class="regisLine"></div>
+                <div class="regisWelcome">重置密码</div>
+            </div>
+            <div class="regisLogin" style="">
+                已有账号？<span class="login" @click="goLogin">登录</span>
+            </div>
+        </div>
+        <div class="regisMain" :style="{minHeight: Height+'px'}">
+            <div class="box-card">
+                <el-form :model="msg" :rules="rules" ref="msg" label-width="130px" style="padding:0 50px;">
+                    <el-form-item label="手机号" prop="phone">
+                        <el-input type="text" v-model="msg.phone" maxlength="25" placeholder="请输入手机号"/>
+                    </el-form-item>
+                    <el-form-item label="短信验证码" prop="ValidataCode" class="code">
+                        <el-input v-model="msg.ValidataCode" maxlength="10" type="text">
+                            <template slot="append">获取短信验证码</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="设置密码" prop="Password">
+                        <el-input type="password" v-model="msg.Password" maxlength="25" placeholder="请输入密码"/>
+                    </el-form-item>
+                    <el-form-item label="确认密码" prop="Password2">
+                        <el-input type="password" v-model="msg.Password2" maxlength="25" placeholder="请再次输入密码"/>
+                    </el-form-item>
+                </el-form>
+                <div class="NextStep">
+                    <button class="el-button el-button--primary forgetBtn" @click="submitForm('msg')">提交</button>
+                </div>
+            </div>
+        </div>
+        <div class="el-footer el-footer" style="height: 60px;">
+            <a target="_blank" style="text-decoration: none;">由微途科技提供技术支持</a>
+        </div>
+    </div>
+</template>
+<script>
+  export default {
+    data() {
+      let validataPwd = (rule, value, callback) => {
+        if (this.msg.Password =='') {
+            return callback(new Error('请输入密码'));
+        } 
+        if(this.msg.Password.trim().length<6||this.msg.Password.trim().length>15){
+            return callback(new Error('密码应在6至15位之间'));
+        }
+        else {
+            callback();
+        }
+      }
+      let validataPwd2 = (rule, value, callback) => {
+        if (this.msg.Password2 =='') {
+            return callback(new Error('请再次输入密码'));
+        } 
+        if(this.msg.Password2.trim().length<6||this.msg.Password2.trim().length>15){
+            return callback(new Error('密码应在6至15位之间'));
+        }
+        if(this.msg.Password!=this.msg.Password2){
+            return callback(new Error('两次输入密码不一致!'));
+        }
+        else {
+            callback();
+        }
+      }
+      return {
+         Height:0,
+         msg:{
+            phone:'',
+            ValidataCode:'',
+            Password:'',
+            Password2:''
+         },
+         rules: {
+            phone: [
+                { required: true, message: "手机号不能为空", trigger: "blur" }
+            ],
+            ValidataCode: [
+                { required: true, message: "手机验证码不能为空", trigger: "blur" }
+            ],
+            Password: [
+                 { validator: validataPwd, trigger: "blur",required: true}
+            ],
+            Password2: [
+                 { validator: validataPwd2, trigger: "blur",required: true}
+            ]
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      submitForm(addMsg){
+        //提交创建、修改表单
+        this.$refs[addMsg].validate(valid => {
+            if (valid) {
+                this.resetInfo();
+            } else {
+                return false;
+            }
+        });
+      },
+      //提交重置
+      resetInfo(){
+
+      },
+      //跳转登录
+      goLogin() {
+        this.$router.push({
+          name: 'login',
+          query: {
+            blank: "y"
+          }
+        });
+      },
+
+    },
+    mounted() {
+        this.Height = document.documentElement.clientHeight - 250;  
+    　　//监听浏览器窗口变化　
+        window.onresize = ()=> {this.Height = document.documentElement.clientHeight -250}
+
+    }
+  };
+</script>
\ No newline at end of file

src/components/zanIndex.vue

+<style>
+    
+</style>
+<template>
+    <div>
+        123
+    </div>
+</template>
\ No newline at end of file

src/router/index.js

@@ -15,6 +15,11 @@ export default new Router({
       name: 'login',
       component: resolve => require(['@/components/Login'], resolve),
     },
+    {
+      path:'/Forgetpassword',
+      name: 'Forgetpassword',
+      component: resolve => require(['@/components/Forgetpassword'], resolve),
+    },
     {
       path: '/Register',
       name: 'Register',
@@ -24,6 +29,19 @@ export default new Router({
       path: '/index',
       name: 'index',
       component: resolve => require(['@/components/index'], resolve),
+    },
+    {
+      path: '/main',
+      name: 'main',
+      component: resolve => require(['@/components/main'], resolve),
+      children:[
+        {
+          path: '/zanIndex',
+          name: 'zanIndex',
+          component: resolve => require(['@/components/zanIndex'], resolve),
         }
       ]
+    },
+    
+  ]
 })