feat: 中期拍摄完成

src/utils/index.ts

@@ -69,6 +69,10 @@ export const IMAGE_PATHS = {
     BG_CENTER: 'vlog/bg-center',
     TITLE: 'vlog/title',
     PREPARE: 'vlog/制作变焦镜/入口节点/前期准备底板',
+    Midterm: 'vlog/制作变焦镜/入口节点/中期拍摄底板',
+    MidtermEquipment: 'vlog/制作变焦镜/入口节点/按钮-设备准备',
+    MidtermFraming: 'vlog/制作变焦镜/入口节点/按钮-实地取景',
+    MidtermShoot: 'vlog/制作变焦镜/入口节点/按钮-现场拍摄',
     Scripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写',
     SelectArrow: 'vlog/制作变焦镜/入口节点/选中箭头',
     Progress: 'vlog/进度数字/进度',

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

@@ -25,6 +25,7 @@ const handleWorkClick = () => {
   // 处理任务取景按钮点击逻辑
   router.push({ name: 'Work' })
 }
+const highlightShow = ref(true)
 </script>
 
 <template>
@@ -53,19 +54,49 @@ const handleWorkClick = () => {
     >
       <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
     </div>
-    <div class="Shadow">
+    <!-- 中期拍摄底板 -->
+    <div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
+      <ImgButton :image="IMAGE_PATHS.VLOG.Midterm" />
+    </div>
     <!-- 进度百分比 -->
+    <div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
+      <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"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermEquipment" class="ml-[60px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" class="ml-[40px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
+    </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>
     <!-- 引导任务 -->
     <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
 
-    <div class="absolute bottom-0 w-full bright">
+    <div v-if="highlightShow" class="absolute bottom-0 w-full bright">
       <ProgressBar
         :current-step="currentStep"
         @complete="handleComplete"