| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/views/common/fragment/Setting.vue?vue&type=script&lang=js&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/src/views/common/fragment/Setting.vue","mtime":1616225448000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2022060801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQpleHBvcnQgZGVmYXVsdCB7DQogIG5hbWU6ICJFbGVTZXR0aW5nIiwNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgLyog5L6n6L655qCP6aOO5qC8ICovDQogICAgICBzaWRlU3R5bGVzOiBbDQogICAgICAgIHtuYW1lOiAn5pqX6Imy5L6n6L655qCPJywgdmFsdWU6IDEsIHN0eWxlOiAnZWxlLXNpZGUtZGFyayd9LA0KICAgICAgICB7bmFtZTogJ+S6ruiJsuS+p+i+ueagjycsIHZhbHVlOiAwfQ0KICAgICAgXSwNCiAgICAgIC8qIOmhtuagj+mjjuagvCAqLw0KICAgICAgaGVhZFN0eWxlczogWw0KICAgICAgICB7bmFtZTogJ+S6ruiJsumhtuagjycsIHZhbHVlOiAwfSwNCiAgICAgICAge25hbWU6ICfmmpfoibLpobbmoI8nLCB2YWx1ZTogMSwgc3R5bGU6ICdlbGUtaGVhZC1kYXJrJ30sDQogICAgICAgIHtuYW1lOiAn5Li76Imy6aG25qCPJywgdmFsdWU6IDIsIHN0eWxlOiAnZWxlLWhlYWQtcHJpbWFyeSd9DQogICAgICBdLA0KICAgICAgLyog5qCH562+6aG16aOO5qC8ICovDQogICAgICB0YWJTdHlsZXM6IFsNCiAgICAgICAge25hbWU6ICfpu5jorqQnLCB2YWx1ZTogMH0sDQogICAgICAgIHtuYW1lOiAn5ZyG54K5JywgdmFsdWU6IDF9LA0KICAgICAgICB7bmFtZTogJ+WNoeeJhycsIHZhbHVlOiAyfQ0KICAgICAgXSwNCiAgICAgIC8qIOS4u+mimOiJsiAqLw0KICAgICAgdGhlbWVDb2xvcnM6IFsNCiAgICAgICAge25hbWU6ICfmi4LmmZPok50nLCB2YWx1ZTogbnVsbCwgY29sb3I6ICcjNDA5RUZGJ30sDQogICAgICAgIHtuYW1lOiAn6JaE5pquJywgdmFsdWU6ICdkdXN0JywgY29sb3I6ICcjNUY4MEM3J30sDQogICAgICAgIHtuYW1lOiAn5pel5pquJywgdmFsdWU6ICdzdW5zZXQnLCBjb2xvcjogJyNGQUFEMTQnfSwNCiAgICAgICAge25hbWU6ICfngavlsbEnLCB2YWx1ZTogJ3ZvbGNhbm8nLCBjb2xvcjogJyNGNTY4NkYnfSwNCiAgICAgICAge25hbWU6ICfmnoHlrqLok50nLCB2YWx1ZTogJ2dlZWtibHVlJywgY29sb3I6ICcjMzJBMkQ0J30sDQogICAgICAgIHtuYW1lOiAn5p6B5YWJ57u/JywgdmFsdWU6ICdncmVlbicsIGNvbG9yOiAnIzMzQ0M5OSd9LA0KICAgICAgICB7bmFtZTogJ+aYjumdkicsIHZhbHVlOiAnY3lhbicsIGNvbG9yOiAnIzJCQ0NDRSd9LA0KICAgICAgICB7bmFtZTogJ+mFsee0qycsIHZhbHVlOiAncHVycGxlJywgY29sb3I6ICcjOTI2NkY5J30sDQogICAgICAgIHtuYW1lOiAn5pqX6buRJywgdmFsdWU6ICdkYXJrJywgY29sb3I6ICcjMTkxOTE5J30NCiAgICAgIF0NCiAgICB9DQogIH0sDQogIG1vdW50ZWQoKSB7DQogICAgaWYgKHRoaXMuJHN0b3JlLnN0YXRlLnRoZW1lLnRoZW1lKSB0aGlzLnNldFRoZW1lKHRoaXMuJHN0b3JlLnN0YXRlLnRoZW1lLnRoZW1lLCB0cnVlKTsgIC8vIOaBouWkjeS4iuasoeiuvue9ruS4u+mimA0KICB9LA0KICBtZXRob2RzOiB7DQogICAgLyog5YiH5o2i5L6n6L655qCP6aOO5qC8ICovDQogICAgc2V0U2lkZVN0eWxlKHN0eWxlKSB7DQogICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0Jywge2tleTogJ3NpZGVTdHlsZScsIHZhbHVlOiBzdHlsZX0pOw0KICAgIH0sDQogICAgLyog5YiH5o2i6aG25qCP6aOO5qC8ICovDQogICAgc2V0SGVhZFN0eWxlKHN0eWxlKSB7DQogICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0Jywge2tleTogJ2hlYWRTdHlsZScsIHZhbHVlOiBzdHlsZX0pOw0KICAgIH0sDQogICAgLyog5YiH5o2i5Li76aKY6ImyICovDQogICAgc2V0VGhlbWUodGhlbWUsIGZvcmNlKSB7DQogICAgICBpZiAoIWZvcmNlICYmIHRoZW1lID09PSB0aGlzLiRzdG9yZS5zdGF0ZS50aGVtZS5jb2xvcikgcmV0dXJuOw0KICAgICAgY29uc3QgbG9hZGluZyA9IHRoaXMuJGxvYWRpbmcoe2xvY2s6IHRydWUsIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCd9KTsNCiAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCd0aGVtZS9zZXRUaGVtZScsIHRoZW1lKS50aGVuKCgpID0+IHsNCiAgICAgICAgbG9hZGluZy5jbG9zZSgpOw0KICAgICAgfSkuY2F0Y2goZSA9PiB7DQogICAgICAgIGNvbnNvbGUuZXJyb3IoZSk7DQogICAgICAgIGxvYWRpbmcuY2xvc2UoKTsNCiAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcign5Li76aKY5Yqg6L295aSx6LSlJyk7DQogICAgICB9KTsNCiAgICB9LA0KICAgIC8qIOiuvue9ruWvvOiIquW4g+WxgCAqLw0KICAgIHNldExheW91dChzdHlsZSkgew0KICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3RoZW1lL3NldCcsIHtrZXk6ICdsYXlvdXRTdHlsZScsIHZhbHVlOiBzdHlsZX0pOw0KICAgICAgaWYgKHN0eWxlID09PSAyKSB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0TmF2QWN0aXZlJywgMCk7DQogICAgICBlbHNlIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCd0aGVtZS9zZXROYXZBY3RpdmUnKTsNCiAgICB9DQogIH0sDQogIGNvbXB1dGVkOiB7DQogICAgc2hvd1NldHRpbmc6IHsNCiAgICAgIGdldCgpIHsNCiAgICAgICAgcmV0dXJuIHRoaXMuJHN0b3JlLnN0YXRlLnRoZW1lLnNob3dTZXR0aW5nOw0KICAgICAgfSwNCiAgICAgIHNldCh2YWwpIHsNCiAgICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3RoZW1lL3NldCcsIHtrZXk6ICdzaG93U2V0dGluZycsIHZhbHVlOiB2YWx9KTsNCiAgICAgIH0NCiAgICB9LA0KICAgIGJvZHlGdWxsOiB7DQogICAgICBnZXQoKSB7DQogICAgICAgIHJldHVybiB0aGlzLiRzdG9yZS5zdGF0ZS50aGVtZS5ib2R5RnVsbDsNCiAgICAgIH0sDQogICAgICBzZXQodmFsKSB7DQogICAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCd0aGVtZS9zZXQnLCB7a2V5OiAnYm9keUZ1bGwnLCB2YWx1ZTogdmFsfSk7DQogICAgICB9DQogICAgfSwNCiAgICBmaXhlZExheW91dDogew0KICAgICAgZ2V0KCkgew0KICAgICAgICByZXR1cm4gdGhpcy4kc3RvcmUuc3RhdGUudGhlbWUuZml4ZWRMYXlvdXQ7DQogICAgICB9LA0KICAgICAgc2V0KHZhbCkgew0KICAgICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0Jywge2tleTogJ2ZpeGVkTGF5b3V0JywgdmFsdWU6IHZhbH0pOw0KICAgICAgfQ0KICAgIH0sDQogICAgbG9nb0F1dG9TaXplOiB7DQogICAgICBnZXQoKSB7DQogICAgICAgIHJldHVybiB0aGlzLiRzdG9yZS5zdGF0ZS50aGVtZS5sb2dvQXV0b1NpemU7DQogICAgICB9LA0KICAgICAgc2V0KHZhbCkgew0KICAgICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0Jywge2tleTogJ2xvZ29BdXRvU2l6ZScsIHZhbHVlOiB2YWx9KTsNCiAgICAgIH0NCiAgICB9LA0KICAgIGNvbG9yZnVsSWNvbjogew0KICAgICAgZ2V0KCkgew0KICAgICAgICByZXR1cm4gdGhpcy4kc3RvcmUuc3RhdGUudGhlbWUuY29sb3JmdWxJY29uOw0KICAgICAgfSwNCiAgICAgIHNldCh2YWwpIHsNCiAgICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3RoZW1lL3NldCcsIHtrZXk6ICdjb2xvcmZ1bEljb24nLCB2YWx1ZTogdmFsfSk7DQogICAgICB9DQogICAgfSwNCiAgICBzaWRlVW5pcXVlT3Blbjogew0KICAgICAgZ2V0KCkgew0KICAgICAgICByZXR1cm4gdGhpcy4kc3RvcmUuc3RhdGUudGhlbWUuc2lkZVVuaXF1ZU9wZW47DQogICAgICB9LA0KICAgICAgc2V0KHZhbCkgew0KICAgICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgndGhlbWUvc2V0Jywge2tleTogJ3NpZGVVbmlxdWVPcGVuJywgdmFsdWU6IHZhbH0pOw0KICAgICAgfQ0KICAgIH0sDQogICAgc2hvd1RhYnM6IHsNCiAgICAgIGdldCgpIHsNCiAgICAgICAgcmV0dXJuIHRoaXMuJHN0b3JlLnN0YXRlLnRoZW1lLnNob3dUYWJzOw0KICAgICAgfSwNCiAgICAgIHNldCh2YWwpIHsNCiAgICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3RoZW1lL3NldCcsIHtrZXk6ICdzaG93VGFicycsIHZhbHVlOiB2YWx9KTsNCiAgICAgIH0NCiAgICB9LA0KICAgIHRhYlN0eWxlOiB7DQogICAgICBnZXQoKSB7DQogICAgICAgIHJldHVybiB0aGlzLiRzdG9yZS5zdGF0ZS50aGVtZS50YWJTdHlsZTsNCiAgICAgIH0sDQogICAgICBzZXQodmFsKSB7DQogICAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCd0aGVtZS9zZXQnLCB7a2V5OiAndGFiU3R5bGUnLCB2YWx1ZTogdmFsfSk7DQogICAgICB9DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["Setting.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Setting.vue","sourceRoot":"src/views/common/fragment","sourcesContent":["<!-- 主题设置界面 -->\r\n<template>\r\n <el-drawer title=\"主题设置\" :visible.sync=\"showSetting\" size=\"300px\" :append-to-body=\"true\">\r\n <div class=\"ele-setting-wrapper\">\r\n <!-- 侧栏风格设置 -->\r\n <div class=\"ele-setting-theme\">\r\n <el-tooltip v-for=\"(item,index) in sideStyles\" :key=\"index\" :content=\"item.name\" placement=\"top\">\r\n <div :class=\"[item.style,{'active':$store.state.theme.sideStyle===item.value}]\"\r\n @click=\"setSideStyle(item.value)\"></div>\r\n </el-tooltip>\r\n </div>\r\n <!-- 顶栏风格设置 -->\r\n <div class=\"ele-setting-theme\">\r\n <el-tooltip v-for=\"(item,index) in headStyles\" :key=\"index\" :content=\"item.name\" placement=\"top\">\r\n <div :class=\"[item.style||'ele-head-light',{'active':$store.state.theme.headStyle===item.value}]\"\r\n @click=\"setHeadStyle(item.value)\"></div>\r\n </el-tooltip>\r\n </div>\r\n <!-- 主题颜色设置 -->\r\n <div class=\"ele-setting-colors\">\r\n <el-tooltip v-for=\"(item,index) in themeColors\" :key=\"index\" :content=\"item.name\" placement=\"top\">\r\n <div :class=\"['ele-setting-color-item',{'active':$store.state.theme.theme===item.value}]\"\r\n @click=\"setTheme(item.value)\" :style=\"{'background-color': item.color}\"></div>\r\n </el-tooltip>\r\n </div>\r\n <el-divider/>\r\n <!-- 导航模式设置 -->\r\n <div class=\"ele-setting-title ele-text-secondary\">导航模式</div>\r\n <div class=\"ele-setting-theme\">\r\n <el-tooltip content=\"左侧菜单布局\" placement=\"top\">\r\n <div :class=\"['ele-side-dark',{'active':$store.state.theme.layoutStyle===0}]\" @click=\"setLayout(0)\"></div>\r\n </el-tooltip>\r\n <el-tooltip content=\"顶部菜单布局\" placement=\"top\">\r\n <div :class=\"['ele-head-dark',{'active':$store.state.theme.layoutStyle===1}]\" @click=\"setLayout(1)\"></div>\r\n </el-tooltip>\r\n <el-tooltip content=\"混合菜单布局\" placement=\"top\">\r\n <div :class=\"['ele-layout-mix',{'active':$store.state.theme.layoutStyle===2}]\" @click=\"setLayout(2)\"></div>\r\n </el-tooltip>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">内容区域铺满</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"bodyFull\"/>\r\n </div>\r\n </div>\r\n <!-- 其它配置 -->\r\n <el-divider/>\r\n <div class=\"ele-setting-title ele-text-secondary\">其它配置</div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">固定顶栏侧栏</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"fixedLayout\"/>\r\n </div>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">Logo宽度自动</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"logoAutoSize\"/>\r\n </div>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">侧栏彩色图标</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"colorfulIcon\"/>\r\n </div>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">侧栏排他展开</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"sideUniqueOpen\"/>\r\n </div>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">是否开启页签</div>\r\n <div class=\"setting-item-control\">\r\n <el-switch v-model=\"showTabs\"/>\r\n </div>\r\n </div>\r\n <div class=\"ele-setting-item\">\r\n <div class=\"setting-item-title\">页签显示风格</div>\r\n <div class=\"setting-item-control\">\r\n <el-select v-model=\"tabStyle\" placeholder=\"请选择\" size=\"mini\">\r\n <el-option v-for=\"(item,index) in tabStyles\" :key=\"index\" :label=\"item.name\" :value=\"item.value\"/>\r\n </el-select>\r\n </div>\r\n </div>\r\n <el-divider/>\r\n <el-alert type=\"warning\" :closable=\"false\" class=\"ele-alert-border\"\r\n title=\"该功能可实时预览各种布局效果, 更多完整配置在 setting.js 中设置, 修改后会记住配置, 可用于生产环境中.\"/>\r\n </div>\r\n </el-drawer>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: \"EleSetting\",\r\n data() {\r\n return {\r\n /* 侧边栏风格 */\r\n sideStyles: [\r\n {name: '暗色侧边栏', value: 1, style: 'ele-side-dark'},\r\n {name: '亮色侧边栏', value: 0}\r\n ],\r\n /* 顶栏风格 */\r\n headStyles: [\r\n {name: '亮色顶栏', value: 0},\r\n {name: '暗色顶栏', value: 1, style: 'ele-head-dark'},\r\n {name: '主色顶栏', value: 2, style: 'ele-head-primary'}\r\n ],\r\n /* 标签页风格 */\r\n tabStyles: [\r\n {name: '默认', value: 0},\r\n {name: '圆点', value: 1},\r\n {name: '卡片', value: 2}\r\n ],\r\n /* 主题色 */\r\n themeColors: [\r\n {name: '拂晓蓝', value: null, color: '#409EFF'},\r\n {name: '薄暮', value: 'dust', color: '#5F80C7'},\r\n {name: '日暮', value: 'sunset', color: '#FAAD14'},\r\n {name: '火山', value: 'volcano', color: '#F5686F'},\r\n {name: '极客蓝', value: 'geekblue', color: '#32A2D4'},\r\n {name: '极光绿', value: 'green', color: '#33CC99'},\r\n {name: '明青', value: 'cyan', color: '#2BCCCE'},\r\n {name: '酱紫', value: 'purple', color: '#9266F9'},\r\n {name: '暗黑', value: 'dark', color: '#191919'}\r\n ]\r\n }\r\n },\r\n mounted() {\r\n if (this.$store.state.theme.theme) this.setTheme(this.$store.state.theme.theme, true); // 恢复上次设置主题\r\n },\r\n methods: {\r\n /* 切换侧边栏风格 */\r\n setSideStyle(style) {\r\n this.$store.dispatch('theme/set', {key: 'sideStyle', value: style});\r\n },\r\n /* 切换顶栏风格 */\r\n setHeadStyle(style) {\r\n this.$store.dispatch('theme/set', {key: 'headStyle', value: style});\r\n },\r\n /* 切换主题色 */\r\n setTheme(theme, force) {\r\n if (!force && theme === this.$store.state.theme.color) return;\r\n const loading = this.$loading({lock: true, background: 'transparent'});\r\n this.$store.dispatch('theme/setTheme', theme).then(() => {\r\n loading.close();\r\n }).catch(e => {\r\n console.error(e);\r\n loading.close();\r\n this.$message.error('主题加载失败');\r\n });\r\n },\r\n /* 设置导航布局 */\r\n setLayout(style) {\r\n this.$store.dispatch('theme/set', {key: 'layoutStyle', value: style});\r\n if (style === 2) this.$store.dispatch('theme/setNavActive', 0);\r\n else this.$store.dispatch('theme/setNavActive');\r\n }\r\n },\r\n computed: {\r\n showSetting: {\r\n get() {\r\n return this.$store.state.theme.showSetting;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'showSetting', value: val});\r\n }\r\n },\r\n bodyFull: {\r\n get() {\r\n return this.$store.state.theme.bodyFull;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'bodyFull', value: val});\r\n }\r\n },\r\n fixedLayout: {\r\n get() {\r\n return this.$store.state.theme.fixedLayout;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'fixedLayout', value: val});\r\n }\r\n },\r\n logoAutoSize: {\r\n get() {\r\n return this.$store.state.theme.logoAutoSize;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'logoAutoSize', value: val});\r\n }\r\n },\r\n colorfulIcon: {\r\n get() {\r\n return this.$store.state.theme.colorfulIcon;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'colorfulIcon', value: val});\r\n }\r\n },\r\n sideUniqueOpen: {\r\n get() {\r\n return this.$store.state.theme.sideUniqueOpen;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'sideUniqueOpen', value: val});\r\n }\r\n },\r\n showTabs: {\r\n get() {\r\n return this.$store.state.theme.showTabs;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'showTabs', value: val});\r\n }\r\n },\r\n tabStyle: {\r\n get() {\r\n return this.$store.state.theme.tabStyle;\r\n },\r\n set(val) {\r\n this.$store.dispatch('theme/set', {key: 'tabStyle', value: val});\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.ele-setting-wrapper {\r\n padding: 20px;\r\n\r\n .ele-setting-title {\r\n font-size: 13px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n /* 主题风格 */\r\n .ele-setting-theme > div {\r\n width: 50px;\r\n height: 35px;\r\n border-radius: 3px;\r\n margin: 0 20px 30px 0;\r\n background-color: #F5F7FA;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, .15);\r\n display: inline-block;\r\n vertical-align: top;\r\n position: relative;\r\n cursor: pointer;\r\n\r\n &.active:after {\r\n content: \"\";\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background-color: #19be6b;\r\n position: absolute;\r\n left: 50%;\r\n bottom: -15px;\r\n margin-left: -3px;\r\n }\r\n\r\n &:before {\r\n content: \"\";\r\n width: 15px;\r\n height: 100%;\r\n background-color: #fff;\r\n border-top-left-radius: 3px;\r\n border-bottom-left-radius: 3px;\r\n display: inline-block;\r\n vertical-align: top;\r\n }\r\n\r\n &.ele-side-dark:before {\r\n background-color: #2E3549;\r\n }\r\n\r\n &.ele-head-light:before, &.ele-head-dark:before, &.ele-head-primary:before {\r\n width: 100%;\r\n height: 10px;\r\n background-color: #fff;\r\n border-bottom-left-radius: 0;\r\n border-top-right-radius: 3px;\r\n }\r\n\r\n &.ele-head-dark:before {\r\n background-color: #2E3549;\r\n }\r\n\r\n &.ele-head-primary:before {\r\n background-color: #409EFF;\r\n }\r\n\r\n &.ele-layout-mix {\r\n background-color: #2E3549;\r\n\r\n &:before {\r\n background-color: #f0f2f5;\r\n width: 35px;\r\n height: 25px;\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 3px;\r\n }\r\n }\r\n }\r\n\r\n /* 主题色选择 */\r\n .ele-setting-colors {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ele-setting-color-item {\r\n width: 20px;\r\n height: 20px;\r\n margin: 8px 8px 0 0;\r\n border-radius: 2px;\r\n display: inline-block;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, .1);\r\n vertical-align: top;\r\n position: relative;\r\n cursor: pointer;\r\n\r\n &.active:after {\r\n content: \"\\e6da\";\r\n font-family: element-icons !important;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin: -7px 0 0 -7px;\r\n font-size: 14px;\r\n color: #FFF;\r\n }\r\n }\r\n\r\n /* 主题配置项 */\r\n .ele-setting-item {\r\n display: flex;\r\n margin-bottom: 20px;\r\n line-height: 28px;\r\n\r\n .setting-item-title {\r\n flex: 1;\r\n }\r\n\r\n .setting-item-control {\r\n max-width: 80px;\r\n }\r\n }\r\n\r\n .el-divider {\r\n margin-bottom: 20px;\r\n }\r\n}\r\n</style>"]}]}
|
