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

<template>
  <div class="project-cases">
    <PageHeader />
    
    <main class="main-content">
      <div class="case-content">
        <!-- 项目封面区域 -->
        <section class="project-header">
          <div class="project-cover">
            <img 
              :src="currentProject.coverImage" 
              :alt="currentProject.title" 
              class="project-cover-image"
              loading="lazy"
            >
          </div>
          <div class="project-info">
            <h1 class="project-title">{{ currentProject.title }}</h1>
            <p class="project-subtitle">{{ currentProject.subtitle }}</p>
            <div class="project-meta">
              <span class="meta-item">
                <el-icon><Calendar /></el-icon>
                {{ currentProject.date }}
              </span>
              <span class="meta-item">
                <el-icon><Location /></el-icon>
                {{ currentProject.location }}
              </span>
              <span class="meta-item">
                <el-icon><User /></el-icon>
                {{ currentProject.client }}
              </span>
            </div>
            <div class="project-tags">
              <span 
                v-for="tag in currentProject.tags" 
                :key="tag" 
                class="project-tag"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </section>

        <!-- 项目概览 -->
        <section class="project-overview">
          <h2 class="section-title">项目概览</h2>
          <p class="overview-text">{{ currentProject.overview }}</p>
        </section>

        <!-- 案例展示 -->
        <section class="case-study">
          <h2 class="section-title">案例展示</h2>
          <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 v-if="currentProject.caseStudies.length === 0" class="no-selection">
                <el-icon class="no-selection-icon"><Picture /></el-icon>
                <p>暂无案例数据</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 技术亮点 -->
        <section class="technical-highlights">
          <h2 class="section-title">技术亮点</h2>
          <div class="horizontal-accordion-container">
            <div 
              v-for="(item, index) in Object.values(currentProject.technicalHighlights)" 
              :key="index"
              class="accordion-item"
              :class="{ 'active': activeAccordion === index }"
              @mouseenter="handleItemHover(index)"
            >
              <div class="accordion-header">
                <el-icon class="collapse-icon"><Star /></el-icon>
                <span>{{ item.title }}</span>
              </div>
              <div class="accordion-content">
                <p class="collapse-description">{{ item.description }}</p>
                <ul class="collapse-features">
                  <li v-for="(feature, idx) in item.features" :key="idx">
                    <el-icon class="feature-icon"><Check /></el-icon>
                    {{ feature }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- 应用成效 -->
        <section class="application-effects">
          <h2 class="section-title">应用成效</h2>
          <div class="news-list-container">
            <div 
              v-for="(news, index) in currentProject.applicationEffects" 
              :key="index" 
              class="news-list-item"
              @click="openNewsDetail(news)"
            >
              <div class="news-list-content">
                <div class="news-list-header">
                  <span class="news-list-category">{{ news.category }}</span>
                  <span class="news-list-date">{{ news.date }}</span>
                </div>
                <h3 class="news-list-title">{{ news.title }}</h3>
                <p class="news-list-summary">{{ news.summary }}</p>
                <div class="news-list-footer">
                  <span class="read-more">阅读全文 <el-icon><ArrowRight /></el-icon></span>
                </div>
              </div>
              <div class="news-list-image">
                <img :src="news.image" :alt="news.title" class="list-image">
              </div>
            </div>
          </div>
        </section>

        <!-- 项目资料 -->
        <section class="project-materials">
          <h2 class="section-title">项目资料</h2>
          
          <!-- 分类导航 -->
          <div class="materials-tabs">
            <el-tabs v-model="activeMaterialTab" type="card" @tab-click="handleTabClick">
              <el-tab-pane label="全部" name="all">
                <template #label>
                  <el-icon><Collection /></el-icon>
                  全部
                </template>
                <!-- 文件列表 -->
                <div class="materials-list">
                    <div 
                      v-for="(material, index) in currentProject.materials" 
                      :key="material.id" 
                      class="material-item"
                    >
                      <div class="material-icon">
                        <el-icon v-if="material.type === 'pdf' || material.category === '文件'"><Document /></el-icon>
                        <el-icon v-else-if="material.type === 'word'"><EditPen /></el-icon>
                        <el-icon v-else-if="material.type === 'excel'"><DataAnalysis /></el-icon>
                        <el-icon v-else-if="material.type === 'csv'"><Reading /></el-icon>
                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
                        <el-icon v-else-if="material.type === 'video' || material.category === '媒体'"><VideoPlay /></el-icon>
                        <el-icon v-else><Picture /></el-icon>
                      </div>
                      <div class="material-info">
                        <div class="material-name">{{ material.name }}</div>
                        <div class="material-meta">
                          <span class="meta-item">
                            <el-icon><Calendar /></el-icon>
                            {{ material.uploadDate }}
                          </span>
                          <span class="meta-item">
                            <el-icon><Collection /></el-icon>
                            {{ material.size }}
                          </span>
                        </div>
                        <div class="material-description">{{ material.description }}</div>
                      </div>
                      <div class="material-actions">
                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
                          <el-icon><Download /></el-icon>
                          下载
                        </el-button>
                      </div>
                    </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="文件" name="文件">
                <template #label>
                  <el-icon><Document /></el-icon>
                  文件
                </template>
                <!-- 文件列表 -->
                <div class="materials-list">
                    <div 
                      v-for="(material, index) in currentProject.materials.filter(m => m.category === '文件')" 
                      :key="material.id" 
                      class="material-item"
                    >
                      <div class="material-icon">
                        <el-icon v-if="material.type === 'pdf'"><Document /></el-icon>
                        <el-icon v-else-if="material.type === 'word'"><EditPen /></el-icon>
                        <el-icon v-else-if="material.type === 'excel'"><DataAnalysis /></el-icon>
                        <el-icon v-else-if="material.type === 'csv'"><Reading /></el-icon>
                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
                        <el-icon v-else><Document /></el-icon>
                      </div>
                      <div class="material-info">
                        <div class="material-name">{{ material.name }}</div>
                        <div class="material-meta">
                          <span class="meta-item">
                            <el-icon><Calendar /></el-icon>
                            {{ material.uploadDate }}
                          </span>
                          <span class="meta-item">
                            <el-icon><Collection /></el-icon>
                            {{ material.size }}
                          </span>
                        </div>
                        <div class="material-description">{{ material.description }}</div>
                      </div>
                      <div class="material-actions">
                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
                          <el-icon><Download /></el-icon>
                          下载
                        </el-button>
                      </div>
                    </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="媒体" name="媒体">
                <template #label>
                  <el-icon><VideoPlay /></el-icon>
                  媒体
                </template>
                <!-- 文件列表 -->
                <div class="materials-list">
                    <div 
                      v-for="(material, index) in currentProject.materials.filter(m => m.category === '媒体')" 
                      :key="material.id" 
                      class="material-item"
                    >
                      <div class="material-icon">
                        <el-icon v-if="material.type === 'video'"><VideoPlay /></el-icon>
                        <el-icon v-else-if="material.type === 'zip'"><FolderOpened /></el-icon>
                        <el-icon v-else><Picture /></el-icon>
                      </div>
                      <div class="material-info">
                        <div class="material-name">{{ material.name }}</div>
                        <div class="material-meta">
                          <span class="meta-item">
                            <el-icon><Calendar /></el-icon>
                            {{ material.uploadDate }}
                          </span>
                          <span class="meta-item">
                            <el-icon><Collection /></el-icon>
                            {{ material.size }}
                          </span>
                        </div>
                        <div class="material-description">{{ material.description }}</div>
                      </div>
                      <div class="material-actions">
                        <el-button type="primary" size="small" @click="downloadMaterial(material)">
                          <el-icon><Download /></el-icon>
                          下载
                        </el-button>
                      </div>
                    </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </section>

        <!-- 返回首页按钮 -->
        <div class="back-button-container">
          <el-button type="primary" size="large" @click="goToHome">
            <el-icon><ArrowLeft /></el-icon>
            返回首页
          </el-button>
        </div>
      </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>

    <!-- 微信链接弹窗 -->
    <el-dialog 
      v-model="weixinLinkVisible" 
      title="抗咸潮保供水专项行动"
      width="90%" 
      :before-close="closeWeixinLink"
      class="weixin-link-dialog"
    >
      <div class="weixin-link-content">
        <iframe 
          :src="currentWeixinLink" 
          frameborder="0" 
          style="width: 100%; height: 80vh;"
          title="抗咸潮保供水专项行动"
        ></iframe>
      </div>
      <template #footer>
        <el-button type="primary" @click="closeWeixinLink">关闭</el-button>
      </template>
    </el-dialog>

    <footer class="page-footer">
      <p>&copy; 2025 东南大区成果展示平台 - 金水内部测试系统</p>
    </footer>
  </div>
</template>

<script setup>
import PageHeader from './PageHeader.vue'
import { ArrowLeft, ArrowRight, Calendar, Location, User, Star, VideoPlay, Picture, Document, EditPen, DataAnalysis, Reading, FolderOpened, Collection, Download, Check, ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { allProjects, getProjectById } from '@/data/projects'

// 视频播放状态
const videoPlaying = ref(false)
const viewerVideoPlaying = ref(false)

// 手风琴组件状态
const activeAccordion = ref(0)

// 鼠标悬停触发面板展开（手风琴模式自动收起其他）
const handleItemHover = (key) => {
  activeAccordion.value = key
}

// 控制案例展示视频播放
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 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 newsDetailVisible = ref(false)
const currentNews = ref({})
const weixinLinkVisible = ref(false)
const currentWeixinLink = ref('')

// 打开新闻详情弹窗
const openNewsDetail = (news) => {
  // 判断是否是需要打开微信链接的新闻
  if (news.title.includes('抗咸保供水专项行动')) {
    // 微信公众号链接不允许嵌入iframe，直接在新窗口打开
    window.open('https://mp.weixin.qq.com/s/VQnFDQXvzJPY-YPhimapGg', '_blank')
  } else if (news.title.includes('水利部太湖流域管理局组织开展2024年太湖流域防洪调度演练')) {
    // 打开2024年防汛演练的微信链接
    window.open('https://mp.weixin.qq.com/s/cqVi5NhpI0UtamGdRWxysg', '_blank')
  } else if (news.title.includes('李国英调研数字孪生太湖建设工作')) {
    // 打开李国英调研数字孪生太湖建设工作的微信链接
    window.open('https://mp.weixin.qq.com/s/DoYywW9hos4zd3ZipDzwPA', '_blank')
  } else if (news.title.includes('水利部组织开展2023年太湖流域防洪调度演练')) {
    // 打开2023年防汛演练的新闻详情
    currentNews.value = news
    newsDetailVisible.value = true
  } else if (news.title.includes('水利部太湖流域管理局组织开展2025年太湖流域防洪调度演练')) {
    // 打开2025年防汛演练的新闻详情
    currentNews.value = news
    newsDetailVisible.value = true
  } else {
    currentNews.value = news
    newsDetailVisible.value = true
  }
}

// 关闭新闻详情弹窗
const closeNewsDetail = () => {
  newsDetailVisible.value = false
  currentNews.value = {}
}

// 关闭微信链接弹窗
const closeWeixinLink = () => {
  weixinLinkVisible.value = false
  currentWeixinLink.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(allProjects[0])

// 页面加载时获取项目数据
onMounted(() => {
  const projectId = route.params.projectId || 'tai-pu-river'
  const project = getProjectById(projectId)
  if (project) {
    currentProject.value = project
  }
})

// 获取案例图标
const getCaseIcon = (index) => {
  const icons = ['📱', '💻', '📊', '🔍', '🚀', '🌐']
  return icons[index % icons.length]
}

// 项目资料分类切换
const activeMaterialTab = ref('all')

// 过滤后的项目资料
const filteredMaterials = computed(() => {
  if (activeMaterialTab.value === 'all') {
    return currentProject.value.materials
  } else {
    return currentProject.value.materials.filter(m => m.category === activeMaterialTab.value)
  }
})

// 标签页点击事件
const handleTabClick = (tab) => {
  activeMaterialTab.value = tab.props.name
}

// 下载项目资料
const downloadMaterial = (material) => {
  // 模拟下载功能
  console.log('开始下载文件:', material.name)
  
  // 这里可以添加实际的下载逻辑，例如：
  // 1. 调用后端接口获取文件下载地址
  // 2. 创建下载链接并触发点击
  // 3. 显示下载进度和状态
  
  // 模拟下载成功提示
  ElMessage.success(`正在下载: ${material.name}`)
}

// 返回首页
const goToHome = () => {
  router.push('/')
}
</script>

<style scoped>
.project-cases {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  background: #f8f9fa;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  width: 100%;
  padding: 2rem 0;
  overflow-y: auto;
  height: calc(100% - 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-content {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}

/* 项目封面区域 */
.project-header {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 2rem;
}

.project-cover {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.project-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-info {
  padding: 2rem;
}

.project-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.project-subtitle {
  font-size: 1.25rem;
  color: #7f8c8d;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.project-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #7f8c8d;
}

.project-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.project-tag {
  background: #f0f5ff;
  color: #326ee2;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 章节样式 */
.section-title {
  font-size: 1.75rem;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #326ee2;
  border-radius: 2px;
}

/* 项目概览 */
.project-overview {
  background: white;
  padding: 1.5rem 2rem 2rem 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.overview-text {
  font-size: 1.4rem;
  color: #34495e;
  line-height: 1.8;
  text-align: left;
  text-indent: 2em;
  max-width: 1000px;
  margin: 0 auto;
}

/* 项目资料 */
.project-materials {
  margin-bottom: 2rem;
}

.material-category {
  margin-bottom: 2rem;
}

.category-title {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-left: 4px solid #326ee2;
  border-radius: 4px;
}

.materials-list {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.material-item {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.material-item:last-child {
  border-bottom: none;
}

.material-item:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
}

.material-icon {
  font-size: 2rem;
  color: #326ee2;
  min-width: 60px;
  text-align: center;
  margin-right: 1.5rem;
}

.material-info {
  flex: 1;
}

.material-name {
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.material-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.material-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.material-description {
  font-size: 0.875rem;
  color: #7f8c8d;
  line-height: 1.6;
}

.material-actions {
  margin-left: 1.5rem;
}

/* 项目资料标签页样式 */
.materials-tabs {
  margin-bottom: 1.5rem;
}

.materials-tabs :deep(.el-tabs__header) {
  margin-bottom: 1rem;
}

.materials-tabs :deep(.el-tabs__nav-wrap) {
  margin-bottom: 0;
}

.materials-tabs :deep(.el-tabs__nav) {
  border-bottom: 1px solid #e4e7ed;
}

.materials-tabs :deep(.el-tabs__item) {
  border-bottom: 2px solid transparent;
  color: #606266;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  margin-right: 1rem;
}

.materials-tabs :deep(.el-tabs__item:hover) {
  color: #326ee2;
}

.materials-tabs :deep(.el-tabs__item.is-active) {
  color: #326ee2;
  border-bottom-color: #326ee2;
}

.materials-tabs :deep(.el-tabs__nav-wrap::after) {
  display: none;
}

/* 技术亮点 */
.technical-highlights {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

/* 横向手风琴容器 */
.horizontal-accordion-container {
  width: 100%;
  height: 400px;
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1.5rem;
  background: #fff;
}

/* 单个手风琴项 */
.accordion-item {
  flex: 1;
  min-width: 150px;
  max-width: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 为每个手风琴项设置不同的背景图片 */
.accordion-item:nth-child(1) {
  background-image: url('@/assets/images/太浦河全景2.png');
}

.accordion-item:nth-child(2) {
  background-image: url('@/assets/images/四预.png');
}

.accordion-item:nth-child(3) {
  background-image: url('@/assets/images/历史洪水.png');
}

.accordion-item:nth-child(4) {
  background-image: url('@/assets/images/抗咸保供.png');
}

/* 背景图片增强文字可读性 */
.accordion-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent); /* 渐变黑色到透明，左侧完全不透明 */
  transition: all 0.3s ease;
}

.accordion-item:last-child {
  border-right: none;
}

/* 手风琴项激活状态（展开） */
.accordion-item.active {
  flex: 4;
  max-width: none;
}

/* 手风琴头部 */
.accordion-header {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  color: white;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.accordion-item:hover .accordion-header {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.accordion-item.active .accordion-header {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
}

.collapse-icon {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.accordion-item:hover .collapse-icon {
  transform: scale(1.1);
}

/* 手风琴内容 */
.accordion-content {
  position: absolute;
  top: 0;
  left: 150px;
  height: 100%;
  width: calc(100% - 150px);
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow-y: auto;
}

.accordion-item.active .accordion-content {
  left: 0;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

.collapse-description {
  font-size: 1rem;
  color: white;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.collapse-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.collapse-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: white;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1.6;
}

.collapse-features li:last-child {
  border-bottom: none;
}

.feature-icon {
  color: #28a745;
  font-size: 0.9rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* 项目成果 */
.project-achievements {
  margin-bottom: 2rem;
}

.news-cards-container {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.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;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 320px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.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);
}

/* 应用成效 */
.application-effects {
  margin-bottom: 2rem;
}

.news-list-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.news-list-item {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  cursor: pointer;
  align-items: center;
}

.news-list-item:last-child {
  border-bottom: none;
}

.news-list-item:hover {
  background: #f8f9fa;
  transform: translateX(5px);
}

.news-list-content {
  flex: 1;
}

.news-list-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.news-list-category {
  background: #e3f2fd;
  color: #1565c0;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.news-list-date {
  font-size: 0.875rem;
  color: #7f8c8d;
  font-weight: 500;
}

.news-list-title {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.news-list-summary {
  font-size: 0.875rem;
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.news-list-image {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.list-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-list-item:hover .list-image {
  transform: scale(1.05);
}

/* 新闻详情弹窗样式 */
.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;
}

.highlight-label {
  font-size: 1rem;
  color: #7f8c8d;
  line-height: 1.6;
  text-align: center;
}

.news-detail-footer {
  text-align: right;
}

/* 案例展示 */
.case-study {
  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-viewer-container {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  height: calc(100% - 50px); /* 计算高度以铺满卡片 */
  align-items: flex-start;
}

/* 媒体展示区域 */
.media-display {
  width: 100%; /* 全屏宽度 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.media-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-content {
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

.image-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  overflow: hidden;
  border-radius: 12px;
}

.display-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 覆盖整个区域，可能会裁剪 */
  border-radius: 12px;
}

.video-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  overflow: hidden;
  border-radius: 12px;
}

.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;
}

.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;
  margin-top: 3rem;
}

/* 页面底部 */
.page-footer {
  background: white;
  color: #326ee2;
  text-align: center;
  padding: 1.5rem 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f0f5ff;
}

.page-footer p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-cover {
    height: 250px;
  }

  .project-info {
    padding: 2rem;
  }

  .project-title {
    font-size: 2rem;
  }

  .project-subtitle {
    font-size: 1rem;
  }

  .project-meta {
    gap: 1.5rem;
  }

  .project-overview,
  .technical-highlights,
  .case-study {
    padding: 2rem;
  }

  .features-grid,
  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .achievements-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 手风琴组件响应式调整 */
  .horizontal-accordion-container {
    height: 300px;
  }

  .accordion-item {
    min-width: 100px;
    max-width: 100px;
  }

  .accordion-header {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .collapse-icon {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .accordion-content {
    left: 100px;
    width: calc(100% - 100px);
    padding: 1.5rem;
  }

  .collapse-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .collapse-features li {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }
}

@media (max-width: 480px) {
  .project-cover {
    height: 200px;
  }

  .project-info {
    padding: 1.5rem;
  }

  .project-title {
    font-size: 1.5rem;
  }

  .project-subtitle {
    font-size: 0.875rem;
  }

  .project-meta {
    gap: 1rem;
    flex-direction: column;
  }

  .project-overview,
  .technical-highlights,
  .case-study {
    padding: 1.5rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  /* 手风琴组件在小屏幕上垂直排列 */
  .horizontal-accordion-container {
    height: auto;
    flex-direction: column;
    border: none;
  }

  .accordion-item {
    min-width: 100%;
    max-width: 100%;
    height: 60px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .accordion-item:nth-child(1),
  .accordion-item:nth-child(2),
  .accordion-item:nth-child(3),
  .accordion-item:nth-child(4) {
    background-size: cover;
    background-position: center;
  }

  .accordion-header {
    flex-direction: row;
    padding: 1rem;
    font-size: 1rem;
    text-align: left;
  }

  .collapse-icon {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-right: 1rem;
  }

  .accordion-content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
  }

  .accordion-item.active {
    flex: none;
    height: auto;
    max-width: 100%;
  }

  .accordion-item.active .accordion-content {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
  }

  .accordion-item.active .accordion-header {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .collapse-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .collapse-features li {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }
}
</style>