功能变化: 登录页样式优化
李强
parent
d4602e41ae
commit
177133726f
|
|
@ -3,33 +3,27 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mapActions } from 'vuex'
|
||||
import localeMixin from '@/locales/mixin.js'
|
||||
import * as api from '@/views/system/login/api'
|
||||
|
||||
export default {
|
||||
mixins: [localeMixin],
|
||||
computed: {
|
||||
...mapState('d2admin', {
|
||||
siteName: (state) => state.settings.siteName, // 网站名称
|
||||
siteLogo: (state) =>
|
||||
state.settings.siteLogo || require('./image/dvadmin.png'), // 网站logo地址
|
||||
loginBackground: (state) =>
|
||||
state.settings.loginBackground || require('./image/bg.jpg'), // 登录页背景图
|
||||
copyright: (state) => state.settings.copyright, // 版权
|
||||
keepRecord: (state) => state.settings.keepRecord, // 备案
|
||||
helpUrl: (state) => state.settings.helpUrl, // 帮助
|
||||
privacyUrl: (state) => state.settings.privacyUrl, // 隐私
|
||||
clauseUrl: (state) => state.settings.clauseUrl, // 条款
|
||||
captchaState: (state) => state.settings.captchaState// 验证码
|
||||
})
|
||||
},
|
||||
beforeCreate () {
|
||||
// 初始化配置
|
||||
this.$store.dispatch('d2admin/settings/init')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
siteName: this.systemConfig('login.site_name'), // 网站名称
|
||||
siteLogo: this.systemConfig('login.site_logo') || require('./image/dvadmin.png'), // 网站logo地址
|
||||
loginBackground: this.systemConfig('login.login_background') || require('./image/bg.jpg'), // 登录页背景图
|
||||
copyright: this.systemConfig('login.copyright'), // 版权
|
||||
keepRecord: this.systemConfig('login.keep_record'), // 备案
|
||||
helpUrl: this.systemConfig('login.help_url'), // 帮助
|
||||
privacyUrl: this.systemConfig('login.privacy_url'), // 隐私
|
||||
clauseUrl: this.systemConfig('login.clause_url'), // 条款
|
||||
captchaState: this.systemConfig('login.captcha_state'), // 验证码
|
||||
processTitle: process.env.VUE_APP_TITLE || 'D2Admin',
|
||||
backgroundImage: 'url(' + this.loginBackground + ')',
|
||||
// 表单
|
||||
|
|
@ -73,13 +67,21 @@ export default {
|
|||
]
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
beforeDestroy () {},
|
||||
mounted () {
|
||||
document.onkeydown = () => {
|
||||
var key = window.event.keyCode
|
||||
if (key === 13) {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/account', ['login']),
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
* 获取验证码
|
||||
*/
|
||||
getCaptcha () {
|
||||
console.log(2, this.captchaState, this.captchaState !== undefined)
|
||||
if (this.captchaState !== undefined && !this.captchaState) return
|
||||
|
|
@ -90,8 +92,8 @@ export default {
|
|||
})
|
||||
},
|
||||
/**
|
||||
* @description 提交表单
|
||||
*/
|
||||
* @description 提交表单
|
||||
*/
|
||||
// 提交登录信息
|
||||
submit () {
|
||||
const that = this
|
||||
|
|
@ -138,107 +140,107 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// ----
|
||||
.page-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(./image/bg.jpg);
|
||||
background-position: center 0;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
|
||||
-o-background-size: cover; /* 兼容Opera */
|
||||
zoom: 1;
|
||||
}
|
||||
// ----
|
||||
.page-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url(./image/bg.jpg);
|
||||
background-position: center 0;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
|
||||
-o-background-size: cover; /* 兼容Opera */
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
margin-top: 12%;
|
||||
}
|
||||
.card {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
float: right;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-card h1 {
|
||||
color: #098dee;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.button-login {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// footer
|
||||
.page-login--content-footer {
|
||||
margin-top: 10%;
|
||||
padding: 1em 0;
|
||||
|
||||
.page-login--content-footer-locales {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
.right-card {
|
||||
float: right;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
.right-card h1 {
|
||||
color: #098dee;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.button-login {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// footer
|
||||
.page-login--content-footer {
|
||||
margin-top: 10%;
|
||||
padding: 1em 0;
|
||||
|
||||
.page-login--content-footer-locales {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
margin: 0 0.5em;
|
||||
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 0.5em;
|
||||
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-login--content-footer-copyright {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.page-login--content-footer-options {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-login--content-footer-copyright {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.page-login--content-footer-options {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ img {
|
|||
.page-login--logo{
|
||||
margin: 0 auto;
|
||||
top: 10px;
|
||||
left: 52em;
|
||||
left: 52%;
|
||||
position: absolute;
|
||||
}
|
||||
/*-- //Reset-Code --*/
|
||||
|
|
@ -231,7 +231,7 @@ img {
|
|||
color: #444;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1 {
|
||||
.w3_info h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,21 @@
|
|||
<template>
|
||||
<div
|
||||
class="w3l-signinform"
|
||||
:style="{
|
||||
background:
|
||||
'url(' +
|
||||
(loginBackground || require('./image/bg.jpg')) +
|
||||
') no-repeat center'
|
||||
}"
|
||||
:style="{background:'url(' +(loginBackground || require('./image/bg.jpg')) +') no-repeat center', backgroundSize: '100% 100%' }"
|
||||
>
|
||||
<!-- container -->
|
||||
<div class="wrapper">
|
||||
<!-- main content -->
|
||||
<div class="w3l-form-info">
|
||||
<!-- logo -->
|
||||
<img class="page-login--logo" :src="siteLogo" width="300" />
|
||||
<img class="page-login--logo" :src="siteLogo" width="300"/>
|
||||
<div class="w3_info">
|
||||
<h2 style="text-align: center">{{ siteName || processTitle }}</h2>
|
||||
<el-card shadow="always" class="card">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="账号密码登录" name="first" stretch>
|
||||
<span slot="label"
|
||||
><span style="margin: 30px">账号密码登录</span></span
|
||||
>
|
||||
<br />
|
||||
<span slot="label"><span style="margin: 30px">账号密码登录</span></span>
|
||||
<br/>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
|
|
@ -104,7 +97,7 @@
|
|||
<p>
|
||||
<a href="https://beian.miit.gov.cn" target="_blank">{{
|
||||
keepRecord
|
||||
}}</a>
|
||||
}}</a>
|
||||
| <a :href="helpUrl || '#'" target="_blank">帮助</a> |
|
||||
<a :href="privacyUrl || '#'" target="_blank">隐私</a> |
|
||||
<a :href="clauseUrl || '#'" target="_blank">条款</a>
|
||||
|
|
@ -120,7 +113,7 @@
|
|||
<el-row :gutter="10" style="margin: -20px 0px -10px 0px">
|
||||
<el-col v-for="(user, index) in users" :key="index" :span="8">
|
||||
<div class="page-login--quick-user" @click="handleUserBtnClick(user)">
|
||||
<d2-icon name="user-circle-o" />
|
||||
<d2-icon name="user-circle-o"/>
|
||||
<span>{{ user.name }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -139,47 +132,56 @@ export default {
|
|||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
created () {},
|
||||
mounted () {},
|
||||
created () {
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './css/style.css';
|
||||
@import './css/style.css';
|
||||
|
||||
.copyrights {
|
||||
text-indent: -9999px;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 快速选择用户面板
|
||||
.page-login--quick {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.page-login--quick-user {
|
||||
@extend %flex-center-col;
|
||||
padding: 10px 0px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-bg;
|
||||
|
||||
i {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.copyrights {
|
||||
text-indent: -9999px;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
// 快速选择用户面板
|
||||
.page-login--quick{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page-login--quick-user {
|
||||
@extend %flex-center-col;
|
||||
padding: 10px 0px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: $color-bg;
|
||||
i {
|
||||
color: $color-text-normal;
|
||||
font-size: 36px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-text-normal;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 36px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue