{"remainingRequest":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/src/views/common/fragment/Setting.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/src/views/common/fragment/Setting.vue","mtime":1616225448000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCg0KLmVsZS1zZXR0aW5nLXdyYXBwZXIgew0KICBwYWRkaW5nOiAyMHB4Ow0KDQogIC5lbGUtc2V0dGluZy10aXRsZSB7DQogICAgZm9udC1zaXplOiAxM3B4Ow0KICAgIG1hcmdpbi1ib3R0b206IDE1cHg7DQogIH0NCg0KICAvKiDkuLvpopjpo47moLwgKi8NCiAgLmVsZS1zZXR0aW5nLXRoZW1lID4gZGl2IHsNCiAgICB3aWR0aDogNTBweDsNCiAgICBoZWlnaHQ6IDM1cHg7DQogICAgYm9yZGVyLXJhZGl1czogM3B4Ow0KICAgIG1hcmdpbjogMCAyMHB4IDMwcHggMDsNCiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjRjVGN0ZBOw0KICAgIGJveC1zaGFkb3c6IDAgMXB4IDNweCByZ2JhKDAsIDAsIDAsIC4xNSk7DQogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICAgIHZlcnRpY2FsLWFsaWduOiB0b3A7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIGN1cnNvcjogcG9pbnRlcjsNCg0KICAgICYuYWN0aXZlOmFmdGVyIHsNCiAgICAgIGNvbnRlbnQ6ICIiOw0KICAgICAgd2lkdGg6IDZweDsNCiAgICAgIGhlaWdodDogNnB4Ow0KICAgICAgYm9yZGVyLXJhZGl1czogNTAlOw0KICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzE5YmU2YjsNCiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgIGxlZnQ6IDUwJTsNCiAgICAgIGJvdHRvbTogLTE1cHg7DQogICAgICBtYXJnaW4tbGVmdDogLTNweDsNCiAgICB9DQoNCiAgICAmOmJlZm9yZSB7DQogICAgICBjb250ZW50OiAiIjsNCiAgICAgIHdpZHRoOiAxNXB4Ow0KICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDNweDsNCiAgICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDNweDsNCiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgICAgIHZlcnRpY2FsLWFsaWduOiB0b3A7DQogICAgfQ0KDQogICAgJi5lbGUtc2lkZS1kYXJrOmJlZm9yZSB7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMkUzNTQ5Ow0KICAgIH0NCg0KICAgICYuZWxlLWhlYWQtbGlnaHQ6YmVmb3JlLCAmLmVsZS1oZWFkLWRhcms6YmVmb3JlLCAmLmVsZS1oZWFkLXByaW1hcnk6YmVmb3JlIHsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgaGVpZ2h0OiAxMHB4Ow0KICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDA7DQogICAgICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogM3B4Ow0KICAgIH0NCg0KICAgICYuZWxlLWhlYWQtZGFyazpiZWZvcmUgew0KICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzJFMzU0OTsNCiAgICB9DQoNCiAgICAmLmVsZS1oZWFkLXByaW1hcnk6YmVmb3JlIHsNCiAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0MDlFRkY7DQogICAgfQ0KDQogICAgJi5lbGUtbGF5b3V0LW1peCB7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMkUzNTQ5Ow0KDQogICAgICAmOmJlZm9yZSB7DQogICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmMGYyZjU7DQogICAgICAgIHdpZHRoOiAzNXB4Ow0KICAgICAgICBoZWlnaHQ6IDI1cHg7DQogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgICAgYm90dG9tOiAwOw0KICAgICAgICByaWdodDogMDsNCiAgICAgICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogMDsNCiAgICAgICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMDsNCiAgICAgICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDNweDsNCiAgICAgIH0NCiAgICB9DQogIH0NCg0KICAvKiDkuLvpopjoibLpgInmi6kgKi8NCiAgLmVsZS1zZXR0aW5nLWNvbG9ycyB7DQogICAgbWFyZ2luLWJvdHRvbTogMjBweDsNCiAgfQ0KDQogIC5lbGUtc2V0dGluZy1jb2xvci1pdGVtIHsNCiAgICB3aWR0aDogMjBweDsNCiAgICBoZWlnaHQ6IDIwcHg7DQogICAgbWFyZ2luOiA4cHggOHB4IDAgMDsNCiAgICBib3JkZXItcmFkaXVzOiAycHg7DQogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICAgIGJveC1zaGFkb3c6IDAgMXB4IDNweCByZ2JhKDAsIDAsIDAsIC4xKTsNCiAgICB2ZXJ0aWNhbC1hbGlnbjogdG9wOw0KICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQoNCiAgICAmLmFjdGl2ZTphZnRlciB7DQogICAgICBjb250ZW50OiAiXGU2ZGEiOw0KICAgICAgZm9udC1mYW1pbHk6IGVsZW1lbnQtaWNvbnMgIWltcG9ydGFudDsNCiAgICAgIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkOw0KICAgICAgLW1vei1vc3gtZm9udC1zbW9vdGhpbmc6IGdyYXlzY2FsZTsNCiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgIHRvcDogNTAlOw0KICAgICAgbGVmdDogNTAlOw0KICAgICAgbWFyZ2luOiAtN3B4IDAgMCAtN3B4Ow0KICAgICAgZm9udC1zaXplOiAxNHB4Ow0KICAgICAgY29sb3I6ICNGRkY7DQogICAgfQ0KICB9DQoNCiAgLyog5Li76aKY6YWN572u6aG5ICovDQogIC5lbGUtc2V0dGluZy1pdGVtIHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIG1hcmdpbi1ib3R0b206IDIwcHg7DQogICAgbGluZS1oZWlnaHQ6IDI4cHg7DQoNCiAgICAuc2V0dGluZy1pdGVtLXRpdGxlIHsNCiAgICAgIGZsZXg6IDE7DQogICAgfQ0KDQogICAgLnNldHRpbmctaXRlbS1jb250cm9sIHsNCiAgICAgIG1heC13aWR0aDogODBweDsNCiAgICB9DQogIH0NCg0KICAuZWwtZGl2aWRlciB7DQogICAgbWFyZ2luLWJvdHRvbTogMjBweDsNCiAgfQ0KfQ0K"},{"version":3,"sources":["Setting.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsOA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;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>"]}]}