@epxing/dashboard 5.3.0-beta.2 → 5.3.0-beta.3

package/src/Widget.vue

@@ -1,354 +1,354 @@
-
-<template>
-  <div :class="['dashboard', 'dashboard--'+ theme, { 'dashboard--hidden-scroll-bar': $configs.scrollBarHidden }]" :style="$component.style" ref="container">
-    <div ref="dashboard" class="dashboard-container" :style="mobileDashboard ? { width: '100%', maxWidth: (Number($configs.mobileCanvasWidth) || 375) + 'px', margin: '0 auto', flex: 'none' } : {}">
-      <epx-dashboard-grid
-        :items="components"
-        :grid="gridParams"
-        :load-way="loadWay"
-        :body-height="bodyHeight"
-        scroll-root-selector=".dashboard-container">
-        <template #item="{ item: component }">
-          <!-- 渲染组件 -->
-          <div v-if="component.contentType" class="dashboard-component">
-            <!-- epx-dashboard__component 是看板主题 CSS 的组件卡片选择器（见 theme-style.js），
-                 widget 内的组件也要带上，否则外层看板的主题样式盖不到这里 -->
-            <epx-component v-bind="isPage? $forwardAttrs($attrs): {}" class="component epx-dashboard__component"
-              :name="component.contentType"
-              is-dashboard
-              :content-type="component.contentType"
-              :dashboard-id="$component.id"
-              :comp-id="getComponentId(component)"
-              :comp-title="component.title"
-              :items="component.items"
-              :itemConfigs="$component.itemConfigs"
-              :comp-style="component.style"
-              :comp-configs="component.configs"
-              :mobile-appearance="mobileRendering ? component.mobileAppearance : undefined"
-              :comp-grid="containerGrid(component)"
-              :chart-cache="$configs.chartCache"
-              :theme="theme">
-            </epx-component>
-          </div>
-        </template>
-      </epx-dashboard-grid>
-    </div>
-  </div>
-</template>
-
-<script>
-import DashboardGrid from './DashboardGrid.vue'
-import chartRequestScope from './chart-request-scope'
-import { evalWith } from '@epxing/utils/src/eval-with'
-import component from '@epxing/core/src/mixins/component'
-import { pageGridMixin } from './grid/mixins'
-import { stackMobileLayout } from './layout-util'
-import { indexDashboardItems, resolveMobileItem } from './mobile-design'
-import { getPageGrid, isLegacyConfig } from './grid/model'
-import { mapState } from 'vuex'
-
-// T31/T29：子树内 component 型全刷新。原用 `this.$children` 递归（Vue3 已移除）→
-// 改走 T31 建的父子注册表 `_epxWalkChildren`（它本身就遍历整棵子树，故不需要外层递归）。
-function refesh () {
-  this.resolveChartRequestBroker().invalidate()
-  this._epxWalkChildren(child => {
-    if (child.$options.$componentType === 'component' && child.$refesh) child.$refesh()
-  })
-}
-export default {
-  name: 'epx-dashboard-widget',
-  mixins: [component, pageGridMixin, chartRequestScope],
-  components: { [DashboardGrid.name]: DashboardGrid },
-  $componentType: 'component',
-  navConfigs: {
-    flag: false
-  },
-  style: {},
-  layout: 'grid',
-  // 组件列表
-  items: [
-  ],
-  // 组件配置
-  itemConfigs: {
-
-  },
-  props: {
-    inline: Boolean,
-    routeKey: [String, Number],
-    routes: {
-      type: Array,
-      default () {
-        return []
-      }
-    }
-  },
-  data () {
-    return {
-      headerTitle: null,
-      pageParams: {},
-      model: {}, // 组件全局data
-      pageEvents: {},
-      searchScopeParams: []
-    }
-  },
-  computed: {
-    ...mapState({
-      showMenu: state => state.config.showMenu,
-      showAppNav: state => state.config.showAppNav
-    }),
-    pageTitle () {
-      return this.headerTitle || (this.page && this.page.title) || (this.meta && this.meta.name)
-    },
-    components () {
-      // items  itemConfigs
-      const { items = [], mItems } = this.$component
-      let list
-      if (this.mobileDashboard) {
-        list = items.filter(item => !item.mobileHidden)
-      } else if (this.$isMobile) {
-        if (mItems && mItems.length) {
-          const pcIndex = indexDashboardItems(items)
-          list = mItems.filter(c => !c.mobileHidden && pcIndex.has(String(c.id))).map(c => resolveMobileItem(c, pcIndex))
-        } else {
-          const { mobileAutoStack = true } = this.$configs
-          list = mobileAutoStack ? stackMobileLayout(items, 48) : items
-        }
-      } else {
-        list = items
-      }
-      // 布局项必须带 i（设计器与旧配置都以 id 为准），运行时用 id 兜底补齐
-      list.forEach(item => {
-        if (item && item.i == null && item.id != null) item.i = item.id
-      })
-      return list
-    },
-    theme () {
-      const { theme } = this.$configs
-      return theme
-    },
-    // Widget 原本没有移动端收紧间距的分支（与页面版 Dashboard 不同），按「旧配置像素一致」保留原语义，覆盖 pageGridMixin 的 gridParams
-    gridParams () {
-      const grid = getPageGrid(this.$configs)
-      return this.mobileDashboard ? { ...grid, gap: [8, 8], padding: null } : grid
-    },
-    colAttribute () {
-      return (component = {}) => {
-        const { xsspan = 24, ...other } = component
-        const colAttribute = {
-          ...other,
-          xs: {
-            span: xsspan
-          }
-        }
-        delete colAttribute.id
-        delete colAttribute.style
-        delete colAttribute.title
-        return colAttribute
-      }
-    },
-    pageStyle () {
-      const { layout = 'grid', direction = 'row', justify = 'flex-start', align = 'top' } = this.$configs
-      if (layout === 'flex') {
-        return { display: 'flex', 'flex-direction': direction, 'justify-content': justify, 'align-items': align }
-      } else {
-        return { }
-      }
-    },
-    componentStyle () {
-      return component => {
-        const { layout } = this.$configs
-        const { flex } = component
-        const compoentStyle = { }
-        if (layout === 'flex' && flex) {
-          compoentStyle.flex = 1
-        }
-        return compoentStyle
-      }
-    },
-    scopeParams () {
-      const { globalScopeParams: configScopeParams = [] } = this.$configs
-      const { scopeParams: queryScopeParams = [] } = this.$configs
-
-      // 格式化scopeParams
-      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
-      const that = this
-      for (const scopeKey in _scopeParams) {
-        const scope = _scopeParams[scopeKey]
-        if (!scope) continue
-        let values = scope.values
-        if (/\$\[(.+)\]/.test(values)) {
-          values = values.replace(/\$\[(.+)\]/, (match, key) => {
-            try {
-              return evalWith(`that.${key}`, { that }) || evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
-            } catch (error) {
-              return scope.values
-            }
-          })
-        }
-        if (/#\{(.+)\}/.test(values)) {
-          values = values.replace(/#\{(.+)\}/, (match, key) => {
-            try {
-              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
-            } catch (error) {
-              return scope.values
-            }
-          })
-        }
-        scope.values = values
-      }
-      return _scopeParams
-    }
-  },
-  watch: {
-    pageTitle: {
-      handler (v) {
-        this.$emit('change-route', this.routeKey, { title: v })
-      },
-      immediate: true
-    },
-    scopeParams: {
-      deep: true,
-      handler (v) {
-        this.pageParams.scopeParams = v
-      },
-      immediate: true
-    }
-  },
-  provide () {
-    // 容器内网格的门控策略 / 配置是否旧版都跟随本组件（provide 只跑一次，用函数延迟读）
-    const gridProvide = {
-      getMobileDashboard: () => this.mobileDashboard,
-      getDashboardLoadWay: () => this.loadWay,
-      getDashboardLegacy: () => isLegacyConfig(this.$configs)
-    }
-    if (this.isPage) {
-      return {
-        ...gridProvide,
-        upPage: this,
-        pageId: this.page ? this.page.pageId : '', // 当前页面id
-        pageMetaId: this.isPage ? (this.$metaId || (this.page ? this.page.metaId : '')) : null // 当前页面对象id
-      }
-    }
-    return gridProvide // T28：Vue3 provide 合并不容忍 undefined
-  },
-  methods: {
-    $refesh () {
-      refesh.apply(this)
-      // if (this.upPage) this.upPage.$refesh()
-    },
-    openFullScreen () {
-      if (this.$refs.dashboard.requestFullscreen) {
-        this.$refs.dashboard.requestFullscreen()
-      }
-    },
-    search (v) {
-      this.searchScopeParams = v
-    }
-  },
-  created () {
-    // 这里原本存了 showAppNav/showMenu 用于卸载时「还原」，已删除，理由见 beforeUnmount 的注释。
-    // 行高 / 间距按视口等比（旧 autoHeight）时才需要跟随窗口尺寸
-    const grid = this.gridParams
-    if (grid.rowHeight === 'auto' || grid.gap === 'auto') {
-      window.addEventListener('resize', this.updateBodyHeight)
-    }
-  },
-  beforeUnmount () {
-    // 这里原来无条件写两个**全局** UI 状态（SWITCH_MENU_SHOW / SWITCH_APP_NAV_SHOW），已删除。三个理由：
-    // ① **没有对应的「获取」**：整个 packages/dashboard 里没有任何地方隐藏菜单或应用导航
-    //    （openFullScreen 走的是浏览器原生 requestFullscreen，与这两个状态无关）。
-    //    只还原、从不获取，等于凭空覆盖别人的状态。
-    // ② **存的值是反的**：created 里 `defaultShowMenu = this.showAppNav`、
-    //    `defaultShowAppNav = this.showMenu`，两者交叉，还原时把 appNav 的旧值写进 menu、反之亦然。
-    // ③ **卸载不等于「用户离开了本页」**：标签是 v-for + v-show 全挂载，关掉一个**后台**标签、
-    //    或标签数超过 MOUNTED_TAB_MAX 被 LRU 淘汰内容，都会走到这里 ——
-    //    于是「关掉一个大屏标签，把另一个正在看的标签的菜单弹了出来」。
-    // 这段代码此前从未执行过（keep-alive 的页从不真卸载），M0 改成真卸载后才被唤醒，故一并清理。
-    window.removeEventListener('resize', this.updateBodyHeight)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard {
-  width: 100%;
-  height:  100%;
-  overflow: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .base-page {
-    position: static;
-    overflow-x:  hidden;
-    padding: 0;
-  }
-}
-.dashboard--hidden-scroll-bar {
-  .dashboard-container {
-    &::-webkit-scrollbar-thumb {
-      background: none;
-      &:hover {
-        background-color: rgba(95, 95, 95, .3);
-      }
-    }
-  }
-}
-.dashboard-container {
-  width: 100%;
-  flex: 1;
-  overflow: auto;
-}
-.dashboard-component {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-.dashboard--dark {
-  .dashboard-container{
-    background: #151C3D;
-    .dashboard-component {
-      >div {
-        // background: rgba(255,255,255, .1)
-      }
-    }
-  }
-}
-.dashboard--technology {
-  .dashboard-container{
-    background: url('@/assets/images/dashboard/technology_bg.jpg') no-repeat center;
-    background-size: cover;
-
-  }
-   .component {
-      // position: relative;
-      // &::before {
-      //   content: '';
-      //   position: absolute;
-      //   top: 0;
-      //   display: block;
-      //   width: 100%;
-      //   height: 1px;
-      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
-      //   opacity: 0.5;
-      // }
-      // &::after {
-      //   content: '';
-      //   position: absolute;
-      //   bottom: 0;
-      //   display: block;
-      //   width: 100%;
-      //   height: 1px;
-      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
-      //   opacity: 0.5;
-      // }
-      // background: rgba(255,255,255, .1);
-      //   backdrop-filter: blur(4px);
-      // >div {
-      //   background: rgba(255,255,255, .1);
-      //   backdrop-filter: blur(4px);
-      // }
-    }
-}
-</style>
+
+<template>
+  <div :class="['dashboard', 'dashboard--'+ theme, { 'dashboard--hidden-scroll-bar': $configs.scrollBarHidden }]" :style="$component.style" ref="container">
+    <div ref="dashboard" class="dashboard-container" :style="mobileDashboard ? { width: '100%', maxWidth: (Number($configs.mobileCanvasWidth) || 375) + 'px', margin: '0 auto', flex: 'none' } : {}">
+      <epx-dashboard-grid
+        :items="components"
+        :grid="gridParams"
+        :load-way="loadWay"
+        :body-height="bodyHeight"
+        scroll-root-selector=".dashboard-container">
+        <template #item="{ item: component }">
+          <!-- 渲染组件 -->
+          <div v-if="component.contentType" class="dashboard-component">
+            <!-- epx-dashboard__component 是看板主题 CSS 的组件卡片选择器（见 theme-style.js），
+                 widget 内的组件也要带上，否则外层看板的主题样式盖不到这里 -->
+            <epx-component v-bind="isPage? $forwardAttrs($attrs): {}" class="component epx-dashboard__component"
+              :name="component.contentType"
+              is-dashboard
+              :content-type="component.contentType"
+              :dashboard-id="$component.id"
+              :comp-id="getComponentId(component)"
+              :comp-title="component.title"
+              :items="component.items"
+              :itemConfigs="$component.itemConfigs"
+              :comp-style="component.style"
+              :comp-configs="component.configs"
+              :mobile-appearance="mobileRendering ? component.mobileAppearance : undefined"
+              :comp-grid="containerGrid(component)"
+              :chart-cache="$configs.chartCache"
+              :theme="theme">
+            </epx-component>
+          </div>
+        </template>
+      </epx-dashboard-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardGrid from './DashboardGrid.vue'
+import chartRequestScope from './chart-request-scope'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import component from '@epxing/core/src/mixins/component'
+import { pageGridMixin } from './grid/mixins'
+import { stackMobileLayout } from './layout-util'
+import { indexDashboardItems, resolveMobileItem } from './mobile-design'
+import { getPageGrid, isLegacyConfig } from './grid/model'
+import { mapState } from 'vuex'
+
+// T31/T29：子树内 component 型全刷新。原用 `this.$children` 递归（Vue3 已移除）→
+// 改走 T31 建的父子注册表 `_epxWalkChildren`（它本身就遍历整棵子树，故不需要外层递归）。
+function refesh () {
+  this.resolveChartRequestBroker().invalidate()
+  this._epxWalkChildren(child => {
+    if (child.$options.$componentType === 'component' && child.$refesh) child.$refesh()
+  })
+}
+export default {
+  name: 'epx-dashboard-widget',
+  mixins: [component, pageGridMixin, chartRequestScope],
+  components: { [DashboardGrid.name]: DashboardGrid },
+  $componentType: 'component',
+  navConfigs: {
+    flag: false
+  },
+  style: {},
+  layout: 'grid',
+  // 组件列表
+  items: [
+  ],
+  // 组件配置
+  itemConfigs: {
+
+  },
+  props: {
+    inline: Boolean,
+    routeKey: [String, Number],
+    routes: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      headerTitle: null,
+      pageParams: {},
+      model: {}, // 组件全局data
+      pageEvents: {},
+      searchScopeParams: []
+    }
+  },
+  computed: {
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    pageTitle () {
+      return this.headerTitle || (this.page && this.page.title) || (this.meta && this.meta.name)
+    },
+    components () {
+      // items  itemConfigs
+      const { items = [], mItems } = this.$component
+      let list
+      if (this.mobileDashboard) {
+        list = items.filter(item => !item.mobileHidden)
+      } else if (this.$isMobile) {
+        if (mItems && mItems.length) {
+          const pcIndex = indexDashboardItems(items)
+          list = mItems.filter(c => !c.mobileHidden && pcIndex.has(String(c.id))).map(c => resolveMobileItem(c, pcIndex))
+        } else {
+          const { mobileAutoStack = true } = this.$configs
+          list = mobileAutoStack ? stackMobileLayout(items, 48) : items
+        }
+      } else {
+        list = items
+      }
+      // 布局项必须带 i（设计器与旧配置都以 id 为准），运行时用 id 兜底补齐
+      list.forEach(item => {
+        if (item && item.i == null && item.id != null) item.i = item.id
+      })
+      return list
+    },
+    theme () {
+      const { theme } = this.$configs
+      return theme
+    },
+    // Widget 原本没有移动端收紧间距的分支（与页面版 Dashboard 不同），按「旧配置像素一致」保留原语义，覆盖 pageGridMixin 的 gridParams
+    gridParams () {
+      const grid = getPageGrid(this.$configs)
+      return this.mobileDashboard ? { ...grid, gap: [8, 8], padding: null } : grid
+    },
+    colAttribute () {
+      return (component = {}) => {
+        const { xsspan = 24, ...other } = component
+        const colAttribute = {
+          ...other,
+          xs: {
+            span: xsspan
+          }
+        }
+        delete colAttribute.id
+        delete colAttribute.style
+        delete colAttribute.title
+        return colAttribute
+      }
+    },
+    pageStyle () {
+      const { layout = 'grid', direction = 'row', justify = 'flex-start', align = 'top' } = this.$configs
+      if (layout === 'flex') {
+        return { display: 'flex', 'flex-direction': direction, 'justify-content': justify, 'align-items': align }
+      } else {
+        return { }
+      }
+    },
+    componentStyle () {
+      return component => {
+        const { layout } = this.$configs
+        const { flex } = component
+        const compoentStyle = { }
+        if (layout === 'flex' && flex) {
+          compoentStyle.flex = 1
+        }
+        return compoentStyle
+      }
+    },
+    scopeParams () {
+      const { globalScopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$configs
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.${key}`, { that }) || evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  watch: {
+    pageTitle: {
+      handler (v) {
+        this.$emit('change-route', this.routeKey, { title: v })
+      },
+      immediate: true
+    },
+    scopeParams: {
+      deep: true,
+      handler (v) {
+        this.pageParams.scopeParams = v
+      },
+      immediate: true
+    }
+  },
+  provide () {
+    // 容器内网格的门控策略 / 配置是否旧版都跟随本组件（provide 只跑一次，用函数延迟读）
+    const gridProvide = {
+      getMobileDashboard: () => this.mobileDashboard,
+      getDashboardLoadWay: () => this.loadWay,
+      getDashboardLegacy: () => isLegacyConfig(this.$configs)
+    }
+    if (this.isPage) {
+      return {
+        ...gridProvide,
+        upPage: this,
+        pageId: this.page ? this.page.pageId : '', // 当前页面id
+        pageMetaId: this.isPage ? (this.$metaId || (this.page ? this.page.metaId : '')) : null // 当前页面对象id
+      }
+    }
+    return gridProvide // T28：Vue3 provide 合并不容忍 undefined
+  },
+  methods: {
+    $refesh () {
+      refesh.apply(this)
+      // if (this.upPage) this.upPage.$refesh()
+    },
+    openFullScreen () {
+      if (this.$refs.dashboard.requestFullscreen) {
+        this.$refs.dashboard.requestFullscreen()
+      }
+    },
+    search (v) {
+      this.searchScopeParams = v
+    }
+  },
+  created () {
+    // 这里原本存了 showAppNav/showMenu 用于卸载时「还原」，已删除，理由见 beforeUnmount 的注释。
+    // 行高 / 间距按视口等比（旧 autoHeight）时才需要跟随窗口尺寸
+    const grid = this.gridParams
+    if (grid.rowHeight === 'auto' || grid.gap === 'auto') {
+      window.addEventListener('resize', this.updateBodyHeight)
+    }
+  },
+  beforeUnmount () {
+    // 这里原来无条件写两个**全局** UI 状态（SWITCH_MENU_SHOW / SWITCH_APP_NAV_SHOW），已删除。三个理由：
+    // ① **没有对应的「获取」**：整个 packages/dashboard 里没有任何地方隐藏菜单或应用导航
+    //    （openFullScreen 走的是浏览器原生 requestFullscreen，与这两个状态无关）。
+    //    只还原、从不获取，等于凭空覆盖别人的状态。
+    // ② **存的值是反的**：created 里 `defaultShowMenu = this.showAppNav`、
+    //    `defaultShowAppNav = this.showMenu`，两者交叉，还原时把 appNav 的旧值写进 menu、反之亦然。
+    // ③ **卸载不等于「用户离开了本页」**：标签是 v-for + v-show 全挂载，关掉一个**后台**标签、
+    //    或标签数超过 MOUNTED_TAB_MAX 被 LRU 淘汰内容，都会走到这里 ——
+    //    于是「关掉一个大屏标签，把另一个正在看的标签的菜单弹了出来」。
+    // 这段代码此前从未执行过（keep-alive 的页从不真卸载），M0 改成真卸载后才被唤醒，故一并清理。
+    window.removeEventListener('resize', this.updateBodyHeight)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  width: 100%;
+  height:  100%;
+  overflow: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .base-page {
+    position: static;
+    overflow-x:  hidden;
+    padding: 0;
+  }
+}
+.dashboard--hidden-scroll-bar {
+  .dashboard-container {
+    &::-webkit-scrollbar-thumb {
+      background: none;
+      &:hover {
+        background-color: rgba(95, 95, 95, .3);
+      }
+    }
+  }
+}
+.dashboard-container {
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+}
+.dashboard-component {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.dashboard--dark {
+  .dashboard-container{
+    background: #151C3D;
+    .dashboard-component {
+      >div {
+        // background: rgba(255,255,255, .1)
+      }
+    }
+  }
+}
+.dashboard--technology {
+  .dashboard-container{
+    background: url('@/assets/images/dashboard/technology_bg.jpg') no-repeat center;
+    background-size: cover;
+
+  }
+   .component {
+      // position: relative;
+      // &::before {
+      //   content: '';
+      //   position: absolute;
+      //   top: 0;
+      //   display: block;
+      //   width: 100%;
+      //   height: 1px;
+      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+      //   opacity: 0.5;
+      // }
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   bottom: 0;
+      //   display: block;
+      //   width: 100%;
+      //   height: 1px;
+      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+      //   opacity: 0.5;
+      // }
+      // background: rgba(255,255,255, .1);
+      //   backdrop-filter: blur(4px);
+      // >div {
+      //   background: rgba(255,255,255, .1);
+      //   backdrop-filter: blur(4px);
+      // }
+    }
+}
+</style>