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=地震资料处理数字化验收支持平台
# 路由懒加载 # API基础路径
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_APP_BASE_API=/dev-api
.env.production
# 页面标题
VUE_APP_TITLE = 系统
# 生产环境配置 # 生产环境配置
ENV = 'production' NODE_ENV=production
# 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台
# 若依管理系统/生产环境 # API基础路径
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API=/prod-api
.env.staging
# 页面标题 # 预发布环境配置
VUE_APP_TITLE = 系统 NODE_ENV=production
BABEL_ENV = production # 应用标题
VUE_APP_TITLE=地震资料处理数字化验收支持平台(预发布)
NODE_ENV = production # API基础路径
VUE_APP_BASE_API=/stage-api
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'
public/index.html
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div> <div class="load_title">正在加载地震资料处理数字化验收支持平台资源，请耐心等待</div>
</div> </div>
</div> </div>
</body> </body>
......
src/layout/components/Sidebar/Logo.vue
...@@ -6,15 +6,16 @@ ...@@ -6,15 +6,16 @@
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <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> </router-link>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import logoImg from '@/assets/logo/logo.png' // import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
...@@ -36,7 +37,7 @@ export default { ...@@ -36,7 +37,7 @@ export default {
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
logo: logoImg // logo: logoImg
} }
} }
} }
......
src/views/login.vue
...@@ -13,16 +13,18 @@ ...@@ -13,16 +13,18 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" <div class="captcha-container">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码"
@keyup.enter.native="handleLogin"> @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" /> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</div>
</el-form-item> </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-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin"> @click.native.prevent="handleLogin">
...@@ -53,8 +55,8 @@ export default { ...@@ -53,8 +55,8 @@ export default {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
codeUrl: "", codeUrl: "",
loginForm: { loginForm: {
username: "admin", username: "",
password: "admin123", password: "",
rememberMe: false, rememberMe: false,
code: "", code: "",
uuid: "" uuid: ""
...@@ -69,7 +71,7 @@ export default { ...@@ -69,7 +71,7 @@ export default {
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])\S{6,20}$/, pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])\S{6,20}$/,
message: message:
'用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号', '用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号',
trigger: 'blur', trigger: ['blur', 'change'],
}, },
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }] code: [{ required: true, trigger: "change", message: "请输入验证码" }]
...@@ -147,70 +149,216 @@ export default { ...@@ -147,70 +149,216 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100vh;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpeg");
background-size: cover; 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 { .title {
margin: 0px auto 30px auto; margin: 0px auto 20px auto;
text-align: center; text-align: center;
color: #707070; color: #ebebeb;
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 20px;
background: #ffffff; background: rgba(255, 255, 255, 0.15);
width: 400px; backdrop-filter: blur(20px);
padding: 25px 25px 5px 25px; -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; z-index: 1;
position: relative;
margin-left: 600px;
.el-input { .el-input {
height: 38px; height: 50px;
margin-bottom: 10px;
input { 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 { .input-icon {
height: 39px; height: 20px;
width: 14px; width: 20px;
margin-left: 2px; 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 { .captcha-container {
font-size: 13px; display: flex;
text-align: center; align-items: stretch;
color: #bfbfbf; gap: 10px;
height: 50px;
}
.captcha-item {
.el-input {
flex: 1;
margin-bottom: 0;
height: 50px;
input {
height: 50px;
line-height: 50px;
}
}
} }
.login-code { .login-code {
width: 33%; width: 120px;
height: 38px; height: 50px;
float: right; 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 { img {
cursor: pointer; 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 { .el-login-footer {
height: 40px; height: 50px;
line-height: 40px; line-height: 50px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: rgba(255, 255, 255, 0.8);
font-family: Arial; font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 12px; font-size: 13px;
letter-spacing: 1px; 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 { .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> </style>
src/views/system/user/index.vue
...@@ -330,8 +330,13 @@ export default { ...@@ -330,8 +330,13 @@ export default {
], ],
password: [ password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" }, { required: true, message: "用户密码不能为空", trigger: "blur" },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }, { min: 6, max: 20, message: '用户密码长度必须介于 6 和 20 之间', trigger: 'blur' },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" } { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
{
pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])\S{6,20}$/,
message: '用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号',
trigger: ['blur', 'change'],
}
], ],
email: [ email: [
{ {
......
src/views/ysqqXmxx/ysgc/index.vue
...@@ -327,8 +327,40 @@ export default { ...@@ -327,8 +327,40 @@ export default {
return { return {
backgroundColor: this.compact ? '#f2f2f2' : '#ffffff', 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 }, 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 } } }, xAxis: this.compact ? {
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 } } }, 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, series,
tooltip: { trigger: 'item' } 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