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>
.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;
}
.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 class="Forgetpassword">
<div class="resHeader">
<div class="title">
<div>
<img src="../assets/img/logo.png" alt="" class="regisLogo" />
</div>
<div class="el-footer el-footer" style="height: 60px;">
<a target="_blank" style="text-decoration: none;">由微途科技提供技术支持</a>
<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="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 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位之间'));
if (this.msg.Password == '') {
return callback(new Error('请输入密码'));
}
else {
callback();
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.Password2 == '') {
return callback(new Error('请再次输入密码'));
}
if(this.msg.Password!=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位之间'));
}
else {
callback();
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}
]
Height: 0,
msg: {
MobilePhone: '',
ValidataCode: '',
Password: '',
Password2: ''
},
rules: {
MobilePhone: [{
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
}]
},
};
},
......@@ -197,19 +219,27 @@
},
methods: {
submitForm(addMsg){
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.resetInfo();
} else {
return false;
}
if (valid) {
this.resetInfo();
} else {
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() {
......@@ -223,10 +253,12 @@
},
mounted() {
this.Height = document.documentElement.clientHeight - 250;
　　//监听浏览器窗口变化　
window.onresize = ()=> {this.Height = document.documentElement.clientHeight -250}
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