修改项目想详细内容案例

RuoYi-Vue3/bin/run-web.bat

@@ -1,12 +1,12 @@
 @echo off
 echo.
-echo [信息] 使用 Vite 命令运行 Web 工程。
+echo [INFO] Starting Vite development server...
 echo.
 
 %~d0
 cd %~dp0
 
 cd ..
-yarn dev
+npm run dev
 
 pause

RuoYi-Vue3/src/data/projectCasesData.js

@@ -0,0 +1,344 @@
+import taiPuRiverImage2 from '@/assets/images/太浦河全景2.png'
+import gongHuImage from '@/assets/images/贡湖.png'
+import taiPuRiverVideo from '@/assets/video/太浦河资料.mp4'
+
+// 项目案例数据 - 支持多个项目
+export const projectData = [
+  {
+    id: 'tai-pu-river',
+    title: '数字孪生太浦河',
+    subtitle: '基于数字孪生技术的太浦河流域综合管理平台',
+    coverImage: taiPuRiverImage2,
+    date: '2024年6月',
+    location: '上海市·虹口区',
+    client: '水利部太湖流域管理局',
+    tags: ['数字孪生', 'GIS', '大数据', '智能调度'],
+    overview: '数字孪生太浦河平台，运用多源数据融合等技术构建了符合太湖流域平原感潮河网地区特点的数据底板，建成满足多目标统筹调度要求的防洪、供水“四预”应用。建设成果已投入运行，在上海市抗咸潮保供水专项行动、在历年流域防洪演练等工作中得到应用。项目已通过水利部验收，入选数字孪生水利建设“十大样板”名录。',
+    features: [
+      {
+        icon: '🌊',
+        title: '实时监测',
+        description: '24小时实时监测河流水位、流量、水质等参数'
+      },
+      {
+        icon: '📊',
+        title: '模拟预测',
+        description: '基于大数据分析的河流变化趋势预测'
+      },
+      {
+        icon: '🚀',
+        title: '智能调度',
+        description: '自动化调度系统优化水资源配置'
+      },
+      {
+        icon: '🔍',
+        title: '风险评估',
+        description: '实时评估洪水、干旱等风险'
+      }
+    ],
+    technicalHighlights: [
+      '高精度数字孪生建模技术',
+      '实时数据采集与处理系统',
+      '智能算法优化调度策略',
+      '可视化决策支持平台',
+      '多源数据融合分析技术'
+    ],
+    achievements: [
+      {
+        id: '1',
+        title: '预测准确率提升至95%',
+        summary: '通过数字孪生技术，预测模型准确率显著提升，为决策提供更可靠依据',
+        content: '数字孪生太浦河项目采用先进的机器学习算法，集成多源数据进行分析预测。通过对历史数据的深度学习和实时数据的融合处理，预测准确率从传统方法的75%提升至95%。这一突破显著提高了水资源调度决策的可靠性，有效降低了洪水和干旱风险。',
+        date: '2024-06-15',
+        author: '技术部',
+        category: '技术成果',
+        number: '95%',
+        description: '预测准确率提升',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '2',
+        title: '调度效率优化30%',
+        summary: '智能调度系统上线，水资源调度效率大幅提升',
+        content: '基于数字孪生技术的智能调度系统成功上线运行。该系统能够实时分析流域水情、雨情和工情数据，自动生成最优调度方案。相比传统人工调度方式，调度效率提升了30%，响应时间缩短了60%，实现了水资源的精准配置和高效利用。',
+        date: '2024-06-10',
+        author: '工程部',
+        category: '管理优化',
+        number: '30%',
+        description: '调度效率优化',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '3',
+        title: '风险响应时间缩短85%',
+        summary: '建立快速反应机制，大幅缩短风险响应时间',
+        content: '项目构建了完整的风险监测和预警体系，通过物联网传感器实时采集数据，结合数字孪生模型进行风险评估。一旦检测到异常情况，系统能够在30秒内生成预警信息，并提供相应的应急处置方案。相比传统监测方式，风险响应时间缩短了85%。',
+        date: '2024-06-05',
+        author: '安全部',
+        category: '风险管理',
+        number: '85%',
+        description: '风险响应时间缩短',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '4',
+        title: '实现24/7全天候监测',
+        summary: '建立全天候监测体系，保障流域安全',
+        content: '数字孪生太浦河平台实现了对全流域的24小时全天候监测。通过分布在流域各处的传感器网络，实时采集水位、流量、水质、气象等多类数据。监测数据通过5G网络实时传输到云端进行处理，确保了数据的及时性和准确性，为流域安全提供了坚实保障。',
+        date: '2024-06-01',
+        author: '监测部',
+        category: '监测体系',
+        number: '24/7',
+        description: '全天候监测服务',
+        image: taiPuRiverImage2
+      }
+    ],
+    caseStudies: [
+      {
+        type: 'image',
+        image: taiPuRiverImage2,
+        title: '流域监测中心',
+        description: '集成多源数据的综合监测中心'
+      },
+      {
+        type: 'image',
+        image: taiPuRiverImage2,
+        title: '三维可视化平台',
+        description: '沉浸式流域可视化体验'
+      },
+      {
+        type: 'image',
+        image: taiPuRiverImage2,
+        title: '智能调度系统',
+        description: '自动化水资源调度解决方案'
+      },
+      {
+        type: 'video',
+        video: taiPuRiverVideo,
+        thumbnail: taiPuRiverImage2,
+        title: '太浦河项目视频',
+        description: '数字孪生太浦河项目介绍视频'
+      }
+    ]
+  },
+  {
+    id: 'hydrological-station',
+    title: '数字孪生水文站',
+    subtitle: '实现水文监测站点的数字化映射',
+    coverImage: gongHuImage,
+    date: '2024年3月',
+    location: '江苏省·无锡市',
+    client: '江苏省水文局',
+    tags: ['数字孪生', '物联网', 'AI', '实时监测'],
+    overview: '数字孪生水文站项目实现了水文监测站点的数字化映射，通过物联网传感器实时采集数据，结合人工智能分析技术，提供精准的水文监测与预测服务。',
+    features: [
+      {
+        icon: '💧',
+        title: '多参数监测',
+        description: '监测水位、流量、水质等多种参数'
+      },
+      {
+        icon: '📡',
+        title: '物联网连接',
+        description: '全站点物联网设备联网管理'
+      },
+      {
+        icon: '🤖',
+        title: 'AI分析',
+        description: '人工智能数据分析与预测'
+      },
+      {
+        icon: '📱',
+        title: '移动监测',
+        description: '移动端实时数据访问'
+      }
+    ],
+    technicalHighlights: [
+      '高精度传感器网络',
+      '实时数据传输技术',
+      'AI预测分析模型',
+      '移动端应用开发',
+      '故障诊断与预警系统'
+    ],
+    achievements: [
+      {
+        id: '1',
+        title: '监测站点覆盖100+',
+        summary: '实现了100+个监测站点的全覆盖，为水文监测提供了坚实基础',
+        content: '数字孪生水文站项目成功部署了100+个监测站点，覆盖了主要河流、湖泊和地下水监测点。这些站点配备了高精度传感器，能够实时采集水位、流量、水质、气象等多类数据，为水文监测和预测提供了全面、准确的数据支撑。',
+        date: '2024-03-15',
+        author: '技术部',
+        category: '基础设施',
+        number: '100+',
+        description: '监测站点覆盖',
+        image: gongHuImage
+      },
+      {
+        id: '2',
+        title: '数据准确率提升至99.9%',
+        summary: '通过优化传感器和数据处理算法，数据准确率显著提升',
+        content: '项目采用了高精度传感器和先进的数据处理算法，有效提高了数据采集的准确性和可靠性。经过严格测试和验证，数据准确率从传统方法的95%提升至99.9%，为水文监测和预测提供了更可靠的数据基础。',
+        date: '2024-03-10',
+        author: '质量部',
+        category: '技术成果',
+        number: '99.9%',
+        description: '数据准确率',
+        image: gongHuImage
+      },
+      {
+        id: '3',
+        title: '数据更新频率提升至10秒',
+        summary: '实现了数据的高频更新，满足实时监测需求',
+        content: '项目建立了高效的数据传输和处理系统，数据更新频率从传统方法的1分钟提升至10秒。这使得监测数据能够更及时地反映水文变化，为防汛抗旱、水资源调度等决策提供了实时数据支持。',
+        date: '2024-03-05',
+        author: '工程部',
+        category: '性能优化',
+        number: '10s',
+        description: '数据更新频率',
+        image: gongHuImage
+      },
+      {
+        id: '4',
+        title: '运维成本降低50%',
+        summary: '通过智能化运维系统，大幅降低了运维成本',
+        content: '项目引入了智能化运维系统，实现了设备状态的实时监测和故障预警。系统能够自动识别设备异常并提供运维建议，减少了人工巡检和维护成本。相比传统运维方式，运维成本降低了50%。',
+        date: '2024-03-01',
+        author: '运维部',
+        category: '成本优化',
+        number: '50%',
+        description: '运维成本降低',
+        image: gongHuImage
+      }
+    ],
+    caseStudies: [
+      {
+        type: 'image',
+        image: gongHuImage,
+        title: '监测站实景',
+        description: '现代化水文监测站点建设'
+      },
+      {
+        type: 'image',
+        image: gongHuImage,
+        title: '数据可视化',
+        description: '实时数据展示与分析'
+      },
+      {
+        type: 'image',
+        image: gongHuImage,
+        title: '移动应用',
+        description: '移动端数据访问与管理'
+      }
+    ]
+  },
+  {
+    id: 'data-collection',
+    title: '流域数据采集',
+    subtitle: '全流域水文数据采集与传输系统',
+    coverImage: '',
+    date: '2023年12月',
+    location: '浙江省·杭州市',
+    client: '浙江省水利厅',
+    tags: ['数据采集', '传感器', '通信', '标准化'],
+    overview: '本项目构建了全流域水文数据采集与传输系统，实现了多源数据的标准化管理和统一传输，为水资源管理提供了可靠的数据支撑。',
+    features: [
+      {
+        icon: '📊',
+        title: '多源数据采集',
+        description: '集成多种传感器数据采集'
+      },
+      {
+        icon: '🔗',
+        title: '标准化传输',
+        description: '统一的数据格式与传输协议'
+      },
+      {
+        icon: '💾',
+        title: '数据存储',
+        description: '大规模数据存储与管理'
+      },
+      {
+        icon: '🔍',
+        title: '数据分析',
+        description: '数据质量控制与分析处理'
+      }
+    ],
+    technicalHighlights: [
+      '分布式数据采集系统',
+      '标准化数据接口',
+      '高性能数据存储',
+      '实时数据处理',
+      '数据质量评估体系'
+    ],
+    achievements: [
+      {
+        id: '1',
+        title: '数据采集点突破1000个',
+        summary: '建立了覆盖全流域的1000+数据采集点，实现了数据的全面采集',
+        content: '流域数据采集项目成功部署了1000+个数据采集点，覆盖了全流域的主要河流、湖泊、水库和地下水监测区域。这些采集点配备了多种类型的传感器，能够采集水位、流量、水质、气象、土壤墒情等多类数据，为水资源管理提供了全面的数据支撑。',
+        date: '2023-12-15',
+        author: '技术部',
+        category: '基础设施',
+        number: '1000+',
+        description: '数据采集点',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '2',
+        title: '每日数据量达到TB级',
+        summary: '实现了大规模数据的采集和传输，每日数据量达到TB级',
+        content: '项目建立了高性能的数据传输和存储系统，能够处理和存储大规模数据。每日采集的数据量达到TB级，涵盖了多类监测数据。这些数据通过标准化格式传输和存储，为后续的数据分析和应用提供了可靠的数据基础。',
+        date: '2023-12-10',
+        author: '数据部',
+        category: '数据管理',
+        number: 'TB级',
+        description: '每日数据量',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '3',
+        title: '数据完整性提升至99.5%',
+        summary: '通过优化数据传输和存储系统，数据完整性显著提升',
+        content: '项目采用了冗余传输和数据校验技术，有效提高了数据传输的可靠性和完整性。经过优化，数据完整性从传统方法的95%提升至99.5%，确保了监测数据的准确性和可靠性，为水资源管理决策提供了坚实支撑。',
+        date: '2023-12-05',
+        author: '质量部',
+        category: '技术成果',
+        number: '99.5%',
+        description: '数据完整性',
+        image: taiPuRiverImage2
+      },
+      {
+        id: '4',
+        title: '实现24/7连续运行',
+        summary: '建立了稳定可靠的系统架构，实现了全天候连续运行',
+        content: '项目采用了高可用性的系统架构和容错设计，确保了数据采集、传输和存储系统的稳定运行。系统能够24小时全天候连续运行，无间断地采集和处理监测数据，为水资源管理提供了持续的数据支持。',
+        date: '2023-12-01',
+        author: '运维部',
+        category: '系统稳定性',
+        number: '24/7',
+        description: '连续运行时间',
+        image: taiPuRiverImage2
+      }
+    ],
+    caseStudies: [
+      {
+        type: 'image',
+        image: '',
+        title: '采集站点',
+        description: '分布在全流域的数据采集站点'
+      },
+      {
+        type: 'image',
+        image: '',
+        title: '传输网络',
+        description: '覆盖全区域的通信网络'
+      },
+      {
+        type: 'image',
+        image: '',
+        title: '数据中心',
+        description: '集中式数据存储与处理中心'
+      }
+    ]
+  }
+]

