切图

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^2.3.2
         version: 2.3.2(vue@3.5.25)
       DroneCtrl:
-        specifier: 1.0.2
+        specifier: 1.0.1
-        version: 1.0.2
+        version: 1.0.1
       axios:
         specifier: ^1.13.2
         version: 1.13.2
@@ -137,28 +137,24 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
     resolution: {integrity: sha512-L0zRdH2oDPkmB+wvuTl+dJbXCsx62SkqcEqdM+79LOcB+PxbAxxjzHU14BuZIQdXcAVDzfpMfaHWzZuwhhBTcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
     resolution: {integrity: sha512-gyoI8o/TGpQd3OzkJnh1M2kxy1Bisg8qJ5Gci0sXm9yLFzEXIFdtc4EAzepxGvrT2ri99ar5rdsmNG0zP0SbIg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
     resolution: {integrity: sha512-zti8A7M+xFDpKlghpcCAzyOi+e5nfUl3QhU023ce5NCgUxRG5zGP2GR9LTydQ1rnIPwZUVBWd4o7NjZDaQxaXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
     resolution: {integrity: sha512-eZUssog7qljrrRU9Mi0eqYEPm3Ch0UwB+qlWPMKSUXHNqhm3TvDZarJQdTevGEfu3EHAXJvBIe0YFYr0TPVaMA==}
@@ -252,8 +248,8 @@ packages:
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  DroneCtrl@1.0.2:
+  DroneCtrl@1.0.1:
-    resolution: {integrity: sha512-EQWN1q8S4mN64gMlBQkQyJIYSBVE75YLPsYI+L/67TPypOyGWnI/kxCYMPY1hNVB8sIxJO0Z3DU3wlKxwg4Qiw==}
+    resolution: {integrity: sha512-3ibzb0sXZGXAkbSTg4Zb8heTx6ASBkWaI2yAO8V+4/Y2ygULruPCzb8o3c89wWlnfQQ/AALWlNmkpVV/ezBujQ==}
 
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
@@ -411,28 +407,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -781,7 +773,7 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  DroneCtrl@1.0.2: {}
+  DroneCtrl@1.0.1: {}
 
   async-validator@4.2.5: {}
 

src/App.vue

@@ -24,7 +24,7 @@
         <aside class="left-panel">
           <!-- 实时画面 -->
           <div class="info-panel">
-            <div class="panel-header">
+            <!-- <div class="panel-header">
               <span class="panel-title">实时画面</span>
               <span class="panel-count">35路</span>
             </div>
@@ -34,12 +34,12 @@
                   <span class="video-label">{{ i }}</span>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
 
           <!-- 巡检航线 -->
           <div class="info-panel">
-            <div class="panel-header">
+            <!-- <div class="panel-header">
               <span class="panel-title">巡检航线</span>
               <span class="panel-count">35条</span>
             </div>
@@ -59,12 +59,12 @@
                 <span class="status-number">11</span>
                 <span class="status-text">待开始</span>
               </div>
-            </div>
+            </div> -->
           </div>
 
           <!-- 识别场景 -->
           <div class="info-panel">
-            <div class="panel-header">
+            <!-- <div class="panel-header">
               <span class="panel-title">识别场景</span>
               <span class="panel-count">35个</span>
             </div>
@@ -84,282 +84,196 @@
                 <span class="status-number">11</span>
                 <span class="status-text">烟雾</span>
               </div>
-            </div>
+            </div> -->
           </div>
         </aside>
 
         <!-- 控制面板 -->
         <div class="control-panel" v-show="showControlPanel">
-      <div class="panel-title">电子围栏控制</div>
+          <div class="panel-title">电子围栏控制</div>
 
-      <!-- 地图类型切换 -->
+          <div>
-      <div class="control-group">
+            <!-- 地图类型切换 -->
-        <div class="draw-type-title">地图类型：</div>
+            <div class="control-group">
-        <div class="draw-buttons">
+              <div class="draw-type-title">地图类型：</div>
-          <el-button 
+              <div class="draw-buttons">
-            @click="switchMapType('normal')" 
+                <el-button @click="switchMapType('normal')" :type="mapType === 'normal' ? 'primary' : 'default'"
-            :type="mapType === 'normal' ? 'primary' : 'default'"
+                  size="default">
-            size="default"
+                  普通地图
-          >
+                </el-button>
-            普通地图
+                <el-button @click="switchMapType('satellite')" :type="mapType === 'satellite' ? 'primary' : 'default'"
-          </el-button>
+                  size="default">
-          <el-button 
+                  卫星地图
-            @click="switchMapType('satellite')" 
+                </el-button>
-            :type="mapType === 'satellite' ? 'primary' : 'default'"
+              </div>
-            size="default"
+            </div>
-          >
-            卫星地图
-          </el-button>
-        </div>
-      </div>
 
-      <!-- 绘制类型选择 -->
+            <!-- 绘制类型选择 -->
-      <div class="control-group">
+            <div class="control-group">
-        <div class="draw-type-title">选择绘制类型：</div>
+              <div class="draw-type-title">选择绘制类型：</div>
-        <div class="draw-buttons">
+              <div class="draw-buttons">
-          <el-button 
+                <el-button @click="startDrawPolygon" :type="currentDrawType === 'polygon' ? 'primary' : 'default'"
-            @click="startDrawPolygon" 
+                  size="default">
-            :type="currentDrawType === 'polygon' ? 'primary' : 'default'"
+                  多边形
+                </el-button>
+                <el-button @click="startDrawRectangle" :type="currentDrawType === 'rectangle' ? 'primary' : 'default'"
+                  size="default">
+                  矩形
+                </el-button>
+                <el-button @click="startDrawCircle" :type="currentDrawType === 'circle' ? 'primary' : 'default'"
+                  size="default">
+                  圆形
+                </el-button>
+              </div>
+            </div>
 
-            size="default"
+            <!-- 无人机状态面板 -->
-          >
+            <div class="drone-status-panel">
-            多边形
+              <div class="status-title">无人机状态</div>
-          </el-button>
+              <div class="status-item">
-          <el-button 
+                <span class="status-label">连接状态:</span>
-            @click="startDrawRectangle" 
+                <el-tag :type="wsConnected ? 'success' : 'danger'" size="small">
-            :type="currentDrawType === 'rectangle' ? 'primary' : 'default'"
+                  {{ wsConnected ? '已连接' : '未连接' }}
+                </el-tag>
+              </div>
+              <div class="status-item" v-if="droneData">
+                <span class="status-label">位置:</span>
+                <span class="status-value">{{ droneData.latitude?.toFixed(6) }}, {{ droneData.longitude?.toFixed(6)
+                }}</span>
+              </div>
+              <div class="status-item" v-if="droneData">
+                <span class="status-label">高度:</span>
+                <span class="status-value">{{ droneData.altitude?.toFixed(1) }}m</span>
+              </div>
+              <div class="status-item" v-if="droneData">
+                <span class="status-label">速度:</span>
+                <span class="status-value">{{ droneData.speed?.toFixed(1) }}m/s</span>
+              </div>
+              <div class="status-item" v-if="droneData">
+                <span class="status-label">电量:</span>
+                <span class="status-value">{{ droneData.battery?.toFixed(0) }}%</span>
+              </div>
+              <div class="status-item">
+                <span class="status-label">围栏状态:</span>
+                <el-tag :type="isInFence ? 'success' : 'danger'" size="small">
+                  {{ isInFence ? '围栏内' : '围栏外' }}
+                </el-tag>
+              </div>
+              <el-button @click="handleTakeoff" :type="isFlying ? 'warning' : 'success'" size="small"
+                style="width: 100%; margin-top: 8px;" :disabled="isFlying">
+                {{ isFlying ? '飞行中' : '起飞' }}
+              </el-button>
+              <el-button @click="toggleWebSocket" :type="wsConnected ? 'danger' : 'primary'" size="small"
+                style="width: 100%; margin-top: 8px;margin-left: 0;">
+                {{ wsConnected ? '断开连接' : '开始连接' }}
+              </el-button>
+            </div>
 
-            size="default"
+            <!-- 围栏列表 -->
-          >
+            <div class="fence-list" v-if="fences.length > 0">
-            矩形
+              <div class="list-title">已绘制围栏 ({{ fences.length }})</div>
-          </el-button>
+              <div v-for="fence in fences" :key="fence.id" class="fence-item">
-          <el-button 
+                <span class="fence-info">
-            @click="startDrawCircle" 
+                  <span class="fence-name">{{ fence.name || '未命名围栏' }}</span>
-            :type="currentDrawType === 'circle' ? 'primary' : 'default'"
+                </span>
-           
+                <div class="fence-actions">
-            size="default"
+                  <el-button @click="uploadFence(fence.id)" type="primary" size="small">
-          >
+                    上传
-            圆形
+                  </el-button>
-          </el-button>
+                  <el-button @click="removeFence(fence.id)" type="danger" size="small">
-        </div>
+                    删除
-      </div>
+                  </el-button>
-      
+                </div>
-      <!-- 无人机状态面板 -->
+              </div>
-      <div class="drone-status-panel">
+              <el-button @click="clearAllFences" type="danger" size="default" style="width: 100%; margin-top: 8px;">
-        <div class="status-title">无人机状态</div>
+                清除所有围栏
-        <div class="status-item">
+              </el-button>
-          <span class="status-label">连接状态:</span>
+            </div>
-          <el-tag :type="wsConnected ? 'success' : 'danger'" size="small">
-            {{ wsConnected ? '已连接' : '未连接' }}
-          </el-tag>
-        </div>
-        <div class="status-item" v-if="droneData">
-          <span class="status-label">位置:</span>
-          <span class="status-value">{{ droneData.latitude?.toFixed(6) }}, {{ droneData.longitude?.toFixed(6) }}</span>
-        </div>
-        <div class="status-item" v-if="droneData">
-          <span class="status-label">高度:</span>
-          <span class="status-value">{{ droneData.altitude?.toFixed(1) }}m</span>
-        </div>
-        <div class="status-item" v-if="droneData">
-          <span class="status-label">速度:</span>
-          <span class="status-value">{{ droneData.speed?.toFixed(1) }}m/s</span>
-        </div>
-        <div class="status-item" v-if="droneData">
-          <span class="status-label">电量:</span>
-          <span class="status-value">{{ droneData.battery?.toFixed(0) }}%</span>
-        </div>
-        <div class="status-item">
-          <span class="status-label">围栏状态:</span>
-          <el-tag :type="isInFence ? 'success' : 'danger'" size="small">
-            {{ isInFence ? '围栏内' : '围栏外' }}
-          </el-tag>
-        </div>
-        <el-button 
-          @click="handleTakeoff" 
-          :type="isFlying ? 'warning' : 'success'"
-          size="small"
-          style="width: 100%; margin-top: 8px;"
-          :disabled="isFlying"
-        >
-          {{ isFlying ? '飞行中' : '起飞' }}
-        </el-button>
-        <el-button 
-          @click="toggleWebSocket" 
-          :type="wsConnected ? 'danger' : 'primary'"
-          size="small"
-          style="width: 100%; margin-top: 8px;margin-left: 0;"
-        >
-          {{ wsConnected ? '断开连接' : '开始连接' }}
-        </el-button>
-      </div>
-
-      <!-- 围栏列表 -->
-      <div class="fence-list" v-if="fences.length > 0">
-        <div class="list-title">已绘制围栏 ({{ fences.length }})</div>
-        <div 
-          v-for="fence in fences" 
-          :key="fence.id" 
-          class="fence-item"
-        >
-          <span class="fence-info">
-            <span class="fence-name">{{ fence.name || '未命名围栏' }}</span>
-          </span>
-          <div class="fence-actions">
-            <el-button 
-              @click="uploadFence(fence.id)" 
-              type="primary"
-              size="small"
-            >
-              上传
-            </el-button>
-            <el-button 
-              @click="removeFence(fence.id)" 
-              type="danger"
-              size="small"
-            >
-              删除
-            </el-button>
           </div>
         </div>
-        <el-button 
-          @click="clearAllFences" 
-          type="danger"
-          size="default"
-          style="width: 100%; margin-top: 8px;"
-        >
-          清除所有围栏
-        </el-button>
-      </div>
-        </div>
 
         <!-- 右侧信息面板（覆盖层） -->
         <aside class="right-panel">
-        <!-- 区域管理 -->
+          <!-- 区域管理 -->
-        <div class="info-panel">
+          <div class="info-panel">
-          <div class="panel-header">
+            <!-- <div class="panel-header">
-            <span class="panel-title">区域管理</span>
+              <span class="panel-title">区域管理</span>
-            <span class="panel-count">12个</span>
+              <span class="panel-count">12个</span>
+            </div>
+            <div class="area-preview">
+              <img src="./assets/image/regional_management.png" alt="区域管理" class="area-image" />
+            </div> -->
           </div>
-          <div class="area-preview">
-            <img src="./assets/image/regional_management.png" alt="区域管理" class="area-image" />
-          </div>
-        </div>
 
-        <!-- 出勤设备 -->
+          <!-- 出勤设备 -->
-        <div class="info-panel">
+          <div class="info-panel">
-          <div class="panel-header">
+            <!-- <div class="panel-header">
-            <span class="panel-title">出勤设备</span>
+              <span class="panel-title">出勤设备</span>
-            <span class="panel-count">35台</span>
+              <span class="panel-count">35台</span>
+            </div>
+            <div class="status-list">
+              <div class="status-item">
+                <div class="device-icon device-standby"></div>
+                <span class="status-number">25</span>
+                <span class="status-text">待机</span>
+              </div>
+              <div class="status-item">
+                <div class="device-icon device-duty"></div>
+                <span class="status-number">13</span>
+                <span class="status-text">在勤</span>
+              </div>
+              <div class="status-item">
+                <div class="device-icon device-charging"></div>
+                <span class="status-number">12</span>
+                <span class="status-text">充电</span>
+              </div>
+            </div> -->
           </div>
-          <div class="status-list">
-            <div class="status-item">
-              <div class="device-icon device-standby"></div>
-              <span class="status-number">25</span>
-              <span class="status-text">待机</span>
-            </div>
-            <div class="status-item">
-              <div class="device-icon device-duty"></div>
-              <span class="status-number">13</span>
-              <span class="status-text">在勤</span>
-            </div>
-            <div class="status-item">
-              <div class="device-icon device-charging"></div>
-              <span class="status-number">12</span>
-              <span class="status-text">充电</span>
-            </div>
-          </div>
-        </div>
 
-        <!-- 执行任务 -->
+          <!-- 执行任务 -->
-        <div class="info-panel">
+          <div class="info-panel">
-          <div class="panel-header">
+            <!-- <div class="panel-header">
-            <span class="panel-title">执行任务</span>
+              <span class="panel-title">执行任务</span>
-            <span class="panel-count">12项</span>
+              <span class="panel-count">12项</span>
+            </div>
+            <div class="task-progress">
+              <div class="progress-item">
+                <div class="progress-bar">
+                  <div class="progress-fill progress-completed" style="width: 13%"></div>
+                </div>
+                <span class="progress-text">13% 已完成</span>
+              </div>
+              <div class="progress-item">
+                <div class="progress-bar">
+                  <div class="progress-fill progress-in-progress" style="width: 48%"></div>
+                </div>
+                <span class="progress-text">48% 进行中</span>
+              </div>
+              <div class="progress-item">
+                <div class="progress-bar">
+                  <div class="progress-fill progress-pending" style="width: 60%"></div>
+                </div>
+                <span class="progress-text">60% 待开始</span>
+              </div>
+            </div> -->
           </div>
-          <div class="task-progress">
-            <div class="progress-item">
-              <div class="progress-bar">
-                <div class="progress-fill progress-completed" style="width: 13%"></div>
-              </div>
-              <span class="progress-text">13% 已完成</span>
-            </div>
-            <div class="progress-item">
-              <div class="progress-bar">
-                <div class="progress-fill progress-in-progress" style="width: 48%"></div>
-              </div>
-              <span class="progress-text">48% 进行中</span>
-            </div>
-            <div class="progress-item">
-              <div class="progress-bar">
-                <div class="progress-fill progress-pending" style="width: 60%"></div>
-              </div>
-              <span class="progress-text">60% 待开始</span>
-            </div>
-          </div>
-        </div>
         </aside>
       </div>
     </div>
 
     <!-- 底部导航栏 -->
     <footer class="bottom-footer">
-      <div class="footer-left">
-        <span class="storage-info">62.3GB</span>
-      </div>
       <div class="footer-center">
-        <div class="resolution-info">
-          <!-- <span class="resolution-text">1109px x 1902px</span> -->
-        </div>
         <div class="footer-icons">
-          <img 
+          <img src="./assets/image/d1.png" class="arrow-img" />
-            :src="icon1" 
+          <img src="./assets/image/i1.png" class="icon-img" />
-            class="footer-icon-img"
+          <img src="./assets/image/i2.png" class="icon-img" />
-            @click="handleFooterIconClick(1)"
+          <img src="./assets/image/i3.png" class="icon-img" @click="handleFooterIconClick(4)"/>
-            alt="图标1"
+          <img src="./assets/image/i4.png"  class="icon-img" />
-          />
+          <img src="./assets/image/i5.png" class="icon-img" />
-          <img 
+          <img src="./assets/image/d2.png" class="arrow-img" />
-            :src="icon2" 
-            class="footer-icon-img"
-            @click="handleFooterIconClick(2)"
-            alt="图标2"
-          />
-          <img 
-            :src="icon3" 
-            class="footer-icon-img"
-            @click="handleFooterIconClick(3)"
-            alt="图标3"
-          />
-          <img 
-            :src="icon4" 
-            class="footer-icon-img"
-            :class="{ 'active': showControlPanel }"
-            @click="handleFooterIconClick(4)"
-            alt="图标4"
-          />
-          <img 
-            :src="icon5" 
-            class="footer-icon-img"
-            @click="handleFooterIconClick(5)"
-            alt="图标5"
-          />
-          <img 
-            :src="icon6" 
-            class="footer-icon-img"
-            @click="handleFooterIconClick(6)"
-            alt="图标6"
-          />
-          <img 
-            :src="icon7" 
-            class="footer-icon-img"
-            @click="handleFooterIconClick(7)"
-            alt="图标7"
-          />
         </div>
       </div>
-      <div class="footer-right">
-        <span class="uptime-info">120.3 h</span>
-      </div>
     </footer>
   </div>
 </template>
@@ -368,15 +282,6 @@
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { 
-  Upload, 
-  Connection, 
-  Folder, 
-  Download, 
-  ChatLineRound, 
-  Link, 
-  VideoPlay 
-} from '@element-plus/icons-vue'
 import { WebSocketClient, MockWebSocketDataGenerator } from './utils/websocket.js'
 import droneImage from './assets/image/wrj.png'
 import icon1 from './assets/image/1.png'
@@ -628,15 +533,15 @@ const toggleWebSocket = () => {
       const drone1 = data.drone_1;
       const drone2 = data.drone_2;
       const point = gcoord.transform(
-          [drone1.longitude, drone1.latitude], 
+        [drone1.longitude, drone1.latitude],
-          gcoord.WGS84,       // 当前坐标系
+        gcoord.WGS84,       // 当前坐标系
-          gcoord.GCJ02,       // 目标坐标系
+        gcoord.GCJ02,       // 目标坐标系
-        );
+      );
       const point2 = gcoord.transform(
-          [drone2.longitude, drone2.latitude], 
+        [drone2.longitude, drone2.latitude],
-          gcoord.WGS84,       // 当前坐标系
+        gcoord.WGS84,       // 当前坐标系
-          gcoord.GCJ02,       // 目标坐标系
+        gcoord.GCJ02,       // 目标坐标系
-        );
+      );
       console.log(point, point2);
       // updateDroneMarker(point[0], point[1], drone1.heading);
       // updateDrone2Marker(point2[0], point2[1], drone2.heading);
@@ -782,7 +687,7 @@ const isPointInRectangle = (point, bounds) => {
   const ne = bounds.getNorthEast()
 
   return lng >= sw.getLng() && lng <= ne.getLng() &&
-         lat >= sw.getLat() && lat <= ne.getLat()
+    lat >= sw.getLat() && lat <= ne.getLat()
 }
 
 // 检测点是否在圆形内
@@ -1293,7 +1198,7 @@ const uploadFence = (fenceId) => {
     }
 
     if (pointsData) {
-      const points = pointsData.points.map(point=> {
+      const points = pointsData.points.map(point => {
         const wgsPoint = gcoord.transform(
           point,              // 原始坐标
           gcoord.GCJ02,       // 当前坐标系
@@ -1303,7 +1208,7 @@ const uploadFence = (fenceId) => {
       });
       console.log(points)
 
-      ctrl.UploadArea(new UploadAreaReq(points.map(point=>({
+      ctrl.UploadArea(new UploadAreaReq(points.map(point => ({
         longitude: point[0],
         latitude: point[1],
       }))));
@@ -1583,17 +1488,35 @@ onUnmounted(() => {
 
 /* 左侧面板（覆盖层） */
 .left-panel {
+  /* background: url('./assets/image/z1.png') no-repeat center center; */
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
-  width: 320px;
   padding: 20px;
   overflow-y: auto;
   z-index: 100;
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  :nth-child(1) {
+    background: url('./assets/image/z1.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
+
+  :nth-child(2) {
+    background: url('./assets/image/z2.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
+
+  :nth-child(3) {
+    background: url('./assets/image/z3.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
 }
 
 /* 右侧面板（覆盖层） */
@@ -1609,11 +1532,29 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  :nth-child(1) {
+    background: url('./assets/image/y1.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
+
+  :nth-child(2) {
+    background: url('./assets/image/y2.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
+
+  :nth-child(3) {
+    background: url('./assets/image/y3.png') no-repeat center center;
+    width: 320px;
+    height: 270px;
+  }
 }
 
 /* 信息面板 */
 .info-panel {
- background: rgba(36, 39, 56, 0.7);
+  background: rgba(36, 39, 56, 0.7);
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 16px;
@@ -1983,14 +1924,12 @@ onUnmounted(() => {
 
 /* 底部导航栏 */
 .bottom-footer {
-  height: 55px;
+  background: #0a0e27;
-  background:#0a0e27; 
   backdrop-filter: blur(15px);
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 40px;
   z-index: 1000;
   position: relative;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
@@ -2124,4 +2063,3 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.5);
 }
 </style>
-