增加自定义皮肤功能 清理无用文件
This commit is contained in:
pixel
@@ -1,4 +1,4 @@
|
||||
<template>
|
||||
<template>
|
||||
<div class="router-history">
|
||||
<el-tabs
|
||||
v-model="activeValue"
|
||||
@@ -10,11 +10,14 @@
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in historys"
|
||||
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
||||
:key="name(item)"
|
||||
:label="item.meta.title"
|
||||
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
||||
:name="name(item)"
|
||||
:tab="item"
|
||||
/>
|
||||
class="gva-tab"
|
||||
>
|
||||
<span slot="label" :style="{color: activeColor}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!--自定义右键菜单html代码-->
|
||||
@@ -49,7 +52,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo']),
|
||||
...mapGetters('user', ['userInfo', 'activeColor']),
|
||||
defaultRouter() {
|
||||
return this.userInfo.authority.defaultRouter
|
||||
}
|
||||
@@ -108,7 +111,9 @@ export default {
|
||||
this.$bus.off('mobile')
|
||||
},
|
||||
methods: {
|
||||
|
||||
name(item) {
|
||||
return item.name + JSON.stringify(item.query) + JSON.stringify(item.params)
|
||||
},
|
||||
openContextMenu(e) {
|
||||
if (this.historys.length === 1 && this.$route.name === this.defaultRouter) {
|
||||
return false
|
||||
@@ -277,6 +282,19 @@ export default {
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.el-tabs__item .el-icon-close{
|
||||
color: initial !important;
|
||||
}
|
||||
.el-tabs__item .dot {
|
||||
content: "";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
.contextmenu li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="true"
|
||||
:default-active="active"
|
||||
:active-text-color="$store.getters['user/getSideMode'] === 'dark' ? '#1890ff' : '#1890ff'"
|
||||
:background-color="$store.getters['user/getSideMode'] === 'dark' ? '#191a23 ' : '#fff'"
|
||||
:background-color="backgroundColor"
|
||||
:active-text-color="activeColor"
|
||||
:text-color="textColor"
|
||||
class="el-menu-vertical"
|
||||
text-color="#999"
|
||||
unique-opened
|
||||
@select="selectMenuItem"
|
||||
>
|
||||
@@ -37,7 +37,26 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('router', ['asyncRouters'])
|
||||
...mapGetters('router', ['asyncRouters']),
|
||||
...mapGetters('user', ['baseColor', 'activeColor', 'sideMode']),
|
||||
backgroundColor() {
|
||||
if (this.sideMode === 'dark') {
|
||||
return '#191a23'
|
||||
} else if (this.sideMode === 'light') {
|
||||
return '#fff'
|
||||
} else {
|
||||
return this.sideMode
|
||||
}
|
||||
},
|
||||
textColor() {
|
||||
if (this.$store.getters['user/sideMode'] === 'dark') {
|
||||
return '#fff'
|
||||
} else if (this.$store.getters['user/sideMode'] === 'light') {
|
||||
return '#191a23'
|
||||
} else {
|
||||
return this.baseColor
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
@@ -83,6 +102,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.el-submenu__title,.el-menu-item{
|
||||
i{
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
.el-scrollbar {
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
|
||||
+21
-149
@@ -3,9 +3,9 @@
|
||||
<el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
|
||||
<el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()" />
|
||||
<el-aside class="main-cont main-left">
|
||||
<div class="tilte" :class="$store.getters['user/getSideMode']">
|
||||
<div class="tilte" :style="{background: backgroundColor}">
|
||||
<img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
|
||||
<h2 v-if="isSider" class="tit-text" :class="$store.getters['user/getSideMode']">{{ $GIN_VUE_ADMIN.appName }}</h2>
|
||||
<h2 v-if="isSider" class="tit-text" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</h2>
|
||||
</div>
|
||||
<Aside class="aside" />
|
||||
</el-aside>
|
||||
@@ -114,7 +114,25 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo']),
|
||||
...mapGetters('user', ['userInfo', 'sideMode', 'baseColor']),
|
||||
textColor() {
|
||||
if (this.$store.getters['user/sideMode'] === 'dark') {
|
||||
return '#fff'
|
||||
} else if (this.$store.getters['user/sideMode'] === 'light') {
|
||||
return '#191a23'
|
||||
} else {
|
||||
return this.baseColor
|
||||
}
|
||||
},
|
||||
backgroundColor() {
|
||||
if (this.sideMode === 'dark') {
|
||||
return '#191a23'
|
||||
} else if (this.sideMode === 'light') {
|
||||
return '#fff'
|
||||
} else {
|
||||
return this.sideMode
|
||||
}
|
||||
},
|
||||
title() {
|
||||
return this.$route.meta.title || '当前页面'
|
||||
},
|
||||
@@ -196,152 +214,6 @@ export default {
|
||||
<style lang="scss">
|
||||
@import '@/style/mobile.scss';
|
||||
|
||||
// $headerHigh: 52px;
|
||||
// $mainHight: 100vh;
|
||||
// .dropdown-group {
|
||||
// min-width: 100px;
|
||||
// }
|
||||
// .topfix {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// box-sizing: border-box;
|
||||
// z-index: 999;
|
||||
// }
|
||||
// .admin-box {
|
||||
// min-height: calc(100vh - 240px);
|
||||
// background-color: rgb(255, 255, 255);
|
||||
// margin-top: 100px;
|
||||
// }
|
||||
// .el-scrollbar__wrap {
|
||||
// padding-bottom: 17px;
|
||||
// }
|
||||
// .layout-cont {
|
||||
// .right-box {
|
||||
// text-align: center;
|
||||
// vertical-align: middle;
|
||||
// img {
|
||||
// vertical-align: middle;
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 6px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .header-cont {
|
||||
// height: $headerHigh !important;
|
||||
// background: #fff;
|
||||
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
// line-height: $headerHigh;
|
||||
// }
|
||||
// .main-cont {
|
||||
// .breadcrumb {
|
||||
// line-height: 48px;
|
||||
// display: inline-block;
|
||||
// padding: 0 24px;
|
||||
// // padding: 6px;
|
||||
// // border-bottom: 1px solid #eee;
|
||||
// }
|
||||
|
||||
// &.el-main {
|
||||
// overflow: auto;
|
||||
// background: #fff;
|
||||
// // padding: 0px 10px;
|
||||
// // background: #fff;
|
||||
// }
|
||||
// height: $mainHight !important;
|
||||
// overflow: visible;
|
||||
// position: relative;
|
||||
// .menu-total {
|
||||
// // z-index: 5;
|
||||
// // position: absolute;
|
||||
// // top: 10px;
|
||||
// // right: -35px;
|
||||
// margin-left: -10px;
|
||||
// float: left;
|
||||
// margin-top: 10px;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
// font-size: 30px;
|
||||
// // border: 0 solid #ffffff;
|
||||
// // border-radius: 50%;
|
||||
// // background: #fff;
|
||||
// }
|
||||
// .aside {
|
||||
// overflow: auto;
|
||||
// // background: #fff;
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// .el-menu-vertical {
|
||||
// height: calc(100vh - 64px) !important;
|
||||
// visibility: auto;
|
||||
// &:not(.el-menu--collapse) {
|
||||
// width: 220px;
|
||||
// }
|
||||
// }
|
||||
// .el-menu--collapse {
|
||||
// width: 54px;
|
||||
// li {
|
||||
// .el-tooltip,
|
||||
// .el-submenu__title {
|
||||
// padding: 0px 15px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// &.main-left {
|
||||
// width: auto !important;
|
||||
// }
|
||||
// &.main-right {
|
||||
// .admin-title {
|
||||
// float: left;
|
||||
// font-size: 16px;
|
||||
// vertical-align: middle;
|
||||
// margin-left: 20px;
|
||||
// img {
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// &.collapse {
|
||||
// width: 53px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .tilte {
|
||||
// background: #001529;
|
||||
// min-height: 64px;
|
||||
// line-height: 64px;
|
||||
// background: #002140;
|
||||
// text-align: center;
|
||||
// .logoimg {
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// vertical-align: middle;
|
||||
// background: #fff;
|
||||
// border-radius: 50%;
|
||||
// padding: 3px;
|
||||
// }
|
||||
// .tit-text {
|
||||
// display: inline-block;
|
||||
// color: #fff;
|
||||
// font-weight: 600;
|
||||
// font-size: 20px;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .screenfull {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// .header-avatar{
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
.dark{
|
||||
background-color: #191a23 !important;
|
||||
color: #fff !important;
|
||||
|
||||
@@ -1,32 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawar" />
|
||||
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawer" />
|
||||
<el-drawer
|
||||
title="系统配置"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
title="系统配置"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="setting_body">
|
||||
<div class="setting_card">
|
||||
<div class="setting_title">侧边栏主题</div>
|
||||
<div class="setting_content">
|
||||
<div class="item" @click="chageMode('light')">
|
||||
<i v-if="sideMode === 'light'" class="el-icon-check check" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
|
||||
<div class="theme-box">
|
||||
<div class="item" @click="changeMode('light')">
|
||||
<i v-if="sideMode === 'light'" class="el-icon-check check" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
|
||||
</div>
|
||||
<div class="item" @click="changeMode('dark')">
|
||||
<i v-if="sideMode === 'dark'" class="el-icon-check check" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" @click="chageMode('dark')">
|
||||
<i v-if="sideMode === 'dark'" class="el-icon-check check" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
|
||||
<div class="color-box">
|
||||
<div>
|
||||
<div class="setting_title">自定义背景色</div>
|
||||
<el-color-picker :value="sideMode" @change="changeMode" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="setting_title">自定义基础色</div>
|
||||
<el-color-picker :value="baseColor" @change="changeBaseColor" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="setting_title">活跃色</div>
|
||||
<el-color-picker :value="activeColor" @change="activeColorChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="setting_card">-->
|
||||
<!-- <div class="setting_title">主题色</div>-->
|
||||
<!-- <div class="">-->
|
||||
<!-- <theme-change style="width: 30px;height: 30px;margin-top: 20px" @change="themeChange" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
@@ -34,31 +44,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import themeChange from '@/components/themeChange'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
sideMode: 'dark'
|
||||
direction: 'rtl'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
themeChange
|
||||
computed: {
|
||||
...mapGetters('user', ['sideMode', 'baseColor', 'activeColor'])
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.drawer = false
|
||||
},
|
||||
showSettingDrawar() {
|
||||
showSettingDrawer() {
|
||||
this.drawer = true
|
||||
},
|
||||
chageMode(e) {
|
||||
this.sideMode = e
|
||||
this.$store.dispatch('user/changeSideMode',e)
|
||||
changeMode(e) {
|
||||
if (e === null) {
|
||||
this.$store.dispatch('user/changeSideMode', 'dark')
|
||||
return
|
||||
}
|
||||
this.$store.dispatch('user/changeSideMode', e)
|
||||
},
|
||||
themeChange(val) {
|
||||
this.$store.dispatch('user/changeTheme', val)
|
||||
changeBaseColor(e) {
|
||||
if (e === null) {
|
||||
this.$store.dispatch('user/changeBaseColor', '#fff')
|
||||
return
|
||||
}
|
||||
this.$store.dispatch('user/changeBaseColor', e)
|
||||
},
|
||||
activeColorChange(e) {
|
||||
if (e === null) {
|
||||
this.$store.dispatch('user/changeActiveColor', '#1890ff')
|
||||
return
|
||||
}
|
||||
this.$store.dispatch('user/changeActiveColor', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -88,6 +111,16 @@ export default {
|
||||
.setting_content{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
>.theme-box{
|
||||
display: flex;
|
||||
}
|
||||
>.color-box{
|
||||
div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user