综合业务修改

src/views/map/index.vue

@@ -6,7 +6,50 @@
       <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
     </div>
     <div class="business-bg" v-show="state.activeIndex === '3'">
-      <img src="@/assets/images/圩区.png" alt="圩区" />
+      <!-- 圩区总览 -->
+      <template v-if="!state.selectedPolderDetail">
+        <img src="@/assets/images/圩区.png" alt="圩区" />
+        <div class="business-marker-btn zhangxi" @mouseenter="showPolderInfo('zhangxi')" @mouseleave="hidePolderInfo">
+          <div class="polder-popup" v-if="state.hoverPolder === 'zhangxi'">
+            <div class="polder-popup-title">张西联圩</div>
+            <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.71m</span></div>
+            <div class="polder-popup-item"><span class="label">圩外水位：</span><span class="value">3.10m</span></div>
+            <div class="polder-popup-item"><span class="label">开闸流量：</span><span class="value">0.5 m³/s</span></div>
+            <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">12.8 m³/s</span></div>
+          </div>
+        </div>
+        <div class="business-marker-btn konggang" @click="selectPolderDetail('konggang')" @mouseenter="showPolderInfo('konggang')" @mouseleave="hidePolderInfo">
+          <div class="polder-popup polder-popup-left" v-if="state.hoverPolder === 'konggang'">
+            <div class="polder-popup-title">孔港联圩</div>
+            <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.71m</span></div>
+            <div class="polder-popup-item"><span class="label">圩外水位：</span><span class="value">3.10m</span></div>
+            <div class="polder-popup-item"><span class="label">开闸流量：</span><span class="value">0.3 m³/s</span></div>
+            <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">8.5 m³/s</span></div>
+          </div>
+        </div>
+      </template>
+      <!-- 孔港联圩详情 -->
+      <template v-if="state.selectedPolderDetail === 'konggang'">
+        <img src="@/assets/images/孔港联圩.png" alt="孔港联圩" />
+        <div class="polder-back-btn" @click="backToPolderOverview">
+          <span>返回</span>
+        </div>
+        <!-- 侧边开关控制 -->
+        <div class="polder-layer-controls">
+          <div class="toggle-item">
+            <span class="toggle-text">闸门</span>
+            <div class="toggle-switch" :class="{ active: state.showGate }" @click="state.showGate = !state.showGate">
+              <div class="toggle-knob"></div>
+            </div>
+          </div>
+          <div class="toggle-item">
+            <span class="toggle-text">水文站</span>
+            <div class="toggle-switch" :class="{ active: state.showHydrology }" @click="state.showHydrology = !state.showHydrology">
+              <div class="toggle-knob"></div>
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
     <div class="history-bg" v-show="state.activeIndex === '4'">
       <video v-if="!state.showHistoryImage" ref="historyVideoRef" class="history-bg-video" loop autoplay muted>
