| | |
| | | <!-- |
| | | * @Date: 2024-03-23 09:49:06 |
| | | * @LastEditors: gaoshp |
| | | * @LastEditTime: 2024-03-26 21:41:35 |
| | | * @FilePath: /cps-web/src/App.vue |
| | | --> |
| | | <template> |
| | | <el-config-provider :locale="locale" :size="config.size" :zIndex="config.zIndex" :button="config.button"> |
| | | <router-view></router-view> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import colorTool from '@/utils/color' |
| | | import colorTool from '@/utils/color' |
| | | |
| | | export default { |
| | | name: 'App', |
| | | data() { |
| | | return { |
| | | config: { |
| | | size: "default", |
| | | zIndex: 2000, |
| | | button: { |
| | | autoInsertSpace: false |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | locale(){ |
| | | return this.$i18n.messages[this.$i18n.locale].el |
| | | }, |
| | | }, |
| | | created() { |
| | | //设置主题颜色 |
| | | const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR') |
| | | if(app_color){ |
| | | document.documentElement.style.setProperty('--el-color-primary', app_color); |
| | | for (let i = 1; i <= 9; i++) { |
| | | document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10)); |
| | | } |
| | | for (let i = 1; i <= 9; i++) { |
| | | document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10)); |
| | | export default { |
| | | name: 'App', |
| | | data() { |
| | | return { |
| | | config: { |
| | | size: "default", |
| | | zIndex: 2000, |
| | | button: { |
| | | autoInsertSpace: false |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | locale() { |
| | | return this.$i18n.messages[this.$i18n.locale].el |
| | | }, |
| | | }, |
| | | created() { |
| | | //设置主题颜色 |
| | | const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR') |
| | | if (app_color) { |
| | | document.documentElement.style.setProperty('--el-color-primary', app_color); |
| | | for (let i = 1; i <= 9; i++) { |
| | | document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color, i / 10)); |
| | | } |
| | | for (let i = 1; i <= 9; i++) { |
| | | document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color, i / 10)); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | const debounce = (fn, delay) => { |
| | | let timer |
| | | return (...args) => { |
| | | if (timer) { |
| | | clearTimeout(timer) |
| | | } |
| | | timer = setTimeout(() => { |
| | | fn(...args) |
| | | }, delay) |
| | | } |
| | | } |
| | | |
| | | const _ResizeObserver = window.ResizeObserver; |
| | | window.ResizeObserver = class ResizeObserver extends _ResizeObserver { |
| | | constructor(callback) { |
| | | callback = debounce(callback, 200); |
| | | super(callback); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/style/style.scss'; |
| | | @import '@/style/style.scss'; |
| | | </style> |