修改首页左右侧边栏添加深蓝渐变背景蒙层

src/layouts/DashboardLayout.vue

@@ -299,7 +299,6 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: linear-gradient(180deg, rgba(10, 25, 60, 0.75) 0%, rgba(5, 15, 40, 0.85) 100%);
 }
 
 /* --- 中心区域保持事件穿透，让出地图的拖拽控制权 --- */

src/views/Home.vue

@@ -19,6 +19,7 @@
     </template>
 
     <template #left>
+      <div class="sidebar-bg">
       <div class="panel-list">
         <div class="panel-item">
           <PanelContainer title="在线状态">
@@ -42,9 +43,11 @@
           </PanelContainer>
         </div>
       </div>
+      </div>
     </template>
 
     <template #right>
+      <div class="sidebar-bg">
       <div class="panel-list">
         <div class="panel-item">
           <PanelContainer title="设备状态">
@@ -98,6 +101,7 @@
           </PanelContainer>
         </div>
       </div>
+      </div>
     </template>
 
     <template #center>
@@ -288,6 +292,11 @@ export default {
 }
 </script>
 <style scoped>
+.sidebar-bg {
+  height: 100%;
+  background: linear-gradient(180deg, rgba(10, 25, 60, 0.75) 0%, rgba(5, 15, 40, 0.85) 100%);
+}
+
 .panel-list {
   display: flex;
   flex-direction: column;