feat(水文详情页): 添加视频播放功能及样式

在页面中添加视频播放按钮和弹窗组件，当点击按钮时显示/隐藏视频播放器
左侧和右侧面板在播放视频时自动隐藏

src/views/waterStation/HydrologyDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hydrology-detail-content">
     <!-- 左侧面板 -->
-    <div class="left-panel">
+    <div class="left-panel" v-show="!showVideo">
       <div class="left-panel-3d">
         <!-- 测站简介 -->
         <m-card title="测站简介" class="water-station-card water-station-card-top" :width="398" :height="620">
@@ -30,7 +30,7 @@
     </div>
     
     <!-- 右侧面板 -->
-    <div class="right-panel">
+    <div class="right-panel" v-show="!showVideo">
       <div class="right-panel-3d">
         <!-- 流量监测 -->
         <m-card title="流量监测" class="water-station-card water-station-card-top" :width="398" :height="450">
@@ -47,6 +47,21 @@
         </m-card>
       </div>
     </div>
+    
+    <!-- 视频播放按钮 -->
+    <div class="video-button-container">
+      <button class="video-button" @click="showVideo = !showVideo">
+        {{ showVideo ? '关闭视频' : '播放视频' }}
+      </button>
+    </div>
+    
+    <!-- 视频播放器弹窗 -->
+    <div v-if="showVideo" class="video-modal">
+      <div class="video-modal-content">
+        <button class="video-modal-close" @click="showVideo = !showVideo">×</button>
+        <video ref="videoPlayer" :src="videoUrl" autoplay controls style="width: 100%; height: 100%;" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -55,6 +70,12 @@ import { ref } from "vue"
 import mCard from "@/components/mCard/index.vue"
 import VChart from "vue-echarts"
 import * as echarts from "echarts"
+import videoFile from "@/assets/video/TSQRoam.mp4"
+
+// 视频播放状态
+const showVideo = ref(false)
+const videoPlayer = ref(null)
+const videoUrl = ref(videoFile)
 
 // 流量监测图表配置
 const flowChartOption = ref({
@@ -361,4 +382,82 @@ const rainfallChartOption = ref({
     height: 100% !important;
   }
 }
+
+.video-button-container {
+  position: absolute;
+  right: 480px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9999;
+  pointer-events: auto;
+  background: rgba(0, 30, 60, 0.7);
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(48, 220, 255, 0.4);
+}
+
+.video-button {
+  background: linear-gradient(135deg, rgba(48, 220, 255, 0.3) 0%, rgba(0, 191, 255, 0.2) 100%);
+  border: 1px solid rgba(48, 220, 255, 0.4);
+  border-radius: 4px;
+  padding: 6px 12px;
+  color: #30dcff;
+  font-size: 12px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: linear-gradient(135deg, rgba(48, 220, 255, 0.4) 0%, rgba(0, 191, 255, 0.3) 100%);
+    border-color: rgba(48, 220, 255, 0.6);
+    box-shadow: 0 0 8px rgba(48, 220, 255, 0.3);
+  }
+}
+
+.video-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-modal-content {
+  width: 80%;
+  height: 70%;
+  position: relative;
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.video-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background: rgba(48, 220, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  
+  &:hover {
+    background: rgba(48, 220, 255, 1);
+    box-shadow: 0 0 10px rgba(48, 220, 255, 0.8);
+  }
+}
+
+
 </style>