样式调整

src/components/MineMonitor/LeftOnlineMonitor.vue

@@ -4,23 +4,26 @@
         <!-- SOS报警列表 -->
 
         <div class="list-container">
-      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
-        <dl class="alarm-list">
-          <dt class="list-header">
-            <span>设备名称</span>
-            <span>监测值</span>
-            <span>监测时间</span>
-          </dt>
-          <template v-for="(item, index) in tableData" :key="index">
-            <dd class="list-item" :class="getItemClass(item)">
-              <span>{{ item.name }}</span>
-              <span>{{ item.value }}</span>
-              <span>{{ item.time }}</span>
-            </dd>
-          </template>
-        </dl>
-      </div>
-    </div>
+            <dl class="alarm-list">
+                <dt class="list-header">
+                    <span>设备名称</span>
+                    <span>监测值</span>
+                    <span>监测时间</span>
+                </dt>
+            </dl>
+            
+            <div class="scroll-wrapper" ref="vehicleScrollWrapper">
+                <dl class="alarm-list">
+                    <template v-for="(item, index) in tableData" :key="index">
+                        <dd class="list-item" :class="getItemClass(item)">
+                            <span>{{ item.name }}</span>
+                            <span>{{ item.value }}</span>
+                            <span>{{ item.time }}</span>
+                        </dd>
+                    </template>
+                </dl>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -70,14 +73,13 @@ const tableData = ref([
   height: 3rem;
   position: relative;
   padding: 0.15rem;
-  background-size: contain;
   width: 100%;
   margin-top: 0.3rem;
   background-image: url("@/assets/jinrun/module-bg.png");
-background-size: cover;
+  background-size: cover;
   background-repeat: no-repeat;
-
-      margin-top: .26rem;
+  margin-top: .26rem;
+  
   .card-title {
     position: absolute;
     left: 0.25rem;
@@ -90,38 +92,21 @@ background-size: cover;
 }
 
 .list-container {
-  height: 2.2rem;
+    height: 2.5rem;
   overflow: hidden;
-}
-.alarm-list {
-  // padding-top: .2rem;
   margin-top: .2rem;
 }
 
-.scroll-wrapper {
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE 10+ */
-  
-  &::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
-  }
+.alarm-list {
+  margin: 0;
 }
 
-
 .list-header {
   display: flex;
   justify-content: space-between;
   padding: 0.1rem;
-  // background: rgba(10, 25, 71, 0.8);
   background-image: url("@/assets/jinrun/table-header-bg.png");
-  // border-radius: 0.05rem;
   margin-bottom: 0.05rem;
-
-  position: sticky;
-  top: 0;
-  z-index: 10;
   
   span {
     font-weight: 500;
@@ -140,15 +125,23 @@ background-size: cover;
   }
 }
 
+.scroll-wrapper {
+  height: calc(100% - 0.45rem); /* 减去header的高度 */
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+
 .list-item {
   display: flex;
   justify-content: space-between;
   padding: 0.1rem;
   margin-bottom: 0.05rem;
-  // background: rgba(10, 25, 71, 0.6);
   background-color: #2a496d78;
-  // border-radius: 0.05rem;
-  // border-left: 0.03rem solid #36a2eb;
   
   span {
     font-size: 0.14rem;
@@ -187,12 +180,4 @@ background-size: cover;
   }
 }
 
-.no-data {
-  text-align: center;
-  color: var(--n-text-color-secondary);
-  padding: 0.2rem;
-  background: rgba(10, 25, 71, 0.3);
-  border-radius: 0.05rem;
-  margin: 0.1rem;
-}
 </style>
\ No newline at end of file

src/components/MineMonitor/RightTodayAlarm.vue

@@ -29,7 +29,6 @@
               <span>{{ item.alarmTime }}</span>
             </dd>
           </template>
-          <dd v-if="sosData.length === 0" class="no-data">暂无SOS报警数据</dd>
         </dl>
       </div>
     </div>
@@ -397,7 +396,7 @@ background-size: cover;
 
 .no-data {
   text-align: center;
-  color: var(--n-text-color-secondary);
+  color: #fff;
   padding: 0.2rem;
   background: rgba(10, 25, 71, 0.3);
   border-radius: 0.05rem;