优化L１、L４数据展示界面样式

src/views/L1-data-list/index.vue

@@ -9,7 +9,7 @@
       <a-form layout="inline" :model="formData">
         <a-form-item label="日期范围">
           <a-range-picker v-model:value="formData.dateRange" :placeholder="['开始日期', '结束日期']"
-            format="YYYY-MM-DD hh:mm:ss" class="date-range-picker" show-time />
+            format="YYYY-MM-DD hh:mm:ss" show-time />
         </a-form-item>
         <a-form-item>
           <a-space>
@@ -237,111 +237,54 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "@/assets/styles/variables" as *;
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
 .l1-data-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  padding: $spacing-lg;
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
 
-  .page-header {
-    margin-bottom: $spacing-lg;
-    flex-shrink: 0;
+.page-header {
+  margin-bottom: 20px;
 
-    .page-title {
-      font-size: $title-font-size;
-      color: $text-dark;
-      margin: 0;
-      font-weight: 600;
-    }
-  }
-
-  .filter-section {
-    background: $bg-light;
-    padding: $spacing-lg;
-    border-radius: $border-radius-lg;
-    margin-bottom: $spacing-lg;
-    flex-shrink: 0;
-
-    .filter-label {
-      font-weight: 500;
-      color: $text-dark;
-      font-size: $content-font-size;
-    }
-  }
-
-  .table-section {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    :deep(.ant-table-wrapper) {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .ant-spin-container,
-      .ant-table {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .ant-table-container {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-
-      .ant-table-body {
-        overflow-y: auto !important;
-      }
-    }
-  }
-
-  .detail-content {
-    .ant-descriptions {
-      margin-top: $spacing-md;
-    }
+  .page-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0;
   }
 }
 
-:deep(.ant-btn-primary) {
-  background: $primary-color;
-  border-color: $primary-color;
-
-  &:hover {
-    background: $primary-light;
-    border-color: $primary-light;
-  }
+.filter-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
 
-@media (max-width: 768px) {
-  .l1-data-container {
-    padding: $spacing-md;
+.table-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
 
-    .filter-section {
-      .ant-row {
-        flex-direction: column;
-        gap: $spacing-md;
+.detail-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 
-        .ant-col {
-          width: 100% !important;
-        }
-      }
+:deep(.ant-table-thead > tr > th) {
+  background: #f8fafc;
+  font-weight: 600;
+}
 
-      .date-range-picker {
-        width: 100%;
-      }
-    }
-  }
+:deep(.ant-table-tbody > tr:hover > td) {
+  background: #f0f9ff;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  background: #f8fafc;
 }
 </style>