Skip to content

E
ElectricitySheep
Commit 9a8824f9 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 0d3e91f4
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 184 deletions
src/components/Forgetpassword.vue
View file @ 9a8824f9
<style> <style>
.Forgetpassword .resHeader{ .Forgetpassword .resHeader {
width:100%; width: 100%;
height:190px; height: 190px;
background-image: url("../assets/img/fpassword.png"); background-image: url("../assets/img/fpassword.png");
} }
.Forgetpassword .resHeader .title{
height: 50px; .Forgetpassword .resHeader .title {
font-size: 26px; height: 50px;
width: 274px; font-size: 26px;
margin: 0 auto 5px; width: 274px;
display: flex; margin: 0 auto 5px;
flex-wrap: nowrap; display: flex;
} flex-wrap: nowrap;
.Forgetpassword .resHeader .title div { }
padding: 0 10px;
width: 125px; .Forgetpassword .resHeader .title div {
} padding: 0 10px;
.Forgetpassword .resHeader .title{ width: 125px;
font-size: 26px; }
color: #333;
padding-top: 75px; .Forgetpassword .resHeader .title {
text-align: center; font-size: 26px;
} color: #333;
.Forgetpassword .regisLogo { padding-top: 75px;
float: right; text-align: center;
height: 50px; }
}
.Forgetpassword .regisLine { .Forgetpassword .regisLogo {
height: 25px; float: right;
width: 1px!important; height: 50px;
background: rgb(68, 68, 68); }
padding: 0px!important;
margin:21px 0 0 10px; .Forgetpassword .regisLine {
} height: 25px;
.Forgetpassword .regisWelcome{ width: 1px !important;
padding:0!important; background: rgb(68, 68, 68);
margin:14px 0 0 10px; padding: 0px !important;
} margin: 21px 0 0 10px;
.Forgetpassword .login { }
color: #409EFF;
cursor: pointer; .Forgetpassword .regisWelcome {
} padding: 0 !important;
.Forgetpassword .regisLogin{ margin: 14px 0 0 10px;
color: rgb(125, 125, 125); }
text-align:center;
margin-top:15px; .Forgetpassword .login {
} color: #409EFF;
.Forgetpassword .regisMain{ cursor: pointer;
display: block; }
-webkit-box-flex: 1;
-ms-flex: 1; .Forgetpassword .regisLogin {
flex: 1; color: rgb(125, 125, 125);
-ms-flex-preferred-size: auto; text-align: center;
flex-basis: auto; margin-top: 15px;
overflow: auto; }
box-sizing: border-box;
padding: 20px; .Forgetpassword .regisMain {
flex:1; display: block;
} -webkit-box-flex: 1;
.Forgetpassword .box-card{ -ms-flex: 1;
width:700px; flex: 1;
margin:40px auto 0; -ms-flex-preferred-size: auto;
} flex-basis: auto;
.Forgetpassword .box-card .el-input .el-input__inner { overflow: auto;
height: 45px; box-sizing: border-box;
border-radius: 22.5px; padding: 20px;
} flex: 1;
.Forgetpassword .box-card .el-form-item__content { }
width: 420px;
} .Forgetpassword .box-card {
.Forgetpassword .NextStep{ width: 700px;
width:300px; margin: 40px auto 0;
text-align: left; }
margin:40px auto 20px;
} .Forgetpassword .box-card .el-input .el-input__inner {
.Forgetpassword .box-card .code .el-input__inner { height: 45px;
border-top-right-radius: 0; border-radius: 22.5px;
border-bottom-right-radius: 0; }
}
.Forgetpassword .box-card .code .el-input-group__append { .Forgetpassword .box-card .el-form-item__content {
background-color: #007BFF; width: 420px;
color: #fff; }
border-top-right-radius: 22.5px;
border-bottom-right-radius: 22.5px; .Forgetpassword .NextStep {
border: 1px solid #007BFF; width: 300px;
} text-align: left;
.Forgetpassword .el-footer { margin: 40px auto 20px;
color: #ACACAC; }
text-align: center;
line-height: 60px; .Forgetpassword .box-card .code .el-input__inner {
background-color: #F6F6F6; border-top-right-radius: 0;
font-size:14px; border-bottom-right-radius: 0;
} }
.Forgetpassword .forgetBtn{
font-size:16px; .Forgetpassword .box-card .code .el-input-group__append {
width:120px; background-color: #007BFF;
height:45px; color: #fff;
border-radius:23px; 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> </style>
<template> <template>
<div class="Forgetpassword"> <div class="Forgetpassword">
<div class="resHeader"> <div class="resHeader">
<div class="title"> <div class="title">
<div> <div>
<img src="../assets/img/logo.png" alt="" class="regisLogo"/> <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>
<div class="el-footer el-footer" style="height: 60px;"> <div class="regisLine"></div>
<a target="_blank" style="text-decoration: none;">由微途科技提供技术支持</a> <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="MobilePhone">
<el-input type="text" v-model="msg.MobilePhone" maxlength="20" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="短信验证码" prop="ValidataCode" class="code" style="display:none;">
<el-input v-model="msg.ValidataCode" maxlength="6" 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="20" placeholder="请输入密码" />
</el-form-item>
<el-form-item label="确认密码" prop="Password2">
<el-input type="password" v-model="msg.Password2" maxlength="20" 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>
<div class="el-footer el-footer" style="height: 60px;">
<a target="_blank" style="text-decoration: none;">由微途科技提供技术支持</a>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
let validataPwd = (rule, value, callback) => { let validataPwd = (rule, value, callback) => {
if (this.msg.Password =='') { if (this.msg.Password == '') {
return callback(new Error('请输入密码')); return callback(new Error('请输入密码'));
}
if(this.msg.Password.trim().length<6||this.msg.Password.trim().length>15){
return callback(new Error('密码应在6至15位之间'));
} }
else { if (this.msg.Password.trim().length < 6 || this.msg.Password.trim().length > 15) {
callback(); return callback(new Error('密码应在6至15位之间'));
} else {
callback();
} }
} }
let validataPwd2 = (rule, value, callback) => { let validataPwd2 = (rule, value, callback) => {
if (this.msg.Password2 =='') { if (this.msg.Password2 == '') {
return callback(new Error('请再次输入密码')); 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){ if (this.msg.Password2.trim().length < 6 || this.msg.Password2.trim().length > 15) {
return callback(new Error('两次输入密码不一致!')); return callback(new Error('密码应在6至15位之间'));
} }
else { if (this.msg.Password != this.msg.Password2) {
callback(); return callback(new Error('两次输入密码不一致!'));
} else {
callback();
} }
} }
return { return {
Height:0, Height: 0,
msg:{ msg: {
phone:'', MobilePhone: '',
ValidataCode:'', ValidataCode: '',
Password:'', Password: '',
Password2:'' Password2: ''
}, },
rules: { rules: {
phone: [ MobilePhone: [{
{ required: true, message: "手机号不能为空", trigger: "blur" } required: true,
], message: "手机号不能为空",
ValidataCode: [ trigger: "blur"
{ required: true, message: "手机验证码不能为空", trigger: "blur" } }],
], // ValidataCode: [
Password: [ // { required: true, message: "手机验证码不能为空", trigger: "blur" }
{ validator: validataPwd, trigger: "blur",required: true} // ],
], Password: [{
Password2: [ validator: validataPwd,
{ validator: validataPwd2, trigger: "blur",required: true} trigger: "blur",
] required: true
}],
Password2: [{
validator: validataPwd2,
trigger: "blur",
required: true
}]
}, },
}; };
}, },
...@@ -197,19 +219,27 @@ ...@@ -197,19 +219,27 @@
}, },
methods: { methods: {
submitForm(addMsg){ submitForm(addMsg) {
//提交创建、修改表单 //提交创建、修改表单
this.$refs[addMsg].validate(valid => { this.$refs[addMsg].validate(valid => {
if (valid) { if (valid) {
this.resetInfo(); this.resetInfo();
} else { } else {
return false; return false;
} }
}); });
}, },
//提交重置 //提交重置
resetInfo(){ resetInfo() {
this.apipost("/api/Tenant/UpdateTenantPwd", this.msg, res => {
if (res.data.resultCode == 1) {
this.Success("修改密码成功!");
this.goLogin();
} else {
this.Info(res.data.message);
}
})
}, },
//跳转登录 //跳转登录
goLogin() { goLogin() {
...@@ -223,10 +253,12 @@ ...@@ -223,10 +253,12 @@
}, },
mounted() { mounted() {
this.Height = document.documentElement.clientHeight - 250; this.Height = document.documentElement.clientHeight - 250;
　　//监听浏览器窗口变化　 //监听浏览器窗口变化　
window.onresize = ()=> {this.Height = document.documentElement.clientHeight -250} window.onresize = () => {
this.Height = document.documentElement.clientHeight - 250
}
} }
}; };
</script>
\ No newline at end of file </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment