左右背景图更换、标题颜色 active 时间换行

src/components/MineMonitor/LeftOnlineMonitor.vue

@@ -134,7 +134,7 @@ const tableData = ref([
   span {
     font-weight: 500;
     font-size: 0.14rem;
-    color: #fff;
+    color: #36F3FF;
     flex: 1;
     text-align: center;
     

src/components/MineMonitor/RightTodayAlarm.vue

@@ -26,7 +26,10 @@
             <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.name }}</span>
               <span>{{ item.cardNumber }}</span>
-              <span>{{ item.alarmTime }}</span>
+              <span class="time-cell">
+                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
+                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
+              </span>
             </dd>
           </template>
         </dl>
@@ -48,7 +51,10 @@
               <span>{{ item.vehicleOrDriver }}</span>
               <span>{{ item.plateNumber }}</span>
               <span>{{ item.alarmType }}</span>
-              <span>{{ item.alarmTime }}</span>
+              <span class="time-cell">
+                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
+                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
+              </span>
             </dd>
           </template>
         </dl>
@@ -68,7 +74,10 @@
             <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.personOrVehicle }}</span>
               <span>{{ item.cardOrPlate }}</span>
-              <span>{{ item.boundaryTime }}</span>
+              <span class="time-cell">
+                <div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
+                <div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
+              </span>
             </dd>
           </template>
         </dl>
@@ -90,7 +99,10 @@
               <span>{{ item.deviceName }}</span>
               <span>{{ item.monitorValue }}</span>
               <span>{{ item.alarmLevel }}</span>
-              <span>{{ item.alarmTime }}</span>
+              <span class="time-cell">
+                <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
+                <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
+              </span>
             </dd>
           </template>
         </dl>
@@ -281,7 +293,7 @@ background-size: cover;
   color: #88DBBD;
   
   &.active {
-    color: var(--n-text-color-primary);
+    color: #05FFA4;
     
     &::after {
       content: "";
@@ -378,6 +390,21 @@ background-size: cover;
     }
   }
   
+  .time-cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.2;
+    
+    .date-part, .time-part {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+  }
+  
   &.status-chengse {
     span {
       color: #FF852B;

src/typings/components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -104,6 +105,7 @@ declare global {
   const NCheckbox: typeof import('naive-ui')['NCheckbox']
   const NColorPicker: typeof import('naive-ui')['NColorPicker']
   const NDataTable: typeof import('naive-ui')['NDataTable']
+  const NDatePicker: typeof import('naive-ui')['NDatePicker']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDivider: typeof import('naive-ui')['NDivider']
   const NDrawer: typeof import('naive-ui')['NDrawer']

src/views/_builtin/cesiumDeom/index.vue

@@ -338,28 +338,28 @@ const navTo = () => {
 .left {
   top: 0rem;
   left: 0;
-  width: 264px;
+  width: 5.76rem;
   // height: 11.8rem;
   // height: 1080px;
   // height: 9.4rem;
   height: calc(100vh);
-  background-size: contain;
+  background-size: cover;
   background-position-x: left;
 
-  background-image: url("@/assets/jinrun/left.png");
+  background-image: url("@/assets/jinrun/bg-left.png");
 }
 .right {
   top: 0rem;
   right: 0;
   // right: -34px;
-  width: 264px;
+  width: 5.76rem;
   // height: 11.8rem;
   // height: 1080px;
   // height: 9.4rem;
   height: 100vh;
 
-  background-image: url("@/assets/jinrun/right.png");
-  background-size: contain;
+  background-image: url("@/assets/jinrun/bg-right.png");
+  background-size: cover;
   background-position-x: right;
 }