修改大屏。地图主题色，模块加黑色蒙版图片

src/api/largeScreen/mapOpt.ts

@@ -8,7 +8,7 @@ function initMap(click) {
             viewMode: '2D', //默认使用 2D 模式
             zoom: 11, //地图级别
             center: [114.420739, 30.487514], //地图中心点
-            mapStyle: "amap://styles/8c3efc37298895fd78e6aa0e799e78ce"
+            mapStyle: "amap://styles/darkblue"
         });
 
         map.on('click', function (evt) {

src/views/homeIndex/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="dashboard-container">
     <!-- 顶部固定区域 -->
-    <div class="top-bar">
-      <div class="header-info">
-        <div>{{ currentTime }}</div>
+    <div class="top-fixed">
+      <div class="top-bar">
+        <div class="header-info">
+          <div>{{ currentTime }}</div>
+        </div>
       </div>
     </div>
 
+
     <!-- 全屏地图区域（背景） -->
     <div class="fullscreen-map">
       <MapComponent></MapComponent>
@@ -15,59 +18,66 @@
     <!-- 悬浮模块容器 -->
     <div class="floating-modules">
       <!-- 左侧模块组 -->
-      <div class="left-modules">
-        <div class="module-card overview-card">
-          <div class="module-header">设备总览</div>
-          <div class="module-content">
-            <DeviceOverview />
+      <div class="left">
+        <div class="left-modules">
+          <div class="module-card overview-card">
+            <div class="module-header">设备总览</div>
+            <div class="module-content">
+              <DeviceOverview />
+            </div>
           </div>
-        </div>
 
-        <div class="module-card">
-          <div class="module-header">设备类别</div>
-          <div class="module-content">
-            <DeviceCategory />
+          <div class="module-card">
+            <div class="module-header">设备类别</div>
+            <div class="module-content">
+              <DeviceCategory />
+            </div>
           </div>
-        </div>
 
-        <div class="module-card">
-          <div class="module-header">设备使用频次</div>
-          <div class="module-content">
-            <DeviceUsage />
+          <div class="module-card">
+            <div class="module-header">设备使用频次</div>
+            <div class="module-content">
+              <DeviceUsage />
+            </div>
           </div>
         </div>
       </div>
-
       <!-- 右侧模块组 -->
-      <div class="right-modules">
-        <div class="module-card alarm-card">
-          <div class="module-header">报警数据</div>
-          <div class="module-content">
-            <AlarmOverview :alarmOverview="alarmOverview" />
-          </div>
-        </div>
+      <div class="right">
 
-        <div class="module-card">
-          <div class="module-header">报警事件</div>
-          <div class="module-content">
-            <AlarmEvent :alarmOverview="alarmOverview" />
-          </div>
-        </div>
 
-        <div class="module-card">
-          <div class="module-header">报警次数</div>
-          <div class="module-content">
-            <AlarmCount />
+        <div class="right-modules">
+          <div class="module-card alarm-card">
+            <div class="module-header">报警数据</div>
+            <div class="module-content">
+              <AlarmOverview :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <div class="module-header">报警事件</div>
+            <div class="module-content">
+              <AlarmEvent :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <div class="module-header">报警次数</div>
+            <div class="module-content">
+              <AlarmCount />
+            </div>
           </div>
         </div>
       </div>
 
       <!-- 底部中间模块 -->
-      <div class="bottom-middle-module">
-        <div class="module-card realtime-card">
-          <div class="module-header realtime-header">实时报警信息</div>
-          <div class="module-content">
-            <RealTimeAlarm />
+      <div class="bottom">
+        <div class="bottom-middle-module">
+          <div class="module-card realtime-card">
+            <div class="module-header realtime-header">实时报警信息</div>
+            <div class="module-content">
+              <RealTimeAlarm />
+            </div>
           </div>
         </div>
       </div>
@@ -111,7 +121,7 @@ const getData = async () => {
 }
 getData()
 onMounted(() => {
-  
+
 })
 
 
@@ -125,6 +135,15 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.top-fixed {
+  width: 100%;
+  height: 13vh;
+  background: url(@/assets/homeIndex/top.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 11;
+  position: absolute;
+}
+
 /* 顶部栏 */
 .top-bar {
   position: relative;
@@ -153,7 +172,6 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -172,6 +190,23 @@ onMounted(() => {
   pointer-events: none;
 }
 
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/left.png) no-repeat;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/right.png) no-repeat;
+}
 /* 左侧模块组 */
 .left-modules {
   position: absolute;
@@ -179,9 +214,10 @@ onMounted(() => {
   left: 0.5vw;
   display: flex;
   flex-direction: column;
-  width: 27vw;
+  width: 27.2vw;
   height: calc(100vh - 9vh);
   pointer-events: auto;
+
 }
 
 /* 右侧模块组 */
@@ -191,7 +227,7 @@ onMounted(() => {
   right: 0.5vw;
   display: flex;
   flex-direction: column;
-  width: 27vw;
+  width: 27.2vw;
   height: calc(100vh - 9vh);
   pointer-events: auto;
 }
@@ -205,6 +241,8 @@ onMounted(() => {
   width: 44vw;
   height: calc(39vh - 9vh);
   pointer-events: auto;
+  background: url(@/assets/homeIndex/bottom.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 /* 模块卡片样式 */
@@ -218,6 +256,7 @@ onMounted(() => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  border-radius: 10px;
 }
 
 /* 模块标题 */