feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,109 @@
+<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>