zhongyidianandClaude Opus 4.7
1f8723aabd
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
2.5 KiB
Vue
94 lines
2.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 QuestionQuiz, {
|
|
type Question,
|
|
} from '@/components/QuestionQuiz/QuestionQuiz.vue'
|
|
import { getPublicPath, IMAGE_PATHS } from '@/utils'
|
|
|
|
const router = useRouter()
|
|
|
|
const handleBack = () => {
|
|
router.back()
|
|
}
|
|
|
|
// 滑轨拍摄视频 URL
|
|
const sliderVideoUrl = getPublicPath(
|
|
'video/film/on-site/dygmk_hgydjt_batch.mp4',
|
|
)
|
|
|
|
// 视频播放状态
|
|
const videoEnded = ref(false)
|
|
const videoPlaying = ref(false)
|
|
const showQuiz = ref(false) // 控制是否显示答题窗口
|
|
|
|
// 视频播放完成
|
|
const handleVideoEnded = () => {
|
|
videoEnded.value = true
|
|
showQuiz.value = true // 视频播放完成后显示答题窗口
|
|
}
|
|
|
|
// 交互一 & 交互二：选择题
|
|
const questions = ref<Question[]>([
|
|
{
|
|
id: 1,
|
|
title: '滑轨拍摄',
|
|
description: '下面哪一种拍摄情境，最适合使用滑轨拍摄？',
|
|
options: [
|
|
{
|
|
id: 'a',
|
|
label:
|
|
'人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止',
|
|
},
|
|
{ id: 'b', label: '人物站在窗边，前景有栏杆或墙体，镜头缓慢横向移动' },
|
|
{ id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' },
|
|
],
|
|
correctOptionId: 'b',
|
|
explanation:
|
|
'滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。',
|
|
},
|
|
])
|
|
|
|
// 答题完成
|
|
const handleQuestionsComplete = () => {
|
|
showQuiz.value = false // 答题成功后关闭答题窗口
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative w-full h-full flex items-center justify-center overflow-hidden"
|
|
>
|
|
<!-- 视频播放区域 -->
|
|
<Video
|
|
class="w-full h-full"
|
|
:src="sliderVideoUrl"
|
|
v-model="videoPlaying"
|
|
:muted="false"
|
|
:volume="1"
|
|
:controls="true"
|
|
:hideNativeControls="true"
|
|
:autoplay="true"
|
|
@ended="handleVideoEnded"
|
|
>
|
|
<template #overlay>
|
|
<QuestionQuiz
|
|
v-if="showQuiz"
|
|
:show-question-number="false"
|
|
:questions="questions"
|
|
@complete="handleQuestionsComplete"
|
|
/>
|
|
</template>
|
|
</Video>
|
|
|
|
<!-- 返回按钮 -->
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-20"
|
|
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
|
@click="handleBack"
|
|
/>
|
|
</div>
|
|
</template>
|