forked from liweijie/education
1. 机关教学日志2.新增全局表格横向拖拽滚动指令3.学员模块
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
direction="rtl"
|
||||
size="280px"
|
||||
:title="'布局设置'"
|
||||
class="drawer-setting"
|
||||
:with-header="false"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<div class="setting-drawer-index">
|
||||
<div class="setting-drawer-index__title">主题色</div>
|
||||
<div class="setting-drawer-index__main-color theme-color">
|
||||
<ul class="ul-color">
|
||||
<li
|
||||
v-for="item in colorList"
|
||||
:key="item.color"
|
||||
class="li-theme"
|
||||
:class="{ active: item.color === theme }"
|
||||
:style="{ background: item.color }"
|
||||
@click="changeTheme(item.color)"
|
||||
>
|
||||
<i v-show="item.color === theme" class="icon-check el-icon-check" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="setting-drawer-index__title">界面功能</div>
|
||||
<div class="setting-item">
|
||||
<span class="setting-item__label">侧边栏颜色</span>
|
||||
<el-dropdown trigger="click" @command="handleSideTheme">
|
||||
<span class="setting-item__value">
|
||||
{{ sideThemeLabel }}
|
||||
<i class="el-icon-arrow-down" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="theme-dark">深色主题</el-dropdown-item>
|
||||
<el-dropdown-item command="theme-light">浅色主题</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-item__label">导航栏模式</span>
|
||||
<el-dropdown trigger="click" @command="handleNavType">
|
||||
<span class="setting-item__value">
|
||||
{{ navTypeLabel }}
|
||||
<i class="el-icon-arrow-down" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="1">侧边栏模式</el-dropdown-item>
|
||||
<el-dropdown-item command="2">顶部导航模式</el-dropdown-item>
|
||||
<el-dropdown-item command="3">侧栏+顶栏</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-item__label"> TagsView 标签栏</span>
|
||||
<el-switch
|
||||
:value="tagsView"
|
||||
@change="changeSetting({ key: 'tagsView', value: !tagsView })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-item__label"> 侧边栏 Logo</span>
|
||||
<el-switch
|
||||
:value="sidebarLogo"
|
||||
@change="changeSetting({ key: 'sidebarLogo', value: !sidebarLogo })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<span class="setting-item__label"> 固定 Header</span>
|
||||
<el-switch
|
||||
:value="fixedHeader"
|
||||
@change="changeSetting({ key: 'fixedHeader', value: !fixedHeader })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
/**
|
||||
* 主题色列表
|
||||
*/
|
||||
colorList: [
|
||||
{ color: '#00875A', title: '教育绿' },
|
||||
{ color: '#304156', title: '深蓝' },
|
||||
{ color: '#409EFF', title: '亮蓝' },
|
||||
{ color: '#626AEF', title: '亮紫' },
|
||||
{ color: '#EB2F96', title: '粉红' },
|
||||
{ color: '#F8721F', title: '橙色' },
|
||||
{ color: '#CD201F', title: '红色' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme: state => state.settings.theme,
|
||||
sideTheme: state => state.settings.sideTheme,
|
||||
navType: state => state.settings.navType,
|
||||
tagsView: state => state.settings.tagsView,
|
||||
sidebarLogo: state => state.settings.sidebarLogo,
|
||||
fixedHeader: state => state.settings.fixedHeader
|
||||
}),
|
||||
sideThemeLabel() {
|
||||
return this.sideTheme === 'theme-dark' ? '深色主题' : '浅色主题'
|
||||
},
|
||||
navTypeLabel() {
|
||||
const map = { 1: '侧边栏模式', 2: '顶部导航模式', 3: '侧栏+顶栏' }
|
||||
return map[this.navType] || '侧边栏模式'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openSetting() {
|
||||
this.visible = true
|
||||
},
|
||||
closeSetting() {
|
||||
this.visible = false
|
||||
},
|
||||
// 修改主题色
|
||||
changeTheme(color) {
|
||||
this.$store.dispatch('settings/changeSetting', { key: 'theme', value: color })
|
||||
},
|
||||
handleSideTheme(command) {
|
||||
this.changeSetting({ key: 'sideTheme', value: command })
|
||||
},
|
||||
handleNavType(command) {
|
||||
this.changeSetting({ key: 'navType', value: Number(command) })
|
||||
},
|
||||
// 修改布局设置，并持久化到本地存储
|
||||
changeSetting(data) {
|
||||
this.$store.dispatch('settings/changeSetting', data)
|
||||
const setting = JSON.parse(localStorage.getItem('layout-setting') || '{}')
|
||||
setting[data.key] = data.value
|
||||
localStorage.setItem('layout-setting', JSON.stringify(setting))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-drawer-index {
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__title {
|
||||
margin-top: 26px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__main-color {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
.ul-color {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.li-theme {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 6px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
|
||||
&__value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user