样式调整

src/components/MineMonitor/LeftOnlineMonitor.vue

@@ -4,13 +4,16 @@
         <!-- 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>
+            </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>
@@ -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;
+  
   .card-title {
     position: absolute;
     left: 0.25rem;
@@ -90,39 +92,22 @@ 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;
     font-size: 0.14rem;
@@ -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;