feat: 完善课程引导与实战评价体验

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/views/film/work/index.vue

@@ -1,7 +1,12 @@
 <script lang="tsx" name="FilmWork" setup>
 defineOptions({ name: 'FilmWork' })
 import { ref, computed } from 'vue'
-import { getBackgroundImage, IMAGE_PATHS, getStaticImage, getPublicPath } from '@/utils'
+import {
+  getBackgroundImage,
+  IMAGE_PATHS,
+  getStaticImage,
+  getPublicPath,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
@@ -29,28 +34,30 @@ const sideSwitcherItems = ref([
     key: 'case',
     name: '案例赏析',
     description: '物件春秋-上海钟表文化科普馆',
-    image: 'film/案件赏析小屏'
+    image: 'film/案件赏析小屏',
   },
   {
     key: 'profession',
     name: '专业剖析',
     description: '物件春秋-上海钟表文化科普馆',
-    image: 'film/专业剖析'
+    image: 'film/专业剖析',
   },
   {
     key: 'idea',
     name: '思路提点',
     description: '物件春秋-上海钟表文化科普馆',
-    image: 'film/思路提点小屏'
-  }
+    image: 'film/思路提点小屏',
+  },
 ])
 
 //当前选中的item
 const currentItem = computed(() => {
-  return sideSwitcherItems.value.find(item => item.key === selected.value)
+  return sideSwitcherItems.value.find((item) => item.key === selected.value)
 })
 
-const currentHighlight = computed(() => (stepIndex.value === 2 ? '.work-border' : null))
+const currentHighlight = computed(() =>
+  stepIndex.value === 2 ? '.work-border' : null,
+)
 
 const handleStepChange = (_: any, index: number) => {
   stepIndex.value = index
@@ -61,14 +68,16 @@ const handleSideSwitcherChange = (value: WorkTab) => {
 }
 
 const handleImageClick = () => {
-  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
+  const currentItem = workSideSwitcherRef.value?.items.find(
+    (item) => item.key === selected.value,
+  )
   router.push({
     name: 'FilmVideo',
     query: {
       image: currentItem?.activeImage || '',
       key: selected.value,
-      label: currentItem?.label || ''
-    }
+      label: currentItem?.label || '',
+    },
   })
 }
 
@@ -96,7 +105,11 @@ function openImages(urls: string[], startIndex = 0) {
     images: urls,
     startIndex,
     maskClosable: true,
-    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+    getScaleMetrics: () => ({
+      scale: scale.value,
+      offsetX: offsetX.value,
+      offsetY: offsetY.value,
+    }),
   })
 }
 </script>
@@ -131,10 +144,14 @@ function openImages(urls: string[], startIndex = 0) {
         />
         <!-- 手 -->
         <div
-          class="absolute left-[46%] top-[40%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
+          class="absolute left-[46%] top-[45%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
         >
-          <img class="w-40" :src="getStaticImage('work/小手')" alt="" />
-          <span class="text-white text-2xl font-bold ml-5">点击进入</span>
+          <img
+            class="w-40"
+            :src="getStaticImage('work/小手')"
+            alt=""
+          />
+          <!-- <span class="text-white text-2xl font-bold ml-5">点击进入</span> -->
         </div>
       </div>
       <div
@@ -177,7 +194,9 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isFilmUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="
+        isFilmUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN
+      "
       @click="handleWorkClick"
     />