修改水文站机器人页面

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import HeilinStationView from '../views/HeilinStationView.vue'
 import SimulationView from '../views/SimulationView.vue'
 import LiangShuiYanView from '../views/LiangShuiYanView.vue'
+import WaterCultureView from '../views/WaterCultureView.vue'
 
 const routes = [
   {
@@ -24,6 +25,11 @@ const routes = [
     path: '/liangshuiyan',
     name: 'liangshuiyan',
     component: LiangShuiYanView
+  },
+  {
+    path: '/water-culture',
+    name: 'water-culture',
+    component: WaterCultureView
   }
 ]
 

src/views/HeilinStationView.vue

@@ -18,8 +18,8 @@
       <div class="sub-title right-2" @click="goToSimulation">
         测控平台
       </div>
-      <div class="sub-title right-3" @click="showDetailModal = true">
-        更多
+      <div class="sub-title right-3" @click="goToWaterCulture">
+        智能巡检
       </div>
       
       <!-- 主要内容区域 -->
@@ -390,6 +390,10 @@ const goToSimulation = () => {
   router.push('/simulation')
 }
 
+const goToWaterCulture = () => {
+  router.push('/water-culture')
+}
+
 const changeMainImage = (imageUrl) => {
   mainImageUrl.value = imageUrl
   // 提取图片名称作为 alt 文本

src/views/HomeView.vue

@@ -47,10 +47,10 @@
     </div>
     <div 
       class="sub-title right-3" 
-      :class="{ active: activeTab === '水文化宣传' }"
-      @click="selectTab('水文化宣传')"
+      :class="{ active: activeTab === '智能巡检' }"
+      @click="selectTab('智能巡检')"
     >
-      水文化宣传
+      智能巡检
     </div>
     
     <!-- 流域总览视图 -->

src/views/LiangShuiYanView.vue

@@ -7,14 +7,14 @@
     <div class="sub-title left-1" @click="goBack">
       首页
     </div>
-    <div class="sub-title left-2">
+    <div class="sub-title left-2" @click="goToHeilinStation">
       测站详情
     </div>
     <div class="sub-title right-2" @click="goToSimulation">
       测控平台
     </div>
-    <div class="sub-title right-3">
-      更多
+    <div class="sub-title right-3" @click="goToWaterCulture">
+      智能巡检
     </div>
     <div class="main-content">
       <div class="left-sidebar">
@@ -67,7 +67,7 @@
                   <div class="shebei-icon">📡</div>
                   <div class="shebei-info">
                     <div class="shebei-name">智能堰计</div>
-                    <div class="shebei-status online">在线<span class="signal-strength">信号：4G</span></div>
+                    <div class="shebei-status online">在线</div>
                   </div>
                 </div>
                 <div class="shebei-item">
@@ -216,6 +216,14 @@ const goToSimulation = () => {
   router.push('/simulation')
 }
 
+const goToWaterCulture = () => {
+  router.push('/water-culture')
+}
+
+const goToHeilinStation = () => {
+  router.push('/heilin-station')
+}
+
 const drawYanliuChart = () => {
   const container = yanliuChartRef.value
   if (!container) return
@@ -442,19 +450,19 @@ onMounted(() => {
 }
 
 .sub-title.left-1 {
-  left: 280px;
+  left: 180px;
 }
 
 .sub-title.left-2 {
-  left: 450px;
+  left: 400px;
 }
 
 .sub-title.right-2 {
-  right: 420px;
+  right: 400px;
 }
 
 .sub-title.right-3 {
-  right: 250px;
+  right: 200px;
 }
 
 .main-content {

src/views/SimulationView.vue

@@ -17,8 +17,8 @@
     <div class="sub-title right-2">
       测控平台
     </div>
-    <div class="sub-title right-3" @click="showDetailModal = true">
-      更多
+    <div class="sub-title right-3" @click="goToWaterCulture">
+      智能巡检
     </div>
     
     <!-- 主要内容区域 -->
@@ -339,6 +339,10 @@ export default {
       this.$router.push('/heilin-station')
     },
     
+    goToWaterCulture() {
+      this.$router.push('/water-culture')
+    },
+    
     showDetail() {
       this.showDetailModal = true
     },
@@ -487,19 +491,19 @@ export default {
 }
 
 .sub-title.left-1 {
-  left: 300px;
+  left: 180px;
 }
 
 .sub-title.left-2 {
-  left: 450px;
+  left: 400px;
 }
 
 .sub-title.right-2 {
-  right: 200px;
+  right: 400px;
 }
 
 .sub-title.right-3 {
-  right: 50px;
+  right: 200px;
 }
 
 .main-content {

src/views/WaterCultureView.vue

@@ -0,0 +1,1790 @@
+<template>
+  <div class="dashboard">
+    <!-- 背景和基础元素 -->
+    <div class="station-bg"></div>
+    
+
+      <div class="bottom-bg"></div>
+      <div class="top-title"></div>
+      <div class="system-title">数字孪生黑林小流域</div>
+      
+      <!-- 顶部按钮 -->
+      <div class="sub-title left-1" @click="goBack">
+        首页
+      </div>
+      <div class="sub-title left-2" @click="goToHeilinStation">
+        测站详情
+      </div>
+      <div class="sub-title right-2" @click="goToSimulation">
+        测控平台
+      </div>
+      <div class="sub-title right-3" @click="goToWaterCulture">
+        智能巡检
+      </div>
+      
+      <!-- 主要内容区域 -->
+      <div class="main-content">
+        <!-- 左侧面板区域 -->
+        <div class="left-sidebar">
+          <!-- 左侧数据框容器 -->
+          <div class="left-container">
+            <!-- 左侧面板1：设备状态 -->
+            <div class="data-card station-intro">
+              <div class="panel-header">
+                <h3>设备状态</h3>
+                <span class="more-btn" @click="showDetailModal = true">更多</span>
+              </div>
+              <div class="panel-content">
+                <div class="device-status-section">
+                  <!-- 机器人实时状态 - 一行卡片展示 -->
+                  <div class="status-cards-row">
+                    <div class="status-card">
+                      <div class="status-card-label">剩余电量</div>
+                      <div class="status-card-value">85%</div>
+                    </div>
+                    <div class="status-card">
+                      <div class="status-card-label">运行模式</div>
+                      <div class="status-card-value">自动巡检</div>
+                    </div>
+                    <div class="status-card">
+                      <div class="status-card-label">信号强度</div>
+                      <div class="status-card-value">强</div>
+                    </div>
+                    <div class="status-card">
+                      <div class="status-card-label">当前位置</div>
+                      <div class="status-card-value">1号监测断面</div>
+                    </div>
+                  </div>
+                  
+                  <!-- 搭载设备状态 - 机器人背景 + 小图标 -->
+                  <div class="robot-status-container">
+                    <div class="robot-bg">
+                      <img src="/src/assets/images/Heilin/机器人.png" alt="巡检机器人" class="robot-image" />
+                    </div>
+                    
+                    <!-- 运行参数卡片 -->
+                    <div class="params-cards-row">
+                      <div class="param-card">
+                        <div class="param-label">采集频率</div>
+                        <div class="param-value">5秒/次</div>
+                      </div>
+                      <div class="param-card">
+                        <div class="param-label">数据传输状态</div>
+                        <div class="param-value normal">正常</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 左侧面板 2：巡检任务 -->
+            <div class="data-card video-monitor">
+              <div class="panel-header">
+                <h3>巡检任务</h3>
+              </div>
+              <div class="panel-content">
+                <!-- 路线选择 -->
+                <div class="task-section">
+                  <h4>路线选择</h4>
+                  <div class="route-info">
+                    <div class="route-item">
+                      <span class="route-label">当前路线：</span>
+                      <span class="route-value">1号监测断面 → 测验设备区 → 汇水区</span>
+                    </div>
+                    <div class="route-item">
+                      <span class="route-label">预设路线：</span>
+                      <select v-model="selectedRoute" class="route-select">
+                        <option value="route1">标准巡检路线</option>
+                        <option value="route2">重点区域巡检路线</option>
+                        <option value="route3">全面覆盖路线</option>
+                      </select>
+                    </div>
+                    <div class="route-progress">
+                      <span class="progress-label">当前进度：</span>
+                      <div class="progress-bar">
+                        <div class="progress-fill" style="width: 60%"></div>
+                      </div>
+                      <span class="progress-text">60% (已完成2/3点位)</span>
+                    </div>
+                  </div>
+                </div>
+                
+                <!-- 任务下达 -->
+                <div class="task-section" style="margin-top: 20px;">
+                  <h4>任务下达</h4>
+                  <div class="task-input">
+                    <div class="task-input-item">
+                      <label>巡检区域：</label>
+                      <select v-model="taskArea" class="task-select">
+                        <option value="all">全部区域</option>
+                        <option value="section1">1号监测断面</option>
+                        <option value="section2">测验设备区</option>
+                        <option value="section3">汇水区</option>
+                      </select>
+                    </div>
+                    <div class="task-input-item">
+                      <label>巡检频次：</label>
+                      <select v-model="taskFrequency" class="task-select">
+                        <option value="once">单次</option>
+                        <option value="hourly">每小时</option>
+                        <option value="daily">每天</option>
+                        <option value="weekly">每周</option>
+                      </select>
+                    </div>
+                    <div class="task-input-item">
+                      <label>重点巡检项：</label>
+                      <div class="checkbox-group">
+                        <label><input type="checkbox" v-model="taskItems.camera" /> 摄像头</label>
+                        <label><input type="checkbox" v-model="taskItems.flow" /> 流速</label>
+                        <label><input type="checkbox" v-model="taskItems.water" /> 水质</label>
+                      </div>
+                    </div>
+                    <button class="task-btn" @click="issueTask">下达任务</button>
+                  </div>
+                  
+                  <!-- 当前任务列表 -->
+                  <div class="task-list" style="margin-top: 15px;">
+                    <h5>当前任务</h5>
+                    <div class="task-list-item">
+                      <div class="task-id">任务编号：T20260311001</div>
+                      <div class="task-info">
+                        <span>巡检区域：全部区域</span>
+                        <span>下达时间：2026-03-11 09:00</span>
+                        <span>预计完成：2026-03-11 10:30</span>
+                        <span>进度：80%（已完成5个点位）</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+      <!-- 中间空间 -->
+      <div class="center-space">
+        <div class="poi-container">
+          <div class="poi-item" style="left: 512px; top: 704px;">
+            <div class="poi-label">巡检机器人</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
+        </div>
+      </div>
+      
+      <!-- 右侧面板区域 -->
+      <div class="right-sidebar">
+        <!-- 右侧数据框容器 -->
+        <div class="right-container">
+          <!-- 右侧面板 1：预警成果 -->
+          <div class="data-card data-card-1">
+            <div class="panel-header">
+              <h3>预警成果</h3>
+            </div>
+            <div class="panel-content">
+              <!-- 预警报警信息 -->
+              <div class="warning-section">
+                <h4>预警报警信息</h4>
+                <div class="warning-list">
+                  <div class="warning-item urgent">
+                    <div class="warning-id">预警编号：W20260311001</div>
+                    <div class="warning-info">
+                      <span>类型：流量异常</span>
+                      <span>位置：1号监测断面</span>
+                      <span>时间：2026-03-11 08:30</span>
+                      <span>等级：紧急</span>
+                    </div>
+                    <div class="warning-status">未处置</div>
+                  </div>
+                  <div class="warning-item normal">
+                    <div class="warning-id">预警编号：W20260311002</div>
+                    <div class="warning-info">
+                      <span>类型：传感器异常</span>
+                      <span>位置：测验设备区</span>
+                      <span>时间：2026-03-11 07:15</span>
+                      <span>等级：一般</span>
+                    </div>
+                    <div class="warning-status">已处置</div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 成果展示 -->
+              <div class="result-section" style="margin-top: 20px;">
+                <h4>成果展示</h4>
+                
+                <!-- 异常成果 -->
+                <div class="result-group">
+                  <h5>异常成果</h5>
+                  <div class="abnormal-list">
+                    <div class="abnormal-item">
+                      <div class="abnormal-id">异常编号：A20260311001</div>
+                      <div class="abnormal-info">
+                        <span>类型：流速传感器数据漂移</span>
+                        <span>位置：1号监测断面</span>
+                        <span>时间：2026-03-11 06:45</span>
+                      </div>
+                      <div class="abnormal-image">
+                        <img src="/src/assets/images/Heilin/图5.jpeg" alt="异常现场" class="abnormal-img" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                <!-- 数据成果 -->
+                <div class="result-group" style="margin-top: 15px;">
+                  <h5>数据成果</h5>
+                  <div class="data-result">
+                    <div class="data-item">
+                      <span class="data-label">实时瞬时流量：</span>
+                      <span class="data-value">0.28 m³/s</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">当日平均流量：</span>
+                      <span class="data-value">0.25 m³/s</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">巡检周期流量汇总：</span>
+                      <span class="data-value">6.0 m³</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">水位：</span>
+                      <span class="data-value">32.15 m</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">pH值：</span>
+                      <span class="data-value normal">7.2（正常）</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">浊度：</span>
+                      <span class="data-value normal">15 NTU（正常）</span>
+                    </div>
+                    <div class="data-item">
+                      <span class="data-label">溶解氧：</span>
+                      <span class="data-value normal">8.5 mg/L（正常）</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 右侧面板 2：历史任务 -->
+          <div class="data-card data-card-2">
+            <div class="panel-header">
+              <h3>历史任务</h3>
+            </div>
+            <div class="panel-content">
+              <div class="history-list">
+                <div class="history-item">
+                  <div class="history-id">任务编号：T20260310001</div>
+                  <div class="history-info">
+                    <span>巡检区域：全部区域</span>
+                    <span>执行时间：2026-03-10 14:00</span>
+                    <span>完成状态：已完成</span>
+                    <span>核心成果：无异常</span>
+                  </div>
+                  <button class="history-btn">查看详情</button>
+                </div>
+                <div class="history-item">
+                  <div class="history-id">任务编号：T20260310002</div>
+                  <div class="history-info">
+                    <span>巡检区域：测验设备区</span>
+                    <span>执行时间：2026-03-10 09:30</span>
+                    <span>完成状态：已完成</span>
+                    <span>核心成果：发现传感器异常</span>
+                  </div>
+                  <button class="history-btn">查看详情</button>
+                </div>
+                <div class="history-item">
+                  <div class="history-id">任务编号：T20260309001</div>
+                  <div class="history-info">
+                    <span>巡检区域：1号监测断面</span>
+                    <span>执行时间：2026-03-09 16:00</span>
+                    <span>完成状态：已完成</span>
+                    <span>核心成果：无异常</span>
+                  </div>
+                  <button class="history-btn">查看详情</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 渐变装饰层（四周暗角） -->
+    <GradientOverlay />
+    
+    <!-- 详情弹窗 -->
+    <div v-if="showDetailModal" class="modal-overlay" @click="closeModal">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h2>智能巡检详细信息</h2>
+          <span class="close-btn" @click="closeModal">×</span>
+        </div>
+        <div class="modal-body">
+          <!-- 基本信息区域 -->
+          <div class="station-info-header">
+            <div class="station-basic">
+              <h3 class="station-name">智能巡检系统</h3>
+              <p class="station-code">系统代码：ZNXJ-2026</p>
+              <p class="station-basin">所在区域：黑林小流域</p>
+            </div>
+            <div class="station-qr">
+              <img src="/src/assets/images/Heilin/测站二维码.png" alt="智能巡检二维码" />
+            </div>
+          </div>
+          
+          <!-- 系统介绍 -->
+          <div class="detail-section">
+            <h4>系统介绍</h4>
+            <p>智能巡检系统是基于AI技术的水文站巡检机器人管理平台，通过搭载多种传感器的巡检机器人，实现对水文站设备、环境的实时监测和巡检任务的智能调度。系统集成了设备状态监测、巡检任务管理、预警报警、历史数据查询等功能，为水文站的运维管理提供全方位支持。</p>
+          </div>
+          
+          <!-- 技术参数 -->
+          <div class="detail-section">
+            <h4>技术参数</h4>
+            <div class="data-grid">
+              <div class="data-item">
+                <span class="data-label">机器人型号</span>
+                <span class="data-value">ZNXJ-001</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">续航时间</span>
+                <span class="data-value">8小时</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">最大速度</span>
+                <span class="data-value">3km/h</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">通信方式</span>
+                <span class="data-value">5G</span>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 设备配置 -->
+          <div class="detail-section">
+            <h4>设备配置</h4>
+            <div class="extreme-data">
+              <div class="data-row">
+                <span class="data-label">摄像头：</span>
+                <span class="data-text">4K高清摄像头，支持夜视功能</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">流速传感器：</span>
+                <span class="data-text">多普勒流速仪，精度±0.01m/s</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">水质传感器：</span>
+                <span class="data-text">多参数水质分析仪，可测pH、浊度、溶解氧等</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">温湿度仪：</span>
+                <span class="data-text">高精度温湿度传感器，精度±0.5℃</span>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 补充信息 -->
+          <div class="detail-section">
+            <h4>补充信息</h4>
+            <div class="supplement-info">
+              <div class="data-row">
+                <span class="data-label">制造商：</span>
+                <span class="data-text">南自所</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">安装时间：</span>
+                <span class="data-text">2026年1月</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">维护周期：</span>
+                <span class="data-text">每季度一次</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import GradientOverlay from '../components/gradient-overlay.vue'
+
+const router = useRouter()
+const showDetailModal = ref(false)
+
+// 巡检任务相关变量
+const selectedRoute = ref('route1')
+const taskArea = ref('all')
+const taskFrequency = ref('once')
+const taskItems = ref({
+  camera: true,
+  flow: true,
+  water: true
+})
+
+const goBack = () => {
+  router.push('/')
+}
+
+const goToSimulation = () => {
+  router.push('/simulation')
+}
+
+const goToWaterCulture = () => {
+  router.push('/water-culture')
+}
+
+const goToHeilinStation = () => {
+  router.push('/heilin-station')
+}
+
+const closeModal = () => {
+  showDetailModal.value = false
+}
+
+const issueTask = () => {
+  // 这里可以添加任务下达的逻辑
+  console.log('下达任务:', {
+    area: taskArea.value,
+    frequency: taskFrequency.value,
+    items: taskItems.value
+  })
+  // 模拟任务下达成功
+  alert('任务下达成功！')
+}
+
+onMounted(() => {
+  // 页面加载时的初始化逻辑
+  console.log('智能巡检页面加载完成')
+})
+</script>
+
+<style scoped>
+/* 智能巡检页面样式 */
+.dashboard {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.bottom-bg {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/src/assets/images/Heilin/WPS图片(1).jpeg');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.station-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/src/assets/images/Heilin/水文站图.jpeg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.top-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/src/assets/images/顶部大标题.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 4;
+}
+
+.system-title {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 36px;
+  font-weight: bold;
+  background: linear-gradient(to bottom, #ffffff 50%, #00d5ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 0 1px rgba(2, 217, 255, 0.205);
+  z-index: 4;
+  pointer-events: none;
+}
+
+/* 顶部按钮样式 */
+.sub-title {
+  position: absolute;
+  top: 30px;
+  width: 151px;
+  height: 63px;
+  background-image: url('/src/assets/images/顶部小标题.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 10px;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+  z-index: 4;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.sub-title:hover {
+  transform: scale(1.05);
+}
+
+.sub-title.left-1 {
+  left: 180px;
+}
+
+.sub-title.left-2 {
+  left: 400px;
+}
+
+.sub-title.right-2 {
+  right: 400px;
+}
+
+.sub-title.right-3 {
+  right: 200px;
+}
+
+/* 主要内容区域 */
+.main-content {
+  position: relative;
+  display: flex;
+  height: calc(100% - 130px);
+  padding: 130px 20px 20px;
+  gap: 20px;
+  overflow: hidden;
+  z-index: 3;
+}
+
+/* 左侧面板 */
+.left-sidebar {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧面板 */
+.right-sidebar {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.right-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  height: 100%;
+}
+
+/* 数据卡片样式 */
+.data-card {
+  width: 100%;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.9));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
+  position: relative;
+}
+
+.data-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #00d5ff, transparent);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
+}
+
+.panel-header {
+  height: 45px;
+  background: linear-gradient(135deg, rgba(0, 60, 120, 0.3), rgba(0, 30, 60, 0.3));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #00d5ff;
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-header h3::before {
+  content: '▶';
+  font-size: 12px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.panel-content {
+  font-size: 14px;
+  line-height: 1.4;
+  width: 100%;
+  color: #ffffff;
+  padding: 15px;
+}
+
+.station-intro {
+  min-height: 500px;
+}
+
+.station-intro .panel-content {
+  padding: 15px;
+}
+
+.video-monitor {
+  min-height: 350px;
+}
+
+/* 设备状态区域 */
+.device-status-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 一行卡片展示 */
+.status-cards-row {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.status-card {
+  flex: 1;
+  background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
+  border: 1px solid rgba(0, 213, 255, 0.4);
+  border-radius: 6px;
+  padding: 12px 8px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.status-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #00d5ff, transparent);
+}
+
+.status-card:hover {
+  border-color: rgba(0, 213, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 213, 255, 0.4);
+  transform: translateY(-2px);
+}
+
+.status-card-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+}
+
+.status-card-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #00ff88;
+  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+}
+
+/* 机器人状态容器 */
+.robot-status-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.robot-bg {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.robot-image {
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+  opacity: 0.9;
+  z-index: 1;
+  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
+}
+
+/* 运行参数卡片 */
+.params-cards-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.param-card {
+  flex: 1;
+  background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
+  border: 1px solid rgba(0, 213, 255, 0.4);
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.param-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #00d5ff, transparent);
+}
+
+.param-card:hover {
+  border-color: rgba(0, 213, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 213, 255, 0.4);
+  transform: translateY(-2px);
+}
+
+.param-label {
+  font-size: 12px;
+  color: #00d5ff;
+  margin-bottom: 6px;
+  text-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+}
+
+.param-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #00ff88;
+  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+}
+
+.param-value.normal {
+  color: #00ff88;
+}
+
+.param-value.abnormal {
+  color: #ff4444;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.status-group h4 {
+  color: #00d5ff;
+  font-size: 16px;
+  margin: 0 0 10px 0;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+}
+
+.status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 8px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border-left: 3px solid #00d5ff;
+}
+
+.status-label {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.status-value {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.status-value.normal {
+  color: #00ff88;
+}
+
+.status-value.abnormal {
+  color: #ff4444;
+}
+
+/* 巡检任务区域 */
+.task-section h4 {
+  color: #00d5ff;
+  font-size: 14px;
+  margin: 0 0 12px 0;
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-section h4::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.route-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.route-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.route-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.route-value {
+  color: #00ff88;
+  font-size: 14px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.route-select {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
+  color: #ffffff;
+  border: 1px solid rgba(0, 212, 255, 0.4);
+  border-radius: 6px;
+  padding: 10px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.route-select:hover {
+  border-color: rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.route-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.progress-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.progress-bar {
+  width: 100%;
+  height: 10px;
+  background: rgba(0, 10, 20, 0.6);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00d5ff, #00ff88);
+  border-radius: 6px;
+  transition: width 0.5s ease;
+  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+}
+
+.progress-text {
+  color: #00ff88;
+  font-size: 12px;
+  text-align: right;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+/* 任务下达区域 */
+.task-input {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.task-input-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.task-input-item label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.task-select {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
+  color: #ffffff;
+  border: 1px solid rgba(0, 212, 255, 0.4);
+  border-radius: 6px;
+  padding: 10px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.task-select:hover {
+  border-color: rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.checkbox-group {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.checkbox-group label {
+  color: #ffffff;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.checkbox-group label:hover {
+  color: #00d5ff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+}
+
+.checkbox-group input[type="checkbox"] {
+  accent-color: #00d5ff;
+}
+
+.task-btn {
+  background: linear-gradient(90deg, #00d5ff, #0066cc);
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  padding: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.task-btn:hover {
+  background: linear-gradient(90deg, #0066cc, #00d5ff);
+  transform: translateY(-2px);
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
+}
+
+/* 任务列表 */
+.task-list h5 {
+  color: #00d5ff;
+  font-size: 13px;
+  margin: 0 0 12px 0;
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-list h5::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.task-list-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 3px solid #00d5ff;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.task-list-item:hover {
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.task-id {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.task-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.task-info span {
+  color: #ffffff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-info span::before {
+  content: '▸';
+  font-size: 10px;
+  color: #00d5ff;
+}
+
+/* 预警成果区域 */
+.warning-section h4 {
+  color: #00d5ff;
+  font-size: 14px;
+  margin: 0 0 12px 0;
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.warning-section h4::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.warning-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.warning-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 3px solid #00d5ff;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.warning-item:hover {
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.warning-item.urgent {
+  border-left: 3px solid #ff4444;
+  background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
+  border: 1px solid rgba(255, 68, 68, 0.3);
+}
+
+.warning-item.urgent:hover {
+  border-color: rgba(255, 68, 68, 0.6);
+  box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
+}
+
+.warning-id {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.warning-item.urgent .warning-id {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+.warning-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 8px;
+}
+
+.warning-info span {
+  color: #ffffff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.warning-info span::before {
+  content: '▸';
+  font-size: 10px;
+  color: #00d5ff;
+}
+
+.warning-item.urgent .warning-info span::before {
+  color: #ff4444;
+}
+
+.warning-status {
+  color: #00ff88;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: right;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.warning-item.urgent .warning-status {
+  color: #ff4444;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+/* 成果展示区域 */
+.result-section h4 {
+  color: #00d5ff;
+  font-size: 14px;
+  margin: 0 0 12px 0;
+  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-section h4::before {
+  content: '●';
+  font-size: 10px;
+  color: #00d5ff;
+  animation: pulse 2s infinite;
+}
+
+.result-group h5 {
+  color: #00ff88;
+  font-size: 13px;
+  margin: 0 0 12px 0;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-group h5::before {
+  content: '▸';
+  font-size: 10px;
+  color: #00ff88;
+}
+
+.abnormal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.abnormal-item {
+  background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 3px solid #ff4444;
+  border: 1px solid rgba(255, 68, 68, 0.3);
+  transition: all 0.3s ease;
+}
+
+.abnormal-item:hover {
+  border-color: rgba(255, 68, 68, 0.6);
+  box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
+}
+
+.abnormal-id {
+  color: #ff4444;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
+}
+
+.abnormal-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 8px;
+}
+
+.abnormal-info span {
+  color: #ffffff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.abnormal-info span::before {
+  content: '▸';
+  font-size: 10px;
+  color: #ff4444;
+}
+
+.abnormal-image {
+  margin-top: 10px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 68, 68, 0.3);
+}
+
+.abnormal-img {
+  width: 100%;
+  height: 80px;
+  object-fit: cover;
+  transition: all 0.3s ease;
+}
+
+.abnormal-img:hover {
+  transform: scale(1.02);
+  filter: brightness(1.1);
+}
+
+/* 数据成果 */
+.data-result {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.data-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border-radius: 6px;
+  border-left: 3px solid #00d5ff;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.data-item:hover {
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.data-label {
+  color: #00d5ff;
+  font-size: 13px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.data-value {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.data-value.normal {
+  color: #00ff88;
+}
+
+.data-value.abnormal {
+  color: #ff4444;
+}
+
+/* 历史任务区域 */
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.history-item {
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 3px solid #00d5ff;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: all 0.3s ease;
+}
+
+.history-item:hover {
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+}
+
+.history-id {
+  color: #00ff88;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.history-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.history-info span {
+  color: #ffffff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.history-info span::before {
+  content: '▸';
+  font-size: 10px;
+  color: #00d5ff;
+}
+
+.history-btn {
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 66, 122, 0.2));
+  color: #ffffff;
+  border: 1px solid rgba(0, 212, 255, 0.4);
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  align-self: flex-end;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.history-btn:hover {
+  background: linear-gradient(90deg, rgba(0, 212, 255, 0.4), rgba(0, 66, 122, 0.4));
+  border-color: rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+  transform: translateY(-1px);
+}
+
+/* 中间空间 */
+.center-space {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.poi-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: translate(-320px, -125px);
+}
+
+.poi-item {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.poi-icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  animation: pulse 2s infinite;
+  cursor: pointer;
+}
+
+.poi-label {
+  background: rgba(0, 60, 120, 0.9);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  border: 1px solid rgba(0, 213, 255, 0.5);
+  box-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.5));
+  }
+  50% {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 10px rgba(0, 213, 255, 0.8));
+  }
+  100% {
+    transform: scale(1);
+    filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.5));
+  }
+}
+
+/* 详情弹窗 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: rgba(0, 10, 20, 0.95);
+  border: 1px solid rgba(0, 212, 255, 0.5);
+  border-radius: 12px;
+  width: 800px;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+  background: linear-gradient(to right, rgba(0, 212, 255, 0.1), rgba(0, 66, 122, 0.1));
+}
+
+.modal-header h2 {
+  color: #00d5ff;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
+}
+
+.close-btn {
+  color: #ffffff;
+  font-size: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 0 10px;
+}
+
+.close-btn:hover {
+  color: #00d5ff;
+  transform: rotate(90deg);
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+/* 详情弹窗内容 */
+.station-info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.station-basic {
+  flex: 1;
+}
+
+.station-name {
+  color: #00d5ff;
+  font-size: 24px;
+  margin: 0 0 10px 0;
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
+}
+
+.station-code,
+.station-basin {
+  color: #ffffff;
+  font-size: 16px;
+  margin: 5px 0;
+}
+
+.station-qr img {
+  width: 100px;
+  height: 100px;
+  border: 2px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.detail-section {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.detail-section h4 {
+  color: #00d5ff;
+  font-size: 18px;
+  margin: 0 0 15px 0;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+}
+
+.detail-section p {
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.data-grid .data-item {
+  background: rgba(0, 20, 40, 0.5);
+  padding: 10px;
+  border-radius: 6px;
+  border-left: 3px solid #00d5ff;
+}
+
+.data-grid .data-label {
+  color: #ffffff;
+  font-size: 14px;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.data-grid .data-value {
+  color: #00ff88;
+  font-size: 16px;
+  font-weight: bold;
+  display: block;
+}
+
+.extreme-data {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 6px;
+  border-left: 3px solid #00d5ff;
+}
+
+.data-row .data-label {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.data-row .data-text {
+  color: #00ff88;
+  font-size: 14px;
+}
+
+.supplement-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1600px) {
+  .left-sidebar {
+    width: 300px;
+  }
+  
+  .right-sidebar {
+    width: 350px;
+  }
+}
+
+@media (max-width: 1400px) {
+  .left-sidebar {
+    width: 250px;
+  }
+  
+  .right-sidebar {
+    width: 300px;
+  }
+  
+  .sub-title.left-1 {
+    left: 100px;
+  }
+  
+  .sub-title.left-2 {
+    left: 300px;
+  }
+  
+  .sub-title.right-2 {
+    right: 300px;
+  }
+  
+  .sub-title.right-3 {
+    right: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    flex-direction: column;
+  }
+  
+  .left-sidebar,
+  .center-space,
+  .right-sidebar {
+    flex: 1;
+  }
+  
+  .center-space {
+    height: 50px;
+  }
+  
+  .data-card {
+    max-height: none;
+  }
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 10, 20, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 255, 0.8);
+}
+
+.more-btn {
+  font-size: 12px;
+  color: #62f6fb;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: 4px 8px;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  border-radius: 4px;
+}
+
+.more-btn:hover {
+  color: #00ffff;
+  border-color: rgba(0, 213, 255, 0.8);
+  box-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+}
+
+.left-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.right-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.data-card-1 {
+  min-height: 380px;
+}
+
+.data-card-2 {
+  min-height: 290px;
+}
+</style>