feat: 增加了脚本编写和后期剪辑

src/router/index.ts

@@ -173,6 +173,39 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '脚本准备详情'
     }
+  },
+  // 后期剪辑
+  {
+    path: '/afterditing',
+    name: 'afterditing',
+    component: () => import('@/views/afterditing/index.vue'),
+    meta: {
+      title: '后期剪辑'
+    }
+  },
+  {
+    path: '/editing',
+    name: 'editing',
+    component: () => import('@/views/afterditing/editing.vue'),
+    meta: {
+      title: '剪辑'
+    }
+  },
+  {
+    path: '/adjustmentColor',
+    name: 'adjustmentColor',
+    component: () => import('@/views/afterditing/adjustmentColor.vue'),
+    meta: {
+      title: '调色'
+    }
+  },
+  {
+    path: '/script-writing',
+    name: 'script-writing',
+    component: () => import('@/views/prepare/script-writing/index.vue'),
+    meta: {
+      title: '脚本撰写'
+    }
   }
 ]
 

src/utils/index.ts

@@ -73,8 +73,11 @@ export const IMAGE_PATHS = {
     MidtermEquipment: 'vlog/制作变焦镜/入口节点/按钮-设备准备',
     MidtermFraming: 'vlog/制作变焦镜/入口节点/按钮-实地取景',
     MidtermShoot: 'vlog/制作变焦镜/入口节点/按钮-现场拍摄',
-    Scripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写',
+    Scripting: 'vlog/制作变焦镜/入口节点/按钮-脚本撰写',
+    SelectedScripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写',
     SelectArrow: 'vlog/制作变焦镜/入口节点/选中箭头',
+    Storyboard: 'vlog/制作变焦镜/入口节点/按钮-分镜制作',
+    SelectedStoryboard: 'vlog/制作变焦镜/入口节点/按钮选中-分镜制作',
     Progress: 'vlog/进度数字/进度',
     Zero: 'vlog/进度数字/0',
     One: 'vlog/进度数字/1',
@@ -90,7 +93,16 @@ export const IMAGE_PATHS = {
     TASK_CAMERA: 'vlog/task-camera',
     TASK_BTN_OK: 'vlog/task-btn-ok',
     TASK_BTN: 'vlog/task-btn',
-    TASK_PERSON: 'vlog/person'
+    TASK_PERSON: 'vlog/person',
+    SCRIPTING: 'vlog/制作变焦镜/脚本撰写占位图',
+    SCRIPTINGTITLE: 'vlog/制作变焦镜/左边导航栏/标题-脚本撰写',
+    FORMATLIANG: 'vlog/制作变焦镜/左边导航栏/撰写格式-亮',
+    FORMATAN: 'vlog/制作变焦镜/左边导航栏/撰写格式-暗',
+    SAMPLELANG: 'vlog/制作变焦镜/左边导航栏/样例展示-亮',
+    SAMPLEAN: 'vlog/制作变焦镜/左边导航栏/样例展示-暗',
+    AI: 'vlog/制作变焦镜/左边导航栏/ai分镜工具',
+    BIAOGEBG: 'vlog/制作变焦镜/表格背景',
+    JIAOBENQIETU: 'vlog/脚本切图/我的志愿者手记拍摄脚本'
   },
   //Work
   WORK: {
@@ -193,5 +205,11 @@ export const IMAGE_PATHS = {
   },
   FILMINGLOCATIONA: {
     BG: 'shooting/取景地模糊背景'
+  },
+  // 后期剪辑
+  AFTEREDITING: {
+    MIDTERM: 'afterditing/后期剪辑底板',
+    EDITING: 'afterditing/按钮-剪辑',
+    ADJUSTMENTCOLOR: 'afterditing/按钮-调色'
   }
 } as const

src/views/afterditing/adjustmentColor.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+// import { GuideSteps } from '@/components/Guide'
+import { IMAGE_PATHS } from '@/utils'
+const router = useRouter()
+
+// 导入视频文件
+import videoadjustmentColor from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_调色.mp4'
+const videoList = [videoadjustmentColor]
+
+const videoRef = ref<HTMLVideoElement>()
+const currentVideoIndex = ref(0)
+
+onMounted(() => {
+  // 确保视频元素加载并自动播放
+  if (videoRef.value) {
+    videoRef.value.src = videoList[currentVideoIndex.value]
+    videoRef.value.load()
+
+    // 尝试自动播放
+    const playPromise = videoRef.value.play()
+
+    if (playPromise !== undefined) {
+      playPromise.catch(error => {
+        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    // 监听视频结束事件
+    videoRef.value.addEventListener('ended', playNextVideo)
+  }
+})
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    if (videoRef.value) {
+      videoRef.value.src = videoList[currentVideoIndex.value]
+      videoRef.value.load()
+
+      // 自动播放下一个视频
+      const playPromise = videoRef.value.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.log('自动播放被阻止:', error)
+        })
+      }
+    }
+  }
+}
+
+// 监听当前视频索引变化
+watch(currentVideoIndex, newIndex => {
+  if (videoRef.value) {
+    videoRef.value.src = videoList[newIndex]
+    videoRef.value.load()
+  }
+})
+
+const handleClose = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div>
+    <!--使用动态绑定和ref-->
+    <video
+      ref="videoRef"
+      :src="videoList[currentVideoIndex]"
+      type="video/mp4"
+      controls
+      preload="auto"
+      class="video-player"
+      autoplay
+    >
+      <p>你的浏览器不支持video标签.</p>
+    </video>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>