RuoYi-Vue3/src/views/front/ProjectCases.vue

@@ -52,22 +52,47 @@
         <!-- 案例展示 -->
         <section class="case-study">
           <h2 class="section-title">案例展示</h2>
-          <div class="case-study-grid">
-            <div 
-              v-for="(caseItem, index) in currentProject.caseStudies" 
-              :key="index" 
-              class="case-item"
-            >
-              <div class="case-image">
-                <img 
-                  :src="caseItem.image" 
-                  :alt="caseItem.title" 
-                  loading="lazy"
-                >
+          <div class="case-viewer-container">
+            <!-- 媒体展示区域 -->
+            <div class="media-display">
+              <div class="media-container">
+                <!-- 媒体内容 -->
+                <div class="media-content">
+                  <!-- 图片展示 -->
+                  <div v-if="selectedCase && selectedCase.type !== 'video'" class="image-display">
+                    <img 
+                      :src="selectedCase.image" 
+                      :alt="selectedCase.title"
+                      class="display-image"
+                    >
+                  </div>
+                  
+                  <!-- 视频播放 -->
+                  <div v-if="selectedCase && selectedCase.type === 'video'" class="video-display">
+                    <video 
+                      :src="selectedCase.video" 
+                      :poster="selectedCase.thumbnail"
+                      controls 
+                      class="display-video"
+                      ref="displayVideo"
+                      @click="toggleVideoPlay"
+                      @play="handleVideoPlay"
+                      @pause="handleVideoPause"
+                      preload="metadata"
+                      muted
+                    >
+                      您的浏览器不支持视频播放。
+                    </video>
+                    <div v-if="!videoPlaying" class="video-play-button" @click="toggleVideoPlay">
+                      <el-icon class="play-icon"><VideoPlay /></el-icon>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div class="case-content">
-                <h3 class="case-title">{{ caseItem.title }}</h3>
-                <p class="case-description">{{ caseItem.description }}</p>
+              
+              <div v-if="currentProject.caseStudies.length === 0" class="no-selection">
+                <el-icon class="no-selection-icon"><Picture /></el-icon>
+                <p>暂无案例数据</p>
               </div>
             </div>
           </div>
