去除happy-scroll，自定义滚动条样式

增加边框阴影class
修改HomeView结构

src/components/breadcrumb/iotBreadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-breadcrumb">
+  <div class="home-breadcrumb border-shadow">
     <a-breadcrumb>
       <a-breadcrumb-item @click="toHome">首页</a-breadcrumb-item>
       <a-breadcrumb-item v-for="item in levelList" :key="item.name">{{ item.meta.breadcrumb }}</a-breadcrumb-item>
@@ -43,11 +43,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home-breadcrumb {
-  //display: inline-block;
-  //vertical-align: top;
-  //font-size: 14px;
+.home-breadcrumb { 
   height: 25px;
-  margin: 10px 0px 10px 10px;
+  margin: 10px 0px 10px 0px;
 }
 </style>

src/components/work/overview/workOverview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="border-shadow">
     <a-select :default-value="1" style="width: 120px" @change="handleChange">
       <a-select-option
         v-for="(item, index) in options"

src/components/work/work.vue

@@ -4,35 +4,37 @@
     <div class="pageContainer-body">
       <Breadcrumb></Breadcrumb>
 
-      <div class="pageContainer-content" >
-        <happy-scroll color="#dedfe1" size="5" resize v-if="contentShow" hide-horizontal>
-          <router-view />
-        </happy-scroll>
+      <div class="pageContainer-content">
+        <router-view />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {defineAsyncComponent} from "vue";
+import { defineAsyncComponent } from "vue";
 
 export default {
   data() {
     return {
       contentShow: false,
-    }
+    };
   },
   components: {
-    ContainerAside: defineAsyncComponent(() => import("@/components/home/ContainerAside.vue")),
-    Breadcrumb: defineAsyncComponent(() => import("@/components/breadcrumb/iotBreadcrumb.vue")),
+    ContainerAside: defineAsyncComponent(() =>
+      import("@/components/home/ContainerAside.vue")
+    ),
+    Breadcrumb: defineAsyncComponent(() =>
+      import("@/components/breadcrumb/iotBreadcrumb.vue")
+    ),
   },
   watch: {
     $route(val) {
-      this.initScroll()
-    }
+      this.initScroll();
+    },
   },
   mounted() {
-    this.initScroll()
+    this.initScroll();
   },
   methods: {
     initScroll() {
@@ -40,10 +42,10 @@ export default {
       this.contentShow = false;
       setTimeout(function () {
         app.contentShow = true;
-      }, 50)
-    }
-  }
-}
+      }, 50);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>

src/style/common.css

@@ -1,18 +1,42 @@
 .pageContainer-body {
-    width: calc(100% - 220px - 2px - 16px);
-    height: 100%;
-    display: inline-block;
-    margin-left: 8px;
-  }
-  .pageContainer-content {
-    width: 100%;
-    height: calc(100% - 25px - 20px - 8px - 2px);
-    border: 1px solid #e7eaf1;
-    padding: 8px 2px 2px 10px;
-  }
-  .happy-scroll-content {
-    width: 99% !important;
-  }
-  .ant-btn {
-    margin: 0 3px !important;
-  }
+  width: calc(100% - 220px);
+  height: 100%;
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  overflow-y: auto;
+}
+
+.pageContainer-content {
+  width: 100%;
+  height: calc(100% - 25px - 20px - 8px - 2px);
+  border: 1px solid #e7eaf1;
+  padding: 8px 2px 2px 10px;
+}
+
+.ant-btn {
+  margin: 0 3px !important;
+}
+
+/*滚动条样式*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #dddddd;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: #eeeeee;
+}
+
+/*边框阴影*/
+.border-shadow {
+  -webkit-box-shadow: 0 0 4px #0000004d;
+  -moz-box-shadow: 0 0 4px #0000004d;
+  box-shadow: 0 0 4px #0000004d;
+}

src/views/HomeView.vue

@@ -16,20 +16,17 @@
         >
           <HomeAside :collapse="collapse" />
         </a-layout-sider>
-
-        <a-layout>
-          <!-- 内容 -->
-          <a-layout-content class="home-page">
-            <router-view />
-          </a-layout-content>
-        </a-layout>
+        <!-- 内容 -->
+        <a-layout-content class="home-page">
+          <router-view />
+        </a-layout-content>
       </a-layout>
     </a-layout>
   </div>
 </template>
 
 <script>
-import "@/style/common.css"
+import "@/style/common.css";
 
 export default {
   name: "HomeView",
@@ -81,11 +78,11 @@ export default {
   }
 
   .home-page {
-    height: 100%;
     display: inline-block;
     background: #fff;
     margin: 0;
     transition: all 1s;
+    overflow: hidden;
   }
 }
 </style>