jlzhou
/
base-project
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

update 重写管理端默认效果

Browse Source
master
管理员 8 months ago
parent e97bf21780
commit 7090c6e4c7
8 changed files with 144 additions and 32 deletions
Show Stats Download Patch File Download Diff File

4
admin-ui/.env
Unescape Escape View File

@ -1,6 +1,6 @@
# 页面标题 # 页面标题
VITE_APP_TITLE = 某某系统 VITE_APP_TITLE = 管理中心
VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved. VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved.
VITE_APP_COLOR = #257fbd VITE_APP_COLOR = "#fd4772"

43
admin-ui/src/assets/css/login.scss
Unescape Escape View File

@ -11,7 +11,7 @@ body {
--left-img: url(../images/login.png); --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%; width: 100%;
height: 100%; height: 100%;
font-size: var(--size); font-size: var(--size);
@ -19,6 +19,17 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; 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 { &>.w-login-outer {
position: relative; position: relative;
@ -34,13 +45,24 @@ body {
box-shadow: 0 0 1em #0003; box-shadow: 0 0 1em #0003;
&> :first-child { &> :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; position: relative;
box-shadow: -.3em 0 .6em #0001 inset; 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; 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 { &::before {
position: absolute; position: absolute;
@ -49,12 +71,21 @@ body {
top: calc(50% - 2em); top: calc(50% - 2em);
box-shadow: -.3em .3em .6em #0001; box-shadow: -.3em .3em .6em #0001;
transform: scaleX(.8) rotate(45deg); transform: scaleX(.8) rotate(45deg);
z-index: 3;
width: 4em; width: 4em;
height: 4em; height: 4em;
content: ''; 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 { .w-login-form {

60
admin-ui/src/assets/styles/sidebar.scss
Unescape Escape View File

@ -8,7 +8,7 @@
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0 !important;
} }
.sidebar-container { .sidebar-container {
@ -24,9 +24,51 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; 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); // -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
// 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 // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; 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; width: 100% !important;
} }
.el-menu-item, .menu-title { .el-menu-item,
.menu-title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !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; 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, & .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
@ -147,6 +195,7 @@
} }
.el-menu--collapse { .el-menu--collapse {
.el-sub-menu { .el-sub-menu {
&>.el-sub-menu__title { &>.el-sub-menu__title {
&>span { &>span {
@ -156,6 +205,7 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
&>i { &>i {
height: 0; height: 0;
width: 0; width: 0;
@ -222,6 +272,7 @@
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
} }
@ -235,4 +286,7 @@
border-radius: 20px; border-radius: 20px;
} }
} }
} }

21
admin-ui/src/assets/styles/variables.module.scss
Unescape Escape View File

@ -9,17 +9,20 @@ $yellow: #FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color: #bfcbd9; $base-menu-color: #FFFC;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #FFFE;
$base-menu-background: hsl(210, 63%, 30%); // $base-menu-background: hsl(210, 63%, 30%);
$base-logo-title-color: #ffffff; // $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-color: #0009;
$base-menu-light-background: #ffffff; // $base-menu-light-background: #F1F1F1;
$base-logo-light-title-color: #001529; $base-menu-light-background: #0000;
$base-logo-light-title-color: #000C;
$base-sub-menu-background: hsl(210, 63%, 25%); $base-sub-menu-background: #0006;
$base-sub-menu-hover: hsl(210, 63%, 20%); $base-sub-menu-hover: #0001;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**

17
admin-ui/src/layout/components/Sidebar/index.vue
Unescape Escape View File

@ -1,15 +1,26 @@
<template> <template>
<div style="box-shadow: 0 0 .5rem #0001;" :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div style="box-shadow: 0 0 .5rem #0001;" :class="[showLogo?'has-logo':'no-logo',sideTheme]" :style="{ backgroundColor: sideTheme === 'theme-dark' ? 'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))' : 'var(--admin-menu-bg-light,hsl(206, 97%, 96%))' }">
<svg style="display: none;">
<defs>
<filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse">
<feTurbulence type="turbulence" baseFrequency="1 1" numOctaves="100" seed="100" stitchTiles="stitch"
x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
</filter>
</defs>
</svg>
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :background-color="sideTheme === 'theme-dark' && isCollapse?'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))':'#0000'"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true" :unique-opened="true"
:active-text-color="theme" :active-text-color="theme"
:collapse-transition="false" :collapse-transition="true"
mode="vertical" mode="vertical"
> >
<sidebar-item <sidebar-item

2
admin-ui/src/settings.js
Unescape Escape View File

@ -6,7 +6,7 @@ export default {
/** /**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
*/ */
sideTheme: 'theme-light', sideTheme: 'theme-dark',
/** /**
* 是否系统布局配置 * 是否系统布局配置
*/ */

25
admin-ui/src/views/login.vue
Unescape Escape View File

@ -1,8 +1,20 @@
<template> <template>
<div class="w-login-content"> <div class="w-login-content">
<svg style="display: none;">
<defs>
<filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse">
<feTurbulence type="turbulence" baseFrequency=".1 .1" numOctaves="100" seed="100" stitchTiles="stitch"
x="-100%" y="-100%" width="300%" height="300%" result="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
</filter>
</defs>
</svg>
<div class="w-login-outer"> <div class="w-login-outer">
<div></div> <div>
</div>
<div class="w-login-form"> <div class="w-login-form">
<div>你好!<br />欢迎登录{{ title }}</div> <div>你好!<br />欢迎登录{{ title }}</div>
<div><input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" /></div> <div><input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" /></div>
@ -22,10 +34,10 @@
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="text-align: right; position: absolute; top: 0; right: 1rem;"><el-link :underline="false" type="primary" href="/bi/">展示大屏</el-link></div>
<div class="copy">{{ copy }} </div> <div class="copy">{{ copy }} </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -44,6 +56,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
const title = import.meta.env.VITE_APP_TITLE; const title = import.meta.env.VITE_APP_TITLE;
const copy = import.meta.env.VITE_APP_COPY; const copy = import.meta.env.VITE_APP_COPY;
const color = import.meta.env.VITE_APP_COLOR; const color = import.meta.env.VITE_APP_COLOR;
console.debug("login", title, copy, color);
onMounted(() => { onMounted(() => {
useSettingsStore().title = "登录" useSettingsStore().title = "登录"
@ -97,16 +110,16 @@ function login() {
} }
function handleLogin() { function handleLogin() {
if(!loginForm.value.username){ if (!loginForm.value.username) {
ElMessage.error("请输入帐号"); ElMessage.error("请输入帐号");
return; return;
} }
if(!loginForm.value.password){ if (!loginForm.value.password) {
ElMessage.error("请输入帐号"); ElMessage.error("请输入帐号");
return; return;
} }
if(captchaEnabled.value){ if (captchaEnabled.value) {
if(!loginForm.value.code) { if (!loginForm.value.code) {
ElMessage.error("请输入验证码"); ElMessage.error("请输入验证码");
return; return;
} }

2
admin-ui/vite.config.mjs
Unescape Escape View File

@ -49,7 +49,7 @@ export default defineConfig(({ mode, command }) => {
changeOrigin: true changeOrigin: true
}, },
'/files': { '/files': {
target: 'http://192.168.3.222:9000', target: 'http://192.168.3.56:9000',
changeOrigin: true changeOrigin: true
} }
} }

Write Preview
Loading…
Cancel
Save