@@ -76,14 +101,25 @@
         <!-- 项目成果 -->
         <section class="project-achievements">
           <h2 class="section-title">项目成果</h2>
-          <div class="achievements-grid">
+          <div class="news-cards-container">
             <div 
-              v-for="(achievement, index) in currentProject.achievements" 
+              v-for="(news, index) in currentProject.achievements" 
               :key="index" 
-              class="achievement-card"
+              class="news-card"
+              @click="openNewsDetail(news)"
             >
-              <div class="achievement-number">{{ achievement.number }}</div>
-              <div class="achievement-description">{{ achievement.description }}</div>
+              <div class="news-card-image">
+                <img :src="news.image" :alt="news.title" class="card-image">
+                <span class="news-category">{{ news.category }}</span>
+              </div>
+              <div class="news-card-content">
+                <span class="news-date">{{ news.date }}</span>
+                <h3 class="news-title">{{ news.title }}</h3>
+                <p class="news-summary">{{ news.summary }}</p>
+                <div class="news-footer">
+                  <span class="read-more">了解详情 <el-icon><ArrowRight /></el-icon></span>
+                </div>
+              </div>
             </div>
           </div>
         </section>
@@ -129,6 +165,106 @@
       </div>
     </main>
 
+    <!-- 媒体查看器 -->
+    <el-dialog 
+      v-model="mediaViewerVisible" 
+      :title="currentMediaItem.title"
+      width="80%" 
+      :before-close="closeMediaViewer"
+      class="media-viewer-dialog"
+    >
+      <div class="media-viewer-content">
+        <!-- 图片查看器 -->
+        <div v-if="currentMediaItem.type !== 'video'" class="image-viewer">
+          <img 
+            :src="currentMediaItem.image" 
+            :alt="currentMediaItem.title"
+            class="viewer-image"
+            @click="closeMediaViewer"
+          >
+        </div>
+        
+        <!-- 视频播放器 -->
+        <div v-if="currentMediaItem.type === 'video'" class="video-viewer">
+          <video 
+            :src="currentMediaItem.video" 
+            :poster="currentMediaItem.thumbnail"
+            controls 
+            class="viewer-video"
+            ref="viewerVideo"
+            @click="toggleViewerVideoPlay"
+            @play="handleViewerVideoPlay"
+            @pause="handleViewerVideoPause"
+            preload="metadata"
+            muted
+          >
+            您的浏览器不支持视频播放。
+          </video>
+          <div v-if="!viewerVideoPlaying" class="video-play-button" @click="toggleViewerVideoPlay">
+            <el-icon class="play-icon"><VideoPlay /></el-icon>
+          </div>
+        </div>
+        
+        <!-- 媒体描述 -->
+        <div class="media-description">
+          {{ currentMediaItem.description }}
+        </div>
+        
+        <!-- 导航按钮 -->
+        <div class="media-navigation">
+          <el-button 
+            :disabled="currentMediaIndex === 0"
+            @click="previousMedia"
+          >
+            <el-icon><ArrowLeft /></el-icon>
+            上一个
+          </el-button>
+          <span class="media-index">{{ currentMediaIndex + 1 }} / {{ currentProject.caseStudies.length }}</span>
+          <el-button 
+            :disabled="currentMediaIndex === currentProject.caseStudies.length - 1"
+            @click="nextMedia"
+          >
+            下一个
+            <el-icon><ArrowRight /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 新闻详情弹窗 -->
+    <el-dialog 
+      v-model="newsDetailVisible" 
+      :title="currentNews.title"
+      width="70%" 
+      :before-close="closeNewsDetail"
+      class="news-detail-dialog"
+    >
+      <div class="news-detail-content">
+        <!-- 新闻元信息 -->
+        <div class="news-detail-meta">
+          <span class="news-detail-category">{{ currentNews.category }}</span>
+          <span class="news-detail-date">{{ currentNews.date }}</span>
+          <span class="news-detail-author">{{ currentNews.author }}</span>
+        </div>
+        
+        <!-- 新闻内容 -->
+        <div class="news-detail-body">
+          <p class="news-detail-content">{{ currentNews.content }}</p>
+          
+          <!-- 关键数据 -->
+          <div class="news-detail-highlight">
+            <div class="highlight-number">{{ currentNews.number }}</div>
+            <div class="highlight-label">{{ currentNews.description }}</div>
+          </div>
+        </div>
+        
+        <!-- 新闻底部 -->
+        <div class="news-detail-footer">
+          <el-button type="primary" @click="closeNewsDetail">关闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
     <footer class="page-footer">
       <p>&copy; 2025 东南大区成果展示平台 - 金水内部测试系统</p>
     </footer>
