{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\layout\\navBars\\breadcrumb\\setings.vue?vue&type=style&index=1&id=b4d002a2&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\layout\\navBars\\breadcrumb\\setings.vue","mtime":1761614938999},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudzEwIHsNCiAgd2lkdGg6IDEwcHg7DQp9DQoubXI1IHsNCiAgbWFyZ2luLXJpZ2h0OiA1cHg7DQp9DQo6OnYtZGVlcCAuZWwtZHJhd2VyX19oZWFkZXIgew0KICBtYXJnaW4tYm90dG9tOiAwOw0KfQ0KOjp2LWRlZXAgLmVsLXJhZGlvLWJ1dHRvbi0tbWluaSAuZWwtcmFkaW8tYnV0dG9uX19pbm5lciB7DQogIHBhZGRpbmc6IDdweCA4cHg7DQp9DQo6OnYtZGVlcCAuZWwtZHJhd2VyX19ib2R5IHsNCiAgcGFkZGluZzogMDsNCn0NCi5sYXlvdXQtYnJlYWRjcnVtYi1zZXRpbmctYmFyIHsNCiAgLy8gaGVpZ2h0OiBjYWxjKDEwMHZoIC0gNTBweCk7DQogIHBhZGRpbmc6IDAgMTVweDsNCiAgOjp2LWRlZXAgLmVsLXNjcm9sbGJhcl9fdmlldyB7DQogICAgLy8gb3ZlcmZsb3cteDogYXV0byAhaW1wb3J0YW50Ow0KICAgIG92ZXJmbG93LXg6IGhpZGRlbjsNCiAgfQ0KICAubGF5b3V0LWJyZWFkY3J1bWItc2V0aW5nLWJhci1mbGV4IHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgJi1sYWJlbCB7DQogICAgICBmbGV4OiAxOw0KICAgICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItdGV4dC1wcmltYXJ5KTsNCiAgICB9DQogIH0NCiAgLmxheW91dC1kcmF3ZXItY29udGVudC1mbGV4IHsNCiAgICBvdmVyZmxvdzogaGlkZGVuOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgZmxleC13cmFwOiB3cmFwOw0KICAgIGFsaWduLWNvbnRlbnQ6IGNlbnRlcjsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgICBtYXJnaW46IDAgLTVweDsNCiAgICAubGF5b3V0LWRyYXdlci1jb250ZW50LWl0ZW0uZHJhd2VyLWxheW91dC1hY3RpdmUgew0KICAgICAgYm9yZGVyOiAxcHggc29saWQ7DQogICAgICBib3JkZXItY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgfQ0KICAgIC5sYXlvdXQtZHJhd2VyLWNvbnRlbnQtaXRlbTpob3ZlciB7DQogICAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlLWluLW91dDsNCiAgICAgIGJvcmRlcjogMXB4IHNvbGlkOw0KICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgIH0NCiAgICAubGF5b3V0LWRyYXdlci1jb250ZW50LWl0ZW0gew0KICAgICAgd2lkdGg6IDEwN3B4Ow0KICAgICAgaGVpZ2h0OiA3MHB4Ow0KICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgwLCAwLCAwLCAwKTsNCiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICAgIHBhZGRpbmc6IDZweDsNCiAgICAgIGJhY2tncm91bmQ6ICNmZmZmZmY7DQogICAgICBib3gtc2hhZG93OiAwcHggMnB4IDVweCAwcHggcmdiYSgwLCAwLCAwLCAwLjA4KTsNCiAgICAgIGJvcmRlci1yYWRpdXM6IDZweDsNCiAgICAgIG9wYWNpdHk6IDE7DQogICAgICBtYXJnaW46IDEwcHg7DQoNCiAgICAgIC5lbC1jb250YWluZXIgew0KICAgICAgICBoZWlnaHQ6IDEwMCU7DQogICAgICAgIC5lbC1hc2lkZS1kYXJrIHsNCiAgICAgICAgICBvcGFjaXR5OiAwLjU7DQogICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi10YWctYWN0aXZlLWNvbG9yKTsNCiAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7DQogICAgICAgIH0NCiAgICAgICAgLmVsLWFzaWRlIHsNCiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmV2LXRhZy1hY3RpdmUtY29sb3IpOw0KICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDsNCiAgICAgICAgfQ0KICAgICAgICAuZWwtaGVhZGVyIHsNCiAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7DQogICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1zZXRpbmctaGVhZGVyKTsNCiAgICAgICAgfQ0KICAgICAgICAuZWwtbWFpbiB7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4Ow0KICAgICAgICAgIGJvcmRlcjogMXB4IGRhc2hlZCB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgICAgICAgIHBhZGRpbmc6IDA7DQogICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1zZXRpbmctbWFpbik7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICAgIC5lbC1jaXJjdWxhciB7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDsNCiAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7DQogICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0Ow0KICAgICAgfQ0KDQogICAgICAubGF5b3V0LXRpcHMtd2FycCwNCiAgICAgIC5sYXlvdXQtdGlwcy13YXJwLWFjdGl2ZSB7DQogICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0Ow0KICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICAgIGxlZnQ6IDUwJTsNCiAgICAgICAgdG9wOiA1MCU7DQogICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOw0KICAgICAgICBib3JkZXI6IDFweCBzb2xpZDsNCiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnktbGlnaHQtNSk7DQogICAgICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7DQogICAgICAgIHBhZGRpbmc6IDRweDsNCiAgICAgICAgLmxheW91dC10aXBzLWJveCB7DQogICAgICAgICAgdHJhbnNpdGlvbjogaW5oZXJpdDsNCiAgICAgICAgICB3aWR0aDogMzBweDsNCiAgICAgICAgICBoZWlnaHQ6IDMwcHg7DQogICAgICAgICAgei1pbmRleDogOTsNCiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZDsNCiAgICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeS1saWdodC01KTsNCiAgICAgICAgICBib3JkZXItcmFkaXVzOiAxMDAlOw0KICAgICAgICAgIC5sYXlvdXQtdGlwcy10eHQgew0KICAgICAgICAgICAgdHJhbnNpdGlvbjogaW5oZXJpdDsNCiAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICAgICAgICAgIHRvcDogNXB4Ow0KICAgICAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICAgICAgbGluZS1oZWlnaHQ6IDE7DQogICAgICAgICAgICBsZXR0ZXItc3BhY2luZzogMnB4Ow0KICAgICAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDsNCiAgICAgICAgICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnktbGlnaHQtNSk7DQogICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzMGRlZyk7DQogICAgICAgICAgICBsZWZ0OiAtMXB4Ow0KICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1zZXRpbmctbWFpbik7DQogICAgICAgICAgICB3aWR0aDogMzJweDsNCiAgICAgICAgICAgIGhlaWdodDogMTdweDsNCiAgICAgICAgICAgIGxpbmUtaGVpZ2h0OiAxN3B4Ow0KICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICAgfQ0KICAgICAgLmxheW91dC10aXBzLXdhcnAtYWN0aXZlIHsNCiAgICAgICAgYm9yZGVyOiAxcHggc29saWQ7DQogICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1wcmltYXJ5KTsNCiAgICAgICAgLmxheW91dC10aXBzLWJveCB7DQogICAgICAgICAgYm9yZGVyOiAxcHggc29saWQ7DQogICAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgICAgICAgIC5sYXlvdXQtdGlwcy10eHQgew0KICAgICAgICAgICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSkgIWltcG9ydGFudDsNCiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByZXYtY29sb3Itc2V0aW5nLW1haW4pICFpbXBvcnRhbnQ7DQogICAgICAgICAgfQ0KICAgICAgICB9DQogICAgICB9DQogICAgICAmOmhvdmVyIHsNCiAgICAgICAgLmxheW91dC10aXBzLXdhcnAgew0KICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0Ow0KICAgICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1wcmltYXJ5KTsNCiAgICAgICAgICAubGF5b3V0LXRpcHMtYm94IHsNCiAgICAgICAgICAgIHRyYW5zaXRpb246IGluaGVyaXQ7DQogICAgICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICAgICAgICAubGF5b3V0LXRpcHMtdHh0IHsNCiAgICAgICAgICAgICAgdHJhbnNpdGlvbjogaW5oZXJpdDsNCiAgICAgICAgICAgICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSkgIWltcG9ydGFudDsNCiAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJldi1jb2xvci1zZXRpbmctbWFpbikgIWltcG9ydGFudDsNCiAgICAgICAgICAgIH0NCiAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgIH0NCiAgICB9DQogIH0NCiAgLmNvcHktY29uZmlnIHsNCiAgICBtYXJnaW46IDEwcHggMDsNCiAgICAuY29weS1jb25maWctYnRuIHsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgbWFyZ2luLXRvcDogMTVweDsNCiAgICB9DQogICAgLmNvcHktY29uZmlnLWJ0bi1yZXNldCB7DQogICAgICB3aWR0aDogMTAwJTsNCiAgICAgIG1hcmdpbjogMTBweCAwIDA7DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["setings.vue"],"names":[],"mappings":";AAkjBA;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;;AAEA;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;;AAEA;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":"setings.vue","sourceRoot":"src/layout/navBars/breadcrumb","sourcesContent":["<template>\r\n  <div class=\"layout-breadcrumb-seting\">\r\n    <el-drawer\r\n      title=\"主题编辑\"\r\n      :visible.sync=\"getThemeConfig.isDrawer\"\r\n      direction=\"rtl\"\r\n      destroy-on-close\r\n      size=\"320px\"\r\n      @close=\"onDrawerClose\"\r\n    >\r\n      <el-scrollbar class=\"layout-breadcrumb-seting-bar el-main\">\r\n        <!-- 布局切换 -->\r\n        <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.sixTitle') }}</el-divider>\r\n        <div class=\"layout-drawer-content-flex\">\r\n          <!-- defaults 布局 -->\r\n          <div\r\n            class=\"layout-drawer-content-item\"\r\n            :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }\"\r\n            @click=\"onSetLayout('defaults')\"\r\n          >\r\n            <section class=\"el-container el-circular\">\r\n              <aside class=\"el-aside w10 mr5\" style=\"width: 17px\"></aside>\r\n              <section class=\"el-container is-vertical\">\r\n                <header class=\"el-header mb5\" style=\"height: 10px\"></header>\r\n                <main class=\"el-main\"></main>\r\n              </section>\r\n            </section>\r\n          </div>\r\n\r\n          <!-- columns 布局 -->\r\n          <div\r\n            class=\"layout-drawer-content-item\"\r\n            :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }\"\r\n            @click=\"onSetLayout('columns')\"\r\n          >\r\n            <section class=\"el-container el-circular\">\r\n              <aside class=\"el-aside mr5\" style=\"width: 10px\"></aside>\r\n              <aside class=\"el-aside-dark mr5\" style=\"width: 17px\"></aside>\r\n              <section class=\"el-container is-vertical\">\r\n                <header class=\"el-header mb5\" style=\"height: 10px\"></header>\r\n                <main class=\"el-main\"></main>\r\n              </section>\r\n            </section>\r\n          </div>\r\n          <!-- classic 布局 -->\r\n          <div\r\n            class=\"layout-drawer-content-item\"\r\n            :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }\"\r\n            @click=\"onSetLayout('classic')\"\r\n          >\r\n            <section class=\"el-container is-vertical el-circular\">\r\n              <header class=\"el-aside mb5\" style=\"height: 10px\"></header>\r\n              <section class=\"el-container\">\r\n                <aside class=\"el-aside-dark mr5\" style=\"width: 17px\"></aside>\r\n                <section class=\"el-container is-vertical\">\r\n                  <main class=\"el-main\"></main>\r\n                </section>\r\n              </section>\r\n            </section>\r\n          </div>\r\n\r\n          <!-- transverse 布局 -->\r\n          <div\r\n            class=\"layout-drawer-content-item\"\r\n            :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }\"\r\n            @click=\"onSetLayout('transverse')\"\r\n          >\r\n            <section class=\"el-container is-vertical el-circular\">\r\n              <header class=\"el-aside mb5\" style=\"height: 10px\"></header>\r\n              <section class=\"el-container\">\r\n                <section class=\"el-container is-vertical\">\r\n                  <main class=\"el-main\"></main>\r\n                </section>\r\n              </section>\r\n            </section>\r\n          </div>\r\n        </div>\r\n        <!-- 界面设置 -->\r\n        <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.threeTitle') }}</el-divider>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mb10\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.themeStyle') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-select\r\n              v-model=\"getThemeConfig.themeStyle\"\r\n              placeholder=\"请选择\"\r\n              size=\"mini\"\r\n              style=\"width: 90px\"\r\n              @change=\"setLocalTheme\"\r\n            >\r\n              <el-option label=\"蓝黑\" value=\"theme-1\"></el-option>\r\n              <el-option label=\"蓝白\" value=\"theme-2\"></el-option>\r\n              <el-option label=\"绿黑\" value=\"theme-3\"></el-option>\r\n              <el-option label=\"绿白\" value=\"theme-4\"></el-option>\r\n              <el-option label=\"紫黑\" value=\"theme-5\"></el-option>\r\n              <el-option label=\"紫白\" value=\"theme-6\"></el-option>\r\n              <el-option label=\"红黑\" value=\"theme-7\"></el-option>\r\n              <el-option label=\"红白\" value=\"theme-8\"></el-option>\r\n              <el-option label=\"渐变\" value=\"theme-9\" v-if=\"getThemeConfig.layout === 'columns'\"></el-option>\r\n            </el-select>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"layout-breadcrumb-seting-bar-flex\"\r\n          v-if=\"getThemeConfig.layout === 'columns' || getThemeConfig.layout === 'defaults'\"\r\n        >\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsCollapse') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isCollapse\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsUniqueOpened') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isUniqueOpened\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsFixedHeader') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isFixedHeader\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- 界面显示 -->\r\n        <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.fourTitle') }}</el-divider>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsShowLogo') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isShowLogo\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"layout-breadcrumb-seting-bar-flex mt15\"\r\n          :style=\"{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }\"\r\n        >\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsBreadcrumb') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch\r\n              v-model=\"getThemeConfig.isBreadcrumb\"\r\n              :disabled=\"getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'\"\r\n              :width=\"35\"\r\n              @change=\"setLocalThemeConfig\"\r\n            >\r\n            </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isBreadcrumbIcon\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsTagsview') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isTagsview\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsFooter') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isFooter\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsGrayscale') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isGrayscale\" :width=\"35\" @change=\"onAddFilterChange('grayscale')\">\r\n            </el-switch>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsInvert') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isInvert\" :width=\"35\" @change=\"onAddFilterChange('invert')\"> </el-switch>\r\n          </div>\r\n        </div>\r\n        <!-- 暗黑模式 -->\r\n        <!-- <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsDark') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-switch v-model=\"getThemeConfig.isIsDark\" :width=\"35\" @change=\"onAddDarkChange\"> </el-switch>\r\n          </div>\r\n        </div> -->\r\n        <!-- 其它设置 -->\r\n        <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.fiveTitle') }}</el-divider>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveTagsStyle') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-radio-group\r\n              v-model=\"getThemeConfig.tagsStyle\"\r\n              :disabled=\"!getThemeConfig.isTagsview\"\r\n              size=\"mini\"\r\n              @change=\"setLocalThemeConfig\"\r\n            >\r\n              <el-radio-button label=\"tags-style-one\">卡片</el-radio-button>\r\n              <el-radio-button label=\"tags-style-four\">灵动</el-radio-button>\r\n              <el-radio-button label=\"tags-style-five\">圆滑</el-radio-button>\r\n            </el-radio-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveAnimation') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-radio-group v-model=\"getThemeConfig.animation\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n              <el-radio-button label=\"slide-left\">左滑</el-radio-button>\r\n              <el-radio-button label=\"opacitys\">透明</el-radio-button>\r\n              <el-radio-button label=\"slide-right\">右滑</el-radio-button>\r\n              <el-radio-button label=\"no-transition\">无</el-radio-button>\r\n            </el-radio-group>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"layout-breadcrumb-seting-bar-flex mt15\"\r\n          :class=\"{ mb28: getThemeConfig.layout !== 'columns' && getThemeConfig.layout !== 'classic' }\"\r\n        >\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-radio-group v-model=\"getThemeConfig.columnsAsideStyle\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n              <el-radio-button label=\"columns-round\">圆角</el-radio-button>\r\n              <el-radio-button label=\"columns-card\">卡片</el-radio-button>\r\n            </el-radio-group>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"layout-breadcrumb-seting-bar-flex mt15 mb28\"\r\n          v-if=\"getThemeConfig.layout === 'columns' || getThemeConfig.layout === 'classic'\"\r\n        >\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>\r\n          <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n            <el-radio-group v-model=\"getThemeConfig.columnsAsideLayout\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n              <el-radio-button label=\"columns-horizontal\">水平</el-radio-button>\r\n              <el-radio-button label=\"columns-vertical\">垂直</el-radio-button>\r\n            </el-radio-group>\r\n          </div>\r\n        </div>\r\n      </el-scrollbar>\r\n    </el-drawer>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport ClipboardJS from 'clipboard';\r\nimport { Local } from '@/utils/storage.js';\r\nimport { useChangeColor } from '@/utils/theme.js';\r\nimport config from '../../../../package.json';\r\nimport { themeList } from './theme';\r\nexport default {\r\n  name: 'layoutBreadcrumbSeting',\r\n  computed: {\r\n    // 获取布局配置信息\r\n    getThemeConfig() {\r\n      return this.$store.state.themeConfig.themeConfig;\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      contentPosotion: 'center',\r\n    };\r\n  },\r\n  created() {\r\n    // 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题\r\n    Local.set('frequency', 1);\r\n    // 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）\r\n    this.bus.$on('layoutMobileResize', (res) => {\r\n      if (this.$store.state.themeConfig.themeConfig.layout === res.layout) return false;\r\n      this.$store.state.themeConfig.themeConfig.layout = res.layout;\r\n      this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n      this.$store.state.themeConfig.themeConfig.isCollapse = false;\r\n    });\r\n    this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);\r\n  },\r\n  mounted() {\r\n    this.initLayoutConfig();\r\n  },\r\n  methods: {\r\n    // 全局主题\r\n    onColorPickerChange() {\r\n      // if (!this.getThemeConfig.primary) return;\r\n      // 颜色加深\r\n      // document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);\r\n      // 颜色变浅\r\n      for (let i = 1; i <= 9; i++) {\r\n        document.documentElement.style.setProperty(\r\n          `--prev-color-primary-light-${i}`,\r\n          `${useChangeColor().getLightColor(this.getThemeConfig.primary, i / 10)}`,\r\n        );\r\n      }\r\n      this.setLocalThemeConfig();\r\n    },\r\n    setLocalTheme(val) {\r\n      console.log(this.getThemeConfig.layout, val, 'layout');\r\n      let themeSelect = themeList[val];\r\n      themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n      /**\r\n       * 根据主题配置设置样式\r\n       * @param {string} val - 主题值\r\n       */\r\n      if (['classic'].includes(this.getThemeConfig.layout)) {\r\n        // 第三种布局\r\n        themeSelect['--prev-bg-topBar'] = '#282c34';\r\n        themeSelect['--prev-bg-topBarColor'] = '#fff';\r\n        // themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n        themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n        themeSelect['--prev-bg-menu-hover-ba-color'] = '#e5eeff';\r\n        // themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n        if (val == 'theme-1') {\r\n          themeSelect['--prev-bg-menuBar'] = '#fff';\r\n          themeSelect['--prev-border-color-lighter'] = '#e5eeff';\r\n          themeSelect['--prev-MenuActiveColor'] = '#0256FF';\r\n        } else if (val == 'theme-3') {\r\n          // themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n          themeSelect['--prev-bg-menuBar'] = '#fff';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n          themeSelect['--prev-MenuActiveColor'] = '#41b584';\r\n        } else if (val == 'theme-5') {\r\n          // themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n          themeSelect['--prev-bg-menuBar'] = '#fff';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n          themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n        } else if (val == 'theme-7') {\r\n          // themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n          themeSelect['--prev-bg-menuBar'] = '#fff';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n          themeSelect['--prev-MenuActiveColor'] = '#f34d37';\r\n        } else {\r\n          themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n          themeSelect['--prev-bg-columnsMenuActiveColor'] = '#515a6e';\r\n\r\n          // themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n        }\r\n      } else if (['transverse'].includes(this.getThemeConfig.layout)) {\r\n        // 第四种布局\r\n        themeSelect['--prev-bg-topBar'] = '#282c34';\r\n        themeSelect['--prev-bg-topBarColor'] = '#fff';\r\n        themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n        themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n        if (val == 'theme-1') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#0256FF';\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n        } else if (val == 'theme-3') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n        } else if (val == 'theme-5') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n        } else if (val == 'theme-7') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n        } else {\r\n          themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n          themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n          themeSelect['--prev-MenuActiveColor'] = '#515a6e';\r\n        }\r\n      } else if (this.getThemeConfig.layout === 'columns') {\r\n        //第二种布局\r\n        themeSelect['--prev-bg-topBar'] = '#fff';\r\n        themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n        themeSelect['--prev-bg-menuBar'] = '#fff';\r\n        themeSelect['--prev-bg-menuBarColor'] = '#303133';\r\n        themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n        if (val == 'theme-1') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#e5eeff';\r\n          themeSelect['--prev-color-primary'] = '#0256FF';\r\n          themeSelect['--prev-MenuActiveColor'] = '#0256FF';\r\n        } else if (val == 'theme-3') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';\r\n          themeSelect['--prev-color-primary'] = '#41b584';\r\n          themeSelect['--prev-MenuActiveColor'] = '#41b584';\r\n        } else if (val == 'theme-5') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#f0eefe';\r\n          themeSelect['--prev-color-primary'] = '#6954f0';\r\n          themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n        } else if (val == 'theme-7') {\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';\r\n          themeSelect['--prev-color-primary'] = '#f34d37';\r\n          themeSelect['--prev-MenuActiveColor'] = '#f34d37';\r\n        }\r\n      } else {\r\n        //默认布局\r\n        if (val == 'theme-1') {\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-color-primary'] = '#0256FF';\r\n          themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n          themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#0256FF';\r\n        } else if (val == 'theme-3') {\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-color-primary'] = '#41b584';\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n          themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n          themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n        } else if (val == 'theme-5') {\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n          themeSelect['--prev-color-primary'] = '#6954f0';\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n          themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n        } else if (val == 'theme-7') {\r\n          themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n          themeSelect['--prev-bg-topBar'] = '#fff';\r\n          themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n          themeSelect['--prev-color-primary'] = '#f34d37';\r\n          themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n          themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n          themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n        }\r\n      }\r\n\r\n      if (['theme-1', 'theme-2'].includes(val)) {\r\n        this.$store.state.themeConfig.themeConfig.primary = '#0256FF'; //蓝黑蓝白\r\n      } else if (['theme-3', 'theme-4'].includes(val)) {\r\n        this.$store.state.themeConfig.themeConfig.primary = '#41a584'; //绿黑绿白\r\n      } else if (['theme-5', 'theme-6'].includes(val)) {\r\n        this.$store.state.themeConfig.themeConfig.primary = '#6954f0'; //紫黑紫白\r\n      } else if (['theme-7', 'theme-8'].includes(val)) {\r\n        this.$store.state.themeConfig.themeConfig.primary = '#f34d37'; //红黑红白\r\n      } else {\r\n        this.$store.state.themeConfig.themeConfig.primary = '#0256FF'; //默认蓝\r\n      }\r\n      /**\r\n       * 遍历主题选择对象，将其属性值设置为文档根元素的样式属性\r\n       */\r\n      for (let key in themeSelect) {\r\n        // 将主题选择对象的属性作为样式属性名，属性值作为样式属性值，设置到文档根元素上\r\n        document.documentElement.style.setProperty(key, themeSelect[key]);\r\n      }\r\n      // 在下一次 DOM 更新循环结束后执行回调函数\r\n      this.$nextTick((e) => {\r\n        // 调用 onColorPickerChange 方法\r\n        this.onColorPickerChange();\r\n      });\r\n    },\r\n    onMenuBgColorChange() {\r\n      if (!this.getThemeConfig.menuBgColor) return;\r\n      // 颜色加深\r\n      document.documentElement.style.setProperty('--prev-bg-menuBar', this.getThemeConfig.menuBgColor);\r\n      this.setLocalThemeConfig();\r\n    },\r\n    // 深色模式\r\n    onAddDarkChange() {\r\n      const body = document.documentElement;\r\n      if (this.getThemeConfig.isIsDark) body.setAttribute('data-theme', 'dark');\r\n      else body.setAttribute('data-theme', '');\r\n      this.setLocalThemeConfig();\r\n    },\r\n    // 初始化：刷新页面时，设置了值，直接取缓存中的值进行初始化\r\n    initLayoutConfig() {\r\n      window.addEventListener('load', () => {\r\n        // 默认样式\r\n        this.onColorPickerChange();\r\n        // 灰色模式\r\n        if (this.$store.state.themeConfig.themeConfig.isGrayscale) this.onAddFilterChange('grayscale');\r\n        // 色弱模式\r\n        if (this.$store.state.themeConfig.themeConfig.isInvert) this.onAddFilterChange('invert');\r\n        // 深色模式\r\n        if (this.$store.state.themeConfig.themeConfig.isIsDark) this.onAddDarkChange();\r\n        // 语言国际化\r\n        if (Local.get('themeConfigPrev')) this.$i18n.locale = Local.get('themeConfigPrev').globalI18n;\r\n      });\r\n    },\r\n    // 存储布局配置\r\n    setLocalThemeConfig() {\r\n      Local.remove('themeConfigPrev');\r\n      Local.set('themeConfigPrev', this.$store.state.themeConfig.themeConfig);\r\n      this.setLocalThemeConfigStyle();\r\n    },\r\n    // 存储布局配置全局主题样式（html根标签）\r\n    setLocalThemeConfigStyle() {\r\n      Local.set('themeConfigStyle', document.documentElement.style.cssText);\r\n    },\r\n    // 布局配置弹窗打开\r\n    openDrawer() {\r\n      this.$store.state.themeConfig.themeConfig.isDrawer = true;\r\n    },\r\n    // 关闭弹窗时，初始化变量\r\n    onDrawerClose() {\r\n      this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n      this.setLocalThemeConfig();\r\n    },\r\n    // 灰色模式/色弱模式\r\n    onAddFilterChange(attr) {\r\n      if (attr === 'grayscale') {\r\n        if (this.$store.state.themeConfig.themeConfig.isGrayscale)\r\n          this.$store.state.themeConfig.themeConfig.isInvert = false;\r\n      } else {\r\n        if (this.$store.state.themeConfig.themeConfig.isInvert)\r\n          this.$store.state.themeConfig.themeConfig.isGrayscale = false;\r\n      }\r\n      const cssAttr =\r\n        attr === 'grayscale'\r\n          ? `grayscale(${this.$store.state.themeConfig.themeConfig.isGrayscale ? 1 : 0})`\r\n          : `invert(${this.$store.state.themeConfig.themeConfig.isInvert ? '80%' : '0%'})`;\r\n      const appEle = document.body;\r\n      appEle.setAttribute('style', `filter: ${cssAttr};`);\r\n      this.setLocalThemeConfig();\r\n    },\r\n    // 布局切换\r\n    onSetLayout(layout) {\r\n      Local.set('oldLayout', layout);\r\n      if (this.$store.state.themeConfig.themeConfig.layout === layout) return false;\r\n      if (['classic', 'transverse'].includes(layout)) {\r\n        this.$store.state.themeConfig.themeConfig.isTagsview = false;\r\n      } else {\r\n        this.$store.state.themeConfig.themeConfig.isTagsview = true;\r\n      }\r\n      this.$store.state.themeConfig.themeConfig.layout = layout;\r\n      this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n      this.$store.state.themeConfig.themeConfig.columnsAsideStyle = 'columns-card';\r\n      this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);\r\n    },\r\n    // 菜单 / 顶栏背景等\r\n    onBgColorPickerChange(bg, rgb) {\r\n      document.documentElement.style.setProperty(`--prev-bg-${bg}`, rgb);\r\n      this.setLocalThemeConfigStyle();\r\n    },\r\n    // 一键复制配置\r\n    onCopyConfigClick() {\r\n      this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n      let clipboardJS = new ClipboardJS('.copy-config-btn', {\r\n        text: () => JSON.stringify(this.$store.state.themeConfig.themeConfig),\r\n      });\r\n      clipboardJS.on('success', () => {\r\n        this.$message.success('配置复制成功');\r\n        this.isDrawer = false;\r\n        clipboardJS.destroy();\r\n      });\r\n      clipboardJS.on('error', () => {\r\n        this.$message.error('配置复制失败');\r\n      });\r\n    },\r\n    // 一键恢复默认\r\n    onResetConfigClick() {\r\n      Local.clear();\r\n      window.location.reload();\r\n      Local.set('version', config.version);\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style>\r\nbody .v-modal {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n</style>\r\n<style scoped lang=\"scss\">\r\n.w10 {\r\n  width: 10px;\r\n}\r\n.mr5 {\r\n  margin-right: 5px;\r\n}\r\n::v-deep .el-drawer__header {\r\n  margin-bottom: 0;\r\n}\r\n::v-deep .el-radio-button--mini .el-radio-button__inner {\r\n  padding: 7px 8px;\r\n}\r\n::v-deep .el-drawer__body {\r\n  padding: 0;\r\n}\r\n.layout-breadcrumb-seting-bar {\r\n  // height: calc(100vh - 50px);\r\n  padding: 0 15px;\r\n  ::v-deep .el-scrollbar__view {\r\n    // overflow-x: auto !important;\r\n    overflow-x: hidden;\r\n  }\r\n  .layout-breadcrumb-seting-bar-flex {\r\n    display: flex;\r\n    align-items: center;\r\n    &-label {\r\n      flex: 1;\r\n      color: var(--prev-color-text-primary);\r\n    }\r\n  }\r\n  .layout-drawer-content-flex {\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-content: center;\r\n    justify-content: center;\r\n    margin: 0 -5px;\r\n    .layout-drawer-content-item.drawer-layout-active {\r\n      border: 1px solid;\r\n      border-color: var(--prev-color-primary);\r\n    }\r\n    .layout-drawer-content-item:hover {\r\n      transition: all 0.3s ease-in-out;\r\n      border: 1px solid;\r\n      border-color: var(--prev-color-primary);\r\n    }\r\n    .layout-drawer-content-item {\r\n      width: 107px;\r\n      height: 70px;\r\n      cursor: pointer;\r\n      border: 1px solid rgba(0, 0, 0, 0);\r\n      position: relative;\r\n      padding: 6px;\r\n      background: #ffffff;\r\n      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);\r\n      border-radius: 6px;\r\n      opacity: 1;\r\n      margin: 10px;\r\n\r\n      .el-container {\r\n        height: 100%;\r\n        .el-aside-dark {\r\n          opacity: 0.5;\r\n          background-color: var(--prev-tag-active-color);\r\n          border-radius: 2px;\r\n        }\r\n        .el-aside {\r\n          background-color: var(--prev-tag-active-color);\r\n          border-radius: 2px;\r\n        }\r\n        .el-header {\r\n          border-radius: 2px;\r\n          background-color: var(--prev-color-seting-header);\r\n        }\r\n        .el-main {\r\n          border-radius: 2px;\r\n          border: 1px dashed var(--prev-color-primary);\r\n          padding: 0;\r\n          background-color: var(--prev-color-seting-main);\r\n        }\r\n      }\r\n      .el-circular {\r\n        border-radius: 2px;\r\n        overflow: hidden;\r\n        border: 1px solid transparent;\r\n        transition: all 0.3s ease-in-out;\r\n      }\r\n\r\n      .layout-tips-warp,\r\n      .layout-tips-warp-active {\r\n        transition: all 0.3s ease-in-out;\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform: translate(-50%, -50%);\r\n        border: 1px solid;\r\n        border-color: var(--prev-color-primary-light-5);\r\n        border-radius: 100%;\r\n        padding: 4px;\r\n        .layout-tips-box {\r\n          transition: inherit;\r\n          width: 30px;\r\n          height: 30px;\r\n          z-index: 9;\r\n          border: 1px solid;\r\n          border-color: var(--prev-color-primary-light-5);\r\n          border-radius: 100%;\r\n          .layout-tips-txt {\r\n            transition: inherit;\r\n            position: relative;\r\n            top: 5px;\r\n            font-size: 12px;\r\n            line-height: 1;\r\n            letter-spacing: 2px;\r\n            white-space: nowrap;\r\n            color: var(--prev-color-primary-light-5);\r\n            text-align: center;\r\n            transform: rotate(30deg);\r\n            left: -1px;\r\n            background-color: var(--prev-color-seting-main);\r\n            width: 32px;\r\n            height: 17px;\r\n            line-height: 17px;\r\n          }\r\n        }\r\n      }\r\n      .layout-tips-warp-active {\r\n        border: 1px solid;\r\n        border-color: var(--prev-color-primary);\r\n        .layout-tips-box {\r\n          border: 1px solid;\r\n          border-color: var(--prev-color-primary);\r\n          .layout-tips-txt {\r\n            color: var(--prev-color-primary) !important;\r\n            background-color: var(--prev-color-seting-main) !important;\r\n          }\r\n        }\r\n      }\r\n      &:hover {\r\n        .layout-tips-warp {\r\n          transition: all 0.3s ease-in-out;\r\n          border-color: var(--prev-color-primary);\r\n          .layout-tips-box {\r\n            transition: inherit;\r\n            border-color: var(--prev-color-primary);\r\n            .layout-tips-txt {\r\n              transition: inherit;\r\n              color: var(--prev-color-primary) !important;\r\n              background-color: var(--prev-color-seting-main) !important;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .copy-config {\r\n    margin: 10px 0;\r\n    .copy-config-btn {\r\n      width: 100%;\r\n      margin-top: 15px;\r\n    }\r\n    .copy-config-btn-reset {\r\n      width: 100%;\r\n      margin: 10px 0 0;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}