center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat:修改主题样式

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-03-08 11:09:46 +08:00
parent 64f78e9b9e
commit 708208d6d1
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/layout/components/Topbar.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div class="top-nav"> <div class="top-nav" :style="{'background-color': theme}">
<div class="log">DATA_EASE</div> <div class="log">DATA_EASE</div>
<el-menu <el-menu
:active-text-color="variables.menuActiveText" :active-text-color="variables.topMenuActiveText"
:default-active="activeMenu" :default-active="activeMenu"
mode="horizontal" mode="horizontal"
:style="{'background-color': theme}"
@select="handleSelect" @select="handleSelect"
> >
<div v-for="item in permission_routes" :key="item.path" class="nav-item"> <div v-for="item in permission_routes" :key="item.path" class="nav-item">
@ -80,6 +81,9 @@ export default {
} }
}, },
computed: { computed: {
theme() {
return this.$store.state.settings.theme
},
activeMenu() { activeMenu() {
const route = this.$route const route = this.$route
const { meta, path } = route const { meta, path } = route

12
frontend/src/styles/topbar.scss
View File

@ -2,7 +2,7 @@
// margin-left: $sideBarWidth; // margin-left: $sideBarWidth;
width: 100%; width: 100%;
// background-color: #304156; // background-color: #304156;
background-color: $--color-primary; // background-color: $--color-primary;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -22,7 +22,7 @@
float: left; float: left;
border: none!important; border: none!important;
// background-color: #304156; // background-color: #304156;
background-color: $--color-primary; // background-color: $--color-primary;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
@ -31,11 +31,17 @@
color: rgba(255,255,255,0.87); color: rgba(255,255,255,0.87);
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: $subMenuHover !important;
color: $subMenuActiveText !important;
} }
&:focus { &:focus {
background-color: $subMenuHover !important; background-color: $subMenuHover !important;
// color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
}
.is-active {
background-color: $subMenuHover !important;
color: $subMenuActiveText !important;
} }
} }
} }

5
frontend/src/styles/variables.scss
View File

@ -28,6 +28,7 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
// sidebar // sidebar
$menuText:#bfcbd9; $menuText:#bfcbd9;
$menuActiveText:#409EFF; $menuActiveText:#409EFF;
$topMenuActiveText:#f4f4f5;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
// $menuBg:#304156; // $menuBg:#304156;
@ -36,7 +37,8 @@ $menuBg:#ffffff;
$menuHover: rgba(158, 158, 158, 0.2); $menuHover: rgba(158, 158, 158, 0.2);
$subMenuBg:#1f2d3d; $subMenuBg:#1f2d3d;
$subMenuHover:#001528; // $subMenuHover:#001528;
$subMenuHover:#1682e6;
$sideBarWidth: 210px; $sideBarWidth: 210px;
$topBarHeight: 56px; $topBarHeight: 56px;
@ -48,6 +50,7 @@ $contentHeight: calc(100vh - 56px);
theme: $--color-primary; theme: $--color-primary;
menuText: $menuText; menuText: $menuText;
menuActiveText: $menuActiveText; menuActiveText: $menuActiveText;
topMenuActiveText: $topMenuActiveText;
subMenuActiveText: $subMenuActiveText; subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg; menuBg: $menuBg;
menuHover: $menuHover; menuHover: $menuHover;