|
|
|
@ -1,17 +1,36 @@ |
|
|
|
<template> |
|
|
|
<div class="login"> |
|
|
|
<!-- 背景装饰元素：营造牧场/田野氛围 --> |
|
|
|
<!-- <div class="bg-decorations"> |
|
|
|
<div class="sun"></div> |
|
|
|
<div class="cloud cloud1"></div> |
|
|
|
<div class="cloud cloud2"></div> |
|
|
|
<div class="grass grass-left"></div> |
|
|
|
<div class="grass grass-right"></div> |
|
|
|
<div class="cattle-icon cattle1">🐮</div> |
|
|
|
<div class="cattle-icon cattle2">🐄</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> |
|
|
|
<!-- 品牌区域 --> |
|
|
|
<div class="brand-area"> |
|
|
|
<div class="logo-icon">🐫</div> |
|
|
|
<h3 class="title">{{ title }}</h3> |
|
|
|
<p class="subtitle">智慧牧场 · 轻松管理</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.username" |
|
|
|
type="text" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="账号" |
|
|
|
placeholder="账号 / 手机号" |
|
|
|
class="custom-input" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="password"> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.password" |
|
|
|
@ -19,45 +38,37 @@ |
|
|
|
auto-complete="off" |
|
|
|
placeholder="密码" |
|
|
|
@keyup.enter.native="handleLogin" |
|
|
|
class="custom-input" |
|
|
|
> |
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item prop="code" v-if="captchaEnabled"> |
|
|
|
<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" class="login-code-img"/> |
|
|
|
|
|
|
|
<!-- 选项栏：记住密码 + 立即注册 --> |
|
|
|
<div class="options-bar"> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox">记住密码</el-checkbox> |
|
|
|
<router-link v-if="register" class="register-link" to="/register">立即注册</router-link> |
|
|
|
</div> |
|
|
|
</el-form-item> --> |
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
|
|
|
|
|
|
|
<el-form-item style="width:100%;"> |
|
|
|
<el-button |
|
|
|
:loading="loading" |
|
|
|
size="medium" |
|
|
|
type="primary" |
|
|
|
style="width:100%;" |
|
|
|
class="login-btn" |
|
|
|
@click.native.prevent="handleLogin" |
|
|
|
> |
|
|
|
<span v-if="!loading">登 录</span> |
|
|
|
<span v-else>登 录 中...</span> |
|
|
|
</el-button> |
|
|
|
<div style="float: right;" v-if="register"> |
|
|
|
<router-link class="link-type" :to="'/register'">立即注册</router-link> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<!-- 底部 --> |
|
|
|
<div class="el-login-footer"> |
|
|
|
<!-- <div class="el-login-footer"> |
|
|
|
<span>{{ footerContent }}</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -71,7 +82,7 @@ export default { |
|
|
|
name: "Login", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
title: process.env.VUE_APP_TITLE, |
|
|
|
title: '阿右旗阿拉腾敖包镇骆驼产业标准化智慧化示范基地数据中心', |
|
|
|
footerContent: defaultSettings.footerContent, |
|
|
|
codeUrl: "", |
|
|
|
loginForm: { |
|
|
|
@ -88,14 +99,12 @@ export default { |
|
|
|
password: [ |
|
|
|
{ required: true, trigger: "blur", message: "请输入您的密码" } |
|
|
|
], |
|
|
|
code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
|
|
|
}, |
|
|
|
loading: false, |
|
|
|
// 验证码开关 |
|
|
|
captchaEnabled: true, |
|
|
|
// 注册开关 |
|
|
|
register: false, |
|
|
|
redirect: undefined |
|
|
|
redirect: undefined, |
|
|
|
showDemoTip: true // 控制演示提示显示，可自行关闭 |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -144,7 +153,6 @@ export default { |
|
|
|
Cookies.remove('rememberMe') |
|
|
|
} |
|
|
|
this.$store.dispatch("Login", this.loginForm).then(() => { |
|
|
|
// this.$router.push({ path: this.redirect || "/Home" }).catch(()=>{}) |
|
|
|
this.$router.push({ path: "/Home" }).catch(() => { }); |
|
|
|
}).catch(() => { |
|
|
|
this.loading = false |
|
|
|
@ -160,65 +168,300 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
// 颜色变量 - 驼场主题色（自然、大地、清新） |
|
|
|
$primary-color: #7c9a3e; // 草绿色主色调 |
|
|
|
$primary-hover: #5c7a2e; // 深草绿 |
|
|
|
$bg-overlay: rgba(0, 0, 0, 0.3); |
|
|
|
$text-dark: #2c3a1f; |
|
|
|
$text-light: #6b7a5a; |
|
|
|
$card-white: rgba(255, 255, 255, 0.96); |
|
|
|
$shadow-sm: 0 20px 35px -10px rgba(0, 0, 0, 0.2); |
|
|
|
$shadow-focus: 0 0 0 3px rgba(124, 154, 62, 0.2); |
|
|
|
|
|
|
|
.login { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100vh; |
|
|
|
min-height: 500px; |
|
|
|
background: linear-gradient(135deg, #2b5e2b 0%, #8cb36b 50%, #d4c9a3 100%); |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
// 动态装饰背景 |
|
|
|
.bg-decorations { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-image: url("../assets/images/login-background.jpg"); |
|
|
|
background-size: cover; |
|
|
|
pointer-events: none; |
|
|
|
z-index: 0; |
|
|
|
} |
|
|
|
.title { |
|
|
|
margin: 0px auto 30px auto; |
|
|
|
text-align: center; |
|
|
|
color: #707070; |
|
|
|
|
|
|
|
// 太阳 |
|
|
|
.sun { |
|
|
|
position: absolute; |
|
|
|
top: 8%; |
|
|
|
right: 5%; |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
background: radial-gradient(circle, #ffdf8c, #ffb347); |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: 0 0 50px rgba(255, 180, 70, 0.6); |
|
|
|
animation: float 8s infinite ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
// 云朵 |
|
|
|
.cloud { |
|
|
|
position: absolute; |
|
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
|
border-radius: 1000px; |
|
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
&::before, &::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
background: inherit; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
.cloud1 { |
|
|
|
top: 12%; |
|
|
|
left: -50px; |
|
|
|
width: 160px; |
|
|
|
height: 70px; |
|
|
|
&::before { width: 60px; height: 60px; top: -30px; left: 20px; } |
|
|
|
&::after { width: 80px; height: 80px; top: -40px; left: 70px; } |
|
|
|
animation: drift 22s infinite linear; |
|
|
|
} |
|
|
|
.cloud2 { |
|
|
|
bottom: 15%; |
|
|
|
right: -30px; |
|
|
|
width: 200px; |
|
|
|
height: 85px; |
|
|
|
&::before { width: 70px; height: 70px; top: -35px; left: 20px; } |
|
|
|
&::after { width: 90px; height: 90px; top: -45px; left: 85px; } |
|
|
|
animation: drift 28s infinite reverse linear; |
|
|
|
} |
|
|
|
|
|
|
|
// 草地剪影 |
|
|
|
.grass { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 80px; |
|
|
|
background: repeating-linear-gradient(45deg, #4c6a2c, #4c6a2c 30px, #5e7e38 30px, #5e7e38 60px); |
|
|
|
opacity: 0.5; |
|
|
|
&::before { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
top: -20px; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 25px; |
|
|
|
background: radial-gradient(ellipse at top, #6f9e3f, transparent); |
|
|
|
} |
|
|
|
} |
|
|
|
.grass-left { left: 0; width: 40%; border-radius: 0 40% 0 0; } |
|
|
|
.grass-right { right: 0; width: 55%; border-radius: 40% 0 0 0; } |
|
|
|
|
|
|
|
// 奶牛图标 |
|
|
|
.cattle-icon { |
|
|
|
position: absolute; |
|
|
|
font-size: 48px; |
|
|
|
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.2)); |
|
|
|
opacity: 0.7; |
|
|
|
animation: bounce 4s infinite; |
|
|
|
} |
|
|
|
.cattle1 { bottom: 12%; left: 5%; animation-delay: 0s; } |
|
|
|
.cattle2 { bottom: 18%; right: 8%; animation-delay: 1.2s; font-size: 56px; } |
|
|
|
|
|
|
|
// 登录卡片 |
|
|
|
.login-form { |
|
|
|
border-radius: 6px; |
|
|
|
background: #ffffff; |
|
|
|
width: 400px; |
|
|
|
padding: 25px 25px 5px 25px; |
|
|
|
z-index: 1; |
|
|
|
.el-input { |
|
|
|
height: 38px; |
|
|
|
input { |
|
|
|
height: 38px; |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
width: 440px; |
|
|
|
padding: 40px 35px 35px; |
|
|
|
background: $card-white; |
|
|
|
backdrop-filter: blur(2px); |
|
|
|
border-radius: 32px; |
|
|
|
box-shadow: $shadow-sm; |
|
|
|
transition: all 0.3s ease; |
|
|
|
border: 1px solid rgba(255,255,255,0.5); |
|
|
|
|
|
|
|
&:hover { |
|
|
|
transform: translateY(-3px); |
|
|
|
box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.25); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 品牌区 |
|
|
|
.brand-area { |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 30px; |
|
|
|
.logo-icon { |
|
|
|
font-size: 56px; |
|
|
|
display: inline-block; |
|
|
|
animation: gentleSwing 2s infinite ease; |
|
|
|
} |
|
|
|
.title { |
|
|
|
margin: 12px 0 6px; |
|
|
|
font-size: 28px; |
|
|
|
font-weight: 600; |
|
|
|
color: $text-dark; |
|
|
|
letter-spacing: 2px; |
|
|
|
} |
|
|
|
.subtitle { |
|
|
|
font-size: 13px; |
|
|
|
color: $text-light; |
|
|
|
margin-bottom: 5px; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 输入框样式优化 |
|
|
|
.custom-input { |
|
|
|
:deep(.el-input__inner) { |
|
|
|
height: 48px; |
|
|
|
border-radius: 60px; |
|
|
|
border: 1px solid #e2e8e6; |
|
|
|
background: #fefef7; |
|
|
|
padding-left: 42px; |
|
|
|
font-size: 15px; |
|
|
|
transition: all 0.2s; |
|
|
|
&:focus { |
|
|
|
border-color: $primary-color; |
|
|
|
box-shadow: $shadow-focus; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.el-input__prefix) { |
|
|
|
left: 16px; |
|
|
|
top: 2px; |
|
|
|
.input-icon { |
|
|
|
height: 39px; |
|
|
|
width: 14px; |
|
|
|
margin-left: 2px; |
|
|
|
font-size: 18px; |
|
|
|
color: $primary-color; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 选项栏（记住密码 + 注册） |
|
|
|
.options-bar { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin: 8px 0 25px 0; |
|
|
|
.remember-checkbox { |
|
|
|
:deep(.el-checkbox__inner) { |
|
|
|
border-radius: 4px; |
|
|
|
border-color: #cbd5e1; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) { |
|
|
|
background-color: $primary-color; |
|
|
|
border-color: $primary-color; |
|
|
|
} |
|
|
|
.login-tip { |
|
|
|
:deep(.el-checkbox__label) { |
|
|
|
color: $text-light; |
|
|
|
font-size: 13px; |
|
|
|
text-align: center; |
|
|
|
color: #bfbfbf; |
|
|
|
} |
|
|
|
.login-code { |
|
|
|
width: 33%; |
|
|
|
height: 38px; |
|
|
|
float: right; |
|
|
|
img { |
|
|
|
cursor: pointer; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.register-link { |
|
|
|
color: $primary-color; |
|
|
|
font-size: 13px; |
|
|
|
text-decoration: none; |
|
|
|
font-weight: 500; |
|
|
|
transition: 0.2s; |
|
|
|
&:hover { |
|
|
|
color: $primary-hover; |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 登录按钮 |
|
|
|
.login-btn { |
|
|
|
width: 100%; |
|
|
|
height: 48px; |
|
|
|
background: $primary-color; |
|
|
|
border: none; |
|
|
|
border-radius: 60px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
letter-spacing: 2px; |
|
|
|
box-shadow: 0 8px 18px rgba(124, 154, 62, 0.3); |
|
|
|
transition: all 0.25s; |
|
|
|
&:hover, &:focus { |
|
|
|
background: $primary-hover; |
|
|
|
transform: scale(1.01); |
|
|
|
box-shadow: 0 10px 22px rgba(92, 122, 46, 0.4); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 演示提示小标签 |
|
|
|
.demo-tip { |
|
|
|
margin-top: 22px; |
|
|
|
text-align: center; |
|
|
|
font-size: 12px; |
|
|
|
color: #8b9a7a; |
|
|
|
background: #f2f6ec; |
|
|
|
padding: 8px 12px; |
|
|
|
border-radius: 100px; |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
span { |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
gap: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 底部footer样式 |
|
|
|
.el-login-footer { |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
font-family: Arial; |
|
|
|
padding: 12px; |
|
|
|
color: rgba(255,255,240,0.9); |
|
|
|
font-size: 12px; |
|
|
|
letter-spacing: 1px; |
|
|
|
background: rgba(0,0,0,0.2); |
|
|
|
backdrop-filter: blur(4px); |
|
|
|
z-index: 2; |
|
|
|
font-family: monospace; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 动画 |
|
|
|
@keyframes float { |
|
|
|
0% { transform: translateY(0px); } |
|
|
|
50% { transform: translateY(-12px); } |
|
|
|
100% { transform: translateY(0px); } |
|
|
|
} |
|
|
|
@keyframes drift { |
|
|
|
0% { transform: translateX(0); } |
|
|
|
100% { transform: translateX(80px); } |
|
|
|
} |
|
|
|
@keyframes bounce { |
|
|
|
0%,100%{ transform: translateY(0); } |
|
|
|
50%{ transform: translateY(-8px); } |
|
|
|
} |
|
|
|
@keyframes gentleSwing { |
|
|
|
0%,100%{ transform: rotate(0deg); } |
|
|
|
50%{ transform: rotate(6deg); } |
|
|
|
} |
|
|
|
|
|
|
|
// 响应式 |
|
|
|
@media (max-width: 500px) { |
|
|
|
.login .login-form { |
|
|
|
width: 88%; |
|
|
|
padding: 30px 20px; |
|
|
|
} |
|
|
|
.bg-decorations .cattle-icon { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.cloud1, .cloud2 { |
|
|
|
opacity: 0.6; |
|
|
|
} |
|
|
|
.login-code-img { |
|
|
|
height: 38px; |
|
|
|
} |
|
|
|
</style> |
ZhaoYang
4 days ago