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

样式美化

Browse Source
This commit is contained in:
piexlmax
2021-09-18 12:40:31 +08:00
parent 5e3df6c742
commit a5b989d278
21 changed files with 391 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/layout/setting/index.vue
+25 -37
View File
@@ -9,30 +9,25 @@
>
<div class="setting_body">
<div class="setting_card">
<div class="setting_title">侧边栏主题 (注：自定义请先配置背景色)</div>
<div class="setting_content">
<div class="theme-box">
<div class="item" @click="changeMode('light')">
<i v-if="mode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
<div class="item-top">
<i v-if="mode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
</div>
<p>
简约白
</p>
</div>
<div class="item" @click="changeMode('dark')">
<i v-if="mode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div>
</div>
<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 class="item-top">
<i v-if="mode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div>
<p>
商务黑
</p>
</div>
</div>
</div>
@@ -53,7 +48,7 @@ export default {
}
},
computed: {
...mapGetters('user', ['sideMode', 'baseColor', 'activeColor', 'mode'])
...mapGetters('user', ['mode'])
},
methods: {
handleClose() {
@@ -69,20 +64,6 @@ export default {
}
this.$store.dispatch('user/changeSideMode', e)
},
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)
}
}
}
</script>
@@ -126,17 +107,24 @@ export default {
}
}
.item{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 20px;
.item-top{
position: relative;
}
.check{
position: absolute;
font-size: 20px;
color: #00afff;
right:10px;
bottom: 10px;
}
img{
margin-right: 20px;
p{
text-align: center;
font-size: 12px;
}
}
}