feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,180 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+import { useInterviewStore } from '@/stores'
+const router = useRouter()
+const showDoubao = ref(false)
+const interview = useInterviewStore()
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(1)
+const back = () => {
+  router.back()
+}
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+const clickdoubao = () => {
+  interview.setInterviewUnlockProgress(2)
+  router.push({
+    name: 'Interview'
+  })
+}
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value }),
+    onClose: () => {
+      showDoubao.value = true
+    }
+  })
+}
+
+const { scale, offsetX, offsetY } = useScale()
+onMounted(() => {
+  openImages([getStaticImage('vlog/脚本切图/我的志愿者手记拍摄脚本.png')])
+})
+</script>
+<template>
+  <div class="writing-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat writing-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BIAOGEBG) }"
+    >
+      <div>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="doubao" @click="clickdoubao">
+          <img
+            src="@/assets/images/vlog/制作变焦镜/ai脚本视频占位图.png"
+            alt=""
+            class="doubao-img"
+          />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div>
+
+      <!-- <div v-else>
+        <div class="writing-title">
+          <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+          <img
+            src="@/assets/images/vlog/制作变焦镜/文字标题/《我的志愿者手记》分镜头脚本.png"
+            alt=""
+            class="titletext"
+          />
+        </div>
+        <div class="biaogehome" @click="deletebiaoge()">
+          <img
+            src="@/assets/images/vlog/脚本切图/我的志愿者手记拍摄脚本.png"
+            alt=""
+            class="biaoge-img"
+          />
+          <img src="@/assets/images/midterm/叉.png" alt="" class="biaoge-x" />
+        </div>
+        <div class="shooting-return">
+          <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+        </div>
+      </div> -->
+
+      <!-- 引导步骤 -->
+      <GuideSteps
+        v-if="showDoubao"
+        :steps="steps"
+        :highlight-selector="currentHighlight"
+        :highlight-padding="12"
+        :highlight-radius="20"
+        @step-change="handleStepChange"
+        position-offset-y="85%"
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/components/引导/ai脚本工具引导.png" alt="" />
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 50%;
+  height: 50%;
+}
+
+.doubao .doubao-img {
+  width: 100%;
+  height: 100%;
+}
+
+.biaoge-x {
+  position: absolute;
+  top: -20px;
+  right: 0px;
+  width: 70px;
+  cursor: pointer;
+  z-index: 9999999;
+}
+
+.writing-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 40%;
+  }
+}
+
+.biaogehome {
+  position: absolute;
+  top: 165px;
+  left: 5%;
+  width: 94%;
+}
+
+.biaogehome .biaoge-img {
+  height: 896px !important;
+  width: 1800px;
+  display: block;
+}
+</style>