Teams/shgx_tz_mes_backend_sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

更改主题样式设置

Browse Source
This commit is contained in:
izory
2021-10-09 10:19:20 +08:00
parent 43a00c78be
commit 077e05ca36
7 changed files with 103 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ZR.Vue/src/layout/components/Sidebar/Logo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
<!-- <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo">
@@ -10,30 +10,48 @@
<h1 class="sidebar-title">{{ title }} </h1>
</router-link>
</transition>
</div> -->
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<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>
</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>
</router-link>
</transition>
</div>
</template>
<script>
import logoImg from '@/assets/logo/logo.png'
import logoImg from "@/assets/logo/logo.png";
import variables from "@/assets/styles/variables.scss";
export default {
name: 'SidebarLogo',
name: "SidebarLogo",
props: {
collapse: {
type: Boolean,
required: true
}
required: true,
},
},
computed: {
variables() {
return variables;
},
sideTheme() {
return this.$store.state.settings.sideTheme;
},
},
data() {
return {
title: 'ZrAdmin.NET',
logo: logoImg
}
},
mounted(){
// this.title = this.$store.getters.name;
title: "ZrAdmin.NET",
logo: logoImg,
};
}
}
};
</script>
<style lang="scss" scoped>

7
ZR.Vue/src/layout/components/Sidebar/index.vue
View File

@@ -1,8 +1,9 @@
<template>
<div :class="{'has-logo':showLogo}">
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
<sidebar-item v-for="(route, index) in permission_routes" :key="route.path + index" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>