add： togglebutton按钮样式调整，设备状态总览 style

src/components/MineMonitor/LeftDeviceStatus.vue

 <template>
-  <n-card :bordered="false" class="device-status-card">
-    <div class="card-header">
-      <h2 class="card-title">设备状态总览</h2>
-    </div>
+  <div :bordered="false" class="device-status-card">
+    <h2 class="card-title">设备状态总览</h2>
+    <!-- <div class="card-header">
+      
+    </div> -->
     <div class="status-grid">
-      <!-- 在线监测 -->
-      <div class="status-item">
-        <div class="percent blue">100%</div>
-        <div class="name">在线监测</div>
-        <div class="detail">在线: 56 离线: 0</div>
-      </div>
-      <!-- 视频监测 -->
-      <div class="status-item">
-        <div class="percent yellow">82%</div>
-        <div class="name">视频监测</div>
-        <div class="detail">在线: 87 离线: 2</div>
-      </div>
-      <!-- 人员定位 -->
-      <div class="status-item">
-        <div class="percent cyan">88%</div>
-        <div class="name">人员定位</div>
-        <div class="detail">在线: 16 离线: 2</div>
-      </div>
-      <!-- 车辆定位 -->
-      <div class="status-item">
-        <div class="percent green">100%</div>
-        <div class="name">车辆定位</div>
-        <div class="detail">在线: 7 离线: 2</div>
+      <div v-for="item in deviceStatusList" :key="item.id" class="status-item">
+        <div :class="['percent', item.color]">{{ item.percent }}%</div>
+        <div class="right-content">
+          <div class="name">{{ item.name }}</div>
+          <div class="detail">
+            <span class="online">在线: {{ item.onlineCount }}</span><br>
+            <span class="offline">离线: {{ item.offlineCount }}</span>
+          </div>
+        </div>
       </div>
     </div>