@@ -137,256 +273,173 @@
 
 <script setup>
 import PageHeader from './PageHeader.vue'
-import { ArrowLeft, Calendar, Location, User, Star } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
+import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture } from '@element-plus/icons-vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import taiPuRiverImage2 from '@/assets/images/太浦河全景2.png'
-import gongHuImage from '@/assets/images/贡湖.png'
+import { projectData } from '@/data/projectCasesData'
+
+// 视频播放状态
+const videoPlaying = ref(false)
+const viewerVideoPlaying = ref(false)
+
+// 控制案例展示视频播放
+const toggleVideoPlay = (event) => {
+  const video = document.querySelector('.display-video')
+  if (video) {
+    // 防止事件冒泡，避免同时触发视频和按钮的点击事件
+    event.stopPropagation()
+    
+    if (videoPlaying.value) {
+      video.pause()
+    } else {
+      video.play()
+    }
+    videoPlaying.value = !videoPlaying.value
+  }
+}
 
-const route = useRoute()
-const router = useRouter()
+// 监听视频播放事件
+const handleVideoPlay = () => {
+  videoPlaying.value = true
+}
+
+// 监听视频暂停事件
+const handleVideoPause = () => {
+  videoPlaying.value = false
+}
+
+// 控制媒体查看器视频播放
+const toggleViewerVideoPlay = (event) => {
+  const video = document.querySelector('.viewer-video')
+  if (video) {
+    // 防止事件冒泡，避免同时触发视频和按钮的点击事件
+    event.stopPropagation()
+    
+    if (viewerVideoPlaying.value) {
+      video.pause()
+    } else {
+      video.play()
+    }
+    viewerVideoPlaying.value = !viewerVideoPlaying.value
+  }
+}
+
+// 监听媒体查看器视频播放事件
+const handleViewerVideoPlay = () => {
+  viewerVideoPlaying.value = true
+}
+
+// 监听媒体查看器视频暂停事件
+const handleViewerVideoPause = () => {
+  viewerVideoPlaying.value = false
+}
+
+// 当前选中的案例索引（默认显示视频）
+const selectedCaseIndex = ref(3)
+
+// 当前选中的案例
+const selectedCase = computed(() => {
+  if (selectedCaseIndex.value !== null && currentProject.value.caseStudies[selectedCaseIndex.value]) {
+    return currentProject.value.caseStudies[selectedCaseIndex.value]
+  }
+  return null
+})
+
+// 选择案例
+const selectCase = (index) => {
+  // 停止当前播放的视频
+  const currentVideo = document.querySelector('.display-video')
+  if (currentVideo) {
+    currentVideo.pause()
+  }
+  
+  // 添加切换动画效果
+  selectedCaseIndex.value = index
+  
+  // 延迟一段时间后让新视频自动播放（如果是视频类型）
+  setTimeout(() => {
+    const newVideo = document.querySelector('.display-video')
+    if (newVideo && currentProject.value.caseStudies[index].type === 'video') {
+      newVideo.play().catch(err => {
+        console.log('视频播放失败:', err)
+      })
+    }
+  }, 300)
+}
+
+// 媒体查看器相关变量（保留用于全屏查看）
+const mediaViewerVisible = ref(false)
+const currentMediaItem = ref({})
+const currentMediaIndex = ref(0)
 
