yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "新增网页侧边栏颜色配置，新增网页主题色配置"

Browse Source
This commit is contained in:
奇淼（piexlmax
2021-06-27 16:29:24 +08:00
committed by GitHub
parent 440e13a07b
commit 16cbb7a03e
17 changed files with 284 additions and 9955 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/layout/aside/historyComponent/history.vue
+5 -20
View File
@@ -9,12 +9,11 @@
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(item , index) in historys"
v-for="item in historys"
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:label="item.meta.title"
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
:tab="item"
:style="'z-index:'+index"
/>
</el-tabs>
@@ -24,7 +23,6 @@
<li @click="closeLeft">关闭左侧</li>
<li @click="closeRight">关闭右侧</li>
<li @click="closeOther">关闭其他</li>
<li v-if="activeValue" @click="reload">重新加载</li>
</ul>
</div>
</template>
@@ -259,9 +257,6 @@ export default {
}
}
this.historys.splice(index, 1)
},
reload() {
this.$bus.$emit('reload')
}
}
}
@@ -271,9 +266,8 @@ export default {
.contextmenu {
width: 100px;
margin: 0;
border: 1px solid rgba(160, 156, 156, 0.2);
background: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
border: 1px solid #ccc;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
@@ -281,23 +275,14 @@ export default {
border-radius: 4px;
font-size: 14px;
color: #333;
box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
}
.contextmenu li:hover {
color: #1890ff;
background: #f2f2f2;
cursor: pointer;
}
.el-tabs__item{
-webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
-webkit-mask-size: 100% 100%;
&.is-closable:hover{
background: #dee1e6;
}
}
</style>
web/src/view/layout/aside/index.vue
+2 -13
View File
@@ -6,9 +6,9 @@
:collapse="isCollapse"
:collapse-transition="true"
:default-active="active"
active-text-color="#fff"
class="el-menu-vertical"
:background-color="$store.getters['app/getSIdeMode'] === 'light' ? '#fff' : '#111'"
text-color="#777"
text-color="rgb(191, 203, 217)"
unique-opened
@select="selectMenuItem"
>
@@ -95,15 +95,4 @@ export default {
vertical-align: middle;
}
}
.el-menu-item {
background-color: #fff;
height: 44px;
line-height: 44px;
color: #000;
&.is-active{
background-color: #e6f7ff ;
border-right: 4px solid ;
color: #1890ff ;
}
}
</style>
web/src/view/layout/index.vue
+149 -13
View File
@@ -3,7 +3,7 @@
<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['app/getSIdeMode']">
<div class="tilte">
<img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
<h2 v-if="isSider" class="tit-text">{{ $GIN_VUE_ADMIN.appName }}</h2>
</div>
@@ -74,9 +74,9 @@
<router-view v-if="!$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
</transition>
<BottomInfo />
<setting />
</el-main>
</el-container>
</el-container>
</template>
@@ -88,7 +88,6 @@ import Search from '@/view/layout/search/search'
import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
import { mapGetters, mapActions } from 'vuex'
import CustomPic from '@/components/customPic'
import Setting from './setting'
export default {
name: 'Layout',
components: {
@@ -97,8 +96,7 @@ export default {
Screenfull,
Search,
BottomInfo,
CustomPic,
Setting
CustomPic
},
data() {
return {
@@ -195,12 +193,150 @@ export default {
<style lang="scss">
@import '@/style/mobile.scss';
.dark{
background-color: #111;
color: #fff;
}
.light{
background-color: #fff;
color: #000;
}
// $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;
// }
</style>
web/src/view/layout/search/search.vue
+2 -7
View File
@@ -19,8 +19,6 @@
</el-select>
</div>
</transition>
<div
:style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
class="user-box"
@@ -38,13 +36,11 @@ import { mapGetters } from 'vuex'
export default {
name: 'SearchComponent',
data() {
return {
value: '',
show: false,
reload: false,
color: '#fff'
reload: false
}
},
computed: {
@@ -70,8 +66,7 @@ export default {
setTimeout(() => {
this.reload = false
}, 500)
},
}
}
}
</script>
web/src/view/layout/setting/index.vue
-108
View File
@@ -1,108 +0,0 @@
<template>
<div>
<el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawar" />
<el-drawer
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>
<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>
</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>
</div>
</template>
<script>
import themeChange from '@/components/themeChange'
export default {
data() {
return {
drawer: false,
direction: 'rtl',
sideMode: 'dark'
}
},
components: {
themeChange
},
methods: {
handleClose() {
this.drawer = false
},
showSettingDrawar() {
this.drawer = true
},
chageMode(e) {
this.sideMode = e
this.$store.dispatch('app/changeSideMode')
},
themeChange(val) {
this.$store.dispatch('app/changeTheme', val)
}
}
}
</script>
<style lang="scss" scoped>
.drawer-container {
position: absolute;
right: 0;
top: 20%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
color: #fff;
border-radius: 4px 0 0 4px;
cursor: pointer;
-webkit-box-shadow: inset 0 0 6px rgb(0 ,0 ,0, 10%);
}
.setting_body{
padding: 20px;
.setting_card{
margin-bottom: 20px;
}
.setting_content{
margin-top: 20px;
display: flex;
.item{
position: relative;
display: flex;
align-items: center;
justify-content: center;
.check{
position: absolute;
font-size: 20px;
color: #00afff;
}
img{
margin-right: 20px;
}
}
}
}
</style>