super_video/src/views/interview/script-writing/sample.vue

<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>