This commit is contained in:
刘玉霞 2024-06-19 16:32:11 +08:00
parent 244a14674b
commit 681b80215e
10 changed files with 129 additions and 56 deletions

View File

@ -3,3 +3,4 @@ VITE_PORT = 1818
# open 运行 npm run dev 时自动打开浏览器 # open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false VITE_OPEN = false

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -26,7 +26,7 @@ export const useConfig = defineStore(
// 侧边菜单激活项背景色 // 侧边菜单激活项背景色
menuActiveBackground: ['#ffffff', '#1d1e1f'], menuActiveBackground: ['#ffffff', '#1d1e1f'],
// 侧边菜单激活项文字色 // 侧边菜单激活项文字色
menuActiveColor: ['#409eff', '#3375b9'], menuActiveColor: ['#0064AA', '#3375b9'],
// 侧边菜单顶栏背景色 // 侧边菜单顶栏背景色
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'], menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
// 侧边菜单宽度(展开时)单位px // 侧边菜单宽度(展开时)单位px

View File

@ -28,6 +28,7 @@ body,
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
// --el-color-primary: #0064AA
} }
// 阿里 iconfont Symbol引用css // 阿里 iconfont Symbol引用css
@ -42,9 +43,11 @@ body,
.w100 { .w100 {
width: 100% !important; width: 100% !important;
} }
.h100 { .h100 {
height: 100% !important; height: 100% !important;
} }
.ba-center { .ba-center {
display: flex; display: flex;
align-items: center; align-items: center;
@ -54,6 +57,7 @@ body,
.default-main { .default-main {
margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space); margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
} }
.zoom-handle { .zoom-handle {
position: absolute; position: absolute;
width: 20px; width: 20px;
@ -62,6 +66,7 @@ body,
right: -10px; right: -10px;
cursor: se-resize; cursor: se-resize;
} }
.block-help { .block-help {
display: block; display: block;
width: 100%; width: 100%;
@ -77,16 +82,19 @@ body,
font-size: 14px !important; font-size: 14px !important;
color: var(--el-color-white) !important; color: var(--el-color-white) !important;
} }
.el-button.is-disabled .icon { .el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important; color: var(--el-button-disabled-text-color) !important;
} }
} }
/* 表格顶部菜单-e */ /* 表格顶部菜单-e */
/* 鼠标置入浮动效果-s */ /* 鼠标置入浮动效果-s */
.suspension { .suspension {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.suspension:hover { .suspension:hover {
-webkit-transform: translateY(-4px) scale(1.02); -webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02); -moz-transform: translateY(-4px) scale(1.02);
@ -98,12 +106,14 @@ body,
z-index: 999; z-index: 999;
border-radius: 6px; border-radius: 6px;
} }
/* 鼠标置入浮动效果-e */ /* 鼠标置入浮动效果-e */
/* 表格-s */ /* 表格-s */
.ba-table-box { .ba-table-box {
border-radius: var(--el-border-radius-round); border-radius: var(--el-border-radius-round);
} }
.ba-table-alert { .ba-table-alert {
background-color: var(--el-fill-color-darker) !important; background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color); border: 1px solid var(--ba-boder-color);
@ -111,6 +121,7 @@ body,
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
/* 表格-e */ /* 表格-e */
/* 新增/编辑表单-s */ /* 新增/编辑表单-s */
@ -119,15 +130,19 @@ body,
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
padding-bottom: 52px; padding-bottom: 52px;
} }
.ba-operate-dialog .el-dialog__header { .ba-operate-dialog .el-dialog__header {
border-bottom: 1px solid var(--ba-bg-color); border-bottom: 1px solid var(--ba-bg-color);
.el-dialog__headerbtn { .el-dialog__headerbtn {
top: 4px; top: 4px;
} }
} }
.ba-operate-dialog .el-dialog__body { .ba-operate-dialog .el-dialog__body {
height: 58vh; height: 58vh;
} }
.ba-operate-dialog .el-dialog__footer { .ba-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary); padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow); box-shadow: var(--el-box-shadow);
@ -136,9 +151,11 @@ body,
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.ba-operate-form { .ba-operate-form {
padding-top: 20px; padding-top: 20px;
} }
/* 新增/编辑表单-e */ /* 新增/编辑表单-e */
/* 全局遮罩-s */ /* 全局遮罩-s */
@ -151,6 +168,7 @@ body,
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 9999990; z-index: 9999990;
} }
/* 全局遮罩-e */ /* 全局遮罩-e */
/* 图片上传预览-s */ /* 图片上传预览-s */
@ -158,10 +176,12 @@ body,
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img { img {
max-width: 100%; max-width: 100%;
} }
} }
/* 图片上传预览-e */ /* 图片上传预览-e */
/* 页面切换动画-s */ /* 页面切换动画-s */
@ -172,54 +192,66 @@ body,
will-change: transform; will-change: transform;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
// slide-right // slide-right
.slide-right-enter-from { .slide-right-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-20px); transform: translateX(-20px);
} }
.slide-right-leave-to { .slide-right-leave-to {
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(20px);
} }
// slide-left // slide-left
.slide-left-enter-from { .slide-left-enter-from {
@extend .slide-right-leave-to; @extend .slide-right-leave-to;
} }
.slide-left-leave-to { .slide-left-leave-to {
@extend .slide-right-enter-from; @extend .slide-right-enter-from;
} }
/* 页面切换动画-e */ /* 页面切换动画-e */
/* 布局相关-s */ /* 布局相关-s */
.frontend-footer-brother { .frontend-footer-brother {
min-height: calc(100vh - 120px); min-height: calc(100vh - 120px);
} }
.user-views { .user-views {
padding-left: 15px; padding-left: 15px;
.user-views-card { .user-views-card {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.ba-aside-drawer { .ba-aside-drawer {
.el-drawer__body { .el-drawer__body {
padding: 0; padding: 0;
} }
} }
/* 布局相关-e */ /* 布局相关-e */
/* 暗黑模式公共样式-s */ /* 暗黑模式公共样式-s */
.ba-icon-dark { .ba-icon-dark {
color: var(--el-text-color-primary) !important; color: var(--el-text-color-primary) !important;
} }
/* 暗黑模式公共样式-e */ /* 暗黑模式公共样式-e */
/* NProgress-s */ /* NProgress-s */
#nprogress { #nprogress {
.bar, .bar,
.spinner { .spinner {
z-index: 999999; z-index: 999999;
} }
} }
/* NProgress-e */ /* NProgress-e */
/* 自适应-s */ /* 自适应-s */
@ -228,14 +260,17 @@ body,
display: none; display: none;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.ba-operate-dialog { .ba-operate-dialog {
width: 96%; width: 96%;
} }
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.user-views { .user-views {
padding: 0; padding: 0;
} }
} }
/* 自适应-e */ /* 自适应-e */

