THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

109 lines
2.2 KiB

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