feat(components/backtoup): 新增返回顶部_快捷按钮

src/App.vue

 <template>
   <router-view />
+  <back-to-up></back-to-up>
 </template>
 
 <script setup>

src/assets/styles/variables.module.scss

@@ -21,7 +21,7 @@ $menuLightText: #303133;
 $menuLightActiveText: #409EFF;
 
 // 基础变量
-$base-sidebar-width: 230px;
+$base-sidebar-width: 210px;
 $sideBarWidth: 200px;
 
 // 菜单暗色变量

src/components/BackToUp/index.vue

+<template>
+  <div class="back-to-top"
+    v-show="y > 300"
+    @click="y = 0">
+    <el-icon>
+      <Top />
+    </el-icon>
+  </div>
+</template>
+
+<script setup>
+import { useWindowScroll } from '@vueuse/core'
+const { x, y } = useWindowScroll({
+  behavior: 'smooth'
+})
+</script>
+
+<style scoped
+  lang="scss">
+  .back-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 10px;
+    z-index: 999;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background-color: var(--el-bg-color-overlay);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    i {
+      font-size: 20px;
+      color: var(--el-text-color-regular)
+    }
+  }
+</style>
\ No newline at end of file

src/main.js

@@ -46,6 +46,8 @@ import GroupLegend from '@/components/ECharts/GroupLegend'
 import NoData from '@/components/NoData'
 // 树形类目
 import CategoryTree from '@/components/CategoryTree'
+// 返回头部
+import BackToUp from '@/components/BackToUp'
 
 const app = createApp(App)
 
@@ -73,6 +75,7 @@ app.component('LevitatedSphere', LevitatedSphere)
 app.component('GroupLegend', GroupLegend)
 app.component('NoData', NoData)
 app.component('CategoryTree', CategoryTree)
+app.component('BackToUp', BackToUp)
 
 // 全局插件
 app.use(plugins)

src/views/bi/sale/index.vue

@@ -609,6 +609,7 @@ init()
       background-color: var(--el-bg-color-overlay);
       padding: 20px;
       margin-top: 20px;
+      width: 100%;
 
       /* 图容器 */
       .echarts_wrap {
@@ -648,6 +649,7 @@ init()
       background-color: var(--el-gray-3);
       margin-top: 10px;
       cursor: context-menu;
+      width: 100%;
     }
   }