fix: 进度条高亮部分高亮

src/components/ProgressBar/ProgressBar.vue

@@ -24,8 +24,12 @@
           :class="getStepStatus(index)"
         >
           <span class="step-text">
-            <img :src="step.name" alt="" />
-            <img :src="step.icon" alt="" />
+            <img
+              :src="
+                props.currentPage === index ? steps[index].nameSelect : steps[index].nameselectNot
+              "
+              alt=""
+            />
             <img class="step-ellipsis" src="@/assets/images/midterm/进度装饰（未完成.png" alt="" />
           </span>
         </div>
@@ -67,7 +71,11 @@ interface Props {
   /** 当前步骤索引 (0-3) */
   currentStep?: number
 }
-
+//
+interface Props {
+  /** 当前步骤索引 (0-3) */
+  currentPage?: number
+}
 // 定义事件
 interface Emits {
   /** 点击完成按钮时触发 */
@@ -75,7 +83,8 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  currentStep: 0
+  currentStep: 0,
+  currentPage: 0
 })
 
 const emit = defineEmits<Emits>()
@@ -93,16 +102,16 @@ const handleComplete = () => {
 // 步骤配置
 const steps = [
   {
-    name: '/src/assets/images/midterm/前期准备.png',
-    icon: '/src/assets/images/midterm/准备图标.png'
+    nameSelect: '/src/assets/images/midterm/前期准备-选中.png',
+    nameselectNot: '/src/assets/images/midterm/前期准备-未选中.png'
   },
   {
-    name: '/src/assets/images/midterm/中期拍摄.png',
-    icon: '/src/assets/images/midterm/拍摄图标.png'
+    nameSelect: '/src/assets/images/midterm/中期拍摄-选中.png',
+    nameselectNot: '/src/assets/images/midterm/中期拍摄-未选中.png'
   },
   {
-    name: '/src/assets/images/midterm/后期剪辑.png',
-    icon: '/src/assets/images/midterm/剪辑图标.png'
+    nameSelect: '/src/assets/images/midterm/后期剪辑-选中.png',
+    nameselectNot: '/src/assets/images/midterm/后期剪辑-未选中.png'
   }
 ]
 

src/views/afterditing/index.vue

@@ -7,6 +7,7 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const currentStep = ref(1)
+const currentPage = ref(2)
 const highlightShow = ref(true)
 
 const handleComplete = () => {
@@ -92,7 +93,7 @@ const navigateTo = (routeName: string) => {
     </div>
 
     <!-- 遮罩层 -->
-    <div class="Shadow" v-if="highlightShow">
+    <div class="Shadow">
       <div>
         <img src="" alt="" />
       </div>
@@ -109,11 +110,12 @@ const navigateTo = (routeName: string) => {
       <img src="@/assets/images/midterm/叉.png" alt="" />
     </div>
 
-    <div v-if="highlightShow" class="absolute bottom-0 w-full bright">
+    <div class="absolute bottom-0 w-full bright">
       <ProgressBar
         :current-step="currentStep"
         @complete="handleComplete"
         @step-change="handleStepChange"
+        :current-page="currentPage"
       />
     </div>
   </div>

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

@@ -34,7 +34,7 @@ const shooting = () => {
   // 跳转实地取景
   router.push({ name: 'shooting' })
 }
-
+const currentPage = ref(1)
 const highlightShow = ref(true)
 </script>
 
@@ -113,9 +113,10 @@ const highlightShow = ref(true)
     <!-- 引导任务 -->
     <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
 
-    <div v-if="highlightShow" class="absolute bottom-0 w-full bright">
+    <div class="absolute bottom-0 w-full bright">
       <ProgressBar
         :current-step="currentStep"
+        :current-page="currentPage"
         @complete="handleComplete"
         @step-change="handleStepChange"
       />

src/views/prepare/index.vue

@@ -60,6 +60,7 @@ const StoryboardClick = (routeName: string) => {
   // IMAGE_PATHS.VLOG.Storyboard
   // IMAGE_PATHS.VLOG.SelectedStoryboard
 }
+const currentPage = ref(0)
 </script>
 
 <template>
@@ -139,8 +140,8 @@ const StoryboardClick = (routeName: string) => {
 
     <div class="absolute bottom-0 w-full">
       <ProgressBar
-        v-if="highlightShow"
         :current-step="currentStep"
+        :current-page="currentPage"
         @complete="handleComplete"
         @step-change="handleStepChange"
       />
@@ -157,6 +158,7 @@ const StoryboardClick = (routeName: string) => {
       </GuideStepsItem>
     </GuideSteps>
   </div>
+  <!-- 叉 -->
   <div
     v-if="highlightShow"
     class="absolute right-0 top-0"

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

@@ -113,8 +113,8 @@ const clickdoubao = () => {
   position: absolute;
   right: -90%;
   top: 0;
-  width: 100%;
-  height: 100%;
+  width: 50%;
+  height: 50%;
 }
 
 .doubao .doubao-img {
@@ -124,10 +124,11 @@ const clickdoubao = () => {
 
 .biaoge-x {
   position: absolute;
-  top: -15px;
-  right: 5px;
+  top: -20px;
+  right: 0px;
   width: 70px;
   cursor: pointer;
+  z-index: 9999999;
 }
 
 .writing-title {