chore(*): 兼容小屏幕

src/views/dustMonitoring/bag-monitoring.vue

@@ -66,7 +66,6 @@
         </div> -->
     </div>
 
-    <div class="data-table">
     <div class="time-controls">
         <div class="time-desc">
           <span class="icon"></span>
@@ -87,6 +86,8 @@
           <el-button @click="reset">重置</el-button>
         </div>
       </div>
+    <div class="data-table">
+
 
       <table>
         <thead>
@@ -566,6 +567,12 @@ onBeforeUnmount(() => {
     align-items: center;
     margin-bottom: 16px;
     
+    @media (max-width: 768px) {
+      flex-direction: column;
+      align-items: flex-start;
+      padding-top: 50px; /* Make room for the select container */
+    }
+
     .select-container {
       position: absolute;
       left: 0;
@@ -574,6 +581,13 @@ onBeforeUnmount(() => {
       display: flex;
       align-items: center;
       z-index: 99;
+      
+      @media (max-width: 768px) {
+        width: 100%;
+        position: relative;
+        margin-bottom: 10px;
+      }
+
       .select-label {
         color: #909399 !important;
         font-size: 14px;
@@ -602,6 +616,8 @@ onBeforeUnmount(() => {
   .chart-container {
     width: 100%;
     height: calc(100% - 350px);
+    min-height: 200px;
+    max-height: calc(50vh - 50px);
     background-color: #000;
     border-radius: 4px;
     display: flex;
@@ -641,8 +657,16 @@ onBeforeUnmount(() => {
     z-index: 100;
     transition: transform 0.3s ease-in-out;
 
+    @media (max-width: 768px) {
+      width: 280px;
+    }
+
     &.collapsed {
       transform: translateX(345px);
+      
+      @media (max-width: 768px) {
+        transform: translateX(300px);
+      }
     }
 
     .panel-toggle {
@@ -682,8 +706,18 @@ onBeforeUnmount(() => {
         margin-bottom: 5px;
         font-size: 14px;
 
+        @media (max-width: 768px) {
+          flex-wrap: wrap;
+          font-size: 12px;
+        }
+
         div {
           flex: 1;
+          
+          @media (max-width: 768px) {
+            min-width: 45%;
+            margin-bottom: 3px;
+          }
         }
       }
     }
@@ -698,10 +732,14 @@ onBeforeUnmount(() => {
     border-radius: 4px;
     padding: 10px 0;
     box-sizing: border-box;
+    overflow-x: auto;
+    max-height: 300px;
+    overflow-y: auto;
 
     table {
       width: 100%;
       border-collapse: collapse;
+      min-width: 600px;
 
       th,
       td {
@@ -749,11 +787,20 @@ onBeforeUnmount(() => {
       }
     }
 
+  
+  }
     .time-controls {
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
+      
+      @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
       
       .el-button {
         border-color: var(--accent);
@@ -809,6 +856,5 @@ onBeforeUnmount(() => {
         width: 60px;
       }
     }
-  }
 }
 </style>

src/views/dustMonitoring/index.vue

@@ -728,6 +728,10 @@ $borderColor: #3a3f45;
   flex-direction: column;
   // background-color: #181d21;
   color: #909399;
+  &::-webkit-scrollbar {
+    width: 2px;
+    background-color: rgba(58, 63, 69, 0.5);
+  }
 }
 .top-box {
   width: 100%;