refactor: 删除不再使用的图像文件，更新引导组件以支持垂直偏移功能

src/views/vlog/video/index.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { GuideSteps } from '@/components/Guide'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '@/assets/video/pzzx.mp4'
+import third from '@/assets/video/gt.mp4'
+import fourth from '@/assets/video/ch.mp4'
+
+const router = useRouter()
+const route = useRoute()
+
+const videoRef = ref()
+const status = ref(false)
+
+//引导步骤
+const steps = ref([
+  {
+    id: 'step1',
+    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
+  }
+])
+
+// 视频列表
+const videoList = [second, third, fourth]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+  } else {
+    status.value = true
+    steps.value = [
+      {
+        id: 'step1',
+        content: '已完成专业剖析,即可查看脚本'
+      }
+    ]
+    return
+  }
+  nextTick(() => {
+    if (!videoRef.value) return
+    videoRef.value.muted = false
+    videoRef.value.volume = 1
+    videoRef.value.play()
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const image = computed(() => route.query.image as string)
+const key = computed(() => route.query.key as string)
+
+const handleClick = () => {
+  if (!videoRef.value) return
+  videoRef.value.muted = false
+  videoRef.value.volume = 1
+}
+
+const handlePlay = () => {
+  if (!videoRef.value) return
+  videoRef.value.muted = false
+  videoRef.value.volume = 1
+}
+
+const handleComplete = () => {
+  if (key.value === 'profession') {
+    router.push({
+      name: 'Work',
+      query: {
+        key: 'work'
+      }
+    })
+  } else {
+    router.push({
+      name: 'Vlog',
+      query: {
+        key: 'video'
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  if (key.value === 'idea') {
+    status.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+    <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+    <div v-if="key === 'vlog'" :src="image">
+      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    </div>
+    <video
+      ref="videoRef"
+      v-else-if="key === 'case'"
+      src="@/assets/video/xyz.mp4"
+      controls
+      @play="handlePlay"
+    ></video>
+    <!-- 专业剖析 -->
+    <video
+      ref="videoRef"
+      v-else-if="key === 'profession'"
+      :src="currentVideo"
+      controls
+      @play="handlePlay"
+      @ended="handleVideoChange"
+    ></video>
+    <div v-else-if="key === 'idea'" :src="image">
+      <img :src="getStaticImage('work/思路提点全屏')" alt="" />
+    </div>
+  </div>
+
+  <!-- 引导与高亮 -->
+  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>