diff --git a/admin-ui/.env b/admin-ui/.env index bc8256e..b007229 100644 --- a/admin-ui/.env +++ b/admin-ui/.env @@ -1,6 +1,6 @@ # 页面标题 -VITE_APP_TITLE = 某某系统 +VITE_APP_TITLE = 管理中心 VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved. -VITE_APP_COLOR = #257fbd \ No newline at end of file +VITE_APP_COLOR = "#fd4772" \ No newline at end of file diff --git a/admin-ui/src/assets/css/login.scss b/admin-ui/src/assets/css/login.scss index e4b178f..7821263 100644 --- a/admin-ui/src/assets/css/login.scss +++ b/admin-ui/src/assets/css/login.scss @@ -11,7 +11,7 @@ body { --left-img: url(../images/login.png); - background-color: var(--bg); + background-image: linear-gradient(-25deg, #FFF0 30%, #FFF2 50%, #FFF0 70%), linear-gradient(to top, var(--bg),var(--bg)); width: 100%; height: 100%; font-size: var(--size); @@ -19,6 +19,17 @@ body { justify-content: center; align-items: center; overflow: hidden; + position: relative; + + &::before { + content: ''; + position: absolute; + inset: 0; + background-image: radial-gradient(circle, #0001 .1em, #0000 1em,#0000 100%); + background-size: 2em 2em; + filter: url(#WEffectNoiseBgFilter); + transform: scale(2); + } &>.w-login-outer { position: relative; @@ -34,13 +45,24 @@ body { box-shadow: 0 0 1em #0003; &> :first-child { - background-image: var(--left-img), linear-gradient(to bottom,var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3)); - background-size: 70% auto, 100% 100%; - background-position: center center; - background-repeat: no-repeat; + position: relative; box-shadow: -.3em 0 .6em #0001 inset; + background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%) ,linear-gradient(to bottom, var(--el-color-primary-light-9) 15%, var(--el-color-primary-light-8) 50%, var(--el-color-primary-light-3)); + background-size: 5px 5px, auto; overflow: hidden; + opacity: .85; + + &::after { + position: absolute; + inset: 0; + content:''; + background-image: var(--left-img); + background-size: 70% auto; + background-position: center; + background-repeat: no-repeat; + z-index: 2; + } &::before { position: absolute; @@ -49,12 +71,21 @@ body { top: calc(50% - 2em); box-shadow: -.3em .3em .6em #0001; transform: scaleX(.8) rotate(45deg); - + z-index: 3; width: 4em; height: 4em; content: ''; } + &>div { + position: absolute; + inset: 0; + z-index: 1; + background-color: #0000; + background-image: radial-gradient(circle, #FFFFFF16 1px, #FFF0 1px,#FFF0 100%); + background-size: 5px 5px; + } + } .w-login-form { diff --git a/admin-ui/src/assets/styles/sidebar.scss b/admin-ui/src/assets/styles/sidebar.scss index 0854934..cb32181 100644 --- a/admin-ui/src/assets/styles/sidebar.scss +++ b/admin-ui/src/assets/styles/sidebar.scss @@ -8,7 +8,7 @@ } .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } .sidebar-container { @@ -24,9 +24,51 @@ left: 0; z-index: 1001; overflow: hidden; + text-shadow: .1em .1em 0 #000; + + li { + position: relative; + + &::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + background-color: #0003; + width: 100%; + height: 0; + } + } + + &.theme-light { + text-shadow: .1em .1em 0 #FFF; + + li { + + &::before { + background-color: #FFF5; + } + } + } + // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); // box-shadow: 2px 0 6px rgba(0,21,41,.35); + &::before { + content: ''; + position: absolute; + inset: 0; + // background-color: red; + background-image: radial-gradient(circle, var(--noise-color, #FFFFFF06) .5rem, #0000 1rem, #0000 100%); + background-size: 2rem 2rem; + filter: url(#WEffectNoiseBgFilter); + transform: scale(2); + } + + &.theme-light::before { + --noise-color: #00000006; + } + // reset element-ui css .horizontal-collapse-transition { transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; @@ -70,7 +112,8 @@ width: 100% !important; } - .el-menu-item, .menu-title { + .el-menu-item, + .menu-title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; @@ -88,10 +131,15 @@ } } - & .theme-dark .is-active > .el-sub-menu__title { + & .theme-dark .is-active>.el-sub-menu__title { color: $base-menu-color-active !important; + } + // .el-menu-item.is-active { + // --el-menu-active-color: #FFF; + // } + & .nest-menu .el-sub-menu>.el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: $base-sidebar-width !important; @@ -147,6 +195,7 @@ } .el-menu--collapse { + .el-sub-menu { &>.el-sub-menu__title { &>span { @@ -156,6 +205,7 @@ visibility: hidden; display: inline-block; } + &>i { height: 0; width: 0; @@ -222,6 +272,7 @@ max-height: 100vh; overflow-y: auto; + &::-webkit-scrollbar-track-piece { background: #d3dce6; } @@ -235,4 +286,7 @@ border-radius: 20px; } } -} + + + +} \ No newline at end of file diff --git a/admin-ui/src/assets/styles/variables.module.scss b/admin-ui/src/assets/styles/variables.module.scss index 4f92c7b..356c301 100644 --- a/admin-ui/src/assets/styles/variables.module.scss +++ b/admin-ui/src/assets/styles/variables.module.scss @@ -9,17 +9,20 @@ $yellow: #FEC171; $panGreen: #30B08F; // 默认菜单主题风格 -$base-menu-color: #bfcbd9; -$base-menu-color-active: #f4f4f5; -$base-menu-background: hsl(210, 63%, 30%); -$base-logo-title-color: #ffffff; +$base-menu-color: #FFFC; +$base-menu-color-active: #FFFE; +// $base-menu-background: hsl(210, 63%, 30%); +// $base-menu-background: #222; +$base-menu-background: #0000; +$base-logo-title-color: #FFFE; -$base-menu-light-color: rgba(0, 0, 0, 0.7); -$base-menu-light-background: #ffffff; -$base-logo-light-title-color: #001529; +$base-menu-light-color: #0009; +// $base-menu-light-background: #F1F1F1; +$base-menu-light-background: #0000; +$base-logo-light-title-color: #000C; -$base-sub-menu-background: hsl(210, 63%, 25%); -$base-sub-menu-hover: hsl(210, 63%, 20%); +$base-sub-menu-background: #0006; +$base-sub-menu-hover: #0001; // 自定义暗色菜单风格 /** diff --git a/admin-ui/src/layout/components/Sidebar/index.vue b/admin-ui/src/layout/components/Sidebar/index.vue index 200d5bc..bf984a1 100644 --- a/admin-ui/src/layout/components/Sidebar/index.vue +++ b/admin-ui/src/layout/components/Sidebar/index.vue @@ -1,15 +1,26 @@ @@ -44,6 +56,7 @@ import { ElMessage, ElMessageBox } from "element-plus"; const title = import.meta.env.VITE_APP_TITLE; const copy = import.meta.env.VITE_APP_COPY; const color = import.meta.env.VITE_APP_COLOR; +console.debug("login", title, copy, color); onMounted(() => { useSettingsStore().title = "登录" @@ -97,16 +110,16 @@ function login() { } function handleLogin() { - if(!loginForm.value.username){ + if (!loginForm.value.username) { ElMessage.error("请输入帐号"); return; } - if(!loginForm.value.password){ + if (!loginForm.value.password) { ElMessage.error("请输入帐号"); return; } - if(captchaEnabled.value){ - if(!loginForm.value.code) { + if (captchaEnabled.value) { + if (!loginForm.value.code) { ElMessage.error("请输入验证码"); return; } diff --git a/admin-ui/vite.config.mjs b/admin-ui/vite.config.mjs index f23e018..906f96e 100644 --- a/admin-ui/vite.config.mjs +++ b/admin-ui/vite.config.mjs @@ -49,7 +49,7 @@ export default defineConfig(({ mode, command }) => { changeOrigin: true }, '/files': { - target: 'http://192.168.3.222:9000', + target: 'http://192.168.3.56:9000', changeOrigin: true } }