feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+
+const router = useRouter()
+
+const handleClose = () => {
+  router.back()
+}
+
+// 剪辑介绍视频 URL（暂时用其他视频代替）
+const introVideoUrl = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
+
+// 视频播放状态
+const videoEnded = ref(true)
+const videoPlaying = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+}
+
+const goStart = () => {
+  router.push({ name: 'FilmEditingStart' })
+}
+
+const goRhythm = () => {
+  router.push({ name: 'FilmEditingRhythm' })
+}
+
+const goSoundTransition = () => {
+  router.push({ name: 'FilmEditingSoundTransition' })
+}
+
+const goCut = () => {
+  router.push({ name: 'FilmEditingCut' })
+}
+
+const goAssociation = () => {
+  router.push({ name: 'FilmEditingAssociation' })
+}
+
+const goContinuity = () => {
+  router.push({ name: 'FilmEditingContinuity' })
+}
+</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 v-if="!videoEnded" class="absolute inset-0 flex items-center justify-center">
+      <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="introVideoUrl"
+          v-model="videoPlaying"
+          :muted="false"
+          :volume="1"
+          :controls="true"
+          :hideNativeControls="true"
+          :autoplay="true"
+          :show-center-play-icon="true"
+          @ended="handleVideoEnded"
+        />
+      </div>
+    </div>
+
+    <!-- 内容卡片 + 按钮 -->
+    <div
+      v-if="videoEnded"
+      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="goStart">
+            <span class="onsite-btn-title">剪辑从哪里开始</span>
+            <span class="onsite-btn-desc">通过不同的剪辑起点，营造不同的叙事效果。</span>
+          </button>
+          <button type="button" class="onsite-btn" @click="goRhythm">
+            <span class="onsite-btn-title">节奏型剪辑</span>
+            <span class="onsite-btn-desc">通过剪辑节奏控制画面节奏，营造紧张感或舒缓感。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goSoundTransition">
+            <span class="onsite-btn-title">声音转场</span>
+            <span class="onsite-btn-desc">利用相似声音连接不同场景，实现自然的转场效果。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goCut">
+            <span class="onsite-btn-title">快切</span>
+            <span class="onsite-btn-desc">通过精准的切块技巧，提升画面的节奏感和连贯性。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goAssociation">
+            <span class="onsite-btn-title">关联剪辑</span>
+            <span class="onsite-btn-desc">通过画面元素的关联性，建立场景之间的逻辑联系。</span>
+          </button>
+
+          <button type="button" class="onsite-btn" @click="goContinuity">
+            <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>