diff --git a/package.json b/package.json
index 6272289..f3d2b45 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons-vue": "^2.3.2",
     "DroneCtrl": "1.0.1",
     "axios": "^1.13.2",
     "element-plus": "^2.12.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9adf3f..3581664 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@amap/amap-jsapi-loader':
         specifier: ^1.0.1
         version: 1.0.1
+      '@element-plus/icons-vue':
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.5.25)
       DroneCtrl:
         specifier: 1.0.1
         version: 1.0.1
@@ -134,24 +137,28 @@ 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==}
@@ -204,7 +211,7 @@ packages:
     resolution: {integrity: sha512-iHmwV3QcVGGvSC1BG5bZ4z6iwa1SOpAPWmnjOErd4Ske+lZua5K9TtAVdx0gMBClJ28DViCbSmZitjWZsWO3LA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.2.5
       vue: ^3.2.25
 
   '@vue/compiler-core@3.5.25':
@@ -404,24 +411,28 @@ 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==}
diff --git a/src/App.vue b/src/App.vue
index 1b478b0..343a6c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,118 @@
 <template>
-  <div class="map-container">
-    <!-- 地图容器 -->
-    <div id="map-container" ref="mapContainer"></div>
-    
-    <!-- 控制面板 -->
-    <div class="control-panel">
+  <div class="app-container">
+    <!-- 顶部导航栏 -->
+    <header class="top-header">
+      <div class="header-left">
+        <span class="demo-tag">演示界面——电脑端</span>
+        <!-- <span class="region-name">傲来国</span> -->
+      </div>
+      <div class="header-center">
+        <h1 class="app-title">天枢视界</h1>
+      </div>
+      <div class="header-right">
+        <span class="datetime">{{ currentDateTime }}</span>
+      </div>
+    </header>
+
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 地图容器（全屏） -->
+      <div class="map-container">
+        <div id="map-container" ref="mapContainer"></div>
+        
+        <!-- 左侧信息面板（覆盖层） -->
+        <aside class="left-panel">
+          <!-- 实时画面 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">实时画面</span>
+              <span class="panel-count">35路</span>
+            </div>
+            <div class="video-grid">
+              <div v-for="i in 12" :key="i" class="video-item">
+                <div class="video-placeholder">
+                  <span class="video-label">{{ i }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 巡检航线 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">巡检航线</span>
+              <span class="panel-count">35条</span>
+            </div>
+            <div class="status-list">
+              <div class="status-item">
+                <img src="./assets/image/Completed.png" alt="已完成" class="status-icon" />
+                <span class="status-number">13</span>
+                <span class="status-text">已完成</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/in_progress.png" alt="进行中" class="status-icon" />
+                <span class="status-number">23</span>
+                <span class="status-text">进行中</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/to_be_started.png" alt="待开始" class="status-icon" />
+                <span class="status-number">11</span>
+                <span class="status-text">待开始</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 识别场景 -->
+          <div class="info-panel">
+            <div class="panel-header">
+              <span class="panel-title">识别场景</span>
+              <span class="panel-count">35个</span>
+            </div>
+            <div class="status-list">
+              <div class="status-item">
+                <img src="./assets/image/fire.png" alt="火点" class="status-icon" />
+                <span class="status-number">13</span>
+                <span class="status-text">火点</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/personnel.png" alt="人员" class="status-icon" />
+                <span class="status-number">23</span>
+                <span class="status-text">人员</span>
+              </div>
+              <div class="status-item">
+                <img src="./assets/image/smoke.png" alt="烟雾" class="status-icon" />
+                <span class="status-number">11</span>
+                <span class="status-text">烟雾</span>
+              </div>
+            </div>
+          </div>
+        </aside>
+        
+        <!-- 控制面板 -->
+        <div class="control-panel" v-show="showControlPanel">
       <div class="panel-title">电子围栏控制</div>
       
+      <!-- 地图类型切换 -->
+      <div class="control-group">
+        <div class="draw-type-title">地图类型：</div>
+        <div class="draw-buttons">
+          <el-button 
+            @click="switchMapType('normal')" 
+            :type="mapType === 'normal' ? 'primary' : 'default'"
+            size="default"
+          >
+            普通地图
+          </el-button>
+          <el-button 
+            @click="switchMapType('satellite')" 
+            :type="mapType === 'satellite' ? 'primary' : 'default'"
+            size="default"
+          >
+            卫星地图
+          </el-button>
+        </div>
+      </div>
+      
       <!-- 绘制类型选择 -->
       <div class="control-group">
         <div class="draw-type-title">选择绘制类型：</div>
@@ -82,7 +188,7 @@
           @click="toggleWebSocket" 
           :type="wsConnected ? 'danger' : 'primary'"
           size="small"
-          style="width: 100%; margin-top: 8px;"
+          style="width: 100%; margin-top: 8px;margin-left: 0;"
         >
           {{ wsConnected ? '断开连接' : '开始连接' }}
         </el-button>
@@ -125,34 +231,196 @@
           清除所有围栏
         </el-button>
       </div>
+        </div>
+        
+        <!-- 右侧信息面板（覆盖层） -->
+        <aside class="right-panel">
+        <!-- 区域管理 -->
+        <div class="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">区域管理</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="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">出勤设备</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="info-panel">
+          <div class="panel-header">
+            <span class="panel-title">执行任务</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>
+        </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 
+            :src="icon1" 
+            class="footer-icon-img"
+            @click="handleFooterIconClick(1)"
+            alt="图标1"
+          />
+          <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>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+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/wrj.jpg'
+import droneImage from './assets/image/wrj.png'
+import icon1 from './assets/image/1.png'
+import icon2 from './assets/image/2.png'
+import icon3 from './assets/image/3.png'
+import icon4 from './assets/image/4.png'
+import icon5 from './assets/image/5.png'
+import icon6 from './assets/image/6.png'
+import icon7 from './assets/image/7.png'
 import { getConfig } from ".//utils/request";
-import gcoord from 'gcoord';
+import gcoord from 'gcoord'; 
 import DroneCtrl, {
   UploadAreaReq
 } from 'DroneCtrl';
 
 const ctrl = new DroneCtrl(getConfig());
 
+// 当前日期时间
+const currentDateTime = ref('')
+const updateDateTime = () => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+  const hours = String(now.getHours()).padStart(2, '0')
+  const minutes = String(now.getMinutes()).padStart(2, '0')
+  currentDateTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}`
+}
+
 // 地图相关
 const mapContainer = ref(null)
 let map = null
 let AMap = null
 let mouseTool = null
+const mapType = ref('satellite') // 'normal' | 'satellite'
+const dronePath = ref([]) // 无人机轨迹点集合
+let droneTrackLine = null
+const MAX_TRACK_POINTS = 2000
 
 // 围栏相关状态
 const isDrawing = ref(false)
 const currentDrawType = ref(null) // 'polygon' | 'rectangle' | 'circle'
 const fences = ref([])
+const showControlPanel = ref(true) // 控制面板显示/隐藏
 
 // 无人机相关状态
 const wsConnected = ref(false)
@@ -174,7 +442,7 @@ const initMap = async () => {
     AMap = await AMapLoader.load({
       key: mapKey,
       version: '2.0',
-      plugins: ['AMap.MouseTool', 'AMap.Polygon', 'AMap.Rectangle', 'AMap.Circle', 'AMap.Marker', 'AMap.Icon', 'AMap.Text']
+      plugins: ['AMap.MouseTool', 'AMap.Polygon', 'AMap.Rectangle', 'AMap.Circle', 'AMap.Marker', 'AMap.Icon', 'AMap.Text', 'AMap.TileLayer', 'AMap.TileLayer.Satellite', 'AMap.Polyline']
     })
 
     // 创建地图实例
@@ -182,8 +450,19 @@ const initMap = async () => {
       viewMode: '3D',
       zoom: 13,
       // center: [116.397428, 39.90923], // 默认北京天安门
-      mapStyle: 'amap://styles/normal'
+      mapStyle: 'amap://styles/normal' // 默认普通地图
     })
+    
+    // 初始化卫星图层（默认显示，因为mapType默认是satellite）
+    const satelliteLayer = new AMap.TileLayer.Satellite()
+    map.add(satelliteLayer)
+    satelliteLayer.show() // 默认显示卫星图层
+    
+    // 保存图层引用以便切换
+    window.satelliteLayer = satelliteLayer
+
+    // 初始化无人机轨迹图层
+    initDroneTrack()
 
     AMap.plugin('AMap.Geolocation', function () {
       // 插件加载完成后才能使用
@@ -228,6 +507,50 @@ const initMap = async () => {
   }
 }
 
+// 切换地图类型
+const switchMapType = (type) => {
+  if (!map) return
+  
+  mapType.value = type
+  
+  if (type === 'satellite') {
+    // 切换到卫星地图
+    map.setMapStyle('amap://styles/normal')
+    // 显示卫星图层
+    if (window.satelliteLayer) {
+      window.satelliteLayer.show()
+    } else {
+      const satelliteLayer = new AMap.TileLayer.Satellite()
+      map.add(satelliteLayer)
+      window.satelliteLayer = satelliteLayer
+    }
+    ElMessage.success('已切换到卫星地图')
+  } else if (type === 'normal') {
+    // 切换到普通地图
+    map.setMapStyle('amap://styles/normal')
+    // 隐藏卫星图层
+    if (window.satelliteLayer) {
+      window.satelliteLayer.hide()
+    }
+    ElMessage.success('已切换到普通地图')
+  }
+}
+
+// 切换控制面板显示/隐藏
+const toggleControlPanel = () => {
+  showControlPanel.value = !showControlPanel.value
+}
+
+// 处理底部图标点击
+const handleFooterIconClick = (index) => {
+  if (index === 4) {
+    // 第4个图标：显示/隐藏控制面板
+    toggleControlPanel()
+  }
+  // 其他图标的功能可以在这里添加
+  console.log('点击了图标:', index)
+}
+
 // 性能优化：节流处理数据更新
 let lastUpdateTime = 0
 const UPDATE_INTERVAL = 1000 // 3秒更新一次，大幅降低更新频率
@@ -291,6 +614,7 @@ const toggleWebSocket = () => {
     }
     wsConnected.value = false
     isFlying.value = false // 断开连接时重置飞行状态
+    clearDroneTrack()
     ElMessage.info('已断开连接')
     conn.close();
   } else {
@@ -333,8 +657,8 @@ const updateDroneMarker = (lng, lat, heading = 0) => {
     // 创建无人机图标
     const icon = new AMap.Icon({
       image: droneImage,
-      size: new AMap.Size(40, 40),
-      imageSize: new AMap.Size(40, 40),
+      size: new AMap.Size(0, 100),
+      imageSize: new AMap.Size(100, 100),
       imageOffset: new AMap.Pixel(0, 0)
     })
 
@@ -360,10 +684,64 @@ const updateDroneMarker = (lng, lat, heading = 0) => {
     }
   }
 
+  // 更新飞行轨迹
+  updateDroneTrack(lng, lat)
+
   // 将地图中心移动到无人机位置（可选，可以注释掉）
   map.setCenter([lng, lat])
 }
 
+// 初始化无人机轨迹线
+const initDroneTrack = () => {
+  if (!map || !AMap) return
+
+  // 如果已有轨迹线，先移除
+  if (droneTrackLine) {
+    map.remove(droneTrackLine)
+  }
+
+  droneTrackLine = new AMap.Polyline({
+    map,
+    path: [],
+    showDir: true,
+    isOutline: true,
+    outlineColor: 'rgba(0,0,0,0.3)',
+    borderWeight: 2,
+    strokeColor: '#00e0ff',
+    strokeOpacity: 0.8,
+    strokeWeight: 4,
+    lineJoin: 'round',
+    lineCap: 'round',
+    zIndex: 90
+  })
+}
+
+// 更新无人机轨迹
+const updateDroneTrack = (lng, lat) => {
+  if (!map || !AMap) return
+
+  if (!droneTrackLine) {
+    initDroneTrack()
+  }
+
+  dronePath.value.push([lng, lat])
+  if (dronePath.value.length > MAX_TRACK_POINTS) {
+    dronePath.value.shift()
+  }
+
+  if (droneTrackLine) {
+    droneTrackLine.setPath(dronePath.value)
+  }
+}
+
+// 清空无人机轨迹
+const clearDroneTrack = () => {
+  dronePath.value = []
+  if (droneTrackLine) {
+    droneTrackLine.setPath([])
+  }
+}
+
 // 检测点是否在多边形内（射线法）
 const isPointInPolygon = (point, polygon) => {
   const [x, y] = point
@@ -1039,6 +1417,9 @@ const clearAllFences = async () => {
     // 清空围栏列表
     fences.value = []
     
+    // 清除无人机轨迹
+    clearDroneTrack()
+    
     console.log('所有围栏已清除，当前围栏数量:', fences.value.length)
     ElMessage.success('所有围栏已清除')
   } catch (error) {
@@ -1052,13 +1433,24 @@ const clearAllFences = async () => {
 
 // watch已移除：无人机位置实时更新时会自动检测围栏状态，不需要监听围栏变化
 
+// 日期时间更新定时器
+let dateTimeTimer = null
+
 // 组件挂载时初始化地图
 onMounted(() => {
   initMap()
+  updateDateTime()
+  // 每秒更新一次时间
+  dateTimeTimer = setInterval(updateDateTime, 1000)
 })
 
 // 组件卸载时清理
 onUnmounted(() => {
+  // 清除日期时间定时器
+  if (dateTimeTimer) {
+    clearInterval(dateTimeTimer)
+    dateTimeTimer = null
+  }
   // 停止WebSocket连接
   if (mockDataGenerator) {
     mockDataGenerator.stop()
@@ -1085,38 +1477,364 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.map-container {
+/* 全局容器 */
+.app-container {
   width: 100%;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* background: #0a0e27; */
+  color: #ffffff;
+  overflow: hidden;
+}
+
+/* 顶部导航栏 */
+.top-header {
+  height: 60px;
+  background: #0a0e27;
+  backdrop-filter: blur(15px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+  z-index: 1000;
+  position: relative;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.demo-tag {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 4px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.region-name {
+  font-size: 16px;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.header-center {
+  flex: 1;
+  text-align: center;
+}
+
+.app-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  text-shadow: 0 2px 10px rgba(0, 150, 255, 0.5);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.datetime {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  font-family: 'Courier New', monospace;
+}
+
+/* 主内容区域 */
+.main-content {
+  flex: 1;
   position: relative;
   overflow: hidden;
 }
 
+/* 地图容器 */
+.map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+/* 左侧面板（覆盖层） */
+.left-panel {
+  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;
+}
+
+/* 右侧面板（覆盖层） */
+.right-panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  padding: 20px;
+  overflow-y: auto;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* 信息面板 */
+.info-panel {
+ background: rgba(36, 39, 56, 0.7);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-title {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.panel-count {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* 视频网格 */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.video-item {
+  aspect-ratio: 16/9;
+  position: relative;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.video-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0, 150, 255, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
+}
+
+.video-label {
+  position: relative;
+  z-index: 1;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* 状态列表 */
+.status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.status-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.status-number {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  min-width: 30px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  flex: 1;
+}
+
+/* 区域预览 */
+.area-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.area-image {
+  max-width: 100%;
+  height: auto;
+  opacity: 0.8;
+}
+
+/* 设备图标 */
+.device-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.device-icon::before {
+  content: '✈';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
+.device-standby {
+  background: transparent;
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.device-standby::before {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.device-duty {
+  background: rgba(255, 165, 0, 0.3);
+  border-color: #ffa500;
+}
+
+.device-duty::before {
+  color: #ffa500;
+}
+
+.device-charging {
+  background: rgba(0, 255, 0, 0.3);
+  border-color: #00ff00;
+}
+
+.device-charging::before {
+  color: #00ff00;
+}
+
+/* 任务进度 */
+.task-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.progress-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-completed {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.progress-in-progress {
+  background: rgba(255, 165, 0, 0.8);
+}
+
+.progress-pending {
+  background: rgba(0, 255, 0, 0.8);
+}
+
+.progress-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  min-width: 80px;
+  text-align: right;
+}
+
 #map-container {
   width: 100%;
   height: 100%;
 }
 
+/* 控制面板 */
 .control-panel {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  background: rgba(255, 255, 255, 0.95);
+  top: 80px;
+  right: 340px;
+  background: rgba(36, 39, 56, 0.7);
   border-radius: 8px;
   padding: 16px;
   min-width: 280px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  max-width: 320px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   z-index: 1000;
-  max-height: calc(100vh - 40px);
+  max-height: calc(100vh - 160px);
   overflow-y: auto;
+  color: #ffffff;
 }
 
-.panel-title {
+.control-panel .panel-title {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 12px;
-  color: #333;
-  border-bottom: 1px solid #eee;
+  color: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 8px;
 }
 
@@ -1126,7 +1844,7 @@ onUnmounted(() => {
 
 .draw-type-title {
   font-size: 14px;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
   font-weight: 500;
 }
@@ -1152,7 +1870,7 @@ onUnmounted(() => {
 .list-title {
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
 }
 
@@ -1162,13 +1880,14 @@ onUnmounted(() => {
   align-items: center;
   padding: 8px;
   margin-bottom: 8px;
-  background-color: #f5f5f5;
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .fence-info {
   font-size: 12px;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   flex: 1;
   display: flex;
   align-items: center;
@@ -1202,7 +1921,7 @@ onUnmounted(() => {
 
 .fence-name {
   font-size: 12px;
-  color: #333;
+  color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   margin-left: 4px;
 }
@@ -1210,20 +1929,20 @@ onUnmounted(() => {
 .drone-status-panel {
   margin-top: 16px;
   margin-bottom: 16px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 12px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 12px;
 }
 
-.status-title {
+.drone-status-panel .status-title {
   font-size: 14px;
   font-weight: 600;
-  color: #666;
+  color: rgba(255, 255, 255, 0.7);
   margin-bottom: 12px;
 }
 
-.status-item {
+.drone-status-panel .status-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1231,33 +1950,157 @@ onUnmounted(() => {
   font-size: 12px;
 }
 
-.status-label {
-  color: #666;
+.drone-status-panel .status-label {
+  color: rgba(255, 255, 255, 0.7);
   font-weight: 500;
 }
 
-.status-value {
-  color: #333;
+.drone-status-panel .status-value {
+  color: rgba(255, 255, 255, 0.9);
   font-family: monospace;
 }
 
+/* 底部导航栏 */
+.bottom-footer {
+  height: 55px;
+  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);
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.storage-info {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+  padding: 4px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.resolution-info {
+  position: relative;
+}
+
+.resolution-text {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  background: rgba(0, 0, 0, 0.25);
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  letter-spacing: 0.5px;
+}
+
+.footer-icons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.footer-icon {
+  font-size: 56px;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 6px;
+  border-radius: 4px;
+}
+
+.footer-icon:hover {
+  color: rgba(0, 150, 255, 1);
+  background: rgba(0, 150, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.footer-icon-img {
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 4px;
+  border-radius: 4px;
+  object-fit: contain;
+  opacity: 0.8;
+}
+
+.footer-icon-img:hover {
+  opacity: 1;
+  background: rgba(0, 150, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.footer-icon-img.active {
+  opacity: 1;
+  background: rgba(0, 150, 255, 0.2);
+  border: 1px solid rgba(0, 150, 255, 0.5);
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.uptime-info {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+  padding: 4px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
 /* 滚动条样式 */
-.control-panel::-webkit-scrollbar {
+.control-panel::-webkit-scrollbar,
+.left-panel::-webkit-scrollbar,
+.right-panel::-webkit-scrollbar {
   width: 6px;
 }
 
-.control-panel::-webkit-scrollbar-track {
-  background: #f1f1f1;
+.control-panel::-webkit-scrollbar-track,
+.left-panel::-webkit-scrollbar-track,
+.right-panel::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
 
-.control-panel::-webkit-scrollbar-thumb {
-  background: #888;
+.control-panel::-webkit-scrollbar-thumb,
+.left-panel::-webkit-scrollbar-thumb,
+.right-panel::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
   border-radius: 3px;
 }
 
-.control-panel::-webkit-scrollbar-thumb:hover {
-  background: #555;
+.control-panel::-webkit-scrollbar-thumb:hover,
+.left-panel::-webkit-scrollbar-thumb:hover,
+.right-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 </style>
 
diff --git a/src/assets/image/1.png b/src/assets/image/1.png
new file mode 100644
index 0000000..e3bba0c
Binary files /dev/null and b/src/assets/image/1.png differ
diff --git a/src/assets/image/2.png b/src/assets/image/2.png
new file mode 100644
index 0000000..f4a35e7
Binary files /dev/null and b/src/assets/image/2.png differ
diff --git a/src/assets/image/3.png b/src/assets/image/3.png
new file mode 100644
index 0000000..72df3cc
Binary files /dev/null and b/src/assets/image/3.png differ
diff --git a/src/assets/image/4.png b/src/assets/image/4.png
new file mode 100644
index 0000000..fb979fc
Binary files /dev/null and b/src/assets/image/4.png differ
diff --git a/src/assets/image/5.png b/src/assets/image/5.png
new file mode 100644
index 0000000..8a8cd7a
Binary files /dev/null and b/src/assets/image/5.png differ
diff --git a/src/assets/image/6.png b/src/assets/image/6.png
new file mode 100644
index 0000000..ad94022
Binary files /dev/null and b/src/assets/image/6.png differ
diff --git a/src/assets/image/7.png b/src/assets/image/7.png
new file mode 100644
index 0000000..6d9fe05
Binary files /dev/null and b/src/assets/image/7.png differ
diff --git a/src/assets/image/Completed.png b/src/assets/image/Completed.png
new file mode 100644
index 0000000..a7b3a1a
Binary files /dev/null and b/src/assets/image/Completed.png differ
diff --git a/src/assets/image/fire.png b/src/assets/image/fire.png
new file mode 100644
index 0000000..5a1c07a
Binary files /dev/null and b/src/assets/image/fire.png differ
diff --git a/src/assets/image/in_progress.png b/src/assets/image/in_progress.png
new file mode 100644
index 0000000..7e9335e
Binary files /dev/null and b/src/assets/image/in_progress.png differ
diff --git a/src/assets/image/personnel.png b/src/assets/image/personnel.png
new file mode 100644
index 0000000..8926fcb
Binary files /dev/null and b/src/assets/image/personnel.png differ
diff --git a/src/assets/image/regional_management.png b/src/assets/image/regional_management.png
new file mode 100644
index 0000000..a77d79d
Binary files /dev/null and b/src/assets/image/regional_management.png differ
diff --git a/src/assets/image/smoke.png b/src/assets/image/smoke.png
new file mode 100644
index 0000000..b796ffa
Binary files /dev/null and b/src/assets/image/smoke.png differ
diff --git a/src/assets/image/to_be_started.png b/src/assets/image/to_be_started.png
new file mode 100644
index 0000000..6892c74
Binary files /dev/null and b/src/assets/image/to_be_started.png differ
diff --git a/src/assets/image/wrj.png b/src/assets/image/wrj.png
new file mode 100644
index 0000000..a8ac202
Binary files /dev/null and b/src/assets/image/wrj.png differ
diff --git a/src/main.js b/src/main.js
index 368d823..dab6993 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,13 @@
 import { createApp } from 'vue'
 import './style.css'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 const app = createApp(App)
 app.use(ElementPlus)
 app.mount('#app')
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
\ No newline at end of file