Skip to content

D
dizhen-ui
Commit ac2b9088 by cat
Options

zd

parent 4e25153b
Showing with 253 additions and 66 deletions
.env 0 → 100644
# 环境变量配置文件
# 所有环境通用配置
# 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台
# API基础路径
VUE_APP_BASE_API=/dev-api
.env.development
# 页面标题
VUE_APP_TITLE = 系统
# 开发环境配置
ENV = 'development'
NODE_ENV=development
# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# API基础路径
VUE_APP_BASE_API=/dev-api
.env.production
# 页面标题
VUE_APP_TITLE = 系统
# 生产环境配置
ENV = 'production'
NODE_ENV=production
# 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台
# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'
# API基础路径
VUE_APP_BASE_API=/prod-api
.env.staging
# 页面标题
VUE_APP_TITLE = 系统
# 预发布环境配置
NODE_ENV=production
BABEL_ENV = production
# 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台(预发布)
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'
# API基础路径
VUE_APP_BASE_API=/stage-api
public/index.html
......@@ -201,7 +201,7 @@
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
<div class="load_title">正在加载地震资料处理数字化验收支持平台资源，请耐心等待</div>
</div>
</div>
</body>
......
src/layout/components/Sidebar/Logo.vue
......@@ -6,15 +6,16 @@
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">验收支持平台 </h1>
<!-- <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> -->
</router-link>
</transition>
</div>
</template>
<script>
import logoImg from '@/assets/logo/logo.png'
// import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'
export default {
......@@ -36,7 +37,7 @@ export default {
data() {
return {
title: process.env.VUE_APP_TITLE,
logo: logoImg
// logo: logoImg
}
}
}
......
src/views/login.vue
......@@ -13,16 +13,18 @@
<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%"
<el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
<div class="captcha-container">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码"
@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>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin">
......@@ -53,8 +55,8 @@ export default {
title: process.env.VUE_APP_TITLE,
codeUrl: "",
loginForm: {
username: "admin",
password: "admin123",
username: "",
password: "",
rememberMe: false,
code: "",
uuid: ""
......@@ -69,7 +71,7 @@ export default {
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])\S{6,20}$/,
message:
'用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号',
trigger: 'blur',
trigger: ['blur', 'change'],
},
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
......@@ -147,70 +149,216 @@ export default {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
height: 100vh;
background-image: url("../assets/images/login-background.jpeg");
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
// 添加渐变遮罩层
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(111, 111, 111, 0.20) );
z-index: 0;
}
}
.title {
margin: 0px auto 30px auto;
margin: 0px auto 20px auto;
text-align: center;
color: #707070;
color: #ebebeb;
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 480px;
padding: 25px 35px 20px 35px;
z-index: 1;
position: relative;
margin-left: 600px;
.el-input {
height: 38px;
height: 50px;
margin-bottom: 10px;
input {
height: 38px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
color: #2c3e50;
font-size: 14px;
padding-left: 45px;
transition: all 0.3s ease;
&:focus {
background: rgba(255, 255, 255, 1);
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
&::placeholder {
color: #a0a0a0;
}
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
height: 20px;
width: 20px;
margin-left: 10;
color: #7f8c8d;
z-index: 2;
}
.el-form-item {
margin-bottom: 12px;
}
.el-checkbox {
margin-bottom: 15px;
.el-checkbox__label {
color: #2c3e50;
font-size: 14px;
}
}
.el-button {
height: 50px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
border: none;
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
}
&:active {
transform: translateY(0);
}
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
.captcha-container {
display: flex;
align-items: stretch;
gap: 10px;
height: 50px;
}
.captcha-item {
.el-input {
flex: 1;
margin-bottom: 0;
height: 50px;
input {
height: 50px;
line-height: 50px;
}
}
}
.login-code {
width: 33%;
height: 38px;
float: right;
width: 120px;
height: 50px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
img {
cursor: pointer;
vertical-align: middle;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: all 0.3s ease;
&:hover {
transform: scale(1.05);
}
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
height: 50px;
line-height: 50px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
letter-spacing: 1px;
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1;
}
.login-code-img {
height: 38px;
height: 50px;
border-radius: 12px;
}
// 响应式设计
@media (max-width: 768px) {
.login-form {
width: 90%;
max-width: 420px;
padding: 25px 20px 20px 20px;
}
.title {
font-size: 20px;
margin-bottom: 20px;
}
}
.el-input__icon{
height: 50px !important;
margin-left: 10px !important;
}
// 添加一些动画效果
.login-form {
animation: slideInUp 0.8s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
src/views/system/user/index.vue
......@@ -330,8 +330,13 @@ export default {
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
{ min: 6, max: 20, message: '用户密码长度必须介于 6 和 20 之间', trigger: 'blur' },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
{
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])\S{6,20}$/,
message: '用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号',
trigger: ['blur', 'change'],
}
],
email: [
{
......
src/views/ysqqXmxx/ysgc/index.vue
......@@ -327,8 +327,40 @@ export default {
return {
backgroundColor: this.compact ? '#f2f2f2' : '#ffffff',
grid: this.compact ? { top: 6, left: 6, right: 6, bottom: 6, containLabel: false } : { top: 40, left: 50, right: 40, bottom: 50, containLabel: true },
xAxis: this.compact ? { type: 'value', min: this.xMin, max: this.xMax, scale: true, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } } : { type: 'value', min: this.xMin, max: this.xMax, scale: false, axisLine: { show: true }, axisTick: { show: true }, axisLabel: { color: '#666' }, splitLine: { show: true, lineStyle: { color: '#9bb3e7', opacity: 0.6 } } },
yAxis: this.compact ? { type: 'value', min: this.yMin, max: this.yMax, scale: true, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } } : { type: 'value', min: this.yMin, max: this.yMax, scale: false, axisLine: { show: true }, axisTick: { show: true }, axisLabel: { color: '#666' }, splitLine: { show: true, lineStyle: { color: '#9bb3e7', opacity: 0.6 } } },
xAxis: this.compact ? {
type: 'value',
min: this.xMin,
max: this.xMax,
scale: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#e0e0e0',
opacity: 0.8,
width: 1
}
}
} : { type: 'value', min: this.xMin, max: this.xMax, scale: false, axisLine: { show: true }, axisTick: { show: true }, axisLabel: { color: '#666' }, splitLine: { show: true, lineStyle: { color: '#9bb3e7', opacity: 0.6 } } },
yAxis: this.compact ? {
type: 'value',
min: this.yMin,
max: this.yMax,
scale: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#e0e0e0',
opacity: 0.8,
width: 1
}
}
} : { type: 'value', min: this.yMin, max: this.yMax, scale: false, axisLine: { show: true }, axisTick: { show: true }, axisLabel: { color: '#666' }, splitLine: { show: true, lineStyle: { color: '#9bb3e7', opacity: 0.6 } } },
series,
tooltip: { trigger: 'item' }
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment