{"remainingRequest":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/common/fragment/Setting.vue?vue&type=script&lang=js&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/src/views/common/fragment/Setting.vue","mtime":1616225448000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/project/NN2020060801/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>"]}]}