142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<template>
|
||
<PageContainer>
|
||
<div class="learning-center-page video-detail-page">
|
||
<div class="page-body">
|
||
<section class="section">
|
||
<div class="container">
|
||
<RouterLink to="/knowledge/learning-center/videos" class="back-link">
|
||
<svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
||
</svg>
|
||
返回培训视频列表
|
||
</RouterLink>
|
||
|
||
<template v-if="video">
|
||
<PageHeader :title="video.title" :description="`对应课件：${video.pptxFile}`" />
|
||
<div class="video-player-wrapper">
|
||
<video
|
||
:src="videoUrl"
|
||
controls
|
||
class="video-player"
|
||
>
|
||
您的浏览器不支持视频播放。
|
||
</video>
|
||
<p class="video-hint">视频文件请放置于 <code>public/knowledge/videos/</code>，文件名：{{ video.videoFile }}</p>
|
||
</div>
|
||
<div class="video-summary-block">
|
||
<h3>内容摘要</h3>
|
||
<p>{{ video.summary }}</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-else class="video-not-found">
|
||
<p>未找到该视频</p>
|
||
<RouterLink to="/knowledge/learning-center/videos" class="back-link">返回列表</RouterLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</PageContainer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import PageContainer from '@/components/PageContainer.vue'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import { learningVideos } from '@/data/learningVideos'
|
||
|
||
const route = useRoute()
|
||
const videoId = computed(() => route.params.id as string)
|
||
|
||
const video = computed(() => learningVideos.find((v) => v.id === videoId.value))
|
||
|
||
const videoUrl = computed(() => {
|
||
if (!video.value) return ''
|
||
return `/knowledge/videos/${encodeURIComponent(video.value.videoFile)}`
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.video-detail-page .page-body {
|
||
padding-bottom: 3rem;
|
||
}
|
||
|
||
.back-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.9375rem;
|
||
color: var(--brand-primary, #2563eb);
|
||
text-decoration: none;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.back-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.video-player-wrapper {
|
||
margin: 1.5rem 0 2rem;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: #000;
|
||
aspect-ratio: 16 / 9;
|
||
}
|
||
|
||
.video-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.video-hint {
|
||
margin-top: 0.75rem;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.video-hint code {
|
||
background: rgba(0, 0, 0, 0.06);
|
||
padding: 0.2rem 0.4rem;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.video-summary-block {
|
||
padding: 1.5rem;
|
||
background: var(--white);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.video-summary-block h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--brand-primary);
|
||
margin: 0 0 0.75rem 0;
|
||
}
|
||
|
||
.video-summary-block p {
|
||
font-size: 0.9375rem;
|
||
line-height: 1.7;
|
||
color: var(--text-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.video-not-found {
|
||
text-align: center;
|
||
padding: 3rem 0;
|
||
}
|
||
|
||
.video-not-found p {
|
||
margin-bottom: 1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
</style>
|