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-04-29 19:58:58 +08:00
parent c2296f54de
commit b431f01c44
8 changed files with 111 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/index.scss
View File

@ -202,9 +202,6 @@ div:focus {
.w100 {
width: 100%;
}
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.pull-right {
float: right !important;

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

@ -1,9 +1,8 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $base-sidebar-width;
transition: margin-left 0.28s;
margin-left: var(--base-sidebar-width);
position: relative;
}
@ -38,10 +37,12 @@
}
}
}
// 折叠状态下
.el-menu--collapse {
[class^=el-icon] {
[class^='el-icon'] {
width: auto;
font-size: medium;
margin-right: 0;
}
.el-sub-menu {
& > .el-sub-menu__title {
@ -58,7 +59,7 @@
}
.el-menu--collapse .el-menu .el-sub-menu {
min-width: $base-sidebar-width !important;
min-width: var(--base-sidebar-width);
}
// mobile responsive
@ -68,21 +69,18 @@
}
.layout-sidebar__container {
transition: transform .28s;
width: $base-sidebar-width !important;
transition: transform 0.28s;
width: var(--base-sidebar-width) !important;
}
&.hideSidebar {
.layout-sidebar__container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0);
display: none;
}
}
}
.withoutAnimation {
.main-container,
.layout-sidebar__container {
transition: none;
@ -92,12 +90,11 @@
// when menu collapsed
.el-menu--vertical {
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $base-sub-menu-hover !important;
// 缩小状态下选中背景
// background-color: var(--base-sub-menu-hover) !important;
}
}

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

@ -1,69 +1,62 @@
// base color
$blue: #324157;
$light-blue: #3A71A8;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
// 默认菜单主题风格
:root {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #ffffff;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
--base-sidebar-width: 210px;
}
/***默认主题颜色配置***/
[data-theme='theme-light'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
// 菜单背景
--base-menu-background: #ffffff;
// logo部分文字颜色
--base-logo-title-color: #001529;
// 顶部导航栏背景色
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #ccc;
// el-ement ui 设置
}
/***深色主题颜色配置***/
[data-theme='theme-dark'] {
--base-menu-color: #bfcbd9;
--base-menu-color-active: #f4f4f5;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #ffffff;
//缩小状态下子菜单选中颜色
--base-sub-menu-hover: #000;
// el-ement ui 设置
--el-fill-color-blank: #304156;
--el-text-color-primary: #ffffff;
}
// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-logo-title-color: #ffffff;
$base-topBar-background: #ffffff;
$menuHover:#263445;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
//https://github.com/ElemeFE/element/issues/12951
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
$base-sidebar-width: 210px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
/* js中import， import variables from '@/assets/styles/variables.module.scss'
template中使用 eg：variables.menuColor
*/
:export {
menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color;
menuColorActive: $base-menu-color-active;
menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color;
// primaryColor: $--color-primary;
// successColor: $--color-success;
// dangerColor: $--color-danger;
// infoColor: $--color-info;
// warningColor: $--color-warning;
}
// :export {
// }

39
src/components/TopNav/index.vue
View File

@ -1,9 +1,9 @@
<template>
<el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
<el-menu :default-active="activeMenu" :active-text-color="theme" mode="horizontal" background-color="transparent" @select="handleSelect" :ellipsis="false">
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
<svg-icon :name="item.meta.icon" />
&nbsp;{{ item.meta.title }}
{{ item.meta.title }}
</el-menu-item>
</template>
@ -159,16 +159,16 @@ onMounted(() => {
</script>
<style lang="scss">
// .topmenu-container.el-menu--horizontal > .el-menu-item {
// float: left;
// height: 50px !important;
// line-height: 50px !important;
// color: #999093 !important;
// padding: 0 5px !important;
// margin: 0 10px !important;
// }
.el-menu--horizontal {
border-bottom: 0px !important;
// 修改默认样式
.topmenu-container.el-menu--horizontal > .el-menu-item {
height: 50px !important;
line-height: 50px !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
.el-menu--horizontal > .el-menu-item .svg-icon {
margin-right: 5px;
}
// .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
// .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
@ -177,12 +177,11 @@ onMounted(() => {
// }
/* sub-menu item */
// .topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {
// float: left;
// height: 50px !important;
// line-height: 50px !important;
// color: #999093 !important;
// padding: 0 5px !important;
// margin: 0 10px !important;
// }
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
height: 50px !important;
line-height: 50px !important;
color: #999093 !important;
padding: 0 5px !important;
margin: 0 10px !important;
}
</style>

4
src/layout/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="navbar">
<div class="navbar" :data-theme="sideTheme">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
@ -52,7 +52,7 @@ import Notice from '@/components/Notice/Index'
const store = useStore()
const getters = computed(() => store.getters)
const sideTheme = computed(() => store.state.settings.sideTheme)
function toggleSideBar() {
store.dispatch('app/toggleSideBar')
}

20
src/layout/components/Sidebar/Logo.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div class="sidebar-logo-container" :class="{ collapse: collapse }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
<h1 v-else class="sidebar-title">{{ title }}</h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<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">{{ title }}</h1>
</router-link>
</transition>
</div>
@ -20,13 +20,13 @@ import logo from '@/assets/logo/logo.png'
defineProps({
collapse: {
type: Boolean,
required: true
}
required: true,
},
})
const title = ref(import.meta.env.VITE_APP_TITLE);
const store = useStore();
const sideTheme = computed(() => store.state.settings.sideTheme);
const title = ref(import.meta.env.VITE_APP_TITLE)
const store = useStore()
const sideTheme = computed(() => store.state.settings.sideTheme)
</script>
<style lang="scss" scoped>
@ -44,7 +44,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
background: var(--base-menu-background);
text-align: center;
overflow: hidden;
@ -62,7 +62,7 @@ const sideTheme = computed(() => store.state.settings.sideTheme);
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
color: var(--base-logo-title-color);
font-weight: 600;
line-height: 50px;
font-size: 14px;

19
src/layout/components/Sidebar/index.vue
View File

@ -1,21 +1,15 @@
<template>
<div
:data-theme="sideTheme"
class="layout-sidebar__container"
:class="{ 'has-logo': showLogo }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
>
<div :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="theme"
:collapse-transition="false"
background-color="transparent"
mode="vertical"
>
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
@ -53,8 +47,8 @@ const activeMenu = computed(() => {
.layout-sidebar__container {
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
width: var(--base-sidebar-width);
background-color: var(--base-menu-background);
height: 100%;
position: fixed;
font-size: 0px;
@ -63,7 +57,8 @@ const activeMenu = computed(() => {
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
.scrollbar-wrapper {
overflow-x: hidden;
}
@ -102,7 +97,7 @@ const activeMenu = computed(() => {
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important;
min-width: var(--base-sidebar-width) !important;
// background-color: $base-menu-background !important;
&:hover {

2
src/layout/index.vue
View File

@ -88,7 +88,7 @@ function setLayout() {
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
width: calc(100% - var(--base-sidebar-width));
transition: width 0.28s;
}
.hideSidebar .fixed-header {