-// 项目案例数据 - 支持多个项目
-const projectData = ref([
-  {
-    id: 'tai-pu-river',
-    title: '数字孪生太浦河',
-    subtitle: '基于数字孪生技术的太浦河流域综合管理平台',
-    coverImage: taiPuRiverImage2,
-    date: '2024年6月',
-    location: '上海市·虹口区',
-    client: '水利部太湖流域管理局',
-    tags: ['数字孪生', 'GIS', '大数据', '智能调度'],
-    overview: '数字孪生太浦河平台，运用多源数据融合等技术构建了符合太湖流域平原感潮河网地区特点的数据底板，建成满足多目标统筹调度要求的防洪、供水“四预”应用。建设成果已投入运行，在上海市抗咸潮保供水专项行动、在历年流域防洪演练等工作中得到应用。项目已通过水利部验收，入选数字孪生水利建设“十大样板”名录。',
-    features: [
-      {
-        icon: '🌊',
-        title: '实时监测',
-        description: '24小时实时监测河流水位、流量、水质等参数'
-      },
-      {
-        icon: '📊',
-        title: '模拟预测',
-        description: '基于大数据分析的河流变化趋势预测'
-      },
-      {
-        icon: '🚀',
-        title: '智能调度',
-        description: '自动化调度系统优化水资源配置'
-      },
-      {
-        icon: '🔍',
-        title: '风险评估',
-        description: '实时评估洪水、干旱等风险'
-      }
-    ],
-    technicalHighlights: [
-      '高精度数字孪生建模技术',
-      '实时数据采集与处理系统',
-      '智能算法优化调度策略',
-      '可视化决策支持平台',
-      '多源数据融合分析技术'
-    ],
-    achievements: [
-      {
-        number: '95%',
-        description: '预测准确率提升'
-      },
-      {
-        number: '30%',
-        description: '调度效率优化'
-      },
-      {
-        number: '85%',
-        description: '风险响应时间缩短'
-      },
-      {
-        number: '24/7',
-        description: '全天候监测服务'
-      }
-    ],
-    caseStudies: [
-      {
-        image: taiPuRiverImage2,
-        title: '流域监测中心',
-        description: '集成多源数据的综合监测中心'
-      },
-      {
-        image: taiPuRiverImage2,
-        title: '三维可视化平台',
-        description: '沉浸式流域可视化体验'
-      },
-      {
-        image: taiPuRiverImage2,
-        title: '智能调度系统',
-        description: '自动化水资源调度解决方案'
-      }
-    ]
-  },
-  {
-    id: 'hydrological-station',
-    title: '数字孪生水文站',
-    subtitle: '实现水文监测站点的数字化映射',
-    coverImage: gongHuImage,
-    date: '2024年3月',
-    location: '江苏省·无锡市',
-    client: '江苏省水文局',
-    tags: ['数字孪生', '物联网', 'AI', '实时监测'],
-    overview: '数字孪生水文站项目实现了水文监测站点的数字化映射，通过物联网传感器实时采集数据，结合人工智能分析技术，提供精准的水文监测与预测服务。',
-    features: [
-      {
-        icon: '💧',
-        title: '多参数监测',
-        description: '监测水位、流量、水质等多种参数'
-      },
-      {
-        icon: '📡',
-        title: '物联网连接',
-        description: '全站点物联网设备联网管理'
-      },
-      {
-        icon: '🤖',
-        title: 'AI分析',
-        description: '人工智能数据分析与预测'
-      },
-      {
-        icon: '📱',
-        title: '移动监测',
-        description: '移动端实时数据访问'
-      }
-    ],
-    technicalHighlights: [
-      '高精度传感器网络',
-      '实时数据传输技术',
-      'AI预测分析模型',
-      '移动端应用开发',
-      '故障诊断与预警系统'
-    ],
-    achievements: [
-      {
-        number: '100+',
-        description: '监测站点覆盖'
-      },
-      {
-        number: '99.9%',
-        description: '数据准确率'
-      },
-      {
-        number: '10s',
-        description: '数据更新频率'
-      },
-      {
-        number: '50%',
-        description: '运维成本降低'
-      }
-    ],
-    caseStudies: [
-      {
-        image: gongHuImage,
-        title: '监测站实景',
-        description: '现代化水文监测站点建设'
-      },
-      {
-        image: gongHuImage,
-        title: '数据可视化',
-        description: '实时数据展示与分析'
-      },
-      {
-        image: gongHuImage,
-        title: '移动应用',
-        description: '移动端数据访问与管理'
-      }
-    ]
-  },
-  {
-    id: 'data-collection',
-    title: '流域数据采集',
-    subtitle: '全流域水文数据采集与传输系统',
-    coverImage: '',
-    date: '2023年12月',
-    location: '浙江省·杭州市',
-    client: '浙江省水利厅',
-    tags: ['数据采集', '传感器', '通信', '标准化'],
-    overview: '本项目构建了全流域水文数据采集与传输系统，实现了多源数据的标准化管理和统一传输，为水资源管理提供了可靠的数据支撑。',
-    features: [
-      {
-        icon: '📊',
-        title: '多源数据采集',
-        description: '集成多种传感器数据采集'
-      },
-      {
-        icon: '🔗',
-        title: '标准化传输',
-        description: '统一的数据格式与传输协议'
-      },
-      {
-        icon: '💾',
-        title: '数据存储',
-        description: '大规模数据存储与管理'
-      },
-      {
-        icon: '🔍',
-        title: '数据分析',
-        description: '数据质量控制与分析处理'
-      }
-    ],
-    technicalHighlights: [
-      '分布式数据采集系统',
-      '标准化数据接口',
-      '高性能数据存储',
-      '实时数据处理',
-      '数据质量评估体系'
-    ],
-    achievements: [
-      {
-        number: '1000+',
-        description: '数据采集点'
-      },
-      {
-        number: 'TB级',
-        description: '每日数据量'
-      },
-      {
-        number: '99.5%',
-        description: '数据完整性'
-      },
-      {
-        number: '24/7',
-        description: '连续运行时间'
-      }
-    ],
-    caseStudies: [
-      {
-        image: '',
-        title: '采集站点',
-        description: '分布在全流域的数据采集站点'
-      },
-      {
-        image: '',
-        title: '传输网络',
-        description: '覆盖全区域的通信网络'
-      },
-      {
-        image: '',
-        title: '数据中心',
-        description: '集中式数据存储与处理中心'
-      }
-    ]
+// 新闻详情弹窗相关变量
+const newsDetailVisible = ref(false)
+const currentNews = ref({})
+
+// 打开新闻详情弹窗
+const openNewsDetail = (news) => {
+  currentNews.value = news
+  newsDetailVisible.value = true
+}
+
+// 关闭新闻详情弹窗
+const closeNewsDetail = () => {
+  newsDetailVisible.value = false
+  currentNews.value = {}
+}
+
+// 打开媒体查看器
+const openMediaViewer = (caseItem, index) => {
+  currentMediaItem.value = caseItem
+  currentMediaIndex.value = index
+  mediaViewerVisible.value = true
+}
+
+// 关闭媒体查看器
+const closeMediaViewer = () => {
+  mediaViewerVisible.value = false
+  currentMediaItem.value = {}
+  currentMediaIndex.value = 0
+}
+
+// 切换到上一个媒体
+const previousMedia = () => {
+  if (currentMediaIndex.value > 0) {
+    currentMediaIndex.value--
+    currentMediaItem.value = currentProject.value.caseStudies[currentMediaIndex.value]
+  }
+}
+
+// 切换到下一个媒体
+const nextMedia = () => {
+  if (currentMediaIndex.value < currentProject.value.caseStudies.length - 1) {
+    currentMediaIndex.value++
+    currentMediaItem.value = currentProject.value.caseStudies[currentMediaIndex.value]
   }
-])
+}
+
+const route = useRoute()
+const router = useRouter()
 
 // 当前项目数据
-const currentProject = ref(projectData.value[0])
+const currentProject = ref(projectData[0])
+
 
 // 页面加载时获取项目数据
 onMounted(() => {
   const projectId = route.params.projectId || 'tai-pu-river'
-  const project = projectData.value.find(p => p.id === projectId)
+  const project = projectData.find(p => p.id === projectId)
   if (project) {
     currentProject.value = project
   }
 })
 
+// 获取案例图标
+const getCaseIcon = (index) => {
+  const icons = ['📱', '💻', '📊', '🔍', '🚀', '🌐']
+  return icons[index % icons.length]
+}
+
 // 返回首页
 const goToHome = () => {
   router.push('/')
@@ -428,12 +481,12 @@ const goToHome = () => {
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .project-cover {
   width: 100%;
-  height: 400px;
+  height: 350px;
   overflow: hidden;
 }
 
@@ -444,7 +497,7 @@ const goToHome = () => {
 }
 
 .project-info {
-  padding: 2.5rem;
+  padding: 2rem;
 }
 
 .project-title {
@@ -521,7 +574,7 @@ const goToHome = () => {
   padding: 1.5rem 2rem 2rem 2rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .overview-text {
@@ -530,24 +583,24 @@ const goToHome = () => {
   line-height: 1.8;
   text-align: left;
   text-indent: 2em;
-  max-width: 800px;
+  max-width: 1000px;
   margin: 0 auto;
 }
 
 /* 项目资料 */
 .project-materials {
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .materials-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
+  gap: 1.5rem;
 }
 
 .material-item {
   background: white;
-  padding: 2.5rem;
+  padding: 2rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
@@ -581,10 +634,10 @@ const goToHome = () => {
 /* 技术亮点 */
 .technical-highlights {
   background: white;
-  padding: 3rem;
+  padding: 2rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
 .highlights-list {
@@ -622,105 +675,498 @@ const goToHome = () => {
 
 /* 项目成果 */
 .project-achievements {
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
-.achievements-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+.news-cards-container {
+  display: flex;
   gap: 2rem;
+  overflow-x: auto;
+  padding: 1rem 0;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
 }
 
-.achievement-card {
+.news-cards-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.news-cards-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.news-cards-container::-webkit-scrollbar-thumb {
+  background: #326ee2;
+  border-radius: 10px;
+}
+
+.news-cards-container::-webkit-scrollbar-thumb:hover {
+  background: #64b5f6;
+}
+
+.news-card {
   background: white;
-  padding: 2.5rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
-  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  min-width: 320px;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
 }
 
-.achievement-card:hover {
+.news-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-.achievement-number {
+.news-card-image {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.news-card:hover .card-image {
+  transform: scale(1.05);
+}
+
+.news-category {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background: rgba(50, 110, 226, 0.9);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  z-index: 1;
+}
+
+.news-card-content {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.news-date {
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  font-weight: 500;
+  margin-bottom: 0.75rem;
+}
+
+.news-title {
+  font-size: 1.25rem;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-summary {
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.read-more {
+  font-size: 0.875rem;
+  color: #326ee2;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.news-card:hover .read-more {
+  color: #64b5f6;
+  transform: translateX(5px);
+}
+
+/* 新闻详情弹窗样式 */
+.news-detail-dialog :deep(.el-dialog__header) {
+  background: #326ee2;
+  color: white;
+  padding: 1.5rem 2rem;
+}
+
+.news-detail-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.news-detail-dialog :deep(.el-dialog__headerbtn) {
+  top: 1.5rem;
+}
+
+.news-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.news-detail-content {
+  padding: 1rem;
+}
+
+.news-detail-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #f0f5ff;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.news-detail-category {
+  background: #326ee2;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.news-detail-date {
+  font-size: 0.875rem;
+  color: #7f8c8d;
+  font-weight: 500;
+}
+
+.news-detail-author {
+  font-size: 0.875rem;
+  color: #326ee2;
+  font-weight: 500;
+}
+
+.news-detail-body {
+  margin-bottom: 2rem;
+}
+
+.news-detail-content {
+  font-size: 1rem;
+  color: #34495e;
+  line-height: 1.8;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.news-detail-highlight {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.highlight-number {
   font-size: 3rem;
   color: #326ee2;
   font-weight: 700;
   margin-bottom: 1rem;
 }
 
-.achievement-description {
+.highlight-label {
   font-size: 1rem;
   color: #7f8c8d;
   line-height: 1.6;
+  text-align: center;
+}
+
+.news-detail-footer {
+  text-align: right;
 }
 
 /* 案例展示 */
 .case-study {
-  background: white;
-  padding: 3rem;
+  background: #f8f9fa;
+  padding: 1.5rem 1.5rem 1.5rem;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   margin-bottom: 3rem;
+  min-height: 700px; /* 调整最小高度 */
 }
 
-.case-study-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
+.case-viewer-container {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  height: calc(100% - 50px); /* 计算高度以铺满卡片 */
+  align-items: flex-start;
 }
 
-.case-item {
-  border-radius: 16px;
+/* 媒体展示区域 */
+.media-display {
+  width: 100%; /* 全屏宽度 */
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  padding: 0;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
 }
 
-.case-item:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+.media-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.case-image {
+.media-content {
   width: 100%;
-  height: 200px;
+  height: 100%;
+  background: transparent;
   overflow: hidden;
-  background: #f0f5ff;
+  position: relative;
+  border-radius: 12px;
 }
 
-.case-image img {
+.image-display {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  overflow: hidden;
+  border-radius: 12px;
 }
 
-.case-item:hover .case-image img {
-  transform: scale(1.1);
+.display-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 覆盖整个区域，可能会裁剪 */
+  border-radius: 12px;
 }
 
-.case-content {
-  padding: 2rem;
+.video-display {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  overflow: hidden;
+  border-radius: 12px;
 }
 
-.case-title {
-  font-size: 1.25rem;
+.display-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 覆盖整个区域，可能会裁剪 */
+  border-radius: 12px;
+}
+
+/* 视频播放按钮 */
+.video-play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 160px;
+  height: 160px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+}
+
+.video-play-button:hover {
+  background: rgba(0, 0, 0, 0.85);
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
+}
+
+.play-icon {
+  font-size: 5rem;
+  color: white;
+  margin-left: 10px;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+.media-info {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e9ecef;
+}
+
+.media-title {
+  font-size: 1.5rem;
   color: #2c3e50;
   margin-bottom: 1rem;
   font-weight: 600;
   line-height: 1.4;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid #326ee2;
 }
 
-.case-description {
-  font-size: 0.875rem;
+.media-description {
+  font-size: 1.1rem;
+  color: #34495e;
+  line-height: 1.8;
+}
+
+/* 未选择状态 */
+.no-selection {
+  text-align: center;
   color: #7f8c8d;
+}
+
+.no-selection-icon {
+  font-size: 4rem;
+  color: #dee2e6;
+  margin-bottom: 1rem;
+}
+
+.no-selection p {
+  font-size: 1.1rem;
   line-height: 1.6;
 }
 
+/* 媒体查看器样式 */
+.media-viewer-dialog :deep(.el-dialog__header) {
+  background: #326ee2;
+  color: white;
+  padding: 1.5rem 2rem;
+}
+
+.media-viewer-dialog :deep(.el-dialog__title) {
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.media-viewer-dialog :deep(.el-dialog__headerbtn) {
+  top: 1.5rem;
+}
+
+.media-viewer-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.media-viewer-content {
+  padding: 1rem;
+}
+
+.image-viewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  margin-bottom: 1.5rem;
+}
+
+.viewer-image {
+  max-width: 100%;
+  max-height: 600px;
+  object-fit: contain;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.viewer-image:hover {
+  transform: scale(1.02);
+}
+
+.video-viewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  margin-bottom: 1.5rem;
+}
+
+.viewer-video {
+  max-width: 100%;
+  max-height: 600px;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.media-description {
+  font-size: 1rem;
+  color: #34495e;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.media-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.media-navigation .el-button {
+  min-width: 100px;
+  border-radius: 20px;
+}
+
+.media-index {
+  font-size: 1rem;
+  color: #2c3e50;
+  font-weight: 500;
+  padding: 0 1rem;
+}
+
 /* 返回按钮 */
 .back-button-container {
   text-align: center;

start-all.bat

@@ -0,0 +1,58 @@
+@echo off
+echo ============================================
+echo 项目启动脚本
+echo ============================================
+echo.
+
+echo 请选择启动方式：
+echo 1. 同时启动前后端
+echo 2. 只启动前端
+echo 3. 只启动后端
+echo.
+
+set /p choice="请输入您的选择 (1-3)："
+
+if "%choice%"=="1" (
+    echo.
+    echo 正在启动后端...
+    start "后端服务" cmd /k "cd /d d:\VUEobject\DNchngguo && call bin\run.bat"
+    
+    echo.
+    echo 正在启动前端...
+    start "前端服务" cmd /k "cd /d d:\VUEobject\DNchngguo\RuoYi-Vue3 && call bin\run-web.bat"
+    
+    echo.
+    echo 前后端正在启动中...
+    echo 后端访问地址: http://localhost:8448
+    echo 前端访问地址: http://localhost:83
+    echo.
+    echo 按任意键退出脚本...
+    pause >nul
+) else if "%choice%"=="2" (
+    echo.
+    echo 正在启动前端...
+    start "前端服务" cmd /k "cd /d d:\VUEobject\DNchngguo\RuoYi-Vue3 && call bin\run-web.bat"
+    
+    echo.
+    echo 前端正在启动中...
+    echo 前端访问地址: http://localhost:83
+    echo.
+    echo 按任意键退出脚本...
+    pause >nul
+) else if "%choice%"=="3" (
+    echo.
+    echo 正在启动后端...
+    start "后端服务" cmd /k "cd /d d:\VUEobject\DNchngguo && call bin\run.bat"
+    
+    echo.
+    echo 后端正在启动中...
+    echo 后端访问地址: http://localhost:8448
+    echo.
+    echo 按任意键退出脚本...
+    pause >nul
+) else (
+    echo.
+    echo 无效的选择，请输入 1-3 之间的数字！
+    echo 按任意键退出脚本...
+    pause >nul
+)