zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化登录页面为响应式,登录页兼容下手机端

This commit is contained in:
玖伍陈海天 2018-09-06 16:28:33 +08:00
parent 075dccbad3
commit b93fc93a26
3 changed files with 185 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lang/en.js
View File

@ -76,6 +76,7 @@ export default {
logIn: 'Log in', logIn: 'Log in',
username: 'Username', username: 'Username',
password: 'Password', password: 'Password',
captchaCode: 'Captcha Code',
any: 'any', any: 'any',
thirdparty: 'Or connect with', thirdparty: 'Or connect with',
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !' thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'

1
src/lang/zh.js
View File

@ -76,6 +76,7 @@ export default {
logIn: '登录', logIn: '登录',
username: '账号', username: '账号',
password: '密码', password: '密码',
captchaCode: '验证码',
any: '随便填', any: '随便填',
thirdparty: '第三方登录', thirdparty: '第三方登录',
thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！' thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'

295
src/views/login/index.vue
View File

@ -1,62 +1,124 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<el-row :gutter="10">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> <el-col
:xs="{span: 20, offset: 2}"
<div class="title-container"> :sm="{span: 14, offset: 5}"
<h3 class="title">{{ $t('login.title') }}</h3> :md="{span: 12, offset: 6}"
<lang-select class="set-language"/> :lg="{span: 8, offset: 8}"
</div> :xl="{span: 8, offset: 8}">
<el-form
<el-form-item prop="username"> ref="loginForm"
<span class="svg-container svg-container_login"> :model="loginForm"
<svg-icon icon-class="user" /> :rules="loginRules"
</span> class="login-form"
<el-input
v-model="loginForm.username"
:placeholder="$t('login.username')"
name="username"
type="text"
auto-complete="on" auto-complete="on"
/> label-position="left">
</el-form-item>
<el-form-item prop="password"> <div class="title-container">
<span class="svg-container"> <h3 class="title">{{ $t('login.title') }}</h3>
<svg-icon icon-class="password" /> <lang-select class="set-language"/>
</span> </div>
<el-input
:type="passwordType"
v-model="loginForm.password"
:placeholder="$t('login.password')"
name="password"
auto-complete="on"
@keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button> <el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user"/>
</span>
<el-input
v-model="loginForm.username"
:placeholder="$t('login.username')"
name="username"
type="text"
auto-complete="on"/>
</el-form-item>
<div class="tips"> <el-form-item prop="password">
<span>{{ $t('login.username') }} : admin</span> <span class="svg-container">
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> <svg-icon icon-class="password"/>
</div> </span>
<div class="tips"> <el-input
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span> :type="passwordType"
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> v-model="loginForm.password"
</div> :placeholder="$t('login.password')"
name="password"
auto-complete="on"/>
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye"/>
</span>
</el-form-item>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button> <el-form-item prop="captchaCode">
</el-form> <el-row>
<el-col :span="16">
<span class="svg-container">
<svg-icon icon-class="chart"/>
</span>
<el-input
v-model="loginForm.captchaCode"
:placeholder="$t('login.captchaCode')"
type="text"
name="captchaCode"
auto-complete="on"
@keyup.enter.native="handleLogin"/>
</el-col>
<el-col
:span="8"
class="captcha_img_box">
<img
:src="captchaCode_img_url"
alt="captcha"
class="captcha_img"
@click="refreshCaptchaImg">
</el-col>
</el-row>
</el-form-item>
<el-button
:loading="loading"
type="primary"
style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin">{{ $t('login.logIn') }}
</el-button>
<el-row>
<el-col
:xs="{span: 24}"
:sm="{span: 24}"
:md="{span: 16}"
:lg="{span: 14}"
:xl="{span: 14}">
<div class="tips">
<span>{{ $t('login.username') }} : admin</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
</el-col>
<el-col
:xs="{span: 24}"
:sm="{span: 24}"
:md="{span: 8}"
:lg="{span: 10}"
:xl="{span: 10}">
<el-button
class="thirdparty-button"
type="primary"
style="width:100%;"
@click="showDialog=true">{{ $t('login.thirdparty') }}
</el-button>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body> <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
{{ $t('login.thirdpartyTips') }} {{ $t('login.thirdpartyTips') }}
<br> <br>
<br> <br>
<br> <br>
<social-sign /> <social-sign/>
</el-dialog> </el-dialog>
</div> </div>
@ -91,12 +153,18 @@ export default {
password: '1111111' password: '1111111'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [
password: [{ required: true, trigger: 'blur', validator: validatePassword }] { required: true, trigger: 'blur', validator: validateUsername }
],
password: [
{ required: true, trigger: 'blur', validator: validatePassword }
]
}, },
passwordType: 'password', passwordType: 'password',
loading: false, loading: false,
showDialog: false showDialog: false,
// captchaCode_img_url: process.env.BASE_API + '/adm/captcha'
captchaCode_img_url: 'https://www.oschina.net/action/user/captcha'
} }
}, },
created() { created() {
@ -106,6 +174,10 @@ export default {
// window.removeEventListener('hashchange', this.afterQRScan) // window.removeEventListener('hashchange', this.afterQRScan)
}, },
methods: { methods: {
refreshCaptchaImg() {
// this.captchaCode_img_url = process.env.BASE_API + '/adm/captcha' + '?t=' + Math.random()
this.captchaCode_img_url = 'https://www.oschina.net/action/user/captcha' + '?t=' + Math.random()
},
showPwd() { showPwd() {
if (this.passwordType === 'password') { if (this.passwordType === 'password') {
this.passwordType = '' this.passwordType = ''
@ -155,12 +227,12 @@ export default {
/* 修复input 背景不协调 和光标变色 */ /* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443; $bg: #283443;
$light_gray:#eee; $light_gray: #eee;
$cursor: #fff; $cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input{ .login-container .el-input input {
color: $cursor; color: $cursor;
&::first-line { &::first-line {
color: $light_gray; color: $light_gray;
@ -173,7 +245,7 @@ export default {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
width: 85%; width: 80%; // 这里85%将影响部分错位 设置为80%即可
input { input {
background: transparent; background: transparent;
border: 0px; border: 0px;
@ -199,72 +271,71 @@ export default {
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b; $bg: #2d3a4b;
$dark_gray:#889aa4; $dark_gray: #889aa4;
$light_gray:#eee; $light_gray: #eee;
.login-container { .captcha_img {
position: fixed; width: 100%;
height: 100%; height: 49px;
width: 100%; max-height: 49px;
background-color: $bg; vertical-align: middle;
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
} }
.tips {
font-size: 14px; .login-container {
color: #fff; position: fixed;
margin-bottom: 10px; height: 100%;
span { width: 100%;
&:first-of-type { background-color: $bg;
margin-right: 16px; .login-form {
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
} }
} }
} .svg-container {
.svg-container { padding: 6px 5px 6px 15px;
padding: 6px 5px 6px 15px; color: $dark_gray;
color: $dark_gray; vertical-align: middle;
vertical-align: middle; width: 30px;
width: 30px; display: inline-block;
display: inline-block; &_login {
&_login { font-size: 20px;
font-size: 20px; }
} }
} .title-container {
.title-container { position: relative;
position: relative; .title {
.title { font-size: 26px;
font-size: 26px; color: $light_gray;
color: $light_gray; margin: 0px auto 40px auto;
margin: 0px auto 40px auto; text-align: center;
text-align: center; font-weight: bold;
font-weight: bold; }
.set-language {
color: #fff;
position: absolute;
top: 5px;
right: 0px;
}
} }
.set-language {
color: #fff; .show-pwd {
position: absolute; position: absolute;
top: 5px; right: 10px;
right: 0px; top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
} }
} }
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.thirdparty-button {
position: absolute;
right: 35px;
bottom: 28px;
}
}
</style> </style>