forked from zhongyidian/super_video
110 lines
3.6 KiB
Vue
110 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { ImgButton } from '@/components/Button'
|
||
import { QuestionQuiz, type Question } from '@/components'
|
||
import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||
|
||
const router = useRouter()
|
||
|
||
const handleBack = () => {
|
||
router.back()
|
||
}
|
||
|
||
// 交互一 & 交互二：选择题
|
||
const questions = ref<Question[]>([
|
||
{
|
||
id: 1,
|
||
title: '画面感受判断',
|
||
description: '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
|
||
options: [
|
||
{ id: 'a', label: '平视拍摄' },
|
||
{ id: 'b', label: '俯拍' },
|
||
{ id: 'c', label: '低角度仰拍' }
|
||
],
|
||
correctOptionId: '', // 引导题，没有正确答案，任意选择都可进入下一题
|
||
mediaSrc: 'film/on-site/低角度拍摄jh_1.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '结果理解',
|
||
description: '这个画面通过低角度拍摄，主要解决了哪一个画面问题？',
|
||
options: [
|
||
{ id: 'a', label: '放大了人物的真实身高' },
|
||
{ id: 'b', label: '强化了人物动作的力量感与气势' },
|
||
{ id: 'c', label: '让背景元素显得更加丰富' },
|
||
{ id: 'd', label: '让画面信息量变得更多' }
|
||
],
|
||
correctOptionId: 'b',
|
||
mediaSrc: getPublicPath('video/on-site/xianchangpaishe_dijiaodu.mp4')
|
||
}
|
||
])
|
||
|
||
const showSummaryStep = ref(false)
|
||
|
||
// 答题完成，进入交互三（总结）
|
||
const handleQuestionsComplete = () => {
|
||
showSummaryStep.value = true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative w-full h-full overflow-hidden">
|
||
<!-- 背景 -->
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||
></div>
|
||
|
||
<!-- 交互一 & 交互二：选择题 -->
|
||
<QuestionQuiz
|
||
v-if="!showSummaryStep"
|
||
:questions="questions"
|
||
@complete="handleQuestionsComplete"
|
||
/>
|
||
|
||
<!-- 交互三：总结 -->
|
||
<div
|
||
v-if="showSummaryStep"
|
||
class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
|
||
>
|
||
<div
|
||
class="max-w-screen-2xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
|
||
>
|
||
<div class="flex gap-8">
|
||
<!-- 总结文本内容 -->
|
||
<div class="w-3/6 text-2xl leading-10 opacity-90 space-y-3">
|
||
<h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
|
||
<p>
|
||
<span>像案例中这样以蹲姿或趴在地上的姿势进行低角度拍摄，</span>
|
||
<span>并不会改变人物本身，</span>
|
||
<span>却能借助降低机位的操作，</span>
|
||
<span>赋予画面里的人物更强的力量感与气势。</span>
|
||
</p>
|
||
<p>
|
||
<span>同时，低角度也减少了，</span>
|
||
<span>背景中杂乱元素进入画面的可能性，</span>
|
||
<span>让观众的注意力更集中在人物的动作本身。</span>
|
||
</p>
|
||
</div>
|
||
<!-- 总结图片 -->
|
||
<div class="flex-1 rounded-2xl overflow-hidden">
|
||
<img
|
||
class="w-full object-cover"
|
||
:src="getStaticImage('film/on-site/低角度拍摄jh_3.png')"
|
||
alt="低角度拍摄总结"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 返回按钮 -->
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-20"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="handleBack"
|
||
/>
|
||
</div>
|
||
</template>
|