zhongyidianandClaude Opus 4.7
6f289959be
完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ImgButton } from '@/components/Button'
|
|
import { Video } from '@/components'
|
|
import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
|
|
import { useFilmStore } from '@/stores/modules/film'
|
|
|
|
const router = useRouter()
|
|
const filmStore = useFilmStore()
|
|
|
|
const handleBack = () => {
|
|
router.back()
|
|
}
|
|
|
|
// 慢门拍摄夜晚视频 URL（暂时用其他视频代替）
|
|
const slowShutterNightVideoUrl = getPublicPath(
|
|
'video/film/on-site/dygmk_mmps_batch.mp4',
|
|
)
|
|
|
|
// 视频播放状态
|
|
const videoPlaying = ref(false)
|
|
|
|
const handleVideoEnded = () => {
|
|
filmStore.markViewed('FilmOnsiteSlowShutterNight')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full h-full overflow-hidden">
|
|
<!-- 背景 -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
|
></div>
|
|
|
|
<!-- 视频播放区域 -->
|
|
<div class="w-full h-full">
|
|
<Video
|
|
class="w-full h-full"
|
|
:src="slowShutterNightVideoUrl"
|
|
v-model="videoPlaying"
|
|
:muted="false"
|
|
:volume="1"
|
|
:controls="true"
|
|
:hideNativeControls="true"
|
|
:autoplay="true"
|
|
@ended="handleVideoEnded"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 返回按钮 -->
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-20"
|
|
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
|
@click="handleBack"
|
|
/>
|
|
</div>
|
|
</template>
|