| 提交 | 用户 | age | ||
| 2a61f6 | 1 | <template> |
| L | 2 | <div class="drawer-container"> |
| 3 | <div> | |
| 4 | <!-- <h3 class="drawer-title">Page style setting</h3> --> | |
| 5 | <h3 class="drawer-title">页面样式设置</h3> | |
| 6 | ||
| 7 | <div class="drawer-item"> | |
| 8 | <!-- <span>Theme Color</span> --> | |
| 9 | <span>主体颜色</span> | |
| 10 | <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> | |
| 11 | </div> | |
| 12 | ||
| 13 | <!-- <div class="drawer-item"> | |
| 14 | <span>Open Tags-View</span> | |
| 15 | <el-switch v-model="tagsView" class="drawer-switch" /> | |
| 16 | </div> --> | |
| 17 | ||
| 18 | <div class="drawer-item"> | |
| 19 | <!-- <span>Fixed Header</span> --> | |
| 20 | <span>固定头部</span> | |
| 21 | <el-switch v-model="fixedHeader" class="drawer-switch" /> | |
| 22 | </div> | |
| 23 | ||
| 24 | <div class="drawer-item"> | |
| 25 | <!-- <span>Sidebar Logo</span> --> | |
| 26 | <span>侧边栏Logo</span> | |
| 27 | <el-switch v-model="sidebarLogo" class="drawer-switch" /> | |
| 28 | </div> | |
| 29 | ||
| 30 | </div> | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | ||
| 34 | <script> | |
| 35 | import ThemePicker from '@/components/ThemePicker' | |
| 36 | ||
| 37 | export default { | |
| 38 | components: { ThemePicker }, | |
| 39 | data() { | |
| 40 | return {} | |
| 41 | }, | |
| 42 | computed: { | |
| 43 | fixedHeader: { | |
| 44 | get() { | |
| 45 | return this.$store.state.settings.fixedHeader | |
| 46 | }, | |
| 47 | set(val) { | |
| 48 | this.$store.dispatch('settings/changeSetting', { | |
| 49 | key: 'fixedHeader', | |
| 50 | value: val | |
| 51 | }) | |
| 52 | } | |
| 53 | }, | |
| 54 | // tagsView: { | |
| 55 | // get() { | |
| 56 | // return this.$store.state.settings.tagsView | |
| 57 | // }, | |
| 58 | // set(val) { | |
| 59 | // this.$store.dispatch('settings/changeSetting', { | |
| 60 | // key: 'tagsView', | |
| 61 | // value: val | |
| 62 | // }) | |
| 63 | // } | |
| 64 | // }, | |
| 65 | sidebarLogo: { | |
| 66 | get() { | |
| 67 | return this.$store.state.settings.sidebarLogo | |
| 68 | }, | |
| 69 | set(val) { | |
| 70 | this.$store.dispatch('settings/changeSetting', { | |
| 71 | key: 'sidebarLogo', | |
| 72 | value: val | |
| 73 | }) | |
| 74 | } | |
| 75 | } | |
| 76 | }, | |
| 77 | methods: { | |
| 78 | themeChange(val) { | |
| 79 | this.$store.dispatch('settings/changeSetting', { | |
| 80 | key: 'theme', | |
| 81 | value: val | |
| 82 | }) | |
| 83 | } | |
| 84 | } | |
| 85 | } | |
| 86 | </script> | |
| 87 | ||
| 88 | <style lang="scss" scoped> | |
| 89 | .drawer-container { | |
| 90 | padding: 24px; | |
| 91 | font-size: 14px; | |
| 92 | line-height: 1.5; | |
| 93 | word-wrap: break-word; | |
| 94 | ||
| 95 | .drawer-title { | |
| 96 | margin-bottom: 12px; | |
| 97 | color: rgba(0, 0, 0, .85); | |
| 98 | font-size: 14px; | |
| 99 | line-height: 22px; | |
| 100 | } | |
| 101 | ||
| 102 | .drawer-item { | |
| 103 | color: rgba(0, 0, 0, .65); | |
| 104 | font-size: 14px; | |
| 105 | padding: 12px 0; | |
| 106 | } | |
| 107 | ||
| 108 | .drawer-switch { | |
| 109 | float: right | |
| 110 | } | |
| 111 | } | |
| 112 | </style> | |
