|
|
@@ -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>© 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;
|
BAI