fix: 重构login页
TangShanDD
parent
43493c6542
commit
e1ff59fb46
|
|
@ -1,34 +1,38 @@
|
|||
<template>
|
||||
<div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg})` }">
|
||||
<div class="login-logo">
|
||||
<img :src="configs.loginLogo" alt="" />
|
||||
</div>
|
||||
<div class="login-center">
|
||||
<div class="desc-content">
|
||||
<span class="desc-title">{{ configs.promotionalTitle }}</span>
|
||||
<span class="desc-remark">{{ configs.promotionalContent }}</span>
|
||||
<div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg || '/web-common-resource/img/bg_login.png'})` }">
|
||||
<div class="login-content">
|
||||
<!-- 左侧蓝色面板 -->
|
||||
<div class="left-panel">
|
||||
<span class="title-text">多云管理平台</span>
|
||||
</div>
|
||||
|
||||
<!-- 右侧白色登录表单 -->
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-content">
|
||||
<div class="login-title">欢迎登录</div>
|
||||
<el-form :model="loginForm" ref="loginFormRef" label-position="top" class="login-form" @keyup.enter.native="handleLogin" status-icon>
|
||||
<basic-form-item class="login-form-item" prop="account" validate="required" required-message="请输入用户名">
|
||||
<el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user" size="large" />
|
||||
</basic-form-item>
|
||||
|
||||
<el-tooltip v-model="capsTooltip" content="大写锁定已打开" placement="right" manual>
|
||||
<basic-form-item class="login-form-item" prop="password" validate="required" required-message="请输入密码">
|
||||
<el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock" size="large" />
|
||||
</basic-form-item>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="form-options">
|
||||
<div class="remember-password">
|
||||
<el-switch v-model="remember"></el-switch>
|
||||
<span class="m-l-xs">记住密码</span>
|
||||
</div>
|
||||
<a :href="`mailto:${configs.helpInformationLink}`" class="help-link">{{ configs.helpInformationContent || '获取帮助' }}</a>
|
||||
</div>
|
||||
|
||||
<el-button class="login-btn" type="primary" size="large" :loading="loading" @click="handleLogin">登录</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<el-form :model="loginForm" ref="loginFormRef" label-position="left" label-width="0px" class="card-box login-form" @keyup.enter.native="handleLogin" status-icon>
|
||||
<div class="login-title">账号登录</div>
|
||||
<basic-form-item class="login-form-item" prop="account" validate="required" required-message="请输入用户名">
|
||||
<el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user"> </el-input>
|
||||
</basic-form-item>
|
||||
<el-tooltip v-model="capsTooltip" content="大写锁定已打开" placement="right" manual>
|
||||
<basic-form-item class="login-form-item" prop="password" validate="required" required-message="请输入密码">
|
||||
<el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock"> </el-input>
|
||||
</basic-form-item>
|
||||
</el-tooltip>
|
||||
<basic-form-item class="login-form-item">
|
||||
<div class="operate-region">
|
||||
<span class="remember">
|
||||
<el-switch v-model="remember"></el-switch>
|
||||
<span class="m-l-xs">记住密码</span>
|
||||
</span>
|
||||
<a :href="`mailto:${configs.helpInformationLink}`" type="text" class="text-info pull-right help-info" :title="configs.helpInformationContent">{{ configs.helpInformationContent }}</a>
|
||||
</div>
|
||||
</basic-form-item>
|
||||
<el-button class="login-btn" type="primary" size="medium" :loading="loading" @click="handleLogin"> 登录 </el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="copyright-info">{{ configs.copyrightInformation }}</div>
|
||||
</div>
|
||||
|
|
@ -40,6 +44,7 @@ import { login } from 'services/system'
|
|||
import { setLoginData } from './tools'
|
||||
import { reactive, toRefs, ref, computed } from '@vue/composition-api'
|
||||
export default {
|
||||
name: 'LoginPage',
|
||||
setup(props, context) {
|
||||
const state = reactive({
|
||||
remember: false,
|
||||
|
|
@ -118,7 +123,7 @@ export default {
|
|||
state.capsTooltip = false
|
||||
}
|
||||
}
|
||||
if (key === 'CapsLock' && this.capsTooltip === true) {
|
||||
if (key === 'CapsLock' && state.capsTooltip === true) {
|
||||
state.capsTooltip = false
|
||||
}
|
||||
}
|
||||
|
|
@ -134,98 +139,212 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
background: url('/web-common-resource/img/bg_login.png') #2d3a4b no-repeat;
|
||||
background-size: cover;
|
||||
.login-logo {
|
||||
padding: 5px 40px;
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.login-center {
|
||||
.login-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
.desc-content {
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
min-height: 600px;
|
||||
|
||||
// 左侧蓝色面板
|
||||
.left-panel {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 700px;
|
||||
background: rgba(4, 121, 231, 0.463); // 半透明蓝色
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -150x;
|
||||
width: 600px;
|
||||
.desc-title {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// backdrop-filter: blur(1px);
|
||||
padding: 60px 50px;
|
||||
|
||||
.title-text {
|
||||
width: 80%;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.desc-remark {
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
box-sizing: border-box;
|
||||
width: 462px;
|
||||
padding: 50px 30px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
|
||||
// 右侧白色面板
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 50px;
|
||||
.right-panel-content {
|
||||
width: 83%;
|
||||
min-height: 580px;
|
||||
}
|
||||
.login-title {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 50px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
line-height: 130px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.operate-region {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.remember {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
margin-top: 20px;
|
||||
padding: 17px 20px;
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
}
|
||||
.help-info {
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.login-form-item {
|
||||
margin-bottom: 20px;
|
||||
::v-deep {
|
||||
.el-input--prefix .el-input__inner {
|
||||
max-width: 400px;
|
||||
|
||||
// 用户类型选择器
|
||||
.user-type-selector {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
|
||||
.type-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #595959;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
::v-deep(.el-form-item__label) {
|
||||
padding-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__wrapper) {
|
||||
min-height: 48px;
|
||||
border-radius: 4px;
|
||||
|
||||
.el-input__inner {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px #40a9ff inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #1890ff inset;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-input--prefix .el-input__inner) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
.el-input__prefix {
|
||||
|
||||
::v-deep(.el-input__prefix) {
|
||||
font-size: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.remember-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.m-l-xs {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
::v-deep(.el-switch) {
|
||||
.el-switch__label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-link {
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-info {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: rgba(10, 37, 68, 0.6);
|
||||
color: #bbbbbb;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<div class="login-container" :style="{ backgroundImage: `url(${configs.loginBg})` }">
|
||||
<div class="login-logo">
|
||||
<img :src="configs.loginLogo" alt="" />
|
||||
</div>
|
||||
<div class="login-center">
|
||||
<div class="desc-content">
|
||||
<span class="desc-title">{{ configs.promotionalTitle }}</span>
|
||||
<span class="desc-remark">{{ configs.promotionalContent }}</span>
|
||||
</div>
|
||||
<el-form :model="loginForm" ref="loginFormRef" label-position="left" label-width="0px" class="card-box login-form" @keyup.enter.native="handleLogin" status-icon>
|
||||
<div class="login-title">账号登录</div>
|
||||
<basic-form-item class="login-form-item" prop="account" validate="required" required-message="请输入用户名">
|
||||
<el-input v-model="loginForm.account" autoComplete="on" placeholder="登录账户" prefix-icon="el-icon-user"> </el-input>
|
||||
</basic-form-item>
|
||||
<el-tooltip v-model="capsTooltip" content="大写锁定已打开" placement="right" manual>
|
||||
<basic-form-item class="login-form-item" prop="password" validate="required" required-message="请输入密码">
|
||||
<el-input name="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password @blur="capsTooltip = false" @keyup.native="checkCapslock"> </el-input>
|
||||
</basic-form-item>
|
||||
</el-tooltip>
|
||||
<basic-form-item class="login-form-item">
|
||||
<div class="operate-region">
|
||||
<span class="remember">
|
||||
<el-switch v-model="remember"></el-switch>
|
||||
<span class="m-l-xs">记住密码</span>
|
||||
</span>
|
||||
<a :href="`mailto:${configs.helpInformationLink}`" type="text" class="text-info pull-right help-info" :title="configs.helpInformationContent">{{ configs.helpInformationContent }}</a>
|
||||
</div>
|
||||
</basic-form-item>
|
||||
<el-button class="login-btn" type="primary" size="medium" :loading="loading" @click="handleLogin"> 登录 </el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="copyright-info">{{ configs.copyrightInformation }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crypto from 'utils/crypto.js'
|
||||
import { login } from 'services/system'
|
||||
import { setLoginData } from './tools'
|
||||
import { reactive, toRefs, ref, computed } from '@vue/composition-api'
|
||||
export default {
|
||||
setup(props, context) {
|
||||
const state = reactive({
|
||||
remember: false,
|
||||
loginForm: {
|
||||
account: '',
|
||||
password: ''
|
||||
},
|
||||
loading: false,
|
||||
capsTooltip: false
|
||||
})
|
||||
const configs = computed(() => context.root.$store.getters.pageConfig)
|
||||
const loginFormRef = ref(null)
|
||||
const init = () => {
|
||||
const local = localStorage.getItem('cmcLoginData')
|
||||
if (local) {
|
||||
const obj = JSON.parse(local)
|
||||
state.loginForm.account = obj.account
|
||||
state.loginForm.password = crypto.decrypt(obj.password)
|
||||
state.remember = true
|
||||
}
|
||||
}
|
||||
init()
|
||||
function goLogin(data) {
|
||||
// const callback = this.$route.query.callback
|
||||
// if (callback) {
|
||||
// location.href = `${this.ssoUrl}/upmsapi/sso/redirect?token=${data.token}&redirect=${callback}`
|
||||
// return
|
||||
// }
|
||||
setLoginData(data)
|
||||
if (state.remember) {
|
||||
const obj = {
|
||||
account: state.loginForm.account,
|
||||
password: crypto.encrypt(state.loginForm.password)
|
||||
}
|
||||
localStorage.setItem('cmcLoginData', JSON.stringify(obj))
|
||||
} else {
|
||||
localStorage.removeItem('cmcLoginData')
|
||||
}
|
||||
let path = '/task/dashboard'
|
||||
const { $route, $router } = context.root
|
||||
const redirect = $route.query.redirect
|
||||
if (redirect) {
|
||||
path = redirect.split('/#')[1]
|
||||
}
|
||||
$router.replace(path)
|
||||
localStorage.removeItem('lockData')
|
||||
}
|
||||
|
||||
function handleLogin() {
|
||||
loginFormRef.value.validate(valid => {
|
||||
if (valid) {
|
||||
state.loading = true
|
||||
const { account, password } = state.loginForm
|
||||
login({
|
||||
account,
|
||||
password: crypto.encrypt(password),
|
||||
isManager: true
|
||||
})
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
goLogin(data.data)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function checkCapslock({ shiftKey, key } = {}) {
|
||||
if (key && key.length === 1) {
|
||||
if ((shiftKey && key >= 'a' && key <= 'z') || (!shiftKey && key >= 'A' && key <= 'Z')) {
|
||||
state.capsTooltip = true
|
||||
} else {
|
||||
state.capsTooltip = false
|
||||
}
|
||||
}
|
||||
if (key === 'CapsLock' && this.capsTooltip === true) {
|
||||
state.capsTooltip = false
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
configs,
|
||||
loginFormRef,
|
||||
handleLogin,
|
||||
checkCapslock
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: url('/web-common-resource/img/bg_login.png') #2d3a4b no-repeat;
|
||||
background-size: cover;
|
||||
.login-logo {
|
||||
padding: 5px 40px;
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.login-center {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.desc-content {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -150x;
|
||||
width: 600px;
|
||||
.desc-title {
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.desc-remark {
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
box-sizing: border-box;
|
||||
width: 462px;
|
||||
padding: 50px 30px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
.login-title {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.operate-region {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.remember {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
margin-top: 20px;
|
||||
padding: 17px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.help-info {
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.login-form-item {
|
||||
margin-bottom: 20px;
|
||||
::v-deep {
|
||||
.el-input--prefix .el-input__inner {
|
||||
padding-left: 50px;
|
||||
}
|
||||
.el-input__prefix {
|
||||
font-size: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright-info {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: rgba(10, 37, 68, 0.6);
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue