feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const handleClose = () => {
+  router.back()
+}
+
+const goTimeLapse = () => {
+  router.push({ name: 'FilmOnsiteTimeLapse' })
+}
+
+const goSlider = () => {
+  router.push({ name: 'FilmOnsiteSlider' })
+}
+
+const goSlowShutterDay = () => {
+  router.push({ name: 'FilmOnsiteSlowShutterDay' })
+}
+
+const goSlowShutterNight = () => {
+  router.push({ name: 'FilmOnsiteSlowShutterNight' })
+}
+
+const goLowAngle = () => {
+  router.push({ name: 'FilmOnsiteLowAngle' })
+}
+
+const goRandom = () => {
+  router.push({ name: 'FilmOnsiteRandom' })
+}
+</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>
+
+    <!-- 内容卡片 + 按钮 -->
+    <div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
+      <div
+        class="max-w-screen-2xl w-full bg-black/35 rounded-3xl border border-white/15 p-16 space-y-10 text-white pointer-events-auto"
+      >
+        <div class="flex items-baseline justify-between gap-6">
+          <h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
+          <span class="text-3xl opacity-80">从不同维度练习你的镜头语言</span>
+        </div>
+        <p class="text-2xl leading-8 opacity-90">
+          选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
+        </p>
+
+        <div class="grid grid-cols-3 gap-10">
+          <button type="button" class="onsite-btn" @click="goTimeLapse">
+            <span class="onsite-btn-title">延时拍摄</span>
+            <span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlider">
+            <span class="onsite-btn-title">滑轨拍摄</span>
+            <span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterDay">
+            <span class="onsite-btn-title">慢门拍摄 · 白天</span>
+            <span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSlowShutterNight">
+            <span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
+            <span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goLowAngle">
+            <span class="onsite-btn-title">低角度拍摄</span>
+            <span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goRandom">
+            <span class="onsite-btn-title">创作随机性</span>
+            <span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.onsite-btn {
+  @apply relative flex flex-col items-start backdrop-blur-md rounded-2xl px-10 py-8 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
+}
+
+.onsite-btn-title {
+  @apply text-4xl font-bold mb-4;
+}
+
+.onsite-btn-desc {
+  @apply text-2xl leading-9 opacity-80;
+}
+</style>
@@ -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>
@@ -0,0 +1,50 @@
+<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'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 创作随机性视频 URL（暂时用其他视频代替）
+const randomVideoUrl = getPublicPath('video/on-site/dygmk_czsjx_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center 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 bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="randomVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
@@ -0,0 +1,93 @@
+<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()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 滑轨拍摄视频 URL
+const sliderVideoUrl = getPublicPath('video/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">
+    <!-- 背景 -->
+    <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 bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <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>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
@@ -0,0 +1,110 @@
+<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: '否，变化存在，但不容易被完整感知' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: 'film/on-site/白天慢门jh_1.png',
+    explanation: '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。'
+  },
+  {
+    id: 2,
+    title: '拍摄方式选择',
+    description:
+      '在光照较强的环境中，如果希望拉长画面中的运动轨迹，拍出视频中的效果，以下哪种方式更合适？',
+    options: [
+      { id: 'a', label: '提高 ISO' },
+      { id: 'b', label: '加装 ND 镜片，降低快门速度' },
+      { id: 'c', label: '使用连拍模式' }
+    ],
+    correctOptionId: 'b',
+    mediaSrc: getPublicPath('video/on-site/xianchangpaishe_baitianmanmen.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-2/6 text-2xl leading-10 opacity-90 space-y-3">
+            <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
+            <p>
+              <span>通过ND 镜片控制进光量，</span>
+              <span>可以在白天环境下安全降低快门速度，</span>
+              <span>为慢门拍摄创造条件。</span>
+            </p>
+            <p>
+              <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]"
+          >
+            <img
+              class="w-full h-full object-cover"
+              :src="getStaticImage('film/on-site/白天慢门jh_3.png')"
+              alt="ND镜片"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
@@ -0,0 +1,50 @@
+<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'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 慢门拍摄夜晚视频 URL（暂时用其他视频代替）
+const slowShutterNightVideoUrl = getPublicPath('video/on-site/dygmk_mmps_batch.mp4')
+
+// 视频播放状态
+const videoPlaying = ref(false)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center 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 bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="slowShutterNightVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>
@@ -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>