You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
13 KiB
508 lines
13 KiB
|
|
<template>
|
|
<div class="site-wrapper site-page--login">
|
|
<div class="login-layout">
|
|
<section class="brand-panel">
|
|
<div class="brand-panel__content">
|
|
<img class="brand-panel__logo" src="~@/assets/img/lc.png" alt="龙闯电梯">
|
|
<p class="brand-panel__label">LONGTRON ELEVATOR | LIFE AESTHETICS</p>
|
|
<h1 class="brand-panel__title">
|
|
高端家用电梯
|
|
<span class="divider">·</span>
|
|
<span class="sub-title">一站式服务平台</span>
|
|
</h1>
|
|
<p class="brand-panel__desc">
|
|
龙闯电梯坚持“臻选引进”与“自主创新”并重，为中国高端家庭提供集代理、研发、生产、销售、
|
|
安装、售后于一体的一站式家用电梯服务。
|
|
</p>
|
|
<div class="brand-panel__stats">
|
|
<div class="brand-panel__stat">
|
|
<p class="brand-panel__stat-value">设计研发</p>
|
|
<p class="brand-panel__stat-label">家用电梯设计、家用电梯智能系统研发</p>
|
|
</div>
|
|
<div class="brand-panel__stat">
|
|
<p class="brand-panel__stat-value">制造装配</p>
|
|
<p class="brand-panel__stat-label">电梯配件制造、模块化组装</p>
|
|
</div>
|
|
<div class="brand-panel__stat">
|
|
<p class="brand-panel__stat-value">现代服务</p>
|
|
<p class="brand-panel__stat-label">电梯维保、物流仓储、市场营销</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="login-panel">
|
|
<div class="login-card">
|
|
<div class="login-card__header">
|
|
<h3 class="login-title">欢迎登录</h3>
|
|
<p class="login-subtitle">龙闯电梯管理平台</p>
|
|
</div>
|
|
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon class="login-form">
|
|
<el-form-item prop="userName">
|
|
<el-input v-model="dataForm.userName" placeholder="请输入账号" size="large"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input v-model="dataForm.password" type="password" placeholder="请输入密码" size="large"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button class="login-btn" type="primary" @click="dataFormSubmit()">登录系统</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<p class="login-footer">龙闯电梯 · 生活美学倡导者</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {getConfigParams} from '@/api/sysConfig.js'
|
|
import { getUUID } from '@/utils'
|
|
export default {
|
|
data () {
|
|
return {
|
|
src: 'http://127.0.0.1/upload/ifs.png',
|
|
dataForm: {
|
|
userName: '',
|
|
password: '',
|
|
uuid: '',
|
|
captcha: ''
|
|
},
|
|
dataRule: {
|
|
userName: [
|
|
{ required: true, message: '帐号不能为空', trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
|
]
|
|
},
|
|
captchaPath: ''
|
|
}
|
|
},
|
|
computed: {
|
|
multiLanguage: {
|
|
get() {
|
|
return this.$store.state.user.multiLanguage
|
|
},
|
|
set(val) {
|
|
this.$store.commit('user/updateMultiLanguage', val)
|
|
}
|
|
},
|
|
authControl: {
|
|
get() {
|
|
return this.$store.state.user.authControl
|
|
},
|
|
set(val) {
|
|
this.$store.commit('user/updateAuthControl', val)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 仅当 redirectPath 为空时设置
|
|
const redirectPath = this.$route.query.redirect || '/home';
|
|
if (!localStorage.getItem('redirectPath')) {
|
|
localStorage.setItem('redirectPath', redirectPath);
|
|
}
|
|
},
|
|
created () {
|
|
this.userName();
|
|
// 如果 redirectPath 已经存在，不要覆盖它
|
|
const currentPath = localStorage.getItem('redirectPath');
|
|
if (!currentPath) {
|
|
localStorage.setItem('redirectPath', this.$route.fullPath);
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取上次登陆的用户名
|
|
userName(){
|
|
this.dataForm.userName = localStorage.getItem('userName')
|
|
},
|
|
// 提交表单
|
|
dataFormSubmit () {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (valid) {
|
|
// 显示全屏loading - 美观且专业
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在登录，请稍候...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.5)',
|
|
customClass: 'login-loading'
|
|
})
|
|
|
|
this.$http({
|
|
url: this.$http.adornUrl('/sys/login'),
|
|
method: 'post',
|
|
data: this.$http.adornData({
|
|
'username': this.dataForm.userName,
|
|
'password': this.dataForm.password,
|
|
'uuid': this.dataForm.uuid
|
|
})
|
|
}).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
console.log('跳转前路径:', localStorage.getItem('redirectPath')); // 检查路径是否正确
|
|
this.$cookie.set('token', data.token)
|
|
// 动态跳转逻辑
|
|
const redirectPath = localStorage.getItem('redirectPath') || '';
|
|
|
|
// 设置需要判断的路径
|
|
const pathsToRedirect = ['/auth-authQuote', '/auth-authInquiry'];
|
|
|
|
if (pathsToRedirect.some(path => redirectPath.indexOf(path) !== -1)) {
|
|
this.$router.replace(redirectPath);
|
|
} else {
|
|
this.$router.replace({ name: 'home' });
|
|
}
|
|
console.log('Redirecting to:', redirectPath); // 调试输出
|
|
this.$i18n.locale=data.language
|
|
localStorage.setItem('locale', data.language)
|
|
localStorage.setItem('refresh', "0")
|
|
localStorage.setItem('userName', this.dataForm.userName)
|
|
this.getConfigParams()
|
|
|
|
// 登录成功后关闭loading（路由跳转会自动关闭，这里作为备用）
|
|
setTimeout(() => {
|
|
loading.close()
|
|
}, 500)
|
|
} else {
|
|
loading.close() // 登录失败立即关闭loading
|
|
this.$message.error(data.msg)
|
|
}
|
|
}).catch(error => {
|
|
loading.close() // 请求异常时关闭loading
|
|
this.$message.error('登录请求失败，请检查网络连接')
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取全局参数变量
|
|
getConfigParams() {
|
|
getConfigParams().then(({data}) => {
|
|
if (data && data.code == 0) {
|
|
localStorage.setItem('configParams', JSON.stringify(data.data))
|
|
// this.multiLanguage = JSON.parse(localStorage.getItem('configParams')).multiLanguage
|
|
// this.authControl = JSON.parse(localStorage.getItem('configParams')).authControl
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.site-wrapper.site-page--login {
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at 12% 16%, rgba(227, 184, 110, 0.3), rgba(227, 184, 110, 0) 24%),
|
|
linear-gradient(130deg, #07141d 0%, #0d2736 48%, #163444 100%);
|
|
}
|
|
|
|
.login-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.brand-panel {
|
|
width: 57%;
|
|
position: relative;
|
|
color: #ffffff;
|
|
padding: 68px 76px;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 18% 22%, rgba(223, 182, 109, 0.32), rgba(223, 182, 109, 0) 40%),
|
|
linear-gradient(150deg, rgba(2, 15, 24, 0.95), rgba(7, 43, 60, 0.86));
|
|
}
|
|
|
|
.brand-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 38%),
|
|
repeating-linear-gradient(
|
|
-35deg,
|
|
rgba(255, 255, 255, 0.045) 0px,
|
|
rgba(255, 255, 255, 0.045) 1px,
|
|
rgba(255, 255, 255, 0) 1px,
|
|
rgba(255, 255, 255, 0) 30px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.brand-panel::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -130px;
|
|
top: 15%;
|
|
width: 320px;
|
|
height: 320px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at center, rgba(224, 179, 96, 0.26), rgba(224, 179, 96, 0) 72%);
|
|
filter: blur(1px);
|
|
}
|
|
|
|
.brand-panel__content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 760px;
|
|
}
|
|
|
|
.brand-panel__logo {
|
|
width: 250px;
|
|
height: 70px;
|
|
object-fit: contain;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.brand-panel__label {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
letter-spacing: 2px;
|
|
color: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.brand-panel__title {
|
|
font-size: 50px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand-panel__title .divider {
|
|
font-size: 34px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.brand-panel__title .sub-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
opacity: 0.95;
|
|
}
|
|
.brand-panel__desc {
|
|
margin: 0;
|
|
max-width: 660px;
|
|
font-size: 17px;
|
|
line-height: 1.85;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
}
|
|
|
|
.brand-panel__stats {
|
|
margin-top: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand-panel__stat {
|
|
min-width: 140px;
|
|
padding: 14px 16px 13px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(11, 41, 56, 0.42);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.brand-panel__stat-value {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
line-height: 1.2;
|
|
color: #eac07a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.brand-panel__stat-label {
|
|
margin: 6px 0 0;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.brand-panel__service {
|
|
margin: 28px 0 0;
|
|
font-size: 16px;
|
|
letter-spacing: 1px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.login-panel {
|
|
width: 43%;
|
|
min-width: 520px;
|
|
padding: 40px 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.login-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12%;
|
|
width: 1px;
|
|
height: 76%;
|
|
background: linear-gradient(rgba(255, 255, 255, 0), rgba(226, 186, 114, 0.45), rgba(255, 255, 255, 0));
|
|
}
|
|
|
|
.login-card {
|
|
width: 460px;
|
|
max-width: 100%;
|
|
padding: 36px 40px 28px;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.97);
|
|
box-shadow: 0 24px 55px rgba(5, 16, 24, 0.3);
|
|
border: 1px solid rgba(222, 188, 119, 0.38);
|
|
}
|
|
|
|
.login-card__logo {
|
|
width: 170px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.login-card__header {
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.login-title {
|
|
margin: 0;
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #0f2734;
|
|
}
|
|
|
|
.login-subtitle {
|
|
margin: 10px 0 0;
|
|
color: #617680;
|
|
font-size: 15px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.login-form {
|
|
/deep/ .el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
/deep/ .el-form-item__content {
|
|
height: 34px;
|
|
line-height: 30px;
|
|
}
|
|
/deep/ .el-input__inner {
|
|
height: 30px !important;
|
|
border-radius: 12px;
|
|
border: 1px solid #d0d8dd;
|
|
color: #24323b;
|
|
transition: all 0.22s ease;
|
|
font-size: 15px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
/deep/ .el-input__inner:focus {
|
|
border-color: #cfa35d;
|
|
box-shadow: 0 0 0 3px rgba(210, 167, 92, 0.15);
|
|
}
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 50px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
letter-spacing: 1px;
|
|
background: linear-gradient(120deg, #c89f5f 0%, #aa773a 100%);
|
|
box-shadow: 0 10px 20px rgba(179, 129, 63, 0.28);
|
|
}
|
|
|
|
.login-btn:hover,
|
|
.login-btn:focus {
|
|
background: linear-gradient(120deg, #d3ad6f 0%, #b6884e 100%);
|
|
}
|
|
|
|
.login-footer {
|
|
margin: 36px 0 0;
|
|
font-size: 13px;
|
|
color: #778891;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.brand-panel {
|
|
width: 52%;
|
|
padding: 48px;
|
|
}
|
|
|
|
.brand-panel__title {
|
|
font-size: 45px;
|
|
}
|
|
|
|
.brand-panel__desc {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.login-panel {
|
|
width: 48%;
|
|
min-width: 430px;
|
|
padding: 26px 32px;
|
|
}
|
|
|
|
.login-card {
|
|
width: 420px;
|
|
padding: 30px 30px 24px;
|
|
}
|
|
|
|
.login-title {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.brand-panel {
|
|
display: none;
|
|
}
|
|
|
|
.login-panel {
|
|
width: 100%;
|
|
min-width: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 540px;
|
|
}
|
|
|
|
.login-panel::before {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// 全屏登录loading样式 - 更美观专业
|
|
.login-loading {
|
|
.el-loading-spinner {
|
|
.el-icon-loading {
|
|
font-size: 50px;
|
|
color: #d2a75c;
|
|
}
|
|
.el-loading-text {
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-top: 15px;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|