wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增侧边栏背景设置

Browse Source
This commit is contained in:
不做码农 2022-05-21 08:12:23 +08:00
parent 630960bf0c
commit 7086c5c336
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/sidebar.scss
View File

@ -1,7 +1,7 @@
#app { #app {
.layout-sidebar__container { .layout-sidebar__container {
transition: width 0.28s ease; transition: width 0.28s ease;
// background-color: var(--base-menu-background); background-color: var(--base-menu-background);
height: 100%; height: 100%;
position: relative; position: relative;
font-size: 0px; font-size: 0px;

13
src/assets/styles/variables.module.scss
View File

@ -34,20 +34,17 @@ $panGreen: #30b08f;
} }
/***深色主题颜色配置***/ /***深色主题颜色配置***/
[data-theme='theme-dark'] { [data-theme='theme-dark'] {
// --base-menu-background: #304156; --base-menu-background: #304156;
// --base-logo-title-color: #ffffff; --base-logo-title-color: #ffffff;
// --base-topBar-background: #ffffff;
// // el-ement ui 设置 // // el-ement ui 设置
// --el-fill-color-blank: #304156; // --el-fill-color-blank: #304156;
// --el-text-color-primary: #bfcbd9; --el-text-color-primary: #e5eaf3;
} }
html.dark { html.dark {
/* custom dark bg color */ /* custom dark bg color */
// --el-bg-color: #626aef; // --el-bg-color: #141414;
--base-color-white: #ffffff; --base-color-white: #ffffff;
--base-text-color-rgba: #fff; --base-text-color-rgba: #ffffff;
--base-menu-background: var(--el-bg-color);
} }
html.cafe { html.cafe {
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9); filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);

25
src/layout/components/Settings/index.vue
View File

@ -4,18 +4,18 @@
<h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3> <h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
</div> </div>
<div class="setting-drawer-block-checbox"> <div class="setting-drawer-block-checbox">
<!-- <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')"> <div class="item" @click="handleTheme('theme-dark')">
<img src="@/assets/images/dark.svg" alt="dark" /> <img src="@/assets/images/dark.svg" alt="dark" />
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block"> <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<el-icon><Check /></el-icon> <el-icon><Check /></el-icon>
</div> </div>
</div> </div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> <div class="item" @click="handleTheme('theme-light')">
<img src="@/assets/images/light.svg" alt="light" /> <img src="@/assets/images/light.svg" alt="light" />
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block"> <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
<el-icon><Check /></el-icon> <el-icon><Check /></el-icon>
</div> </div>
</div>--> </div>
</div> </div>
<div class="drawer-item"> <div class="drawer-item">
<el-radio-group v-model="mode" size="small"> <el-radio-group v-model="mode" size="small">
@ -193,14 +193,23 @@ watch(
() => sideTheme, () => sideTheme,
(val) => { (val) => {
const body = document.documentElement const body = document.documentElement
if (val.value == 'theme-black') { body.setAttribute('data-theme', '')
//body.setAttribute('data-theme', 'theme-black') },
} else { {
//body.setAttribute('data-theme', '') immediate: true,
},
)
watch(
() => mode,
(val) => {
console.log(val.value)
if (val.value === 'dark') {
handleTheme('')
} }
}, },
{ {
immediate: true, immediate: true,
deep: true,
}, },
) )
/** /**
@ -228,7 +237,7 @@ function handleTheme(val) {
sideTheme.value = val sideTheme.value = val
const body = document.documentElement const body = document.documentElement
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black') if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
else body.setAttribute('data-theme', '') else body.removeAttribute('data-theme')
} }
function saveSetting() { function saveSetting() {
proxy.$modal.loading('正在保存到本地，请稍候...') proxy.$modal.loading('正在保存到本地，请稍候...')