View File

@ -5,49 +5,60 @@
z-index: 9990; z-index: 9990;
background-color: var(--ba-bg-color); background-color: var(--ba-bg-color);
} }
.block-loading .block-loading-box { .block-loading .block-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.block-loading .block-loading-box-warp { .block-loading .block-loading-box-warp {
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.block-loading .block-loading-box-warp .block-loading-box-item { .block-loading .block-loading-box-warp .block-loading-box-item {
width: 33.333333%; width: 33.333333%;
height: 33.333333%; height: 33.333333%;
background: #409eff; background: #0064AA;
float: left; float: left;
animation: block-loading-animation 1.2s infinite ease; animation: block-loading-animation 1.2s infinite ease;
border-radius: 1px; border-radius: 1px;
} }
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) { .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
animation-delay: 0s; animation-delay: 0s;
} }
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) { .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
animation-delay: 0.1s; animation-delay: 0.1s;
} }
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) { .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2), .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) { .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) { .block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
animation-delay: 0.4s; animation-delay: 0.4s;
} }
@keyframes block-loading-animation { @keyframes block-loading-animation {
0%, 0%,
70%, 70%,
100% { 100% {
transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1);
} }
35% { 35% {
transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1);
} }

View File

@ -1,25 +1,28 @@
@use 'sass:map'; @use 'sass:map';
@use 'mixins' as *; @use 'mixins' as *;
$colors: (
) !default;
$colors: map.deep-merge(('primary': ('base': #0064AA)),
$colors
);
// 后台主体窗口左右间距 // 后台主体窗口左右间距
$main-space: 16px; $main-space: 16px;
$primary-light: #3f6ad8; $primary-light: #3f6ad8;
// --ba-background // --ba-background
$bg-color: () !default; $bg-color: (
$bg-color: map.merge( ) !default;
( $bg-color: map.merge(('': #f5f5f5,
'': #f5f5f5,
'overlay': #ffffff, 'overlay': #ffffff,
), ),
$bg-color $bg-color
); );
// --ba-border-color // --ba-border-color
$border-color: () !default; $border-color: (
$border-color: map.merge( ) !default;
( $border-color: map.merge(('': #f6f6f6,
'': #f6f6f6,
), ),
$border-color $border-color
); );

View File

@ -161,6 +161,12 @@ function createAxios<Data = any, T = ApiPromise<Data>>(axiosConfig: AxiosRequest
// if (response.data.code == 302) { // if (response.data.code == 302) {
// router.push({ path: response.data.data.routePath ?? '', name: response.data.data.routeName ?? '' }) // router.push({ path: response.data.data.routePath ?? '', name: response.data.data.routeName ?? '' })
// } // }
if (response.data.code == 400) {
let routerPath = adminBaseRoute.path
userInfo.removeToken()
routerPath += '/login'
router.push({ path: routerPath })
}
if (response.data.code == 401) { if (response.data.code == 401) {
let routerPath = adminBaseRoute.path let routerPath = adminBaseRoute.path
userInfo.removeToken() userInfo.removeToken()

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="login-div">
<div class="switch-language"> <!-- <div class="switch-language">
<el-dropdown size="large" :hide-timeout="50" placement="bottom-end" :hide-on-click="true"> <el-dropdown size="large" :hide-timeout="50" placement="bottom-end" :hide-on-click="true">
<Icon name="fa fa-globe" color="var(--el-text-color-secondary)" size="28" /> <Icon name="fa fa-globe" color="var(--el-text-color-secondary)" size="28" />
<template #dropdown> <template #dropdown>
@ -11,17 +11,17 @@
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div> -->
<div @contextmenu.stop="" id="bubble" class="bubble"> <div @contextmenu.stop="" id="bubble" class="bubble">
<canvas id="bubble-canvas" class="bubble-canvas"></canvas> <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
</div> </div>
<div class="login"> <div class="login">
<div class="login-box"> <div class="login-box">
<div class="head">
<img src="~assets/login-header.png" alt="" />
</div>
<div class="form"> <div class="form">
<img class="profile-avatar" :src="fullUrl('/static/images/avatar.png')" alt="" /> <div class="title">
<div class="title1">欢迎使用润阳风电场系统</div>
<div class="title2">一站式数据采集平台</div>
</div>
<div class="content"> <div class="content">
<el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form"> <el-form @keyup.enter="onSubmitPre()" ref="formRef" :rules="rules" size="large" :model="form">
<el-form-item prop="username"> <el-form-item prop="username">
@ -204,12 +204,14 @@ const onSubmit = () => {
}) })
.finally(() => { .finally(() => {
state.submitLoading = false state.submitLoading = false
load() // load()
}) })
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.login-div {
}
.switch-language { .switch-language {
position: fixed; position: fixed;
top: 20px; top: 20px;
@ -218,7 +220,9 @@ const onSubmit = () => {
} }
.bubble { .bubble {
overflow: hidden; overflow: hidden;
background: url(/@/assets/bg.jpg) repeat; width: 64%;
background: url(/@/assets/bg.png) no-repeat;
background-size: 100% 100%;
} }
.form-item-icon { .form-item-icon {
height: auto; height: auto;
@ -226,25 +230,36 @@ const onSubmit = () => {
.login { .login {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0;
display: flex; display: flex;
width: 100vw; width: 36%;
height: 100vh; height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.login-box { .login-box {
overflow: hidden; overflow: hidden;
width: 430px; width: 100%;
padding: 0; height: 100%;
background: var(--ba-bg-color-overlay); background: var(--ba-bg-color-overlay);
margin-bottom: 80px; display: flex;
align-items: center;
justify-content: center;
} }
.head { .title {
background: #ccccff; .title1 {
img { font-size: 36px;
display: block; color: #333333;
width: 430px; letter-spacing: 0;
margin: 0 auto; line-height: 36px;
user-select: none; font-weight: 600;
}
.title2 {
padding-top: 20px;
font-size: 24px;
color: #666666;
letter-spacing: 0;
line-height: 24px;
font-weight: 400;
} }
} }
.form { .form {
@ -262,26 +277,25 @@ const onSubmit = () => {
user-select: none; user-select: none;
} }
.content { .content {
padding: 100px 40px 40px 40px; padding: 100px 0;
} }
.submit-button { .submit-button {
width: 100%; width: 100%;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 300; font-weight: 300;
margin-top: 15px; margin-top: 15px;
--el-button-bg-color: var(--el-color-primary); // --el-button-bg-color: var(--el-color-primary);
} }
} }
} }
@media screen and (max-width: 720px) { @media screen and (max-width: 1370px) {
.login { .title {
display: flex; .title1 {
align-items: center; font-size: 30px !important;
justify-content: center; }
.login-box { .title2 {
width: 340px; font-size: 20px !important;
margin-top: 0;
} }
} }
} }

View File

@ -240,7 +240,7 @@ const onSubmit = () => {
.admin-info { .admin-info {
background-color: var(--ba-bg-color-overlay); background-color: var(--ba-bg-color-overlay);
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
border-top: 3px solid #409eff; border-top: 3px solid #0064aa;
.avatar-uploader { .avatar-uploader {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -21,6 +21,8 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
const createProxy = (proxyList: any) => { const createProxy = (proxyList: any) => {
const ret = {} as Record<string, ProxyOptions> const ret = {} as Record<string, ProxyOptions>
if (proxyList) {
proxyList = JSON.parse(proxyList)
for (const [prefix, target] of proxyList) { for (const [prefix, target] of proxyList) {
ret[prefix] = { ret[prefix] = {
target: target, target: target,
@ -28,6 +30,7 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
} }
} }
}
return ret return ret
} }
@ -51,7 +54,7 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
port: parseInt(VITE_PORT), port: parseInt(VITE_PORT),
open: VITE_OPEN != 'false', open: VITE_OPEN != 'false',
proxy: { proxy: {
...createProxy(JSON.parse(VITE_APP_PROXY)), ...createProxy(VITE_APP_PROXY),
}, },
}, },
build: { build: {