update:优化滚动，样式

src/App.vue

@@ -25,13 +25,6 @@
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
   }
-  html,
-  body {
-    height: 100%;
-  }
-  body{
-    background: #f6f8f9;
-  }
   .el-pager li:focus {
     border: none;
   }
@@ -41,8 +34,4 @@
   .svg-icon:focus {
     border: none;
   }
-  * {
-    margin: 0;
-    padding: 0;
-  }
 </style>

src/layout/Header/index.vue

@@ -128,8 +128,9 @@
     cursor: pointer;
   }
   .header {
-    height: 60px;
+    height: 50px;
     width: 100%;
+    border-bottom: 1px solid #eee;
     display: flex;
     align-items: center;
     padding: 0 10px;

src/layout/Main/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main" v-if="isReload">
+  <div class="app-main" v-if="isReload">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-slide" mode="out-in" appear>
         <keep-alive v-if="route.meta && route.meta.keepAlive">
@@ -9,7 +9,7 @@
       </transition>
     </router-view>
     <u-theme />
-  </section>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -29,18 +29,10 @@
 
 <style lang="scss" scoped>
   .app-main {
-    //padding: 20px;
-    /*padding-top: 110px;*/
-    //min-height: 100%;
-    //overflow: auto;
-    //flex: 1;
-    //overflow: auto;
+    flex: 1;
     overflow-x: hidden;
-    height: 100%;
     width: 100%;
     box-sizing: border-box;
-    //padding-top: 70px;
-    //  background: white;
   }
 
   //// 主内容区动画

src/layout/Sidebar/components/Logo.vue

@@ -20,7 +20,7 @@ defineProps<{ isCollapse: boolean }>();
   .sidebar-logo-container {
     position: relative;
     width: 100%;
-    height: 60px;
+    height: 50px;
     display: flex;
     align-items: center;
     background: #2b2f3a;

src/layout/TagsView/index.vue

@@ -26,9 +26,9 @@
       </better-scroll>
     </div>
     <el-dropdown trigger="click">
-        <el-button class="el-dropdown-link" type="primary">
-          更多 <el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </el-button>
+      <div class="item-tag-wrap more">
+          <div class="tags-view-item">更多 <el-icon class="el-icon--right"><arrow-down /></el-icon></div>
+      </div>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
@@ -252,7 +252,10 @@
     align-items: center;
     padding-left: 10px;
     .tags-view {
+      height: 30px;
       background: white;
+      display: flex;
+      align-items: center;
       flex: 1;
       box-sizing: border-box;
       overflow: hidden;
@@ -280,7 +283,7 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    padding: 6px 10px;
+    padding: 4px 12px;
     font-size: 14px;
     cursor: pointer;
     margin-right: 10px;
@@ -308,10 +311,19 @@
     position: relative;
     z-index: 2;
     white-space: nowrap;
+    font-size: 12px;
     .tags-inner {
       display: flex;
       align-items: center;
       white-space: nowrap;
     }
   }
+  .more{
+    background-color: $primaryColor;
+    color: white;
+    .tags-view-item{
+      display: flex;
+      align-items: center;
+    }
+  }
 </style>

src/layout/index.vue

@@ -8,6 +8,10 @@
         hideSliderLayout: mode === 'horizontal',
       }"
     >
+      <div
+          :style="{
+        height:`${showTag?80:50}px`
+      }"></div>
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />
@@ -25,29 +29,29 @@
 
   import { useResizeHandler } from './hooks/useResizeHandler'
 
-   const SettingStore = useSettingStore()
+  const SettingStore = useSettingStore()
 
-      // 是否折叠
-      const isCollapse = computed(() => {
-        return !SettingStore.isCollapse
-      })
-      let { device } = useResizeHandler()
-      // 当屏幕切换的时候进行变换
-      const classObj = computed(() => {
-        return {
-          hideSidebar: !SettingStore.isCollapse,
-          openSidebar: SettingStore.isCollapse,
-          withoutAnimation: SettingStore.withoutAnimation,
-          mobile: device.value === 'mobile',
-        }
-      })
-      // 移动端点击
-      const handleClickOutside = () => {
-        SettingStore.closeSideBar({ withoutAnimation: false })
-      }
-      const showTag = computed(() => SettingStore.themeConfig.showTag)
+  // 是否折叠
+  const isCollapse = computed(() => {
+    return !SettingStore.isCollapse
+  })
+  let { device } = useResizeHandler()
+  // 当屏幕切换的时候进行变换
+  const classObj = computed(() => {
+    return {
+      hideSidebar: !SettingStore.isCollapse,
+      openSidebar: SettingStore.isCollapse,
+      withoutAnimation: SettingStore.withoutAnimation,
+      mobile: device.value === 'mobile',
+    }
+  })
+  // 移动端点击
+  const handleClickOutside = () => {
+    SettingStore.closeSideBar({ withoutAnimation: false })
+  }
+  const showTag = computed(() => SettingStore.themeConfig.showTag)
 
-      const mode = computed(() => SettingStore.themeConfig.mode)
+  const mode = computed(() => SettingStore.themeConfig.mode)
 </script>
 
 <style lang="scss" scoped>
@@ -81,14 +85,9 @@
     z-index: 90;
   }
   .m-container-content {
-    //padding: 20px;
-    /*background: #f6f8f9;*/
-    padding-top: 93px;
-    box-sizing: border-box;
-    height: 100vh;
+    display: flex;
+    flex: 1;
     position: relative;
-  }
-  .app-main-hide-tag {
-    padding-top: 80px;
+    box-sizing: border-box;
   }
 </style>

src/router/index.ts

@@ -108,9 +108,7 @@ export const asyncRoutes = [
     dataScreenRouter,
     chartsRouter,
     tableRouter,
-
     chatRouter,
-    // componentsRouter,
     othersRouter,
     nestedRouter,
     excelRouter,
@@ -120,7 +118,6 @@ export const asyncRoutes = [
     clipboardTable,
     systemRouter,
     permissionRouter,
-
     {
         path: '/:pathMatch(.*)',
         redirect: '/error/404'

src/styles/common.scss

@@ -1,3 +1,18 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: visible;
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+
+body{
+  background: #f6f8f9;
+}
+
 
 /* 常用 flex */
 .flex-center {
@@ -15,9 +30,30 @@
   align-items: center;
 }
 
-
+/* 移动端的时候由于屏幕变小隐藏头部导航栏 */
 @media screen and ( max-width: 540px ) {
   .app-breadcrumb{
     display: none!important;
   }
 }
+
+
+/** 设置滚动条 **/
+::-webkit-scrollbar {
+  width: 7px;
+  height: 8px;
+}
+
+
+::-webkit-scrollbar-track {
+  background-color: rgb(0 0 0 / 5%);
+}
+
+::-webkit-scrollbar-thumb {
+  // background: rgba(0, 0, 0, 0.6);
+  background-color: rgb(144 147 153 / 30%);
+  // background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 2px;
+  box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+}
+

src/views/charts/migration.vue

@@ -11,12 +11,12 @@
 
 <style lang="scss" scoped>
   .echarts-map {
-    box-sizing: border-box;
+    position: relative;
     width: 100%;
+    height: 100%;
     overflow: hidden;
     background: #001540;
-    height: calc(100vh - 93px);
-    position: relative;
+    box-sizing: border-box;
     .info {
       position: absolute;
       left: 0;