feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
+import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
+import KnowledgeCard from '@/components/KnowledgeCard/FilmKnowledgeCard.vue'
+
+type Btn = {
+  key: string
+  name: string
+  btnImage: string
+  images: string[]
+  desc: string
+}
+
+const router = useRouter()
+
+const showModal = ref(false)
+
+const showModal2 = ref(false)
+const showModal3 = ref(false)
+const currentItem = ref<Btn>({
+  key: '',
+  name: '',
+  btnImage: '',
+  images: [],
+  desc: ''
+})
+
+const btnList = ref<Btn[]>([
+  {
+    key: '1',
+    name: '引导线构图',
+    btnImage: 'film/shooting/框架构图',
+    desc: '引导线构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
+  },
+  {
+    key: '2',
+    name: '对称构图',
+    btnImage: 'film/shooting/对称构图',
+    desc: '对称构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图']
+  },
+  {
+    key: '3',
+    name: '框架构图',
+    btnImage: 'film/shooting/引导线构图',
+    desc: '框架构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
+  }
+])
+
+const handleModalClose = () => {
+  showModal.value = false
+}
+
+const handleClick = (item: any) => {
+  currentItem.value = item
+  showModal2.value = true
+}
+const currentCompositionKey = computed(() => {
+  const k = currentItem.value.key
+  if (k === '1' || k === '2' || k === '3') return k
+  return '1'
+})
+
+const handleClickA = () => {
+  // 跳转设备准备
+  router.push({ name: 'FilmFilmingLocationA' })
+}
+const handleClickB = () => {
+  // 跳转设备准备
+  router.push({ name: 'FilmFilmingLocationB' })
+}
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="relative w-full h-full">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <div class="shooting-title">
+      <img :src="shootingtitle" alt="" />
+    </div>
+    <div class="shooting-return">
+      <ImgButton image="shooting/返回.png" @click="back" />
+    </div>
+    <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+      <ImgButton image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
+    </div>
+    <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
+      <ImgButton image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
+    </div>
+    <div class="shooting-composition">
+      <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+    </div>
+
+    <!-- 引导步骤 -->
+    <GuideSteps
+      :highlight-selector="'.mybutton'"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      position-offset-y="85%"
+    >
+      <GuideStepsItem> 哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~ </GuideStepsItem>
+    </GuideSteps>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay
+      :visible="showModal"
+      :clickable="false"
+      :customStyle="{
+        backgroundImage: getBackgroundImage('film/shooting/构图指南底图')
+      }"
+      customClass="inset-0 bg-cover bg-center bg-no-repeat"
+      contentClass="relative w-full h-full"
+    >
+      <!-- 返回 -->
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleModalClose"
+      />
+
+      <!-- 构图指南 -->
+      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+
+      <!-- 新手导航视频 -->
+      <ImgButton
+        class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
+        image="shooting/新手导航-视频回顾"
+        @click="showModal3 = true"
+      />
+
+      <div class="absolute top-[30%] right-10">
+        <ImgButton
+          v-for="item in btnList"
+          :key="item.key"
+          :image="item.btnImage"
+          @click="handleClick(item)"
+        />
+      </div>
+
+      <!-- 知识卡片 -->
+      <KnowledgeCard
+        v-if="showModal2 && currentItem.key"
+        :visible="showModal2"
+        :title="currentItem.name"
+        :desc="currentItem.desc"
+        :images="currentItem.images"
+        :compositionKey="currentCompositionKey"
+        @close="showModal2 = false"
+      />
+      <!-- 视频 -->
+      <Overlay :visible="showModal3" :clickable="false">
+        <video :src="videoSrc" controls></video>
+        <!-- 返回 -->
+        <ImgButton
+          class="absolute right-0 top-0 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal3 = false"
+        />
+      </Overlay>
+    </Overlay>
+  </div>
+</template>
+<style lang="less" scoped>
+.shooting-title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shooting-return {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.shooting-left {
+  position: absolute;
+  left: 16%;
+  top: 50%;
+}
+
+.shooting-right {
+  position: absolute;
+  right: 16%;
+  top: 50%;
+}
+
+.shooting-composition {
+  position: absolute;
+  left: 2rem;
+  bottom: 1rem;
+}
+</style>