-  </n-card>
+    <div class="card-footer"></div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 定义设备状态数据接口
+interface DeviceStatus {
+  id: string;
+  name: string;
+  percent: number;
+  color: string;
+  onlineCount: number;
+  offlineCount: number;
+}
+
+// // 定义组件属性
+// const props = defineProps<{
+//   // 如果需要从父组件传递数据，可以添加props
+//   // deviceStatusList?: DeviceStatus[];
+// }>();
+
+// 设备状态数据列表
+const deviceStatusList = ref<DeviceStatus[]>([]);
+
+// 模拟接口请求函数
+const fetchDeviceStatus = async () => {
+  try {
+    // 这里应该是实际的API请求
+    // const response = await axios.get('/api/device/status');
+    // deviceStatusList.value = response.data;
+    
+    // 模拟接口返回数据
+    deviceStatusList.value = [
+      { id: '1', name: '在线监测', percent: 100, color: 'cyan', onlineCount: 56, offlineCount: 0 },
+      { id: '2', name: '视频监测', percent: 82, color: 'yellow', onlineCount: 87, offlineCount: 2 },
+      { id: '3', name: '人员定位', percent: 88, color: 'blue', onlineCount: 16, offlineCount: 2 },
+      { id: '4', name: '车辆定位', percent: 100, color: 'green', onlineCount: 7, offlineCount: 2 }
+    ];
+  } catch (error) {
+    console.error('获取设备状态数据失败:', error);
+  }
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchDeviceStatus();
+});
+</script>
 
 <style scoped lang="scss">
 .device-status-card {
+  width: 4.6rem;
+  height: 3rem;
+  position: relative;
   padding: 0.15rem;
-  background: var(--n-bg-color-secondary);
-
-  .card-header {
-    margin-bottom: 0.15rem;
-    .card-title {
-      font-size: 0.18rem;
-      font-weight: 600;
-      color: var(--n-text-color-primary);
+      padding-top: .45rem;
+  // background: var(--n-bg-color-secondary);
+ background-image: url('@/assets/jinrun/module-bg.png');
+.card-title {
+      position: absolute;
+      left: .25rem;
+      top: -0.15rem;
+        font-weight: 500;
+        font-size: 0.2rem;
+        color: #FFFFFF;
+      text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
     }
+  .card-header {
+    position: relative;
+    width: 4.48rem;
+    height: 0.46rem;
+    // margin-bottom: 0.15rem;
+    // background-image: url('@/assets/jinrun/module-title.png');
+    // background-size: cover;
+    //     margin-left: -0.1rem;
+    
+  }
+  .card-footer {
+    height: 0.1rem;
+    background-image: url();
   }
 
   .status-grid {
@@ -54,30 +106,63 @@
     gap: 0.1rem;
 
     .status-item {
-      text-align: center;
+      display: flex;
+      align-items: center;
       padding: 0.1rem;
-      background: rgba(10, 25, 71, 0.6);
+      // background: rgba(10, 25, 71, 0.6);
       border-radius: 0.05rem;
 
       .percent {
-        font-size: 0.24rem;
+        width: 0.9rem;
+        height: 0.9rem;
+        line-height: 0.9rem;
+        font-size: 0.22rem;
         font-weight: bold;
-        margin-bottom: 0.05rem;
-        &.blue { color: #36a2eb; }
-        &.yellow { color: #facc15; }
-        &.cyan { color: #4bc0c0; }
-        &.green { color: #6dd230; }
+        margin-right: 0.1rem;
+        min-width: 0.8rem;
+        text-align: center;
+        color:#fff;
+        background-image: url('@/assets/jinrun/blue.png');
+        background-size: cover;
+        // padding: 0.05rem 0.1rem;
+        // border-radius: 0.05rem;
+        &.blue { 
+            background-image: url('@/assets/jinrun/blue.png');
+        }
+        &.yellow { 
+            background-image: url('@/assets/jinrun/yellow.png');
+        }
+        &.cyan { background-image: url('@/assets/jinrun/cyan.png'); }
+        &.green { background-image: url('@/assets/jinrun/green.png'); }
+      }
+
+      .right-content {
+        flex: 1;
+        text-align: left;
       }
 
       .name {
-        font-size: 0.14rem;
-        color: var(--n-text-color-secondary);
+        font-weight: 400;
+font-size: 0.18rem;
+color: #11E0FF;
         margin-bottom: 0.03rem;
       }
 
       .detail {
         font-size: 0.12rem;
-        color: var(--n-text-color-tertiary);
+        
+        .online {
+         font-weight: 400;
+font-size: 0.16rem;
+color: #FFFFFF;
+          margin-right: 0.1rem;
+        }
+        
+        .offline {
+          font-weight: 400;
+font-size: 0.16rem;
+color: #FFCE22;
+        }
       }
     }
   }

src/views/_builtin/cesiumDeom/index.vue

@@ -350,7 +350,9 @@ const navTo = () => {
   transition: all 0.3s ease;
   
   &.left-toggle {
-    left: 4.65rem; /* 与左侧模块宽度一致 */
+    // left: 4.65rem; /* 与左侧模块宽度一致 */
+    left: 5.1rem; /* 与左侧模块宽度一致 */
+
   background-image: url('@/assets/jinrun/toggle-left.png');
 
   }
@@ -360,7 +362,8 @@ const navTo = () => {
   }
   
   &.right-toggle {
-    right: 4.65rem;; /* 与右侧模块宽度一致 */
+    // right: 4.65rem;; /* 与右侧模块宽度一致 */
+     right: 5.1rem; /* 与左侧模块宽度一致 */
   background-image: url('@/assets/jinrun/toggle-right.png');
 
   }
@@ -446,7 +449,7 @@ const navTo = () => {
 .slide-left-leave-to {
   transform: translateX(-100%);
   opacity: 0;
-}
+}‘
 
 // 右侧模块滑动动画
 .slide-right-enter-active,
@@ -478,8 +481,10 @@ const navTo = () => {
 }
 
 .left-modules, .right-modules {
-  width: 4.65rem;
-  background: pink;
+  width: 4.6rem;
+  // background: pink;
+  margin-top: .6rem;
+  margin-left: 0.4rem;
 }
 
 .arrow-font{