update

src/layouts/BasicLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout class="layout">
-    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
+    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible class="layout-sider">
       <div class="logo">
         <h1 class="logo-text">蜂快 · 运营系统</h1>
       </div>
@@ -134,8 +134,8 @@
         </a-sub-menu>
       </a-menu>
     </a-layout-sider>
-    <a-layout>
+    <a-layout class="site-layout">
-      <a-layout-header style="background: #fff; padding: 0">
+      <a-layout-header class="site-layout-header">
         <div class="header-content">
           <div class="header-left">
             <menu-unfold-outlined
@@ -175,10 +175,10 @@
           </div>
         </div>
       </a-layout-header>
-      <a-layout-content
+      <a-layout-content class="site-layout-content">
-        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
+        <div class="content-container">
-      >
+          <router-view></router-view>
-        <router-view></router-view>
+        </div>
       </a-layout-content>
     </a-layout>
   </a-layout>
@@ -513,7 +513,63 @@ export default defineComponent({
 <style scoped>
 .layout {
   min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
 }
+
+.layout-sider {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.site-layout {
+  margin-left: 200px;
+  transition: margin-left 0.2s;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.ant-layout-sider-collapsed) + .site-layout {
+  margin-left: 80px;
+}
+
+.site-layout-header {
+  background: #fff;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 200px;
+  z-index: 9;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transition: left 0.2s;
+}
+
+:deep(.ant-layout-sider-collapsed) ~ .site-layout .site-layout-header {
+  left: 80px;
+}
+
+.site-layout-content {
+  margin-top: 64px;
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 16px;
+}
+
+.content-container {
+  background: #fff;
+  padding: 24px;
+  min-height: 280px;
+  border-radius: 2px;
+}
+
 .trigger {
   font-size: 18px;
   line-height: 64px;
@@ -521,9 +577,11 @@ export default defineComponent({
   cursor: pointer;
   transition: color 0.3s;
 }
+
 .trigger:hover {
   color: #1890ff;
 }
+
 .logo {
   height: 64px;
   margin: 16px;
@@ -533,6 +591,7 @@ export default defineComponent({
   overflow: hidden;
   transition: all 0.3s;
 }
+
 .logo-text {
   color: #fff;
   font-size: 18px;
@@ -543,42 +602,51 @@ export default defineComponent({
   text-align: center;
   transition: all 0.3s;
 }
+
 :deep(.ant-layout-sider-collapsed) .logo-text {
   display: none;
 }
+
 .header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100%;
 }
+
 .header-left {
   display: flex;
   align-items: center;
 }
+
 .breadcrumb-container {
   margin-left: 16px;
   height: 64px;
   display: flex;
   align-items: center;
 }
+
 .page-breadcrumb {
   display: flex;
   align-items: center;
   font-size: 14px;
 }
+
 .breadcrumb-item {
   display: inline-block;
   color: rgba(0, 0, 0, 0.85);
   font-weight: 500;
 }
+
 .breadcrumb-separator {
   margin: 0 8px;
   color: #8c8c8c;
 }
+
 .header-right {
   margin-right: 24px;
 }
+
 .ant-dropdown-link {
   color: rgba(0, 0, 0, 0.85);
   cursor: pointer;

src/views/dashboard/Dashboard.vue

@@ -363,9 +363,7 @@ export default defineComponent({
 
 <style scoped>
 .dashboard {  
-  padding: 24px;
   background: #fff;
-  min-height: 400px;
 }
 
 .data-overview {
@@ -583,6 +581,7 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
+  flex-shrink: 0;
 }
 
 .section-title {
@@ -600,7 +599,19 @@ export default defineComponent({
 }
 
 .deliveryman-table {
-  margin-top: 16px;
+  :deep(.ant-table-wrapper) {
+  }
+  
+  :deep(.ant-table-container) {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  :deep(.ant-table) {
+  }
+  
+  :deep(.ant-table-content) {
+  }
   
   :deep(.ant-table-thead > tr > th) {
     background-color: #f5f5f5;