feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,222 @@
+<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/KnowledgeCard.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: 'shooting/居中构图底板',
+    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['shooting/居中构图1', 'shooting/居中构图2']
+  },
+  {
+    key: '2',
+    name: '三分法构图',
+    btnImage: 'shooting/三分法构图底板',
+    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['shooting/图片待定1', 'shooting/图片待定2']
+  },
+  {
+    key: '3',
+    name: '对角线构图',
+    btnImage: 'shooting/对角线构图底板',
+    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
+  }
+])
+
+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: 'VlogFilmingLocationA' })
+}
+const handleClickB = () => {
+  // 跳转设备准备
+  router.push({ name: 'VlogFilmingLocationB' })
+}
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+</script>
+<template>
+  <div class="shooting-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    >
+      <div class="shooting-title">
+        <img :src="shootingtitle" alt="" />
+      </div>
+      <div class="shooting-return">
+        <ImgButton image="shooting/返回.png" @click="back" />
+      </div>
+      <div class="shooting-left">
+        <ImgButton image="shooting/按钮-取景地A.png" @click="handleClickA" />
+      </div>
+      <div class="shooting-right">
+        <ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
+      </div>
+      <div class="shooting-composition">
+        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+      </div>
+    </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('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-bg {
+  position: absolute;
+
+  .shooting-title {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-return {
+    position: absolute;
+    right: -90%;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-left {
+    position: absolute;
+    left: 16%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-right {
+    position: absolute;
+    right: -55%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shooting-composition {
+    position: absolute;
+    left: 24px;
+    bottom: -90%;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>