src/views/afterditing/editing.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+// import { GuideSteps } from '@/components/Guide'
+import { IMAGE_PATHS } from '@/utils'
+const router = useRouter()
+
+// 导入视频文件
+import videoBasic from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_基础剪辑操作.mp4'
+import videoSoundeffect from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_音效处理.mp4'
+import videoPackaging from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_包装（AI+字幕生成与样式调整）.mp4'
+import videoCopyright from '@/assets/images/afterditing/Vlog模块_制作变焦镜_后期剪辑_版权伦理规范.mp4'
+const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
+
+const videoRef = ref<HTMLVideoElement>()
+const currentVideoIndex = ref(0)
+
+onMounted(() => {
+  // 确保视频元素加载并自动播放
+  if (videoRef.value) {
+    videoRef.value.src = videoList[currentVideoIndex.value]
+    videoRef.value.load()
+
+    // 尝试自动播放
+    const playPromise = videoRef.value.play()
+
+    if (playPromise !== undefined) {
+      playPromise.catch(error => {
+        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    // 监听视频结束事件
+    videoRef.value.addEventListener('ended', playNextVideo)
+  }
+})
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    if (videoRef.value) {
+      videoRef.value.src = videoList[currentVideoIndex.value]
+      videoRef.value.load()
+
+      // 自动播放下一个视频
+      const playPromise = videoRef.value.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.log('自动播放被阻止:', error)
+        })
+      }
+    }
+  }
+}
+
+// 监听当前视频索引变化
+watch(currentVideoIndex, newIndex => {
+  if (videoRef.value) {
+    videoRef.value.src = videoList[newIndex]
+    videoRef.value.load()
+  }
+})
+
+const handleClose = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div>
+    <!--使用动态绑定和ref-->
+    <video
+      ref="videoRef"
+      :src="videoList[currentVideoIndex]"
+      type="video/mp4"
+      controls
+      preload="auto"
+      class="video-player"
+      autoplay
+    ></video>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>

src/views/afterditing/index.vue