@@ -211,6 +254,38 @@ const state = reactive({
   activeIndex: "1",
   // 是否显示视频播放器
   showVideoPlayer: false,
+  // 当前悬停的圩区
+  hoverPolder: null,
+  // 当前选中的圩区详情页(null表示显示圩区总览)
+  selectedPolderDetail: null,
+  // 图层开关状态
+  showGate: true,
+  showHydrology: true,
+  // 当前圩区数据
+  currentPolder: {
+    name: '张西联圩',
+    innerWaterLevel: '2.66m',
+    outerWaterLevel: '2.70m',
+    gateFlow: '0.5 m³/s',
+    pumpFlow: '12.8 m³/s'
+  },
+  // 圩区数据字典
+  polderData: {
+    zhangxi: {
+      name: '张西联圩',
+      innerWaterLevel: '2.66m',
+      outerWaterLevel: '2.70m',
+      gateFlow: '0.5 m³/s',
+      pumpFlow: '12.8 m³/s'
+    },
+    konggang: {
+      name: '孔港联圩',
+      innerWaterLevel: '2.58m',
+      outerWaterLevel: '2.65m',
+      gateFlow: '0.3 m³/s',
+      pumpFlow: '8.5 m³/s'
+    }
+  },
   // 历史沿革视频源
   historyVideoSrc: new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href,
   // 历史沿革图片源
@@ -322,6 +397,23 @@ function closeVideoPlayer() {
     videoPlayer.pause()
   }
 }
+
+function showPolderInfo(polderKey) {
+  state.hoverPolder = polderKey
+}
+
+function hidePolderInfo() {
+  state.hoverPolder = null
+}
+
+function selectPolderDetail(polderKey) {
+  state.selectedPolderDetail = polderKey
+}
+
+function backToPolderOverview() {
+  state.selectedPolderDetail = null
+}
+
 // 初始化加载资源
 function initAssets(onLoadCallback) {
   assets.value = new Assets()
@@ -377,6 +469,8 @@ function handleMenuSelect(index) {
   if (index === "3") {
     // 在水文测站页面显示图标
     emitter.$emit("toggleWaterStations", true)
+    // 重置圩区详情页面，返回总览
+    state.selectedPolderDetail = null
   } else {
     // 其他页面隐藏图标
     emitter.$emit("toggleWaterStations", false)
@@ -392,8 +486,7 @@ function handleMenuSelect(index) {
     } else if (index === "2") {
       gsap.to(".water-resource-content .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     } else if (index === "3") {
-      gsap.to(".water-station-content .station-card", { x: 0, opacity: 1, duration: 0.5 })
-      gsap.to(".water-station-content .bottom-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
+      gsap.to(".water-station-content .stats-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     } else if (index === "4") {
       gsap.to(".history-content .event-card", { x: 0, opacity: 1, duration: 0.5 })
       gsap.to(".history-content .timeline-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
@@ -674,6 +767,160 @@ function handleMapPlayComplete() {
   }
 }
 
+.business-bg {
+  .business-marker-btn {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    background: transparent;
+    border: 3px solid #ff0000;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 10;
+    
+    &:hover {
+      box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
+    }
+    
+    &.zhangxi {
+      left: 40%;
+      top: 60%;
+      transform: translate(-50%, -50%);
+    }
+     
+    &.konggang {
+      left: 70%;
+      top: 45%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  
+  .polder-popup {
+      position: absolute;
+      left: 170px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 200px;
+      background: rgba(0, 20, 40, 0.95);
+      border: 2px solid #30dcff;
+      border-radius: 8px;
+      padding: 15px;
+      z-index: 100;
+      
+      .polder-popup-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #30dcff;
+        margin-bottom: 10px;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+      }
+      
+      .polder-popup-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 0;
+        font-size: 13px;
+        
+        .label {
+          color: #a3dcde;
+        }
+        
+        .value {
+          color: #30dcff;
+          font-weight: bold;
+        }
+      }
+      
+      &.polder-popup-left {
+        left: auto;
+        right: 170px;
+      }
+    }
+    
+    .polder-back-btn {
+      position: absolute;
+      left: 50px;
+      top: 100px;
+      padding: 10px 25px;
+      background: rgba(0, 20, 40, 0.85);
+      border: 2px solid #30dcff;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      z-index: 100;
+      
+      span {
+        color: #30dcff;
+        font-size: 16px;
+        font-weight: bold;
+      }
+      
+      &:hover {
+        background: rgba(48, 220, 255, 0.2);
+        box-shadow: 0 0 15px rgba(48, 220, 255, 0.5);
+      }
+    }
+    
+    .polder-layer-controls {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      z-index: 1000;
+      
+      .toggle-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+        background: rgba(0, 20, 40, 0.8);
+        border-radius: 6px;
+        
+        .toggle-text {
+          color: #fff;
+          font-size: 14px;
+          text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+        }
+        
+        .toggle-switch {
+          width: 44px;
+          height: 22px;
+          background: rgba(100, 100, 100, 0.5);
+          border-radius: 11px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          position: relative;
+          
+          .toggle-knob {
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            width: 18px;
+            height: 18px;
+            background: #a3dcde;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+          }
+          
+          &.active {
+            background: rgba(48, 220, 255, 0.4);
+            box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
+            
+            .toggle-knob {
+              left: 24px;
+              background: #30dcff;
+              box-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
+            }
+          }
+        }
+      }
+    }
+  }
+
 .left-column {
   position: absolute;
   z-index: 4;

src/views/waterStation/index.vue

@@ -1,268 +1,39 @@
 <template>
   <div class="water-station-content">
-    <!-- 测站信息面板 - 右侧 -->
-    <div class="right-panel">
-      <div class="station-card">
-        <div class="card-header">
-          <div class="header-icon">📍</div>
-          <div class="header-title">水文测站</div>
-        </div>
-        <div class="station-list">
-          <div 
-            v-for="(station, index) in stations" 
-            :key="index" 
-            class="station-item"
-            :class="{ active: selectedIndex === index }"
-            @click="selectStation(index)"
-          >
-            <div class="station-name">{{ station.name }}</div>
-            <div class="station-type">{{ station.type }}</div>
-          </div>
-        </div>
-        <div class="station-detail">
-          <div class="detail-header">
-            <div class="detail-name">{{ currentStation.name }}</div>
-            <div class="detail-type">{{ currentStation.type }}</div>
-          </div>
-          <div class="detail-info">
-            <div class="info-item">
-              <span class="label">站点编号</span>
-              <span class="value">{{ currentStation.code }}</span>
+    <!-- 左侧统计面板 -->
+    <div class="left-panel">
+      <div class="left-panel-3d">
+        <div class="stats-card">
+          <div class="stats-title">圩区统计</div>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-value">18</div>
+              <div class="stat-label">骨干河道</div>
             </div>
-            <div class="info-item">
-              <span class="label">所在河流</span>
-              <span class="value">{{ currentStation.river }}</span>
+            <div class="stat-item">
+              <div class="stat-value">94</div>
+              <div class="stat-label">圩区总数</div>
             </div>
-            <div class="info-item">
-              <span class="label">建站时间</span>
-              <span class="value">{{ currentStation.establishDate }}</span>
+            <div class="stat-item">
+              <div class="stat-value">618</div>
+              <div class="stat-label">防洪闸</div>
             </div>
-            <div class="info-item">
-              <span class="label">监测要素</span>
-              <span class="value">{{ currentStation.elements }}</span>
+            <div class="stat-item">
+              <div class="stat-value">560</div>
+              <div class="stat-label">排涝站</div>
             </div>
-          </div>
-          <div class="detail-data">
-            <div class="data-title">实时数据</div>
-            <div class="data-grid">
-              <div class="data-item">
-                <div class="data-value">{{ currentStation.waterLevel }}</div>
-                <div class="data-unit">m</div>
-                <div class="data-label">水位</div>
-              </div>
-              <div class="data-item">
-                <div class="data-value">{{ currentStation.flow }}</div>
-                <div class="data-unit">m³/s</div>
-                <div class="data-label">流量</div>
-              </div>
-              <div class="data-item">
-                <div class="data-value">{{ currentStation.rainfall }}</div>
-                <div class="data-unit">mm</div>
-                <div class="data-label">降雨量</div>
-              </div>
-              <div class="data-item">
-                <div class="data-value">{{ currentStation.quality }}</div>
-                <div class="data-unit">类</div>
-                <div class="data-label">水质等级</div>
-              </div>
+            <div class="stat-item">
+              <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
+              <div class="stat-label">排涝流量</div>
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <!-- 底部测站统计 -->
-    <div class="bottom-panel">
-      <div class="bottom-container">
-        <div class="stat-item">
-          <div class="stat-value">18</div>
-          <div class="stat-label">骨干河道</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-value">94</div>
-          <div class="stat-label">圩区总数</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-value">618</div>
-          <div class="stat-label">防洪闸</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-value">560</div>
-          <div class="stat-label">排涝站</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
-          <div class="stat-label">排涝流量</div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue"
-import emitter from "@/utils/emitter"
-
-const stations = ref([
-  {
-    name: "昆山水文站",
-    type: "国家基本站",
-    code: "30101200",
-    river: "吴淞江",
-    establishDate: "1954-01",
-    elements: "水位、流量、水质",
-    waterLevel: "2.85",
-    flow: "128.5",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "玉山站",
-    type: "省级重点站",
-    code: "30101201",
-    river: "娄江",
-    establishDate: "1978-06",
-    elements: "水位、流量",
-    waterLevel: "2.72",
-    flow: "92.3",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "花桥站",
-    type: "省级重点站",
-    code: "30101202",
-    river: "吴淞江",
-    establishDate: "1985-03",
-    elements: "水位、流量、水质",
-    waterLevel: "2.68",
-    flow: "105.6",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "周市站",
-    type: "省级重点站",
-    code: "30101203",
-    river: "杨林塘",
-    establishDate: "1982-07",
-    elements: "水位、流量",
-    waterLevel: "2.75",
-    flow: "88.4",
-    rainfall: "12.5",
-    quality: "III"
-  },
-  {
-    name: "陆家站",
-    type: "一般站",
-    code: "30101204",
-    river: "吴淞江",
-    establishDate: "1990-05",
-    elements: "水位、水质",
-    waterLevel: "2.66",
-    flow: "--",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "张浦站",
-    type: "一般站",
-    code: "30101205",
-    river: "淀山湖",
-    establishDate: "1988-09",
-    elements: "水位、水质",
-    waterLevel: "2.78",
-    flow: "--",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "周庄站",
-    type: "旅游监测站",
-    code: "30101206",
-    river: "急水港",
-    establishDate: "1995-04",
-    elements: "水位、流量、水质",
-    waterLevel: "2.82",
-    flow: "45.2",
-    rainfall: "12.5",
-    quality: "I"
-  },
-  {
-    name: "巴城站",
-    type: "一般站",
-    code: "30101207",
-    river: "阳澄湖",
-    establishDate: "1986-08",
-    elements: "水位、水质",
-    waterLevel: "2.74",
-    flow: "--",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "淀山湖站",
-    type: "湖泊站",
-    code: "30101208",
-    river: "淀山湖",
-    establishDate: "1965-04",
-    elements: "水位、水质",
-    waterLevel: "2.76",
-    flow: "--",
-    rainfall: "12.5",
-    quality: "III"
-  },
-  {
-    name: "千灯站",
-    type: "一般站",
-    code: "30101209",
-    river: "千灯浦",
-    establishDate: "1992-06",
-    elements: "水位、流量",
-    waterLevel: "2.71",
-    flow: "68.5",
-    rainfall: "12.5",
-    quality: "II"
-  },
-  {
-    name: "锦溪站",
-    type: "旅游监测站",
-    code: "30101210",
-    river: "五保湖",
-    establishDate: "1998-03",
-    elements: "水位、水质",
-    waterLevel: "2.79",
-    flow: "--",
-    rainfall: "12.5",
-    quality: "I"
-  }
-])
-
-const selectedIndex = ref(0)
-
-const currentStation = computed(() => stations.value[selectedIndex.value])
-
-function selectStation(index) {
-  selectedIndex.value = index
-}
-
-// 监听地图上图标点击事件
-onMounted(() => {
-  emitter.$on("waterStationClick", handleWaterStationClick)
-})
-
-onBeforeUnmount(() => {
-  emitter.$off("waterStationClick", handleWaterStationClick)
-})
-
-function handleWaterStationClick(data) {
-  console.log("收到水文站点击事件:", data)
-  // 根据点击的水文站代码找到对应的索引
-  const index = stations.value.findIndex(station => station.code === data.code)
-  if (index !== -1) {
-    selectedIndex.value = index
-  }
-}
 </script>
 
 <style lang="scss">
@@ -274,246 +45,75 @@ function handleWaterStationClick(data) {
   bottom: 0;
   z-index: 2;
   pointer-events: none;
-
-  .map {
-    z-index: 1;
-  }
 }
 
-.right-panel {
+.left-panel {
   position: absolute;
   z-index: 4;
-  width: 380px;
-  right: 32px;
-  top: 120px;
-  bottom: 120px;
-  perspective: 800px;
+  width: 398px;
+  left: 32px;
+  top: 180px;
+  bottom: 50px;
+  perspective: 500px;
   perspective-origin: 50% 50%;
 }
 
-.station-card {
+.left-panel-3d {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 20, 40, 0.85);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  z-index: 4;
+}
+
+.stats-card {
+  height: 450px;
+  background: rgba(0, 20, 40, 0.8);
   border: 1px solid rgba(48, 220, 255, 0.3);
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
-  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+  padding: 20px;
   pointer-events: auto;
-  transform: translateX(150%);
+  transform: translateX(-150%);
   opacity: 0;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(48, 220, 255, 0.2);
-  .header-icon {
-    font-size: 24px;
-  }
-  .header-title {
-    font-size: 18px;
+  
+  .stats-title {
+    font-size: 20px;
     font-weight: bold;
     color: #30dcff;
-    letter-spacing: 2px;
+    text-align: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+    letter-spacing: 4px;
   }
-}
-
-.station-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-height: 200px;
-  overflow-y: auto;
   
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(48, 220, 255, 0.3);
-    border-radius: 2px;
+  .stats-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
   }
   
-  .station-item {
+  .stat-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 12px;
-    background: rgba(48, 220, 255, 0.1);
-    border: 1px solid rgba(48, 220, 255, 0.2);
-    border-radius: 6px;
-    cursor: pointer;
+    padding: 15px 20px;
+    background: rgba(48, 220, 255, 0.05);
+    border: 1px solid rgba(48, 220, 255, 0.15);
+    border-radius: 8px;
     transition: all 0.3s ease;
-    pointer-events: auto;
     
     &:hover {
-      background: rgba(48, 220, 255, 0.2);
-      border-color: rgba(48, 220, 255, 0.4);
-    }
-    
-    &.active {
-      background: rgba(48, 220, 255, 0.3);
-      border-color: rgba(48, 220, 255, 0.6);
-      box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
-    }
-    
-    .station-name {
-      font-size: 14px;
-      color: #c4f3fe;
-      font-weight: bold;
-    }
-    
-    .station-type {
-      font-size: 12px;
-      color: #00bfff;
-    }
-  }
-}
-
-.station-detail {
-  flex: 1;
-  background: rgba(0, 180, 255, 0.05);
-  border-radius: 8px;
-  padding: 15px;
-  border: 1px solid rgba(48, 220, 255, 0.1);
-  overflow-y: auto;
-  
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(48, 220, 255, 0.3);
-    border-radius: 2px;
-  }
-  
-  .detail-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(48, 220, 255, 0.2);
-    
-    .detail-name {
-      font-size: 18px;
-      font-weight: bold;
-      color: #30dcff;
-    }
-    
-    .detail-type {
-      font-size: 12px;
-      color: #43e97b;
-      padding: 4px 8px;
-      background: rgba(67, 233, 123, 0.1);
-      border-radius: 4px;
-    }
-  }
-  
-  .detail-info {
-    margin-bottom: 15px;
-    
-    .info-item {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      border-bottom: 1px solid rgba(48, 220, 255, 0.1);
-      
-      &:last-child {
-        border-bottom: none;
-      }
-      
-      .label {
-        font-size: 13px;
-        color: #a3dcde;
-      }
-      
-      .value {
-        font-size: 13px;
-        color: #c4f3fe;
-      }
-    }
-  }
-  
-  .detail-data {
-    padding-top: 15px;
-    border-top: 1px solid rgba(48, 220, 255, 0.2);
-    
-    .data-title {
-      font-size: 14px;
-      color: #30dcff;
-      margin-bottom: 12px;
-      font-weight: bold;
+      background: rgba(48, 220, 255, 0.1);
+      border-color: rgba(48, 220, 255, 0.3);
     }
     
-    .data-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      
-      .data-item {
-        background: rgba(48, 220, 255, 0.1);
-        border-radius: 6px;
-        padding: 12px;
-        text-align: center;
-        border: 1px solid rgba(48, 220, 255, 0.2);
-        
-        .data-value {
-          font-size: 24px;
-          font-weight: bold;
-          color: #30dcff;
-          line-height: 1;
-        }
-        
-        .data-unit {
-          font-size: 11px;
-          color: #a3dcde;
-          margin-top: 2px;
-        }
-        
-        .data-label {
-          font-size: 12px;
-          color: #c4f3fe;
-          margin-top: 6px;
-        }
-      }
-    }
-  }
-}
-
-.bottom-panel {
-  position: absolute;
-  left: 100px;
-  right: 430px;
-  bottom: 20px;
-  height: 70px;
-  z-index: 4;
-}
-
-.bottom-container {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-  background: rgba(0, 20, 40, 0.85);
-  border: 1px solid rgba(48, 220, 255, 0.3);
-  border-radius: 10px;
-  padding: 0 30px;
-  pointer-events: auto;
-  transform: translateY(100%);
-  opacity: 0;
-  
-  .stat-item {
-    text-align: center;
-    
     .stat-value {
       font-size: 28px;
       font-weight: bold;
@@ -528,9 +128,8 @@ function handleWaterStationClick(data) {
     }
     
     .stat-label {
-      font-size: 13px;
+      font-size: 15px;
       color: #a3dcde;
-      margin-top: 5px;
     }
   }
 }