feat: 对接各个视频数据

src/views/film/midterm-shooting/on-site/time-lapse.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+// 延时拍摄视频 URL（占位，后续可替换）
+const timeLapseVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+
+const handleBack = () => {
+  router.back()
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '观察判断',
+    description: '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
+    options: [
+      { id: 'a', label: '建筑的外形结构' },
+      { id: 'b', label: '天空的颜色' },
+      { id: 'c', label: '时间的变化' },
+      { id: 'd', label: '画面的清晰度' }
+    ],
+    correctOptionId: 'c',
+    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: 'c',
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
+  }
+])
+
+const showObserveStep = ref(false)
+const videoPlaying = ref(false) // 视频播放状态
+
+// 答题完成，进入交互三（视频）
+const handleQuestionsComplete = () => {
+  showObserveStep.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="!showObserveStep"
+      :questions="questions"
+      @complete="handleQuestionsComplete"
+    />
+    <!-- 交互三：观察型 - 播放视频 -->
+    <div
+      v-if="showObserveStep"
+      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-2/6 text-2xl leading-10 opacity-90 space-y-3">
+            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
+            <p>在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。</p>
+
+            <p><span>延时拍摄的主要目的</span>，<span>是交代时间流逝与环境状态</span>。</p>
+            <p>
+              <span>这里的拍摄对象是江边的建筑群与天空</span
+              >。<span>通过固定机位的连续拍摄</span>，<span>将原本需要较长时间才能观察到的</span
+              ><span>天空变化和光影移动</span>，<span>压缩到一个较短的镜头中呈现</span>。
+            </p>
+            <p>
+              <span>这种处理方式</span
+              >，<span>非常适合放置在视频片头阶段</span>，<span>用于快速建立时间感与空间环境</span>，<span>而不会占用过多时长</span>。
+            </p>
+          </div>
+          <div
+            class="flex-1 rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]"
+          >
+            <Video
+              class="w-full h-full"
+              :src="timeLapseVideoUrl"
+              v-model="videoPlaying"
+              :muted="false"
+              :volume="1"
+              :controls="true"
+              :hideNativeControls="true"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>