@@ -0,0 +1,138 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const currentStep = ref(1)
+const highlightShow = ref(true)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  router.push({ name: 'Work' })
+}
+
+const navigateTo = (routeName: string) => {
+  console.log('任务取景按钮点击')
+  router.push({ name: routeName })
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
+    </div>
+
+    <!-- 中期拍摄底板 -->
+    <div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
+      <ImgButton :image="IMAGE_PATHS.AFTEREDITING.MIDTERM" />
+    </div>
+
+    <!-- 进度百分比 -->
+    <div
+      v-if="highlightShow"
+      class="absolute left-1/2 top-[12%] -translate-x-1/2 pointer-events-none"
+    >
+      <div class="flex">
+        <ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Four" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
+      </div>
+    </div>
+
+    <!-- 后期准备按钮文字 -->
+    <div
+      v-if="highlightShow"
+      class="absolute left-[21%] top-[9%] -translate-x-1/2"
+      style="z-index: 998; margin-top: 120px"
+    >
+      <ImgButton
+        :image="IMAGE_PATHS.AFTEREDITING.EDITING"
+        @click="navigateTo('editing')"
+        class="ml-[60px]"
+      />
+      <ImgButton
+        :image="IMAGE_PATHS.AFTEREDITING.ADJUSTMENTCOLOR"
+        @click="navigateTo('adjustmentColor')"
+        class="ml-[40px]"
+      />
+    </div>
+
+    <!-- 遮罩层 -->
+    <div class="Shadow" v-if="highlightShow">
+      <div>
+        <img src="" alt="" />
+      </div>
+      <img src="@/assets/images/midterm/引导遮罩.png" alt="" />
+    </div>
+
+    <!-- 叉 -->
+    <div
+      v-if="highlightShow"
+      class="absolute right-0 top-0"
+      style="z-index: 998; cursor: pointer"
+      @click="highlightShow = false"
+    >
+      <img src="@/assets/images/midterm/叉.png" alt="" />
+    </div>
+
+    <div v-if="highlightShow" class="absolute bottom-0 w-full bright">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.Shadow {
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    z-index: 997 !important;
+    position: absolute;
+  }
+}
+
+.bright {
+  z-index: 999 !important;
+}
+</style>

src/views/midterm-shooting/equipment/index.vue

@@ -12,7 +12,9 @@
             <img src="@/assets/images/equipment/选中按钮.png" alt="" />
             <img src="@/assets/images/equipment/手机-亮.png" alt="" />
           </span>
-          <span>手机支架</span>
+          <div>
+            <img src="@/assets/images/equipment/设备列表合图.png" alt="" />
+          </div>
         </div>
         <!-- 设备准备按钮 -->
         <div class="equipment-bt">
@@ -67,6 +69,9 @@
           </div>
         </div>
       </div>
+      <div class="shooting-return">
+        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+      </div>
 
       <!-- 引导步骤 -->
       <GuideSteps
