xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登录/忘记密码-ui

dev
xuhuajiao 4 years ago
parent
afee0e3125
commit
88a608eba1
6 changed files with 243 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/login/bg-dl.png
  2. BIN
      src/assets/images/login/logo.png
  3. 3
      src/assets/styles/element-variables.scss
  4. 80
      src/assets/styles/login.scss
  5. 147
      src/views/forgetPassword.vue
  6. 132
      src/views/login.vue

BIN
src/assets/images/login/bg-dl.png
View File

Side by Side

After

Width: 1287  |  Height: 1080  |  Size: 412 KiB

BIN
src/assets/images/login/logo.png
View File

Side by Side

After

Width: 173  |  Height: 33  |  Size: 2.9 KiB

3
src/assets/styles/element-variables.scss
View File

@ -1,7 +1,8 @@
$--color-primary: #1890ff;
// $--color-primary: #1890ff;
$--color-primary: #33a1fa;
$--color-success: #13ce66; $--color-success: #13ce66;
$--color-warning: #FFBA00; $--color-warning: #FFBA00;
$--color-danger: #ff4949; $--color-danger: #ff4949;

80
src/assets/styles/login.scss
View File

@ -0,0 +1,80 @@
.login {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
background-size: cover;
}
.login_bg{
width: 1287px;
height: 100%;
background: url(../assets/images/login/bg-dl.png) no-repeat left top;
background-size: cover;
}
// .title {
// margin: 0 auto 30px auto;
// text-align: center;
// color: #707070;
// }
.login_cont{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.login_logo{
display: block;
width: 173px;
height: 33px;
margin: 0 auto 34px auto;
}
.login_form {
background: #ffffff;
width: 340px;
padding: 0 25px;
.el-input {
font-size: 14px;
height: 40px;
input {
height: 40px;
}
}
// .input-icon{
// height: 39px;width: 14px;margin-left: 2px;
// }
}
.auth_code{
position: relative;
.login-code {
position: absolute;
right: 0;
top: 0;
width: 33%;
display: inline-block;
height: 40px;
img{
cursor: pointer;
vertical-align:middle
}
span{
position: relative;
display: block;
width: 100%;
font-size: 12px;
text-align: center;
line-height: 40px;
color: #33a1fa;
cursor: pointer;
&:before {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 1px;
height: 18px;
margin-top: -9px;
background-color: #e2e6ee;
}
}
}
}

147
src/views/forgetPassword.vue
View File

@ -1,51 +1,30 @@
<template> <template>
<div class="login" :style="'background-image:url('+ Background +');'">
<el-form ref="modifyForm" :model="modifyForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title">
多媒体信息发布平台-忘记密码
</h3>
<el-form-item prop="phone">
<el-input v-model="modifyForm.phone" type="text" auto-complete="off" placeholder="手机号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="modifyForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleModify">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login">
<div class="login_bg" />
<div class="login_cont">
<el-form ref="modifyForm" :model="modifyForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
<img src="../assets/images/login/logo.png" class="login_logo" alt="">
<el-form-item prop="phone"><el-input v-model="modifyForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
<el-form-item prop="code" class="auth_code">
<el-input v-model="modifyForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleModify" />
<div class="login-code"> <div class="login-code">
<el-button :disable="disabledSendCode" :type="disabledSendCode==false?'primary':'info'" size="medium" style="width:100%;" @click="countdown()">
{{ verification }}
</el-button>
<span @click="countdown()">{{ verification }}</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="modifyForm.password" type="password" auto-complete="off" placeholder="新密码" @keyup.enter.native="handleModify">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
<el-input v-model="modifyForm.password" type="password" auto-complete="off" placeholder="请输入新密码" @keyup.enter.native="handleModify" />
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword">
<el-input v-model="modifyForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter.native="handleModify">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
<el-form-item prop="confirmPassword" class="confirm_password">
<el-input v-model="modifyForm.confirmPassword" type="password" auto-complete="off" placeholder="请确认新密码" @keyup.enter.native="handleModify" />
</el-form-item> </el-form-item>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleModify">
<el-form-item class="login_btn">
<el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleModify">
<span v-if="!loading">确定修改</span> <span v-if="!loading">确定修改</span>
<span v-else>修改密码中...</span> <span v-else>修改密码中...</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" style="width:100%;">
<span @click="toLogin()">登 录</span>
</el-button>
</el-form-item>
<div class="to_login_btn"><span @click="toLogin()">立即登录</span></div>
</el-form> </el-form>
<!-- 底部 -->
<div v-if="$store.state.settings.showFooter" id="el-login-footer">
<span v-html="$store.state.settings.footerTxt" />
<span> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
</div> </div>
</div> </div>
</template> </template>
@ -79,7 +58,7 @@ export default {
} }
const validatePass2 = (rule, value, callback) => { const validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请再次输入密码'))
callback(new Error('请确认新密码'))
} else if (value !== this.modifyForm.password) { } else if (value !== this.modifyForm.password) {
callback(new Error('两次输入密码不一致!')) callback(new Error('两次输入密码不一致!'))
} else { } else {
@ -116,11 +95,9 @@ export default {
immediate: true immediate: true
} }
}, },
created() {
},
created() {},
methods: { methods: {
getAuthCode() {
},
getAuthCode() {},
countdown() { countdown() {
if (this.disabledSendCode) { if (this.disabledSendCode) {
return return
@ -160,10 +137,13 @@ export default {
// } // }
if (valid) { if (valid) {
this.loading = true this.loading = true
this.$store.dispatch('Login', params).then(() => {
this.$store
.dispatch('Login', params)
.then(() => {
this.loading = false this.loading = false
this.$router.push({ path: this.redirect || '/' }) this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
})
.catch(() => {
this.loading = false this.loading = false
this.getCode() this.getCode()
}) })
@ -176,48 +156,51 @@ export default {
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
@import '~@/assets/styles/login.scss';
</style>
<style lang="scss" scoped>
::v-deep .el-form-item {
margin-bottom: 20px;
} }
.login-form {
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon{
height: 39px;width: 14px;margin-left: 2px;
}
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
.el-button--medium{
font-size: 12px;
padding: 10px;
}
img{
::v-deep .confirm_password {
margin-bottom: 43px;
}
::v-deep .el-form-item--small .el-form-item__error {
padding-top: 4px;
}
.login_btn {
::v-deep .el-button--medium {
width: 100%;
height: 40px;
font-size: 16px;
}
}
.to_login_btn {
position: relative;
span {
display: block;
font-size: 16px;
color: #33a1fa;
text-align: center;
cursor: pointer; cursor: pointer;
vertical-align:middle
&:before,
&:after {
content: '';
width: 110px;
height: 1px;
background-color: #e2e6ee;
}
&:before {
position: absolute;
left: 0;
top: 50%;
}
&:after {
position: absolute;
right: 0;
top: 50%;
}
} }
} }
</style> </style>

132
src/views/login.vue
View File

@ -1,55 +1,40 @@
<template> <template>
<div class="login" :style="'background-image:url('+ Background +');'">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title">
多媒体信息发布平台
</h3>
<el-form-item prop="phone">
<el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<div class="login">
<div class="login_bg" />
<div class="login_cont">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
<img src="../assets/images/login/logo.png" class="login_logo" alt="">
<el-form-item prop="phone"><el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin" />
</el-form-item> </el-form-item>
<el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>
<el-form-item prop="code" class="auth_code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin" />
<div class="login-code"><img :src="codeUrl" @click="getCode"></div>
</el-form-item> </el-form-item>
<el-form-item prop="agree" class="login_checked" style="line-height: 0;">
<el-form-item prop="agree" class="login_checked login_agree" style="line-height: 0;">
<el-checkbox v-model="loginForm.agree"> <el-checkbox v-model="loginForm.agree">
我已阅读并同意用户隐私政策
我已阅读并同意
<span>用户隐私政策</span>
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
<el-form-item class="login_btn">
<el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
<div class="login_bottom"> <div class="login_bottom">
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;" class="login_checked">
记住密码
</el-checkbox>
<span @click="toForgetPassword()">忘记密码</span>
<el-checkbox v-model="loginForm.rememberMe" class="login_checked">记住密码</el-checkbox>
<span class="forget_btn" @click="toForgetPassword()">忘记密码？</span>
</div> </div>
</el-form> </el-form>
<!-- 底部 -->
<div v-if="$store.state.settings.showFooter" id="el-login-footer">
<span v-html="$store.state.settings.footerTxt" />
<span> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 15902734788
import { encrypt } from '@/utils/rsaEncrypt' import { encrypt } from '@/utils/rsaEncrypt'
import { isvalidPhone } from '@/utils/validate' import { isvalidPhone } from '@/utils/validate'
import Config from '@/settings' import Config from '@/settings'
@ -74,8 +59,8 @@ export default {
codeUrl: '', codeUrl: '',
cookiePass: '', cookiePass: '',
loginForm: { loginForm: {
phone: '15902734788',
password: '123456',
phone: '',
password: '',
rememberMe: false, rememberMe: false,
code: '', code: '',
uuid: '', uuid: '',
@ -155,10 +140,13 @@ export default {
Cookies.remove('password') Cookies.remove('password')
Cookies.remove('rememberMe') Cookies.remove('rememberMe')
} }
this.$store.dispatch('Login', user).then(() => {
this.$store
.dispatch('Login', user)
.then(() => {
this.loading = false this.loading = false
this.$router.push({ path: this.redirect || '/' }) this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
})
.catch(() => {
this.loading = false this.loading = false
this.getCode() this.getCode()
}) })
@ -183,66 +171,50 @@ export default {
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
<style lang="scss" scoped>
::v-deep .el-form-item {
margin-bottom: 20px;
} }
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
::v-deep .el-form-item--small .el-form-item__error {
padding-top: 4px;
} }
.login-form {
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon{
height: 39px;width: 14px;margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img{
cursor: pointer;
vertical-align:middle
.login_btn {
::v-deep .el-button--medium {
width: 100%;
height: 40px;
font-size: 16px;
} }
} }
</style>
<style rel="stylesheet/scss" lang="scss">
@import '~@/assets/styles/login.scss';
.login_checked { .login_checked {
.el-checkbox__label { .el-checkbox__label {
font-size: 12px; font-size: 12px;
span {
color: #33a1fa;
}
} }
.el-form-item__content { .el-form-item__content {
line-height: 0; line-height: 0;
} }
} }
.login_agree.el-form-item {
margin-bottom: 30px;
}
.login_bottom { .login_bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 12px; font-size: 12px;
color: #606266; color: #606266;
span{
align-items: center;
line-height: 18px;
.el-checkbox__input {
margin-top: 2px;
}
.forget_btn {
font-size: 14px;
color: #33a1fa;
cursor: pointer; cursor: pointer;
} }
} }

Write Preview
Loading…
Cancel
Save