@@ -88,6 +93,14 @@
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
 const steps = [
   { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
   { id: 'step2', content: '这是主要内容区域的边框' }
@@ -206,6 +219,7 @@ const currentHighlight = computed(() =>
     top: 0;
     left: 0;
     padding-top: 220px;
+    padding-left: 20px;
 
     span {
       display: flex;

src/views/midterm-shooting/shooting/filmingLocation-b/b-1.vue

@@ -2,14 +2,15 @@
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const handleClickb2 = () => {
+
-  // 跳转设备准备
-  router.push({ name: 'b-2' })
-}
 const back = () => {
   // 跳转设备准备
   router.back()
 }
+const handleClickb2 = () => {
+  // 跳转设备准备
+  router.push({ name: 'b-2' })
+}
 </script>
 <template>
   <div>

src/views/midterm-shooting/shooting/filmingLocation-b/b-3.vue

@@ -10,10 +10,14 @@ const back = () => {
   // 跳转设备准备
   router.back()
 }
+
+const tiaohouqi = () => {
+  router.push('afterditing')
+}
 </script>
 <template>
   <div>
-    <img src="@/assets/images/shooting/取景地b合图3.png" alt="" />
+    <img src="@/assets/images/shooting/取景地b合图3.png" alt="" @click="tiaohouqi" />
   </div>
   <div class="shooting-return">
     <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />

src/views/prepare/index.vue

@@ -48,6 +48,18 @@ const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
   stepIndex.value = index
 }
 const highlightShow = ref(true)
+// const StoryboardButton = ref()
+const SelectArrowtext = ref('脚本撰写')
+const ScriptingClick = (routeName: string) => {
+  SelectArrowtext.value = '脚本撰写'
+  router.push({ name: routeName })
+}
+const StoryboardClick = (routeName: string) => {
+  SelectArrowtext.value = '分镜制作'
+  router.push({ name: routeName })
+  // IMAGE_PATHS.VLOG.Storyboard
+  // IMAGE_PATHS.VLOG.SelectedStoryboard
+}
 </script>
 
 <template>
@@ -82,12 +94,37 @@ const highlightShow = ref(true)
     </div>
     <!-- 脚本撰写按钮 -->
     <div v-if="highlightShow" class="absolute left-[13%] top-1/3">
-      <ImgButton :image="IMAGE_PATHS.VLOG.Scripting" />
+      <ImgButton
+        :image="
+          SelectArrowtext == '脚本撰写'
+            ? IMAGE_PATHS.VLOG.SelectedScripting
+            : IMAGE_PATHS.VLOG.Scripting
+        "
+        @click="ScriptingClick('script-writing')"
+      />
     </div>
+
     <!-- 选中箭头 -->
-    <div v-if="highlightShow" class="absolute left-[13%] top-[37%] -translate-x-1/2">
+    <div
+      v-if="highlightShow"
+      class="absolute left-[13%] top-[37%] -translate-x-1/2"
+      :class="SelectArrowtext == '脚本撰写' ? 'SelectArrow-Scripting' : 'SelectArrow-Storyboard'"
+    >
       <ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
     </div>
+
+    <!-- 分镜制作 -->
+    <div v-if="highlightShow" class="absolute left-[20%] top-[47%] -translate-x-1/2">
+      <ImgButton
+        :image="
+          SelectArrowtext == '分镜制作'
+            ? IMAGE_PATHS.VLOG.SelectedStoryboard
+            : IMAGE_PATHS.VLOG.Storyboard
+        "
+        @click="StoryboardClick"
+      />
+    </div>
+
     <!-- 进度百分比 -->
     <div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
       <div class="flex">
@@ -137,4 +174,16 @@ const highlightShow = ref(true)
 .dragon-character {
   top: 80% !important;
 }
+
+.SelectArrow-Scripting {
+  position: absolute;
+  left: 13%;
+  top: 37%;
+}
+
+.SelectArrow-Storyboard {
+  position: absolute;
+  left: 11%;
+  top: 51%;
+}
 </style>

src/views/prepare/script-writing/index.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import sample from './sample.vue'
+import writing from './writing.vue'
+const router = useRouter()
+const writingtext = ref('撰写格式')
+const hiddenbar = ref(false)
+const formatClick = () => {
+  writingtext.value = '撰写格式'
+}
+const sampleanClick = () => {
+  writingtext.value = '样例展示'
+  // router.push({ name: 'sample' })
+}
+
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+</script>
+<template>
+  <div class="writing-bar">
+    <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
+    <div class="writing-item" :hidden="hiddenbar">
+      <ImgButton
+        :image="
+          writingtext == '撰写格式' ? IMAGE_PATHS.VLOG.FORMATLIANG : IMAGE_PATHS.VLOG.FORMATAN
+        "
+        @click="formatClick"
+      />
+      <ImgButton
+        :image="writingtext == '样例展示' ? IMAGE_PATHS.VLOG.SAMPLELANG : IMAGE_PATHS.VLOG.SAMPLEAN"
+        @click="sampleanClick"
+      />
+      <img
+        class="writing-ai"
+        src="@/assets/images/vlog/制作变焦镜/左边导航栏/ai分镜工具.png"
+        alt=""
+      />
+    </div>
+    <!-- 设备准备按钮 -->
+    <div class="writing-bt">
+      <ImgButton :image="IMAGE_PATHS.VLOG.SCRIPTINGTITLE" />
+    </div>
+    <div :class="hiddenbar ? 'writing-unfold1' : 'writing-unfold2'" @click="hiddenbarclick()">
+      <img
+        :src="
+          hiddenbar
+            ? '/src/assets/images/equipment/按钮-展开.png'
+            : '/src/assets/images/equipment/按钮-收缩.png'
+        "
+        alt=""
+      />
+    </div>
+  </div>
+
+  <writing v-if="writingtext == '撰写格式'"></writing>
+  <sample v-else-if="writingtext == '样例展示'"></sample>
+</template>
+<style lang="less">
+.writing-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .writing-bt {
+    position: absolute;
+    top: 0;
+    left: -34px;
+    width: 476px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .writing-unfold1 {
+    position: absolute;
+    top: 490px;
+    left: -41px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .writing-unfold2 {
+    position: absolute;
+    top: 490px;
+    left: 268px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .writing-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+    padding-left: 20px;
+
+    span {
+      display: flex;
+    }
+  }
+
+  .guide-ui {
+    top: 80% !important;
+  }
+
+  .dragon-character {
+    top: 80% !important;
+  }
+
+  .writing-ai {
+    position: absolute;
+    bottom: -600px;
+    left: 10px;
+    // width: 100%;
+  }
+}
+</style>

src/views/prepare/script-writing/sample.vue

@@ -0,0 +1,159 @@
+<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 v-if="showDoubao">
+        <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
+        :steps="steps"
+        :highlight-selector="currentHighlight"
+        :highlight-padding="12"
+        :highlight-radius="20"
+        @step-change="handleStepChange"
+        position-offset-y="85%"
+        hidden:false
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/components/引导/ai脚本工具引导.png" alt="" />
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const showDoubao = ref(false)
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(1)
+const back = () => {
+  router.back()
+}
+const deletebiaoge = () => {
+  showDoubao.value = true
+}
+
+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 = () => {
+  router.push('midterm')
+}
+</script>
+<style lang="less">
+.writing-index {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.doubao .doubao-img {
+  width: 100%;
+  height: 100%;
+}
+
+.biaoge-x {
+  position: absolute;
+  top: -15px;
+  right: 5px;
+  width: 70px;
+  cursor: pointer;
+}
+
+.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>

src/views/prepare/script-writing/writing.vue

@@ -0,0 +1,101 @@
+<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.SCRIPTING) }"
+    >
+      <div class="geshi-title">
+        <img src="@/assets/images/vlog/标题栏-中间.png" alt="" class="titledibu" />
+        <img
+          src="@/assets/images/vlog/制作变焦镜/文字标题/脚本的概念和基本要素.png"
+          alt=""
+          class="titletext"
+        />
+      </div>
+      <div class="shooting-return">
+        <img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
+      </div>
+      <!-- 引导步骤 -->
+      <!-- <GuideSteps :steps="steps" :highlight-selector="currentHighlight" :highlight-padding="12"
+                :highlight-radius="20" @step-change="handleStepChange" position-offset-y="85%" hidden:false>
+                <GuideStepsItem>
+                    <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+                </GuideStepsItem>
+            </GuideSteps> -->
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { ref, computed } from 'vue'
+import { ImgButton } from '@/components/Button'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const back = () => {
+  // 跳转设备准备
+  router.back()
+}
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+
+const stepIndex = ref(0)
+const hiddenbar = ref(false)
+const writingtext = ref('撰写格式')
+const formatClick = () => {
+  writingtext.value = '撰写格式'
+}
+const sampleanClick = () => {
+  writingtext.value = '样例展示'
+  router.push({ name: 'sample' })
+}
+
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+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'
+)
+</script>
+<style lang="less">
+.writing-index {
+  width: 100%;
+  height: 100%;
+}
+
+.geshi-title {
+  .titledibu {
+    position: absolute;
+    top: 17px;
+    left: 30%;
+  }
+
+  .titletext {
+    position: absolute;
+    top: 30px;
+    left: 45%;
+  }
+}
+
+.shooting-return {
+  position: absolute;
+  right: -90%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>