diff --git a/.prettierrc b/.prettierrc
index ebb7562..cb78e5e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,13 +3,13 @@
   "singleQuote": true,
   "tabWidth": 2,
   "useTabs": false,
-  "trailingComma": "none",
-  "printWidth": 100,
+  "trailingComma": "all",
+  "printWidth": 80,
   "endOfLine": "lf",
-  "arrowParens": "avoid",
+  "arrowParens": "always",
   "bracketSpacing": true,
   "bracketSameLine": false,
   "htmlWhitespaceSensitivity": "ignore",
   "vueIndentScriptAndStyle": false,
-  "singleAttributePerLine": false
+  "singleAttributePerLine": true
 }
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index ebb7562..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "endOfLine": "lf",
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "bracketSameLine": false,
-  "htmlWhitespaceSensitivity": "ignore",
-  "vueIndentScriptAndStyle": false,
-  "singleAttributePerLine": false
-}
diff --git a/src/assets/images/components/教师点评按钮.png b/src/assets/images/components/教师点评按钮.png
new file mode 100644
index 0000000..102a7a3
Binary files /dev/null and b/src/assets/images/components/教师点评按钮.png differ
diff --git a/src/assets/images/components/置顶.png b/src/assets/images/components/置顶.png
new file mode 100644
index 0000000..a68b249
Binary files /dev/null and b/src/assets/images/components/置顶.png differ
diff --git a/src/assets/images/film/practice/任务要求.png b/src/assets/images/film/practice/任务要求.png
new file mode 100644
index 0000000..58de9f8
Binary files /dev/null and b/src/assets/images/film/practice/任务要求.png differ
diff --git a/src/assets/images/film/practice/作品评分表提示.png b/src/assets/images/film/practice/作品评分表提示.png
new file mode 100644
index 0000000..bba6d23
Binary files /dev/null and b/src/assets/images/film/practice/作品评分表提示.png differ
diff --git a/src/assets/images/film/practice/我的创作笔记.png b/src/assets/images/film/practice/我的创作笔记.png
new file mode 100644
index 0000000..624d445
Binary files /dev/null and b/src/assets/images/film/practice/我的创作笔记.png differ
diff --git a/src/assets/images/film/practice/电影.png b/src/assets/images/film/practice/电影.png
new file mode 100644
index 0000000..1232fc8
Binary files /dev/null and b/src/assets/images/film/practice/电影.png differ
diff --git a/src/assets/images/film/practice/电影感短视频创作-作品评分表.png b/src/assets/images/film/practice/电影感短视频创作-作品评分表.png
new file mode 100644
index 0000000..4432d42
Binary files /dev/null and b/src/assets/images/film/practice/电影感短视频创作-作品评分表.png differ
diff --git a/src/assets/images/film/practice/电影感短视频创作-作品评分表文字.png b/src/assets/images/film/practice/电影感短视频创作-作品评分表文字.png
new file mode 100644
index 0000000..b2a28eb
Binary files /dev/null and b/src/assets/images/film/practice/电影感短视频创作-作品评分表文字.png differ
diff --git a/src/assets/images/film/practice/评分底板-电影感.png b/src/assets/images/film/practice/评分底板-电影感.png
deleted file mode 100644
index f139c39..0000000
Binary files a/src/assets/images/film/practice/评分底板-电影感.png and /dev/null differ
diff --git a/src/assets/images/film/practice/首页底板.png b/src/assets/images/film/practice/首页底板.png
new file mode 100644
index 0000000..2181928
Binary files /dev/null and b/src/assets/images/film/practice/首页底板.png differ
diff --git a/src/assets/images/film/shooting/01框架构图_底图.png b/src/assets/images/film/shooting/01框架构图_底图.png
index 93a51ce..ce38091 100644
Binary files a/src/assets/images/film/shooting/01框架构图_底图.png and b/src/assets/images/film/shooting/01框架构图_底图.png differ
diff --git a/src/assets/images/film/shooting/01框架构图_覆盖.png b/src/assets/images/film/shooting/01框架构图_覆盖.png
index 7cd7cc8..5088c83 100644
Binary files a/src/assets/images/film/shooting/01框架构图_覆盖.png and b/src/assets/images/film/shooting/01框架构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/02框架构图_底图.png b/src/assets/images/film/shooting/02框架构图_底图.png
index cd1b86a..dfd1020 100644
Binary files a/src/assets/images/film/shooting/02框架构图_底图.png and b/src/assets/images/film/shooting/02框架构图_底图.png differ
diff --git a/src/assets/images/film/shooting/02框架构图_覆盖.png b/src/assets/images/film/shooting/02框架构图_覆盖.png
index 40b880c..5254208 100644
Binary files a/src/assets/images/film/shooting/02框架构图_覆盖.png and b/src/assets/images/film/shooting/02框架构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/03对称构图_底图.png b/src/assets/images/film/shooting/03对称构图_底图.png
index 115d393..c6f0482 100644
Binary files a/src/assets/images/film/shooting/03对称构图_底图.png and b/src/assets/images/film/shooting/03对称构图_底图.png differ
diff --git a/src/assets/images/film/shooting/03对称构图_覆盖.png b/src/assets/images/film/shooting/03对称构图_覆盖.png
index d143d7f..d85a131 100644
Binary files a/src/assets/images/film/shooting/03对称构图_覆盖.png and b/src/assets/images/film/shooting/03对称构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/04对称构图_底图.png b/src/assets/images/film/shooting/04对称构图_底图.png
index e7c73fb..64ef7be 100644
Binary files a/src/assets/images/film/shooting/04对称构图_底图.png and b/src/assets/images/film/shooting/04对称构图_底图.png differ
diff --git a/src/assets/images/film/shooting/04对称构图_覆盖.png b/src/assets/images/film/shooting/04对称构图_覆盖.png
index 54910d9..48a382b 100644
Binary files a/src/assets/images/film/shooting/04对称构图_覆盖.png and b/src/assets/images/film/shooting/04对称构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/05引导线构图_底图.png b/src/assets/images/film/shooting/05引导线构图_底图.png
index 2238e14..4032761 100644
Binary files a/src/assets/images/film/shooting/05引导线构图_底图.png and b/src/assets/images/film/shooting/05引导线构图_底图.png differ
diff --git a/src/assets/images/film/shooting/05引导线构图_覆盖.png b/src/assets/images/film/shooting/05引导线构图_覆盖.png
index 0c907ea..b675c37 100644
Binary files a/src/assets/images/film/shooting/05引导线构图_覆盖.png and b/src/assets/images/film/shooting/05引导线构图_覆盖.png differ
diff --git a/src/assets/images/film/shooting/06引导线构图_底图.png b/src/assets/images/film/shooting/06引导线构图_底图.png
index 61bc64d..d6eac70 100644
Binary files a/src/assets/images/film/shooting/06引导线构图_底图.png and b/src/assets/images/film/shooting/06引导线构图_底图.png differ
diff --git a/src/assets/images/film/shooting/06引导线构图_覆盖.png b/src/assets/images/film/shooting/06引导线构图_覆盖.png
index aa58cc2..b32ca02 100644
Binary files a/src/assets/images/film/shooting/06引导线构图_覆盖.png and b/src/assets/images/film/shooting/06引导线构图_覆盖.png differ
diff --git a/src/assets/images/home/guide/cz-btn.png b/src/assets/images/home/guide/cz-btn.png
index b10c8af..72530b0 100644
Binary files a/src/assets/images/home/guide/cz-btn.png and b/src/assets/images/home/guide/cz-btn.png differ
diff --git a/src/assets/images/interview/composition/三角1-辅助线.png b/src/assets/images/interview/composition/三角1-辅助线.png
new file mode 100644
index 0000000..5c7d5e4
Binary files /dev/null and b/src/assets/images/interview/composition/三角1-辅助线.png differ
diff --git a/src/assets/images/interview/composition/三角1.png b/src/assets/images/interview/composition/三角1.png
new file mode 100644
index 0000000..26f8dc2
Binary files /dev/null and b/src/assets/images/interview/composition/三角1.png differ
diff --git a/src/assets/images/interview/composition/三角2-辅助线.png b/src/assets/images/interview/composition/三角2-辅助线.png
new file mode 100644
index 0000000..9b90b70
Binary files /dev/null and b/src/assets/images/interview/composition/三角2-辅助线.png differ
diff --git a/src/assets/images/interview/composition/三角2.png b/src/assets/images/interview/composition/三角2.png
new file mode 100644
index 0000000..95c0309
Binary files /dev/null and b/src/assets/images/interview/composition/三角2.png differ
diff --git a/src/assets/images/interview/composition/三角构图.png b/src/assets/images/interview/composition/三角构图.png
new file mode 100644
index 0000000..c9cd8c0
Binary files /dev/null and b/src/assets/images/interview/composition/三角构图.png differ
diff --git a/src/assets/images/interview/composition/前景1-辅助线.png b/src/assets/images/interview/composition/前景1-辅助线.png
new file mode 100644
index 0000000..43d037c
Binary files /dev/null and b/src/assets/images/interview/composition/前景1-辅助线.png differ
diff --git a/src/assets/images/interview/composition/前景1.png b/src/assets/images/interview/composition/前景1.png
new file mode 100644
index 0000000..09b806c
Binary files /dev/null and b/src/assets/images/interview/composition/前景1.png differ
diff --git a/src/assets/images/interview/composition/前景2-辅助线.png b/src/assets/images/interview/composition/前景2-辅助线.png
new file mode 100644
index 0000000..5aa5cc5
Binary files /dev/null and b/src/assets/images/interview/composition/前景2-辅助线.png differ
diff --git a/src/assets/images/interview/composition/前景2.png b/src/assets/images/interview/composition/前景2.png
new file mode 100644
index 0000000..32cefb4
Binary files /dev/null and b/src/assets/images/interview/composition/前景2.png differ
diff --git a/src/assets/images/interview/composition/前景构图.png b/src/assets/images/interview/composition/前景构图.png
new file mode 100644
index 0000000..abe5185
Binary files /dev/null and b/src/assets/images/interview/composition/前景构图.png differ
diff --git a/src/assets/images/interview/composition/留白1-辅助线.png b/src/assets/images/interview/composition/留白1-辅助线.png
new file mode 100644
index 0000000..3e9407d
Binary files /dev/null and b/src/assets/images/interview/composition/留白1-辅助线.png differ
diff --git a/src/assets/images/interview/composition/留白1.png b/src/assets/images/interview/composition/留白1.png
new file mode 100644
index 0000000..2eb1cc9
Binary files /dev/null and b/src/assets/images/interview/composition/留白1.png differ
diff --git a/src/assets/images/interview/composition/留白2-辅助线.png b/src/assets/images/interview/composition/留白2-辅助线.png
new file mode 100644
index 0000000..9234a4c
Binary files /dev/null and b/src/assets/images/interview/composition/留白2-辅助线.png differ
diff --git a/src/assets/images/interview/composition/留白2.png b/src/assets/images/interview/composition/留白2.png
new file mode 100644
index 0000000..f8729b5
Binary files /dev/null and b/src/assets/images/interview/composition/留白2.png differ
diff --git a/src/assets/images/interview/composition/留白构图.png b/src/assets/images/interview/composition/留白构图.png
new file mode 100644
index 0000000..871d401
Binary files /dev/null and b/src/assets/images/interview/composition/留白构图.png differ
diff --git a/src/assets/images/interview/composition/示意图-三角.png b/src/assets/images/interview/composition/示意图-三角.png
new file mode 100644
index 0000000..6233c61
Binary files /dev/null and b/src/assets/images/interview/composition/示意图-三角.png differ
diff --git a/src/assets/images/interview/composition/示意图-前景.png b/src/assets/images/interview/composition/示意图-前景.png
new file mode 100644
index 0000000..31db49a
Binary files /dev/null and b/src/assets/images/interview/composition/示意图-前景.png differ
diff --git a/src/assets/images/interview/composition/示意图-留白.png b/src/assets/images/interview/composition/示意图-留白.png
new file mode 100644
index 0000000..dfb91bc
Binary files /dev/null and b/src/assets/images/interview/composition/示意图-留白.png differ
diff --git a/src/assets/images/interview/practice/人物访谈短片创作-作品评分表.png b/src/assets/images/interview/practice/人物访谈短片创作-作品评分表.png
new file mode 100644
index 0000000..695e3ad
Binary files /dev/null and b/src/assets/images/interview/practice/人物访谈短片创作-作品评分表.png differ
diff --git a/src/assets/images/interview/practice/人物访谈短片创作-作品评分表文字.png b/src/assets/images/interview/practice/人物访谈短片创作-作品评分表文字.png
new file mode 100644
index 0000000..e2ac5bc
Binary files /dev/null and b/src/assets/images/interview/practice/人物访谈短片创作-作品评分表文字.png differ
diff --git a/src/assets/images/interview/practice/任务要求.png b/src/assets/images/interview/practice/任务要求.png
new file mode 100644
index 0000000..f866b65
Binary files /dev/null and b/src/assets/images/interview/practice/任务要求.png differ
diff --git a/src/assets/images/interview/practice/作品评分表提示.png b/src/assets/images/interview/practice/作品评分表提示.png
new file mode 100644
index 0000000..cc72666
Binary files /dev/null and b/src/assets/images/interview/practice/作品评分表提示.png differ
diff --git a/src/assets/images/interview/practice/我的创作笔记.png b/src/assets/images/interview/practice/我的创作笔记.png
new file mode 100644
index 0000000..8c3bbbb
Binary files /dev/null and b/src/assets/images/interview/practice/我的创作笔记.png differ
diff --git a/src/assets/images/interview/practice/教师点评.png b/src/assets/images/interview/practice/教师点评.png
new file mode 100644
index 0000000..511cbda
Binary files /dev/null and b/src/assets/images/interview/practice/教师点评.png differ
diff --git a/src/assets/images/interview/practice/访谈-匠心育人润物无声.png b/src/assets/images/interview/practice/访谈-匠心育人润物无声.png
new file mode 100644
index 0000000..05754c8
Binary files /dev/null and b/src/assets/images/interview/practice/访谈-匠心育人润物无声.png differ
diff --git a/src/assets/images/interview/practice/访谈.png b/src/assets/images/interview/practice/访谈.png
new file mode 100644
index 0000000..fc0b628
Binary files /dev/null and b/src/assets/images/interview/practice/访谈.png differ
diff --git a/src/assets/images/interview/practice/首页底版.png b/src/assets/images/interview/practice/首页底版.png
new file mode 100644
index 0000000..8e16247
Binary files /dev/null and b/src/assets/images/interview/practice/首页底版.png differ
diff --git a/src/assets/images/interview/shooting/开始拍摄-操场.png b/src/assets/images/interview/shooting/开始拍摄-操场.png
new file mode 100644
index 0000000..b29e899
Binary files /dev/null and b/src/assets/images/interview/shooting/开始拍摄-操场.png differ
diff --git a/src/assets/images/interview/shooting/开始拍摄-教学楼.png b/src/assets/images/interview/shooting/开始拍摄-教学楼.png
new file mode 100644
index 0000000..3deb7c2
Binary files /dev/null and b/src/assets/images/interview/shooting/开始拍摄-教学楼.png differ
diff --git a/src/assets/images/vlog/practice/Vlog作品评分表.png b/src/assets/images/vlog/practice/Vlog作品评分表.png
new file mode 100644
index 0000000..5b1464d
Binary files /dev/null and b/src/assets/images/vlog/practice/Vlog作品评分表.png differ
diff --git a/src/assets/images/vlog/practice/vlog-匠心精神劳动承匠心.png b/src/assets/images/vlog/practice/vlog-匠心精神劳动承匠心.png
new file mode 100644
index 0000000..4c77fff
Binary files /dev/null and b/src/assets/images/vlog/practice/vlog-匠心精神劳动承匠心.png differ
diff --git a/src/assets/images/vlog/practice/vlog-熙熙攘攘我们的劳动.png b/src/assets/images/vlog/practice/vlog-熙熙攘攘我们的劳动.png
new file mode 100644
index 0000000..48f797d
Binary files /dev/null and b/src/assets/images/vlog/practice/vlog-熙熙攘攘我们的劳动.png differ
diff --git a/src/assets/images/vlog/practice/vlog.png b/src/assets/images/vlog/practice/vlog.png
new file mode 100644
index 0000000..56b4178
Binary files /dev/null and b/src/assets/images/vlog/practice/vlog.png differ
diff --git a/src/assets/images/vlog/practice/任务要求.png b/src/assets/images/vlog/practice/任务要求.png
new file mode 100644
index 0000000..57d3669
Binary files /dev/null and b/src/assets/images/vlog/practice/任务要求.png differ
diff --git a/src/assets/images/vlog/practice/我的创作笔记.png b/src/assets/images/vlog/practice/我的创作笔记.png
index 9afb2fa..47a60b6 100644
Binary files a/src/assets/images/vlog/practice/我的创作笔记.png and b/src/assets/images/vlog/practice/我的创作笔记.png differ
diff --git a/src/assets/images/vlog/practice/我的创作笔记btn.png b/src/assets/images/vlog/practice/我的创作笔记btn.png
new file mode 100644
index 0000000..4b1c06e
Binary files /dev/null and b/src/assets/images/vlog/practice/我的创作笔记btn.png differ
diff --git a/src/assets/images/vlog/practice/教师点评.png b/src/assets/images/vlog/practice/教师点评.png
new file mode 100644
index 0000000..956822d
Binary files /dev/null and b/src/assets/images/vlog/practice/教师点评.png differ
diff --git a/src/assets/images/vlog/shooting/实地取景底图.png b/src/assets/images/vlog/shooting/实地取景底图.png
index c0e0971..f45b725 100644
Binary files a/src/assets/images/vlog/shooting/实地取景底图.png and b/src/assets/images/vlog/shooting/实地取景底图.png differ
diff --git a/src/assets/images/vlog/shooting/开始拍摄-沉水栈道.png b/src/assets/images/vlog/shooting/开始拍摄-沉水栈道.png
new file mode 100644
index 0000000..31f6100
Binary files /dev/null and b/src/assets/images/vlog/shooting/开始拍摄-沉水栈道.png differ
diff --git a/src/assets/images/vlog/shooting/开始拍摄-热带植物馆.png b/src/assets/images/vlog/shooting/开始拍摄-热带植物馆.png
new file mode 100644
index 0000000..487f393
Binary files /dev/null and b/src/assets/images/vlog/shooting/开始拍摄-热带植物馆.png differ
diff --git a/src/assets/images/work/小手.png b/src/assets/images/work/小手.png
index a556daa..d4a8816 100644
Binary files a/src/assets/images/work/小手.png and b/src/assets/images/work/小手.png differ
diff --git a/src/components/Guide/GuideSteps.vue b/src/components/Guide/GuideSteps.vue
index 8d7b702..e2f8a9b 100644
--- a/src/components/Guide/GuideSteps.vue
+++ b/src/components/Guide/GuideSteps.vue
@@ -1,14 +1,20 @@
 <template>
   <teleport to="body">
-    <div class="guide-steps-container" v-if="show">
+    <div
+      class="guide-steps-container"
+      v-if="show"
+    >
       <SpotlightOverlay
-        :visible="Boolean(currentHighlightSelector)"
+        :visible="show"
         :target-selector="currentHighlightSelector"
         :padding="currentHighlightPadding"
         :border-radius="currentHighlightRadius"
         :highlight-mode="currentHighlightMode"
       />
-      <div class="guide-align" :style="alignStyle">
+      <div
+        class="guide-align"
+        :style="alignStyle"
+      >
         <GuideDragon
           :show-skip="currentStep < totalSteps"
           :current-step="currentStep"
@@ -44,9 +50,15 @@
               @continue="handleNext"
             >
               <!-- 支持组件形式的 content -->
-              <component v-if="isCurrentStepComponent" :is="currentStepContentComponent" />
+              <component
+                v-if="isCurrentStepComponent"
+                :is="currentStepContentComponent"
+              />
               <!-- 支持字符串形式的 content -->
-              <div v-else v-html="currentStepContent"></div>
+              <div
+                v-else
+                v-html="currentStepContent"
+              ></div>
             </GuideStepsItem>
           </template>
         </GuideDragon>
@@ -101,7 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
   highlightRadius: 16,
   highlightMode: 'border',
   positionOffsetY: '50%',
-  visible: true
+  visible: true,
 })
 
 const emit = defineEmits<Emits>()
@@ -126,7 +138,7 @@ const alignStyle = reactive<{
   top: '0px',
   transform: 'scale(1)',
   width: '1920px',
-  height: '1080px'
+  height: '1080px',
 })
 const normalizeSelector = (selector?: string | null) => {
   if (!selector) return null
@@ -157,21 +169,25 @@ const currentStepData = computed(() => {
   return props.steps[currentStepIndex.value] || null
 })
 
-const currentStepConfig = computed(() => props.steps[currentStepIndex.value] || null)
+const currentStepConfig = computed(
+  () => props.steps[currentStepIndex.value] || null,
+)
 const currentHighlightSelector = computed(() => {
-  return normalizeSelector(currentStepConfig.value?.highlightSelector ?? props.highlightSelector)
+  return normalizeSelector(
+    currentStepConfig.value?.highlightSelector ?? props.highlightSelector,
+  )
 })
 const currentHighlightPadding = computed(
-  () => currentStepConfig.value?.highlightPadding ?? props.highlightPadding
+  () => currentStepConfig.value?.highlightPadding ?? props.highlightPadding,
 )
 const currentHighlightRadius = computed(
-  () => currentStepConfig.value?.highlightRadius ?? props.highlightRadius
+  () => currentStepConfig.value?.highlightRadius ?? props.highlightRadius,
 )
 const currentHighlightMode = computed(
-  () => currentStepConfig.value?.highlightMode ?? props.highlightMode
+  () => currentStepConfig.value?.highlightMode ?? props.highlightMode,
 )
 const currentPositionOffsetY = computed(
-  () => currentStepConfig.value?.positionOffsetY ?? props.positionOffsetY
+  () => currentStepConfig.value?.positionOffsetY ?? props.positionOffsetY,
 )
 
 const currentStepComponent = computed(() => {
@@ -210,7 +226,9 @@ const currentStepContentComponent = computed(() => {
 })
 
 const handleNext = () => {
-  const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+  const maxSteps = useSlotMode.value
+    ? slotSteps.value.length
+    : props.steps.length
   if (maxSteps === 0) {
     handleComplete()
     return
@@ -234,7 +252,9 @@ const handleComplete = () => {
 }
 
 const goToStep = (index: number) => {
-  const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+  const maxSteps = useSlotMode.value
+    ? slotSteps.value.length
+    : props.steps.length
   if (maxSteps === 0) {
     console.warn('GuideSteps goToStep: No steps available')
     return
@@ -244,7 +264,12 @@ const goToStep = (index: number) => {
     currentStepIndex.value = index
     emit('step-change', currentStepData.value, currentStepIndex.value)
   } else {
-    console.warn('GuideSteps goToStep: Invalid step index', index, 'max:', maxSteps - 1)
+    console.warn(
+      'GuideSteps goToStep: Invalid step index',
+      index,
+      'max:',
+      maxSteps - 1,
+    )
   }
 }
 
@@ -283,7 +308,9 @@ let autoPlayTimer: number | null = null
 const startAutoPlay = () => {
   if (props.autoPlayInterval > 0) {
     autoPlayTimer = window.setInterval(() => {
-      const maxSteps = useSlotMode.value ? slotSteps.value.length : props.steps.length
+      const maxSteps = useSlotMode.value
+        ? slotSteps.value.length
+        : props.steps.length
       if (currentStepIndex.value < maxSteps - 1) {
         handleNext()
       } else {
@@ -317,7 +344,7 @@ onMounted(() => {
     if (transform && transform !== 'none') {
       const match = transform.match(/matrix\(([^)]+)\)/)
       if (match) {
-        const parts = match[1].split(',').map(s => parseFloat(s.trim()))
+        const parts = match[1].split(',').map((s) => parseFloat(s.trim()))
         if (!Number.isNaN(parts[0])) scale = parts[0]
       }
     }
@@ -343,7 +370,7 @@ defineExpose({
   currentStep,
   totalSteps,
   startAutoPlay,
-  stopAutoPlay
+  stopAutoPlay,
 })
 </script>
 
diff --git a/src/components/Guide/SpotlightOverlay.vue b/src/components/Guide/SpotlightOverlay.vue
index 528ee10..3d56e0b 100644
--- a/src/components/Guide/SpotlightOverlay.vue
+++ b/src/components/Guide/SpotlightOverlay.vue
@@ -1,10 +1,21 @@
 <template>
-  <div v-if="visible" class="spotlight-overlay">
+  <div
+    v-if="visible"
+    class="spotlight-overlay"
+  >
+    <div
+      v-if="!hasHighlightTarget"
+      class="spotlight-dim"
+    ></div>
     <!-- 渐变遮罩层 -->
-    <div v-if="props.highlightMode === 'gradient'" class="spotlight-mask" :style="maskStyle"></div>
+    <div
+      v-else-if="props.highlightMode === 'gradient'"
+      class="spotlight-mask"
+      :style="maskStyle"
+    ></div>
     <!-- 画框模式：使用 box-shadow 遮罩 + 边框 -->
     <div
-      v-if="props.highlightMode === 'border' && rect.width > 0 && rect.height > 0"
+      v-else-if="props.highlightMode === 'border'"
       class="spotlight-hole"
       :style="holeStyle"
     ></div>
@@ -35,11 +46,14 @@ const props = withDefaults(defineProps<Props>(), {
   padding: 8,
   borderRadius: 16,
   gradientRange: 100,
-  highlightMode: 'border'
+  highlightMode: 'border',
 })
 
 const rect = reactive({ top: 0, left: 0, width: 0, height: 0 })
 const isElementReady = ref(false)
+const hasHighlightTarget = computed(
+  () => isElementReady.value && rect.width > 0 && rect.height > 0,
+)
 
 // 重试相关变量
 let retryCount = 0
@@ -148,7 +162,7 @@ const startRetry = (selector: string) => {
   mutationObserver.observe(document.body, {
     childList: true,
     subtree: true,
-    attributes: false
+    attributes: false,
   })
 
   // 同时使用 requestAnimationFrame 轮询检查（作为备用机制）
@@ -210,7 +224,7 @@ watch(
     stopRetry() // 停止之前的重试
     requestAnimationFrame(measure)
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 const onResize = () => measure()
@@ -233,7 +247,7 @@ const maskStyle = computed(() => {
   if (!props.visible || rect.width === 0 || rect.height === 0) {
     return {
       maskImage: 'none',
-      WebkitMaskImage: 'none'
+      WebkitMaskImage: 'none',
     }
   }
 
@@ -281,7 +295,7 @@ const maskStyle = computed(() => {
 
   return {
     maskImage: gradient,
-    WebkitMaskImage: gradient
+    WebkitMaskImage: gradient,
   }
 })
 
@@ -297,7 +311,7 @@ const holeStyle = computed(() => {
     width: rect.width + 'px',
     height: rect.height + 'px',
     borderRadius: props.borderRadius + 'px',
-    boxShadow: `0 0 0 9999px rgba(0,0,0,0.6)`
+    boxShadow: `0 0 0 9999px rgba(0,0,0,0.6)`,
   }
 })
 </script>
@@ -310,16 +324,20 @@ const holeStyle = computed(() => {
   z-index: 100000;
 }
 
+.spotlight-dim,
 .spotlight-mask {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+}
+
+.spotlight-mask {
   mask-image: radial-gradient(ellipse, transparent 0%, black 100%);
   -webkit-mask-image: radial-gradient(ellipse, transparent 0%, black 100%);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
-  pointer-events: none;
 }
 
 .spotlight-hole {
diff --git a/src/components/KnowledgeCard/InterviewKnowledgeCard.vue b/src/components/KnowledgeCard/InterviewKnowledgeCard.vue
new file mode 100644
index 0000000..a3f3890
--- /dev/null
+++ b/src/components/KnowledgeCard/InterviewKnowledgeCard.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Overlay } from '@/components/Overlay'
+import { ImgButton } from '@/components/Button'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+
+interface Props {
+  visible: boolean
+  title: string
+  desc: string
+  images: string[]
+  compositionKey: '1' | '2' | '3'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const imageMap = {
+  '1': 'interview/composition/示意图-前景',
+  '2': 'interview/composition/示意图-留白',
+  '3': 'interview/composition/示意图-三角',
+}
+
+const getImage = computed(() => {
+  return getBackgroundImage(imageMap[props.compositionKey])
+})
+
+const getOverlayImage = (index: number) => {
+  const overlayMap: Record<string, string[]> = {
+    '1': [
+      'interview/composition/前景1-辅助线',
+      'interview/composition/前景2-辅助线',
+    ],
+    '2': [
+      'interview/composition/留白1-辅助线',
+      'interview/composition/留白2-辅助线',
+    ],
+    '3': [
+      'interview/composition/三角1-辅助线',
+      'interview/composition/三角2-辅助线',
+    ],
+  }
+  const images = overlayMap[props.compositionKey] || []
+  return images[index] || ''
+}
+
+const showBoxLineMap = ref<Record<number, boolean>>({})
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      showBoxLineMap.value = {}
+    }
+  },
+)
+
+const handleToggle = (index: number) => {
+  showBoxLineMap.value[index] = !showBoxLineMap.value[index]
+}
+
+const show = computed(() => props.visible)
+</script>
+
+<template>
+  <Overlay
+    :visible="show"
+    :clickable="false"
+  >
+    <div
+      class="relative w-[1752px] h-[932px]"
+      :style="{ backgroundImage: getBackgroundImage('shooting/知识卡片底板') }"
+    >
+      <div
+        class="absolute top-4 left-1/2 -translate-x-1/2 text-[45px] text-white font-bold tracking-[2px] drop-shadow-[2px_2px_4px_rgba(0,0,139,0.8)]"
+      >
+        {{ props.title }}
+      </div>
+
+      <div
+        class="absolute w-full h-[38px] top-32 left-1/2 -translate-x-1/2 bg-no-repeat bg-center"
+        :style="{ backgroundImage: getBackgroundImage('shooting/文案1') }"
+      ></div>
+
+      <div
+        class="absolute w-[191px] h-[131px] top-[30px] left-[120px] bg-no-repeat bg-center"
+        :style="{ backgroundImage: getImage }"
+      ></div>
+
+      <div
+        class="absolute top-[calc(50%-30px)] -translate-y-1/2"
+        v-for="(image, index) in props.images"
+        :key="index"
+        :style="{ left: index === 0 ? '15%' : '55%' }"
+      >
+        <ImgButton
+          class="absolute right-6 top-6 z-10"
+          :image="
+            showBoxLineMap[index] ? 'shooting/辅助线开' : 'shooting/辅助线关'
+          "
+          @click="handleToggle(index)"
+        />
+        <div class="relative">
+          <img
+            class="w-[560px]"
+            :src="getStaticImage(image)"
+            alt=""
+          />
+
+          <div
+            v-if="showBoxLineMap[index]"
+            class="absolute inset-0 pointer-events-none w-[560px] bg-cover bg-center bg-no-repeat"
+            :style="{
+              backgroundImage: getBackgroundImage(getOverlayImage(index)),
+            }"
+          ></div>
+        </div>
+      </div>
+
+      <div
+        class="absolute w-full px-20 bottom-32 left-1/2 -translate-x-1/2 text-[#395E66] text-3xl font-bold indent-14 leading-[50px]"
+      >
+        {{ props.desc }}
+      </div>
+
+      <ImgButton
+        class="absolute right-2 top-4 translate-x-1/2 -translate-y-1/2 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="emit('close')"
+      />
+    </div>
+  </Overlay>
+</template>
+
+<style scoped></style>
diff --git a/src/components/PracticeRatingModal/index.ts b/src/components/PracticeRatingModal/index.ts
new file mode 100644
index 0000000..f151568
--- /dev/null
+++ b/src/components/PracticeRatingModal/index.ts
@@ -0,0 +1,2 @@
+export { default } from './index.vue'
+export type { PracticeRatingItem } from './types'
diff --git a/src/components/PracticeRatingModal/index.vue b/src/components/PracticeRatingModal/index.vue
new file mode 100644
index 0000000..1134f53
--- /dev/null
+++ b/src/components/PracticeRatingModal/index.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import type { PracticeRatingItem } from './types'
+
+interface Props {
+  visible: boolean
+  items: PracticeRatingItem[]
+  backgroundImage: string
+  topTip?: string
+  bottomTip?: string
+  itemBackground?: string
+  saveButtonImage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  itemBackground: 'vlog/practice/评分条',
+  saveButtonImage: 'vlog/practice/保存',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const hasTips = computed<boolean>(() =>
+  Boolean(props.topTip || props.bottomTip),
+)
+</script>
+
+<template>
+  <Overlay
+    :visible="visible"
+    :clickable="false"
+  >
+    <div
+      class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+      :style="{ backgroundImage: getBackgroundImage(backgroundImage) }"
+    >
+      <ImgButton
+        class="absolute -top-8 -right-14 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+        @click="emit('close')"
+      />
+
+      <div class="relative h-full overflow-y-scroll px-8">
+        <div class="pl-10 space-y-10 mt-10">
+          <p
+            v-if="topTip"
+            class="glow-text"
+          >
+            {{ topTip }}
+          </p>
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+            :style="{ backgroundImage: getBackgroundImage(itemBackground) }"
+          >
+            <div class="pr-8 space-y-10">
+              <h4 class="text-3xl font-bold text-white mb-3">
+                {{ `0${index + 1}` }} {{ item.title }}
+              </h4>
+              <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                {{ item.description }}
+              </p>
+            </div>
+            <StarRating
+              class="absolute -bottom-5 right-10"
+              :score="item.score"
+              size="lg"
+            />
+          </div>
+          <p
+            v-if="bottomTip"
+            class="glow-text"
+          >
+            {{ bottomTip }}
+          </p>
+          <div
+            class="w-full flex justify-center"
+            :class="{ 'mt-16': !hasTips }"
+          >
+            <ImgButton
+              :image="saveButtonImage"
+              @click="emit('close')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<style scoped>
+.glow-text {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  text-shadow:
+    -1px -1px 0 #0066ff,
+    1px -1px 0 #0066ff,
+    -1px 1px 0 #0066ff,
+    1px 1px 0 #0066ff,
+    -2px -2px 0 #0066ff,
+    2px -2px 0 #0066ff,
+    -2px 2px 0 #0066ff,
+    2px 2px 0 #0066ff,
+    0 0 10px #0066ff,
+    0 0 20px #0066ff,
+    0 0 30px #0066ff,
+    0 0 40px #0066ff,
+    0 0 50px #0066ff;
+}
+</style>
diff --git a/src/components/PracticeRatingModal/types.ts b/src/components/PracticeRatingModal/types.ts
new file mode 100644
index 0000000..078a68e
--- /dev/null
+++ b/src/components/PracticeRatingModal/types.ts
@@ -0,0 +1,5 @@
+export interface PracticeRatingItem {
+  title: string
+  description: string
+  score: number
+}
diff --git a/src/components/Video/index.ts b/src/components/Video/index.ts
index a11bb6c..0a6f5d5 100644
--- a/src/components/Video/index.ts
+++ b/src/components/Video/index.ts
@@ -1,4 +1,9 @@
-import type { ComponentOptionsMixin, DefineComponent, PublicProps, SlotsType } from 'vue'
+import type {
+  ComponentOptionsMixin,
+  DefineComponent,
+  PublicProps,
+  SlotsType,
+} from 'vue'
 import VideoSfc from './Video.vue'
 
 type TimeUnit = number
@@ -34,6 +39,7 @@ interface VideoProps {
   playbackRate?: number
   fit?: 'contain' | 'cover' | 'fill'
   anchors?: VideoAnchor[]
+  onEnded?: () => void
 }
 
 interface VideoSlotProps {
@@ -53,7 +59,11 @@ interface VideoSlotProps {
 
 type VideoSlots = SlotsType<{
   default?: () => any
-  anchor?: (props: { anchor: VideoAnchor; resume: () => void; unmute: () => void }) => any
+  anchor?: (props: {
+    anchor: VideoAnchor
+    resume: () => void
+    unmute: () => void
+  }) => any
   overlay?: (props: VideoSlotProps) => any
   controls?: (props: VideoSlotProps) => any
   'controls-left'?: (props: VideoSlotProps) => any
diff --git a/src/config/moduleStepMap.ts b/src/config/moduleStepMap.ts
index b9abd17..9559230 100644
--- a/src/config/moduleStepMap.ts
+++ b/src/config/moduleStepMap.ts
@@ -8,26 +8,46 @@ export type StepIndex = 1 | 2 | 3
  * - 用于“停留≥阈值后自动计为已查看(viewed)”以及计算 completedStep。
  * - 按需求：菜单中 disabled=true 的子项不计入完成条件，因此这里不包含 disabled 子项。
  */
-export const moduleStepMap: Record<ModuleName, Record<StepIndex, readonly string[]>> = {
+export const moduleStepMap: Record<
+  ModuleName,
+  Record<StepIndex, readonly string[]>
+> = {
   film: {
     1: ['FilmResource', 'FilmCreative', 'FilmScriptWriting', 'FilmStoryboard'],
     2: ['FilmMidtermEquipment', 'FilmMidtermShooting', 'FilmOnsiteShooting'],
-    3: ['FilmEditing', 'FilmColorPractice', 'FilmSoundEffect', 'FilmExportPublish']
+    3: [
+      'FilmEditing',
+      'FilmColorPractice',
+      'FilmSoundEffect',
+      'FilmExportPublish',
+    ],
   },
   vlog: {
     1: ['VlogResource', 'VlogCreative', 'VlogScriptWriting', 'VlogStoryboard'],
     2: ['VlogMidtermEquipment', 'VlogMidtermShooting', 'VlogShooting'],
-    3: ['VlogEditing', 'VlogColor', 'VlogExportPublish']
+    3: ['VlogEditing', 'VlogColor', 'VlogExportPublish'],
   },
   interview: {
-    1: ['InterviewResource', 'InterviewCreative', 'InterviewScriptWriting', 'InterviewStoryboard'],
+    1: [
+      'InterviewResource',
+      'InterviewCreative',
+      'InterviewScriptWriting',
+      'InterviewStoryboard',
+    ],
     2: ['InterviewEquipment', 'InterviewShooting', 'InterviewOnsiteShooting'],
-    3: ['InterviewEditing', 'InterviewColorPractice', 'InterviewAudio', 'InterviewExportPublish']
-  }
+    3: [
+      'InterviewEditing',
+      'InterviewColor',
+      'InterviewAudio',
+      'InterviewExportPublish',
+    ],
+  },
 } as const
 
 export const allTrackedRouteNames = new Set<string>(
-  Object.values(moduleStepMap).flatMap(stepMap => Object.values(stepMap).flatMap(names => names))
+  Object.values(moduleStepMap).flatMap((stepMap) =>
+    Object.values(stepMap).flatMap((names) => names),
+  ),
 )
 
 export function getModuleNameByRouteName(routeName: string): ModuleName | null {
diff --git a/src/router/modules/interview.ts b/src/router/modules/interview.ts
index 3e50f1f..dd6fcab 100644
--- a/src/router/modules/interview.ts
+++ b/src/router/modules/interview.ts
@@ -8,8 +8,8 @@ const Interview: RouteRecordRaw[] = [
     name: 'Interview',
     component: () => import('@/views/interview/index.vue'),
     meta: {
-      title: '发现与记录'
-    }
+      title: '发现与记录',
+    },
   },
   // interview 发现与记录
   {
@@ -17,16 +17,16 @@ const Interview: RouteRecordRaw[] = [
     name: 'InterviewWork',
     component: () => import('@/views/interview/work/index.vue'),
     meta: {
-      title: '发现与记录'
-    }
+      title: '发现与记录',
+    },
   },
   {
     path: '/interview/video',
     name: 'InterviewVideo',
     component: () => import('@/views/interview/video/index.vue'),
     meta: {
-      title: '发现与记录-视频'
-    }
+      title: '发现与记录-视频',
+    },
   },
   //前期准备
   {
@@ -34,75 +34,82 @@ const Interview: RouteRecordRaw[] = [
     name: 'InterviewResource',
     component: () => import('@/views/interview/resource/index.vue'),
     meta: {
-      title: '资源筹备'
-    }
+      title: '资源筹备',
+    },
   },
   {
     path: '/interview/creative',
     name: 'InterviewCreative',
     component: () => import('@/views/interview/creative/index.vue'),
     meta: {
-      title: '创意构想'
-    }
+      title: '创意构想',
+    },
   },
   {
     path: '/interview/script-writing',
     name: 'InterviewScriptWriting',
     component: () => import('@/views/interview/script-writing/index.vue'),
     meta: {
-      title: '脚本撰写'
-    }
+      title: '脚本撰写',
+    },
   },
   {
     path: '/interview/storyboard',
     name: 'InterviewStoryboard',
     component: () => import('@/views/interview/storyboard/index.vue'),
     meta: {
-      title: '分镜制作'
-    }
+      title: '分镜制作',
+    },
   },
   //中期拍摄
   {
     path: '/interview/equipment',
     name: 'InterviewEquipment',
-    component: () => import('@/views/interview/midterm-shooting/equipment/index.vue'),
+    component: () =>
+      import('@/views/interview/midterm-shooting/equipment/index.vue'),
     meta: {
-      title: '设备准备'
-    }
+      title: '设备准备',
+    },
   },
   {
     path: '/interview/shooting',
     name: 'InterviewShooting',
-    component: () => import('@/views/interview/midterm-shooting/shooting/index.vue'),
+    component: () =>
+      import('@/views/interview/midterm-shooting/shooting/index.vue'),
     meta: {
-      title: '实地取景'
-    }
+      title: '实地取景',
+    },
   },
   {
     path: '/interview/on-site-shooting',
     name: 'InterviewOnsiteShooting',
-    component: () => import('@/views/interview/midterm-shooting/on-site/index.vue'),
+    component: () =>
+      import('@/views/interview/midterm-shooting/on-site/index.vue'),
     meta: {
-      title: '现场拍摄'
-    }
+      title: '现场拍摄',
+    },
   },
   {
     path: '/interview/filmingLocation-a',
     name: 'InterviewFilmingLocationA',
     component: () =>
-      import('@/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+      import(
+        '@/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue'
+      ),
     meta: {
-      title: '实地取景-取景地A'
-    }
+      title: '实地取景-取景地A',
+    },
   },
   {
     path: '/interview/filmingLocation-b',
     name: 'InterviewFilmingLocationB',
     component: () =>
-      import('@/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+      import(
+        '@/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue'
+      ),
     meta: {
-      title: '实地取景-取景地B'
-    }
+      title: '实地取景-取景地B',
+    },
   },
   // 后期剪辑
   {
@@ -110,40 +117,42 @@ const Interview: RouteRecordRaw[] = [
     name: 'InterviewEditing',
     component: () => import('@/views/interview/after-editing/editing.vue'),
     meta: {
-      title: '剪辑'
-    }
-  },
-  {
-    path: '/interview/color-practice',
-    name: 'InterviewColorPractice',
-    component: () => import('@/views/interview/after-editing/color-practice.vue'),
-    meta: {
-      title: '后期剪辑-调色实践'
-    }
+      title: '剪辑',
+    },
   },
   {
     path: '/interview/color',
     name: 'InterviewColor',
     component: () => import('@/views/interview/after-editing/color.vue'),
     meta: {
-      title: '调色'
-    }
+      title: '调色',
+    },
+  },
+  {
+    path: '/interview/color-practice',
+    name: 'InterviewColorPractice',
+    component: () =>
+      import('@/views/interview/after-editing/color-practice.vue'),
+    meta: {
+      title: '后期剪辑-调色实践',
+    },
   },
   {
     path: '/interview/audio',
     name: 'InterviewAudio',
     component: () => import('@/views/interview/after-editing/audio/index.vue'),
     meta: {
-      title: '音频'
-    }
+      title: '音频',
+    },
   },
   {
     path: '/interview/export-publish',
     name: 'InterviewExportPublish',
-    component: () => import('@/views/interview/after-editing/export-publish/index.vue'),
+    component: () =>
+      import('@/views/interview/after-editing/export-publish/index.vue'),
     meta: {
-      title: '导出发布'
-    }
+      title: '导出发布',
+    },
   },
   // 实战操作台
   {
@@ -151,8 +160,8 @@ const Interview: RouteRecordRaw[] = [
     name: 'InterviewPractice',
     component: () => import('@/views/interview/practice/index.vue'),
     meta: {
-      title: '实战操作台'
-    }
+      title: '实战操作台',
+    },
   },
   // 我的创作笔记
   {
@@ -160,8 +169,18 @@ const Interview: RouteRecordRaw[] = [
     name: 'InterviewMyNotes',
     component: () => import('@/views/interview/practice/my-notes/index.vue'),
     meta: {
-      title: '我的创作笔记'
-    }
+      title: '我的创作笔记',
+    },
+  },
+  // 教师点评
+  {
+    path: '/interview/practice/teacher-comment',
+    name: 'InterviewTeacherComment',
+    component: () =>
+      import('@/views/interview/practice/teacher-comment/index.vue'),
+    meta: {
+      title: '教师点评',
+    },
   },
   // 他人实战作品
   {
@@ -170,9 +189,9 @@ const Interview: RouteRecordRaw[] = [
     props: true,
     component: () => import('@/views/interview/practice/video/index.vue'),
     meta: {
-      title: '他人实战作品'
-    }
-  }
+      title: '他人实战作品',
+    },
+  },
 ]
 
 export default Interview
diff --git a/src/router/modules/vlog.ts b/src/router/modules/vlog.ts
index c6bc0c4..ee3f55c 100644
--- a/src/router/modules/vlog.ts
+++ b/src/router/modules/vlog.ts
@@ -8,8 +8,8 @@ const Vlog: RouteRecordRaw[] = [
     name: 'Vlog',
     component: () => import('@/views/vlog/index.vue'),
     meta: {
-      title: '发现与记录'
-    }
+      title: '发现与记录',
+    },
   },
   // vlog 任务取景框
   {
@@ -17,16 +17,16 @@ const Vlog: RouteRecordRaw[] = [
     name: 'VlogWork',
     component: () => import('@/views/vlog/work/index.vue'),
     meta: {
-      title: '发现与记录'
-    }
+      title: '发现与记录',
+    },
   },
   {
     path: '/vlog/video',
     name: 'VlogVideo',
     component: () => import('@/views/vlog/video/index.vue'),
     meta: {
-      title: '发现与记录-视频'
-    }
+      title: '发现与记录-视频',
+    },
   },
   //前期准备
   {
@@ -34,57 +34,58 @@ const Vlog: RouteRecordRaw[] = [
     name: 'VlogResource',
     component: () => import('@/views/vlog/resource/index.vue'),
     meta: {
-      title: '资源筹备'
-    }
+      title: '资源筹备',
+    },
   },
   {
     path: '/vlog/creative',
     name: 'VlogCreative',
     component: () => import('@/views/vlog/creative/index.vue'),
     meta: {
-      title: '创意构想'
-    }
+      title: '创意构想',
+    },
   },
   {
     path: '/vlog/script-writing',
     name: 'VlogScriptWriting',
     component: () => import('@/views/vlog/script-writing/index.vue'),
     meta: {
-      title: '脚本撰写'
-    }
+      title: '脚本撰写',
+    },
   },
   {
     path: '/vlog/storyboard',
     name: 'VlogStoryboard',
     component: () => import('@/views/vlog/storyboard/index.vue'),
     meta: {
-      title: '分镜制作'
-    }
+      title: '分镜制作',
+    },
   },
   //中期拍摄
   {
     path: '/vlog/equipment',
     name: 'VlogMidtermEquipment',
-    component: () => import('@/views/vlog/midterm-shooting/equipment/index.vue'),
+    component: () =>
+      import('@/views/vlog/midterm-shooting/equipment/index.vue'),
     meta: {
-      title: '设备准备'
-    }
+      title: '设备准备',
+    },
   },
   {
     path: '/vlog/shooting',
     name: 'VlogMidtermShooting',
     component: () => import('@/views/vlog/midterm-shooting/shooting/index.vue'),
     meta: {
-      title: '实地取景'
-    }
+      title: '实地取景',
+    },
   },
   {
     path: '/vlog/on-site-shooting',
     name: 'VlogShooting',
     component: () => import('@/views/vlog/midterm-shooting/on-site/index.vue'),
     meta: {
-      title: '现场拍摄'
-    }
+      title: '现场拍摄',
+    },
   },
   // {
   //   path: '/vlog/on-site-shooting/time-lapse',
@@ -137,18 +138,24 @@ const Vlog: RouteRecordRaw[] = [
   {
     path: '/vlog/filmingLocation-a',
     name: 'VlogFilmingLocationA',
-    component: () => import('@/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue'),
+    component: () =>
+      import(
+        '@/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue'
+      ),
     meta: {
-      title: '实地取景-取景地A'
-    }
+      title: '实地取景-取景地A',
+    },
   },
   {
     path: '/vlog/filmingLocation-b',
     name: 'VlogFilmingLocationB',
-    component: () => import('@/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue'),
+    component: () =>
+      import(
+        '@/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue'
+      ),
     meta: {
-      title: '实地取景-取景地B'
-    }
+      title: '实地取景-取景地B',
+    },
   },
   // 后期剪辑
   {
@@ -156,32 +163,33 @@ const Vlog: RouteRecordRaw[] = [
     name: 'VlogEditing',
     component: () => import('@/views/vlog/after-editing/editing.vue'),
     meta: {
-      title: '后期剪辑-剪辑'
-    }
+      title: '后期剪辑-剪辑',
+    },
   },
   {
     path: '/vlog/color',
     name: 'VlogColor',
     component: () => import('@/views/vlog/after-editing/color.vue'),
     meta: {
-      title: '后期剪辑-调色'
-    }
+      title: '后期剪辑-调色',
+    },
   },
   {
     path: '/vlog/color-practice',
     name: 'VlogColorPractice',
     component: () => import('@/views/vlog/after-editing/color-practice.vue'),
     meta: {
-      title: '后期剪辑-调色实践'
-    }
+      title: '后期剪辑-调色实践',
+    },
   },
   {
     path: '/vlog/export-publish',
     name: 'VlogExportPublish',
-    component: () => import('@/views/vlog/after-editing/export-publish/index.vue'),
+    component: () =>
+      import('@/views/vlog/after-editing/export-publish/index.vue'),
     meta: {
-      title: '后期剪辑-导出发布'
-    }
+      title: '后期剪辑-导出发布',
+    },
   },
   // 实战操作台
   {
@@ -189,8 +197,8 @@ const Vlog: RouteRecordRaw[] = [
     name: 'VlogPractice',
     component: () => import('@/views/vlog/practice/index.vue'),
     meta: {
-      title: '实战操作台'
-    }
+      title: '实战操作台',
+    },
   },
   // 我的创作笔记
   {
@@ -198,8 +206,17 @@ const Vlog: RouteRecordRaw[] = [
     name: 'VlogMyNotes',
     component: () => import('@/views/vlog/practice/my-notes/index.vue'),
     meta: {
-      title: '我的创作笔记'
-    }
+      title: '我的创作笔记',
+    },
+  },
+  // 教师点评
+  {
+    path: '/vlog/practice/teacher-comment',
+    name: 'VlogTeacherComment',
+    component: () => import('@/views/vlog/practice/teacher-comment/index.vue'),
+    meta: {
+      title: '教师点评',
+    },
   },
   // 他人实战作品
   {
@@ -208,9 +225,9 @@ const Vlog: RouteRecordRaw[] = [
     props: true,
     component: () => import('@/views/vlog/practice/video/index.vue'),
     meta: {
-      title: '他人实战作品'
-    }
-  }
+      title: '他人实战作品',
+    },
+  },
 ]
 
 export default Vlog
diff --git a/src/stores/modules/film.ts b/src/stores/modules/film.ts
index b4f78c4..fdd1866 100644
--- a/src/stores/modules/film.ts
+++ b/src/stores/modules/film.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { moduleStepMap } from '@/config/moduleStepMap'
 
-export const FILM_LESSON_ID = 'film_rwqjk'
+export const FILM_LESSON_ID = 'dianying_rwqjk'
 export const FILM_KEY = 4
 
 interface FilmSavePayload {
@@ -17,6 +17,7 @@ interface FilmSavePayload {
   editingVideosWatched?: Record<string, boolean>
   isGuideFilmEditingComplete?: boolean
   guideShown?: Record<string, boolean>
+  practiceScrollPage?: number
 }
 
 export const FILM_EDITING_VIDEO_KEYS = [
@@ -25,7 +26,7 @@ export const FILM_EDITING_VIDEO_KEYS = [
   'soundTransition',
   'cut',
   'association',
-  'continuity'
+  'continuity',
 ] as const
 
 async function getYibanApi(): Promise<typeof import('@/utils/yiban') | null> {
@@ -70,6 +71,7 @@ export const useFilmStore = defineStore(
     //Film-后期剪辑6个视频学完后的一次性引导
     const isGuideFilmEditingComplete = ref<boolean>(true)
     const guideShown = ref<Record<string, boolean>>({})
+    const practiceScrollPage = ref<number>(0)
 
     //Actions
     function saveFilmStore(): void {
@@ -84,12 +86,15 @@ export const useFilmStore = defineStore(
         filmMenuVisible: filmMenuVisible.value,
         editingVideosWatched: editingVideosWatched.value,
         isGuideFilmEditingComplete: isGuideFilmEditingComplete.value,
-        guideShown: guideShown.value
+        guideShown: guideShown.value,
+        practiceScrollPage: practiceScrollPage.value,
       }
 
       getYibanApi()
-        .then(api => api?.setUserDefine(FILM_LESSON_ID, FILM_KEY, JSON.stringify(payload)))
-        .catch(error => console.error('Failed to save Film store', error))
+        .then((api) =>
+          api?.setUserDefine(FILM_LESSON_ID, FILM_KEY, JSON.stringify(payload)),
+        )
+        .catch((error) => console.error('Failed to save Film store', error))
     }
 
     async function loadFilmStore(): Promise<void> {
@@ -110,8 +115,10 @@ export const useFilmStore = defineStore(
         FilmUnlockProgress.value = data.FilmUnlockProgress ?? 0
         filmMenuVisible.value = data.filmMenuVisible ?? false
         editingVideosWatched.value = data.editingVideosWatched ?? {}
-        isGuideFilmEditingComplete.value = data.isGuideFilmEditingComplete ?? true
+        isGuideFilmEditingComplete.value =
+          data.isGuideFilmEditingComplete ?? true
         guideShown.value = data.guideShown ?? {}
+        practiceScrollPage.value = data.practiceScrollPage ?? 0
       } catch (error) {
         console.error('Failed to load Film store', error)
       }
@@ -122,7 +129,7 @@ export const useFilmStore = defineStore(
       viewed.value[key] = true
       FilmUnlockProgress.value = Math.max(
         FilmUnlockProgress.value,
-        Math.min(completedStep.value + 1, 4)
+        Math.min(completedStep.value + 1, 4),
       )
       saveFilmStore()
     }
@@ -181,8 +188,15 @@ export const useFilmStore = defineStore(
       saveFilmStore()
     }
 
+    function setPracticeScrollPage(value: number): void {
+      practiceScrollPage.value = value
+      saveFilmStore()
+    }
+
     const allEditingVideosWatched = computed<boolean>(() =>
-      FILM_EDITING_VIDEO_KEYS.every(key => editingVideosWatched.value[key] === true)
+      FILM_EDITING_VIDEO_KEYS.every(
+        (key) => editingVideosWatched.value[key] === true,
+      ),
     )
 
     // 基于“子页面是否已查看”的大步骤完成度（1..3）
@@ -191,7 +205,7 @@ export const useFilmStore = defineStore(
 
     const completedStep = computed<number>(() => {
       const isDone = (step: 1 | 2 | 3) =>
-        stepRouteNames[step].every(name => viewed.value[name] === true)
+        stepRouteNames[step].every((name) => viewed.value[name] === true)
 
       if (isDone(1) && isDone(2) && isDone(3)) return 3
       if (isDone(1) && isDone(2)) return 2
@@ -203,7 +217,7 @@ export const useFilmStore = defineStore(
     const progressPercent = computed<number>(() => {
       const allRoutes = (Object.values(stepRouteNames) as string[][]).flat()
       if (allRoutes.length === 0) return 0
-      const viewedCount = allRoutes.filter(name => viewed.value[name]).length
+      const viewedCount = allRoutes.filter((name) => viewed.value[name]).length
       return Math.round((viewedCount / allRoutes.length) * 100)
     })
 
@@ -220,6 +234,7 @@ export const useFilmStore = defineStore(
       editingVideosWatched.value = {}
       isGuideFilmEditingComplete.value = true
       guideShown.value = {}
+      practiceScrollPage.value = 0
       saveFilmStore()
     }
 
@@ -236,6 +251,7 @@ export const useFilmStore = defineStore(
       markEditingVideoWatched,
       setIsGuideFilmEditingComplete,
       markGuideShown,
+      setPracticeScrollPage,
       saveFilmStore,
       loadFilmStore,
       resetFilmState,
@@ -253,10 +269,11 @@ export const useFilmStore = defineStore(
       editingVideosWatched,
       isGuideFilmEditingComplete,
       guideShown,
-      allEditingVideosWatched
+      practiceScrollPage,
+      allEditingVideosWatched,
     }
   },
   {
-    persist: true
-  }
+    persist: true,
+  },
 )
diff --git a/src/stores/modules/interview.ts b/src/stores/modules/interview.ts
index 4b65bba..3b9062d 100644
--- a/src/stores/modules/interview.ts
+++ b/src/stores/modules/interview.ts
@@ -15,6 +15,7 @@ interface InterviewSavePayload {
   InterviewUnlockProgress?: number
   interviewMenuVisible?: boolean
   guideShown?: Record<string, boolean>
+  practiceScrollPage?: number
 }
 
 async function getYibanApi(): Promise<typeof import('@/utils/yiban') | null> {
@@ -55,6 +56,7 @@ export const useInterviewStore = defineStore(
     //Interview-菜单 Overlay 是否可见
     const interviewMenuVisible = ref<boolean>(false)
     const guideShown = ref<Record<string, boolean>>({})
+    const practiceScrollPage = ref<number>(0)
 
     //Actions
     function saveInterviewStore(): void {
@@ -67,14 +69,21 @@ export const useInterviewStore = defineStore(
         isInterviewUnlock: isInterviewUnlock.value,
         InterviewUnlockProgress: InterviewUnlockProgress.value,
         interviewMenuVisible: interviewMenuVisible.value,
-        guideShown: guideShown.value
+        guideShown: guideShown.value,
+        practiceScrollPage: practiceScrollPage.value,
       }
 
       getYibanApi()
-        .then(api =>
-          api?.setUserDefine(INTERVIEW_LESSON_ID, INTERVIEW_KEY, JSON.stringify(payload))
+        .then((api) =>
+          api?.setUserDefine(
+            INTERVIEW_LESSON_ID,
+            INTERVIEW_KEY,
+            JSON.stringify(payload),
+          ),
+        )
+        .catch((error) =>
+          console.error('Failed to save Interview store', error),
         )
-        .catch(error => console.error('Failed to save Interview store', error))
     }
 
     async function loadInterviewStore(): Promise<void> {
@@ -95,6 +104,7 @@ export const useInterviewStore = defineStore(
         InterviewUnlockProgress.value = data.InterviewUnlockProgress ?? 0
         interviewMenuVisible.value = data.interviewMenuVisible ?? false
         guideShown.value = data.guideShown ?? {}
+        practiceScrollPage.value = data.practiceScrollPage ?? 0
       } catch (error) {
         console.error('Failed to load Interview store', error)
       }
@@ -105,7 +115,7 @@ export const useInterviewStore = defineStore(
       viewed.value[key] = true
       InterviewUnlockProgress.value = Math.max(
         InterviewUnlockProgress.value,
-        Math.min(completedStep.value + 1, 4)
+        Math.min(completedStep.value + 1, 4),
       )
       saveInterviewStore()
     }
@@ -116,7 +126,7 @@ export const useInterviewStore = defineStore(
 
     const completedStep = computed<number>(() => {
       const isDone = (step: 1 | 2 | 3) =>
-        stepRouteNames[step].every(name => viewed.value[name] === true)
+        stepRouteNames[step].every((name) => viewed.value[name] === true)
 
       if (isDone(1) && isDone(2) && isDone(3)) return 3
       if (isDone(1) && isDone(2)) return 2
@@ -127,7 +137,7 @@ export const useInterviewStore = defineStore(
     const progressPercent = computed<number>(() => {
       const allRoutes = (Object.values(stepRouteNames) as string[][]).flat()
       if (allRoutes.length === 0) return 0
-      const viewedCount = allRoutes.filter(name => viewed.value[name]).length
+      const viewedCount = allRoutes.filter((name) => viewed.value[name]).length
       return Math.round((viewedCount / allRoutes.length) * 100)
     })
 
@@ -173,6 +183,11 @@ export const useInterviewStore = defineStore(
       saveInterviewStore()
     }
 
+    function setPracticeScrollPage(value: number): void {
+      practiceScrollPage.value = value
+      saveInterviewStore()
+    }
+
     function resetInterviewState(): void {
       viewed.value = {}
       isGuideInterviewTask.value = true
@@ -183,6 +198,7 @@ export const useInterviewStore = defineStore(
       InterviewUnlockProgress.value = 0
       interviewMenuVisible.value = false
       guideShown.value = {}
+      practiceScrollPage.value = 0
       saveInterviewStore()
     }
 
@@ -197,6 +213,7 @@ export const useInterviewStore = defineStore(
       setInterviewUnlockProgress,
       setInterviewMenuVisible,
       markGuideShown,
+      setPracticeScrollPage,
       resetInterviewState,
       loadInterviewStore,
       saveInterviewStore,
@@ -211,10 +228,11 @@ export const useInterviewStore = defineStore(
       isInterviewUnlock,
       InterviewUnlockProgress,
       interviewMenuVisible,
-      guideShown
+      guideShown,
+      practiceScrollPage,
     }
   },
   {
-    persist: true
-  }
+    persist: true,
+  },
 )
diff --git a/src/stores/modules/vlog.ts b/src/stores/modules/vlog.ts
index 7350225..44b570f 100644
--- a/src/stores/modules/vlog.ts
+++ b/src/stores/modules/vlog.ts
@@ -16,6 +16,7 @@ interface VlogSavePayload {
   vlogUnlockProgress?: number
   vlogMenuVisible?: boolean
   guideShown?: Record<string, boolean>
+  practiceScrollPage?: number
 }
 
 async function getYibanApi(): Promise<typeof import('@/utils/yiban') | null> {
@@ -60,6 +61,7 @@ export const useVlogStore = defineStore(
     //vlog-发现与记录解锁进度
     const vlogUnlockProgress = ref<number>(0)
     const guideShown = ref<Record<string, boolean>>({})
+    const practiceScrollPage = ref<number>(0)
 
     //Actions
     function saveVlogStore(): void {
@@ -73,12 +75,15 @@ export const useVlogStore = defineStore(
         isVlogUnlock: isVlogUnlock.value,
         vlogUnlockProgress: vlogUnlockProgress.value,
         vlogMenuVisible: vlogMenuVisible.value,
-        guideShown: guideShown.value
+        guideShown: guideShown.value,
+        practiceScrollPage: practiceScrollPage.value,
       }
 
       getYibanApi()
-        .then(api => api?.setUserDefine(VLOG_LESSON_ID, VLOG_KEY, JSON.stringify(payload)))
-        .catch(error => console.error('Failed to save Vlog store', error))
+        .then((api) =>
+          api?.setUserDefine(VLOG_LESSON_ID, VLOG_KEY, JSON.stringify(payload)),
+        )
+        .catch((error) => console.error('Failed to save Vlog store', error))
     }
 
     async function loadVlogStore(): Promise<void> {
@@ -100,6 +105,7 @@ export const useVlogStore = defineStore(
         vlogUnlockProgress.value = data.vlogUnlockProgress ?? 0
         vlogMenuVisible.value = data.vlogMenuVisible ?? false
         guideShown.value = data.guideShown ?? {}
+        practiceScrollPage.value = data.practiceScrollPage ?? 0
       } catch (error) {
         console.error('Failed to load Vlog store', error)
       }
@@ -110,7 +116,7 @@ export const useVlogStore = defineStore(
       viewed.value[key] = true
       vlogUnlockProgress.value = Math.max(
         vlogUnlockProgress.value,
-        Math.min(completedStep.value + 1, 4)
+        Math.min(completedStep.value + 1, 4),
       )
       saveVlogStore()
     }
@@ -162,13 +168,18 @@ export const useVlogStore = defineStore(
       saveVlogStore()
     }
 
+    function setPracticeScrollPage(value: number): void {
+      practiceScrollPage.value = value
+      saveVlogStore()
+    }
+
     // 基于“子页面是否已查看”的大步骤完成度（1..3）
     // disabled 子项不计入（在这里直接不放进列表）
     const stepRouteNames = moduleStepMap.vlog
 
     const completedStep = computed<number>(() => {
       const isDone = (step: 1 | 2 | 3) =>
-        stepRouteNames[step].every(name => viewed.value[name] === true)
+        stepRouteNames[step].every((name) => viewed.value[name] === true)
 
       if (isDone(1) && isDone(2) && isDone(3)) return 3
       if (isDone(1) && isDone(2)) return 2
@@ -180,7 +191,7 @@ export const useVlogStore = defineStore(
     const progressPercent = computed<number>(() => {
       const allRoutes = (Object.values(stepRouteNames) as string[][]).flat()
       if (allRoutes.length === 0) return 0
-      const viewedCount = allRoutes.filter(name => viewed.value[name]).length
+      const viewedCount = allRoutes.filter((name) => viewed.value[name]).length
       return Math.round((viewedCount / allRoutes.length) * 100)
     })
 
@@ -195,6 +206,7 @@ export const useVlogStore = defineStore(
       isVlogUnlock.value = false
       vlogMenuVisible.value = false
       guideShown.value = {}
+      practiceScrollPage.value = 0
       saveVlogStore()
     }
 
@@ -213,6 +225,7 @@ export const useVlogStore = defineStore(
       resetVlogState,
       setVlogUnlockProgress,
       markGuideShown,
+      setPracticeScrollPage,
       //Actions
       completedStep,
       progressPercent,
@@ -225,10 +238,11 @@ export const useVlogStore = defineStore(
       isVlogUnlock,
       vlogUnlockProgress,
       vlogMenuVisible,
-      guideShown
+      guideShown,
+      practiceScrollPage,
     }
   },
   {
-    persist: true
-  }
+    persist: true,
+  },
 )
diff --git a/src/views/basic-elements/basic-shooting-skills/index.vue b/src/views/basic-elements/basic-shooting-skills/index.vue
index e65117b..7c9dc41 100644
--- a/src/views/basic-elements/basic-shooting-skills/index.vue
+++ b/src/views/basic-elements/basic-shooting-skills/index.vue
@@ -2,8 +2,12 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation, GuideSteps, GuideStepsItem } from '@/components/Guide'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
 
@@ -27,44 +31,48 @@ const rawSteps = [
     id: 'step2',
     label: '摄影基础',
     content: '手机摄像头介绍',
-    videoUrl: getPublicPath('video/new/shooting-skills/xinshou_shoujishexiangtoujieshao.mp4'),
-    type: 'post' as const
+    videoUrl: getPublicPath(
+      'video/new/shooting-skills/xinshou_shoujishexiangtoujieshao.mp4',
+    ),
+    type: 'post' as const,
   },
   {
     id: 'step3',
     label: '摄影基础',
     content: '景别概念介绍',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_jbgnjs_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step4',
     label: '摄影基础',
     content: '手机慢动作',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_sjmdz_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step5',
     label: '摄影基础',
     content: '延时摄影',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_yssy_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step6',
     label: '摄影基础',
     content: '神奇的微距摄影',
     videoUrl: getPublicPath('video/new/shooting-skills/xsdh_sqdwjsy_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step7',
     label: '摄影基础',
     content: '独具魅力的夜景摄影',
-    videoUrl: getPublicPath('video/new/shooting-skills/xsdh_djmldyjsy_batch.mp4'),
-    type: 'post' as const
-  }
+    videoUrl: getPublicPath(
+      'video/new/shooting-skills/xsdh_djmldyjsy_batch.mp4',
+    ),
+    type: 'post' as const,
+  },
 ]
 
 const navigationSteps = ref(rawSteps)
@@ -77,7 +85,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 // 题目数据：景别概念介绍（index 1）、手机慢动作（index 2）、独具魅力的夜景摄影（index 5）
 const questions = ref<Question[]>([])
@@ -90,24 +100,25 @@ const getQuestionsForVideo = (index: number): Question[] => {
       {
         id: 1,
         title: '',
-        description: '（单选）如果你想让观众“看清环境、理解空间关系”，更适合用哪种镜头？',
+        description:
+          '（单选）如果你想让观众“看清环境、理解空间关系”，更适合用哪种镜头？',
         options: [
           {
             id: 'a',
-            label: '面部特写视频'
+            label: '面部特写视频',
           },
           {
             id: 'b',
-            label: '中景人物视频'
+            label: '中景人物视频',
           },
           {
             id: 'c',
-            label: '全景环境视频'
-          }
+            label: '全景环境视频',
+          },
         ],
         correctOptionId: 'c',
-        explanation: '全景更适合交代故事发生在哪里。'
-      }
+        explanation: '全景更适合交代故事发生在哪里。',
+      },
     ]
   }
 
@@ -117,30 +128,32 @@ const getQuestionsForVideo = (index: number): Question[] => {
       {
         id: 2,
         title: '',
-        description: '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
+        description:
+          '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
         options: [
           {
             id: 'a',
-            label: '城市街道上车水马龙，车辆快速穿行'
+            label: '城市街道上车水马龙，车辆快速穿行',
           },
           {
             id: 'b',
-            label: '甩头发、转身、跳跃等人物动作瞬间'
+            label: '甩头发、转身、跳跃等人物动作瞬间',
           },
           {
             id: 'c',
-            label: '水花飞溅、雨滴落地、浪花拍岸'
+            label: '水花飞溅、雨滴落地、浪花拍岸',
           },
           {
             id: 'd',
-            label: '风吹动衣摆、窗帘或树叶缓慢摆动'
-          }
+            label: '风吹动衣摆、窗帘或树叶缓慢摆动',
+          },
         ],
         isMultiple: true,
         correctOptionIds: ['b', 'c', 'd'],
         correctOptionId: '', // 多选题时此字段不使用
-        explanation: '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。'
-      }
+        explanation:
+          '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。',
+      },
     ]
   }
 
@@ -154,20 +167,20 @@ const getQuestionsForVideo = (index: number): Question[] => {
         options: [
           {
             id: 'a',
-            label: '哪里好看就拍哪里'
+            label: '哪里好看就拍哪里',
           },
           {
             id: 'b',
-            label: '设备越贵，画面越好'
+            label: '设备越贵，画面越好',
           },
           {
             id: 'c',
-            label: '在合适的时间，用合适的方式拍'
-          }
+            label: '在合适的时间，用合适的方式拍',
+          },
         ],
         correctOptionId: 'c',
-        explanation: '拍摄要学会判断时间、光线和方式。'
-      }
+        explanation: '拍摄要学会判断时间、光线和方式。',
+      },
     ]
   }
 
@@ -252,7 +265,12 @@ const handleQuestionsComplete = () => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
diff --git a/src/views/basic-elements/camera-movement/index.vue b/src/views/basic-elements/camera-movement/index.vue
index dd59fa6..69f72c6 100644
--- a/src/views/basic-elements/camera-movement/index.vue
+++ b/src/views/basic-elements/camera-movement/index.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 // 运镜初识 - 暂时用运镜的基本方式代替
@@ -55,16 +55,20 @@ const navigationSteps = ref([
     id: 'step2',
     label: '视觉素养',
     content: '正确的手机拍摄持机姿势',
-    videoUrl: getPublicPath('video/new/movement/xinshou_zhengquedeshoujipaishe.mp4'),
-    type: 'planning' as const
+    videoUrl: getPublicPath(
+      'video/new/movement/xinshou_zhengquedeshoujipaishe.mp4',
+    ),
+    type: 'planning' as const,
   },
   {
     id: 'step3',
     label: '视觉素养',
     content: '运镜的基本方式',
-    videoUrl: getPublicPath('video/new/movement/xinshou_yunjingdejibenfangshi.mp4'),
-    type: 'planning' as const
-  }
+    videoUrl: getPublicPath(
+      'video/new/movement/xinshou_yunjingdejibenfangshi.mp4',
+    ),
+    type: 'planning' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -75,7 +79,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const handleVideoChange = () => {
   if (currentVideoIndex.value < navigationSteps.value.length - 1) {
     currentVideoIndex.value++
@@ -137,7 +143,12 @@ const handleStepNavigationClose = () => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
diff --git a/src/views/basic-elements/composition/index.vue b/src/views/basic-elements/composition/index.vue
index 58c4731..0831f82 100644
--- a/src/views/basic-elements/composition/index.vue
+++ b/src/views/basic-elements/composition/index.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
@@ -32,15 +32,15 @@ const navigationSteps = ref([
     label: '视觉素养',
     content: '如何选择构图',
     videoUrl: getPublicPath('video/new/composition/xsdh_rhxzgt_batch.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step2',
     label: '视觉素养',
     content: '九种经典构图方式',
     videoUrl: getPublicPath('video/new/composition/xsdh_jzgtf_batch.mp4'),
-    type: 'planning' as const
-  }
+    type: 'planning' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -51,7 +51,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const handleVideoChange = () => {
   if (currentVideoIndex.value < navigationSteps.value.length - 1) {
     currentVideoIndex.value++
@@ -115,7 +117,12 @@ onMounted(() => {})
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -180,7 +187,12 @@ onMounted(() => {})
               class="w-10 h-10 bg-blue-500/80 hover:bg-blue-500 rounded-full inline-flex items-center justify-center text-white transition-all duration-200"
               title="步骤导航"
             >
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+              >
                 <path
                   d="M3 4H17M3 8H17M3 12H17M3 16H17"
                   stroke="currentColor"
diff --git a/src/views/basic-elements/light/index.vue b/src/views/basic-elements/light/index.vue
index 2851589..ccc1de7 100644
--- a/src/views/basic-elements/light/index.vue
+++ b/src/views/basic-elements/light/index.vue
@@ -2,8 +2,11 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps } from '@/components/Guide'
 import GuideStepsItem from '@/components/Guide/GuideStepsItem.vue'
@@ -53,22 +56,22 @@ const navigationSteps = ref([
     label: '视觉素养',
     content: '光的基础认知',
     videoUrl: getPublicPath('video/new/light/xinshou_guangdejichurenzhi.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step3',
     label: '视觉素养',
     content: '光的四大属性',
     videoUrl: getPublicPath('video/new/light/xinshou_guangdesidashuxing.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step4',
     label: '视觉素养',
     content: '拍摄的黄金时间',
     videoUrl: getPublicPath('video/new/light/xsdh_psdhjsj_batch.mp4'),
-    type: 'planning' as const
-  }
+    type: 'planning' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -79,7 +82,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 // 题目数据：拍摄的黄金时间（index 2）
 const questions = ref<Question[]>([])
@@ -92,24 +97,25 @@ const getQuestionsForVideo = (index: number): Question[] => {
       {
         id: 1,
         title: '',
-        description: '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
+        description:
+          '(单选)同一条街道,在不同时间拍摄,哪一张画面更适合表现"温暖、舒服的日常感"?',
         options: [
           {
             id: 'a',
-            label: '正午直射光,阴影很硬,路面反光明显'
+            label: '正午直射光,阴影很硬,路面反光明显',
           },
           {
             id: 'b',
-            label: '傍晚低角度阳光,墙面被染成金色'
+            label: '傍晚低角度阳光,墙面被染成金色',
           },
           {
             id: 'c',
-            label: '夜晚路灯照明,光源复杂、色温混杂'
-          }
+            label: '夜晚路灯照明,光源复杂、色温混杂',
+          },
         ],
         correctOptionId: 'b',
-        explanation: '光线角度越低,画面柔和,情绪放大'
-      }
+        explanation: '光线角度越低,画面柔和,情绪放大',
+      },
     ]
   }
   return []
@@ -195,7 +201,12 @@ const handleQuestionsComplete = () => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -243,9 +254,13 @@ const handleQuestionsComplete = () => {
 
     <!-- 引导与高亮 -->
 
-    <GuideSteps v-if="isGuide" position-offset-y="85%" @complete="handleComplete">
+    <GuideSteps
+      v-if="isGuide"
+      position-offset-y="85%"
+      @complete="handleComplete"
+    >
       <GuideStepsItem :audio-src="getPublicPath('audio/py_1_009.MP3')">
-        光是摄影的灵魂，摄影高手一定是用光的高手
+        光是摄影的灵魂，摄影高手一定是用光的高手。
       </GuideStepsItem>
       <GuideStepsItem :audio-src="getPublicPath('audio/py_1_010.MP3')">
         现在， 让我们一起去认识光、读懂光。
diff --git a/src/views/basic-elements/short-video-editing-skills/index.vue b/src/views/basic-elements/short-video-editing-skills/index.vue
index 7a79580..3f613e7 100644
--- a/src/views/basic-elements/short-video-editing-skills/index.vue
+++ b/src/views/basic-elements/short-video-editing-skills/index.vue
@@ -2,7 +2,8 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation, GuideSteps, GuideStepsItem } from '@/components/Guide'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
@@ -26,72 +27,86 @@ const rawSteps = [
     id: 'step2',
     label: '剪映基础操作',
     content: '初识剪映专业版界面和功能',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_csjyzybjmhgn_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_csjyzybjmhgn_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step3',
     label: '剪映基础操作',
     content: '时间线的用法详解',
     videoUrl: getPublicPath('video/new/editing-skills/xsdh_sjxdyfxj_batch.mp4'),
-    type: 'other' as const
+    type: 'other' as const,
   },
   {
     id: 'step4',
     label: '剪映基础操作',
     content: '转场特效贴纸功能详解',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_zctxtzgnxj_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_zctxtzgnxj_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step5',
     label: '剪映基础操作',
     content: '如何给视频快速上字幕',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_rhgspksszm_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_rhgspksszm_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step6',
     label: '剪映基础操作',
     content: '音频的功能应用和处理',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_ypdgnyyhcl_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_ypdgnyyhcl_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step7',
     label: '剪映基础操作',
     content: '关键帧功能用法详解',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_gjzgnyfxj_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_gjzgnyfxj_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step8',
     label: '剪映基础操作',
     content: '蒙版功能用法详解',
     videoUrl: getPublicPath('video/new/editing-skills/xsdh_mbgnyfxj_batch.mp4'),
-    type: 'other' as const
+    type: 'other' as const,
   },
   {
     id: 'step9',
     label: '剪映基础操作',
     content: '混合模式功能用法详解',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_hhmsgnyfxj_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_hhmsgnyfxj_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step10',
     label: '剪映基础操作',
     content: '曲线变速功能用法详解',
-    videoUrl: getPublicPath('video/new/editing-skills/xsdh_qxbsgnyfxj_batch.mp4'),
-    type: 'other' as const
+    videoUrl: getPublicPath(
+      'video/new/editing-skills/xsdh_qxbsgnyfxj_batch.mp4',
+    ),
+    type: 'other' as const,
   },
   {
     id: 'step11',
     label: '剪映基础操作',
     content: '如何给画面调色',
     videoUrl: getPublicPath('video/new/editing-skills/xsdh_rhghmts_batch.mp4'),
-    type: 'other' as const
-  }
+    type: 'other' as const,
+  },
 ]
 
 const navigationSteps = ref(rawSteps)
@@ -163,7 +178,12 @@ const handleIntroGuideComplete = () => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
diff --git a/src/views/film/after-editing/editing/sound-transition.vue b/src/views/film/after-editing/editing/sound-transition.vue
index 6874fc1..8bfbe4d 100644
--- a/src/views/film/after-editing/editing/sound-transition.vue
+++ b/src/views/film/after-editing/editing/sound-transition.vue
@@ -2,7 +2,10 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import { useFilmStore } from '@/stores'
 
@@ -15,11 +18,11 @@ const handleBack = () => {
 
 // 声音转场视频 URL（暂时用其他视频代替）
 const soundTransitionVideoUrl = getPublicPath(
-  'video/film/editing/xianchangpaishe_shengyingzhuanchang1.mp4'
+  'video/film/editing/xianchangpaishe_shengyingzhuanchang1.mp4',
 )
 // const soundTransitionVideoUrl2 = getPublicPath('video/on-site/xianchangpaishe_yanshipaishe.mp4')
 const soundTransitionVideoUrl3 = getPublicPath(
-  'video/film/editing/xianchangpaishe_shengyingzhuanchang3.mp4'
+  'video/film/editing/xianchangpaishe_shengyingzhuanchang3.mp4',
 )
 
 // 视频播放状态
@@ -39,13 +42,14 @@ const questions = ref<Question[]>([
   {
     id: 1,
     title: '画面感受判断',
-    description: '播放视频，听听看，你觉得这个声音，像是用来结束一段画面，还是开启一段新的内容？',
+    description:
+      '播放视频，听听看，你觉得这个声音，像是用来结束一段画面，还是开启一段新的内容？',
     options: [
       { id: 'a', label: '开始' },
-      { id: 'b', label: '结束' }
+      { id: 'b', label: '结束' },
     ],
     correctOptionId: '', // 引导题，无对错
-    mediaSrc: soundTransitionVideoUrl
+    mediaSrc: soundTransitionVideoUrl,
   },
   {
     id: 2,
@@ -54,11 +58,11 @@ const questions = ref<Question[]>([
     options: [
       { id: 'a', label: '直接切画面' },
       { id: 'b', label: '用相似声音连接' },
-      { id: 'c', label: '用字幕说明' }
+      { id: 'c', label: '用字幕说明' },
     ],
     correctOptionId: 'b',
-    mediaSrc: 'film/on-site/声音转场jh_2.png'
-  }
+    mediaSrc: 'film/on-site/声音转场jh_2.png',
+  },
 ])
 
 // 答题完成
@@ -70,7 +74,9 @@ const handleQuestionsComplete = () => {
 </script>
 
 <template>
-  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+  <div
+    class="relative w-full h-full flex items-center justify-center overflow-hidden"
+  >
     <!-- 背景 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
@@ -113,7 +119,9 @@ const handleQuestionsComplete = () => {
         class="max-w-[1100px] w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-16 space-y-10 text-white pointer-events-auto"
       >
         <h2 class="text-4xl font-bold mb-4 leading-relaxed">结果验证</h2>
-        <div class="rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]">
+        <div
+          class="rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]"
+        >
           <Video
             class="w-full h-full"
             :src="soundTransitionVideoUrl3"
@@ -123,7 +131,9 @@ const handleQuestionsComplete = () => {
             :volume="1"
           />
         </div>
-        <div class="mt-6 p-6 rounded-xl bg-amber-500/20 border border-amber-400/30">
+        <div
+          class="mt-6 p-6 rounded-xl bg-amber-500/20 border border-amber-400/30"
+        >
           <div class="text-xl font-semibold text-amber-300 mb-2">提示语：</div>
           <div class="text-lg text-amber-100 leading-relaxed">
             <p>相似的声音，</p>
diff --git a/src/views/film/midterm-shooting/on-site/low-angle.vue b/src/views/film/midterm-shooting/on-site/low-angle.vue
index deb2c8d..f049d0f 100644
--- a/src/views/film/midterm-shooting/on-site/low-angle.vue
+++ b/src/views/film/midterm-shooting/on-site/low-angle.vue
@@ -2,8 +2,15 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { QuestionQuiz, type Question } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 
 const router = useRouter()
 
@@ -16,14 +23,15 @@ const questions = ref<Question[]>([
   {
     id: 1,
     title: '画面感受判断',
-    description: '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
+    description:
+      '如果你身处滨江岸边，看到一位正在打太极的老人，你会选择哪个角度拍摄？',
     options: [
       { id: 'a', label: '平视拍摄' },
       { id: 'b', label: '俯拍' },
-      { id: 'c', label: '低角度仰拍' }
+      { id: 'c', label: '低角度仰拍' },
     ],
     correctOptionId: '', // 引导题，没有正确答案，任意选择都可进入下一题
-    mediaSrc: 'film/on-site/低角度拍摄jh_1.png'
+    mediaSrc: 'film/on-site/低角度拍摄jh_1.png',
   },
   {
     id: 2,
@@ -33,11 +41,11 @@ const questions = ref<Question[]>([
       { id: 'a', label: '放大了人物的真实身高' },
       { id: 'b', label: '强化了人物动作的力量感与气势' },
       { id: 'c', label: '让背景元素显得更加丰富' },
-      { id: 'd', label: '让画面信息量变得更多' }
+      { id: 'd', label: '让画面信息量变得更多' },
     ],
     correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4')
-  }
+    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_dijiaodu.mp4'),
+  },
 ])
 
 const showSummaryStep = ref(false)
diff --git a/src/views/film/midterm-shooting/on-site/slider.vue b/src/views/film/midterm-shooting/on-site/slider.vue
index 23e0087..fc12df2 100644
--- a/src/views/film/midterm-shooting/on-site/slider.vue
+++ b/src/views/film/midterm-shooting/on-site/slider.vue
@@ -2,7 +2,10 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, IMAGE_PATHS } from '@/utils'
 
 const router = useRouter()
@@ -12,7 +15,9 @@ const handleBack = () => {
 }
 
 // 滑轨拍摄视频 URL
-const sliderVideoUrl = getPublicPath('video/film/on-site/dygmk_hgydjt_batch.mp4')
+const sliderVideoUrl = getPublicPath(
+  'video/film/on-site/dygmk_hgydjt_batch.mp4',
+)
 
 // 视频播放状态
 const videoEnded = ref(false)
@@ -34,15 +39,16 @@ const questions = ref<Question[]>([
     options: [
       {
         id: 'a',
-        label: '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止'
+        label:
+          '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止',
       },
       { id: 'b', label: '人物站在窗边，前景有栏杆或墙体，镜头缓慢横向移动' },
-      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' }
+      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' },
     ],
     correctOptionId: 'b',
     explanation:
-      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。'
-  }
+      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。',
+  },
 ])
 
 // 答题完成
@@ -52,7 +58,9 @@ const handleQuestionsComplete = () => {
 </script>
 
 <template>
-  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+  <div
+    class="relative w-full h-full flex items-center justify-center overflow-hidden"
+  >
     <!-- 视频播放区域 -->
     <Video
       class="w-full h-full"
diff --git a/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue b/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue
index 7866585..d30162e 100644
--- a/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue
+++ b/src/views/film/midterm-shooting/on-site/slow-shutter-day.vue
@@ -2,8 +2,15 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { QuestionQuiz, type Question } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 
 const router = useRouter()
 
@@ -19,11 +26,12 @@ const questions = ref<Question[]>([
     description: '在这个白天场景中，画面里的运动变化，是否容易被直接观察到？',
     options: [
       { id: 'a', label: '是，变化本身已经很清楚' },
-      { id: 'b', label: '否，变化存在，但不容易被完整感知' }
+      { id: 'b', label: '否，变化存在，但不容易被完整感知' },
     ],
     correctOptionId: 'b',
     mediaSrc: 'film/on-site/白天慢门jh_1.png',
-    explanation: '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。'
+    explanation:
+      '白天光照条件下，许多运动变化存在于连续时间中，并不容易被单帧画面完整呈现。',
   },
   {
     id: 2,
@@ -33,11 +41,13 @@ const questions = ref<Question[]>([
     options: [
       { id: 'a', label: '提高 ISO' },
       { id: 'b', label: '加装 ND 镜片，降低快门速度' },
-      { id: 'c', label: '使用连拍模式' }
+      { id: 'c', label: '使用连拍模式' },
     ],
     correctOptionId: 'b',
-    mediaSrc: getPublicPath('video/film/on-site/xianchangpaishe_baitianmanmen.mp4')
-  }
+    mediaSrc: getPublicPath(
+      'video/film/on-site/xianchangpaishe_baitianmanmen.mp4',
+    ),
+  },
 ])
 
 const showSummaryStep = ref(false)
diff --git a/src/views/film/midterm-shooting/on-site/time-lapse.vue b/src/views/film/midterm-shooting/on-site/time-lapse.vue
index b347794..9ace144 100644
--- a/src/views/film/midterm-shooting/on-site/time-lapse.vue
+++ b/src/views/film/midterm-shooting/on-site/time-lapse.vue
@@ -2,13 +2,18 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 
 const router = useRouter()
 
 // 延时拍摄视频 URL（占位，后续可替换）
-const timeLapseVideoUrl = getPublicPath('video/film/on-site/xianchangpaishe_yanshipaishe.mp4')
+const timeLapseVideoUrl = getPublicPath(
+  'video/film/on-site/xianchangpaishe_yanshipaishe.mp4',
+)
 
 const handleBack = () => {
   router.back()
@@ -19,29 +24,31 @@ const questions = ref<Question[]>([
   {
     id: 1,
     title: '观察判断',
-    description: '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
+    description:
+      '如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
     options: [
       { id: 'a', label: '建筑的外形结构' },
       { id: 'b', label: '天空的颜色' },
       { id: 'c', label: '时间的变化' },
-      { id: 'd', label: '画面的清晰度' }
+      { id: 'd', label: '画面的清晰度' },
     ],
     correctOptionId: 'c',
-    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
   },
   {
     id: 2,
     title: '方法选择',
-    description: '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
+    description:
+      '如果希望在很短时间内，让观众明显感知“时间正在流动”，你会选择哪种拍摄方式？',
     options: [
       { id: 'a', label: '手持拍摄' },
       { id: 'b', label: '慢动作拍摄' },
       { id: 'c', label: '延时拍摄' },
-      { id: 'd', label: '推拉镜头' }
+      { id: 'd', label: '推拉镜头' },
     ],
     correctOptionId: 'c',
-    mediaSrc: 'film/on-site/延时拍摄jh_1.png' // 占位：请按需替换为真实图片
-  }
+    mediaSrc: 'film/on-site/延时拍摄jh_1.png', // 占位：请按需替换为真实图片
+  },
 ])
 
 const showObserveStep = ref(false)
@@ -79,7 +86,9 @@ const handleQuestionsComplete = () => {
           <!-- 总结文本内容 -->
           <div class="w-2/6 text-2xl leading-10 opacity-90 space-y-3">
             <h2 class="text-4xl font-bold mb-4 leading-relaxed">总结</h2>
-            <p>在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。</p>
+            <p>
+              在这个延时画面中，注意天空变化与光影移动的节奏，它们在短时间内被连续呈现出来。
+            </p>
 
             <p>
               <span>延时拍摄的主要目的</span>
diff --git a/src/views/film/midterm-shooting/shooting/index.vue b/src/views/film/midterm-shooting/shooting/index.vue
index 585adfa..a17968b 100644
--- a/src/views/film/midterm-shooting/shooting/index.vue
+++ b/src/views/film/midterm-shooting/shooting/index.vue
@@ -4,7 +4,12 @@ import { useRouter } from 'vue-router'
 import { GuideSteps } from '@/components/Guide'
 import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/new/composition/xsdh_jzgtf_batch.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/FilmKnowledgeCard.vue'
@@ -35,26 +40,26 @@ const steps = ref([
     id: '1',
     audioSrc: getPublicPath('audio/py_4_015.MP3'),
     content: '哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~',
-    highlightSelector: '.btn-1'
-  }
+    highlightSelector: '.btn-1',
+  },
 ])
 
 const guideSteps = ref([
   {
     id: '1',
     content: '点击框架构图，查看构图方法',
-    highlightSelector: '.btn-item-1'
+    highlightSelector: '.btn-item-1',
   },
   {
     id: '2',
     content: '点击对称构图，查看构图方法',
-    highlightSelector: '.btn-item-2'
+    highlightSelector: '.btn-item-2',
   },
   {
     id: '3',
     content: '点击引导线构图，查看构图方法',
-    highlightSelector: '.btn-item-3'
-  }
+    highlightSelector: '.btn-item-3',
+  },
 ])
 const showModal = ref(false)
 
@@ -65,7 +70,7 @@ const currentItem = ref<Btn>({
   name: '',
   btnImage: '',
   images: [],
-  desc: ''
+  desc: '',
 })
 
 const btnList = ref<Btn[]>([
@@ -74,22 +79,25 @@ const btnList = ref<Btn[]>([
     name: '框架构图',
     btnImage: 'film/shooting/框架构图',
     desc: '框架构图是拍摄时用“框架”把主体框起来，可以让画面更加有空间感及层次感，并且使用也并不复杂，比如镜子、门窗、山洞等，也可以说是光影框等。',
-    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
+    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图'],
   },
   {
     key: '2',
     name: '对称构图',
     btnImage: 'film/shooting/对称构图',
     desc: '对称构图是通过画面中轴线（水平 / 垂直）两侧元素镜像分布的构图方式，属于平衡类构图。它借对称的视觉均衡感，让画面显规整、稳定，同时强化主体秩序与美感。拍摄可找天然对称景物（如建筑、倒影），或调整角度让元素对称；略有不对称可后期微调，适合展现建筑、对称静物等规整场景。',
-    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图']
+    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图'],
   },
   {
     key: '3',
     name: '引导线构图',
     btnImage: 'film/shooting/引导线构图',
-    desc: '引导线构图的关键在于引导线，借助环境中的引导线，把观者注意力集中到引导线上，营造画面纵深效果，我们日常拍摄中常见的引导线有:马路及其延伸(马路线、栏杆、走廊)',
-    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
-  }
+    desc: '引导线构图的关键在于引导线，借助环境中的引导线，把观者注意力集中到引导线上，营造画面纵深效果，我们日常拍摄中常见的引导线有:马路及其延伸(马路线、栏杆、走廊)。',
+    images: [
+      'film/shooting/05引导线构图_底图',
+      'film/shooting/06引导线构图_底图',
+    ],
+  },
 ])
 
 const handleModalClose = () => {
@@ -135,19 +143,36 @@ const back = () => {
     ></div>
 
     <div class="shooting-title">
-      <img :src="shootingtitle" alt="" />
+      <img
+        :src="shootingtitle"
+        alt=""
+      />
     </div>
     <div class="shooting-return">
-      <ImgButton image="shooting/返回.png" @click="back" />
+      <ImgButton
+        image="shooting/返回.png"
+        @click="back"
+      />
     </div>
     <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton class="btn-2" image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
+      <ImgButton
+        class="btn-2"
+        image="film/shooting/龙美术馆入口.png"
+        @click="handleClickA"
+      />
     </div>
     <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton class="btn-3" image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
+      <ImgButton
+        class="btn-3"
+        image="film/shooting/油罐艺术公园入口.png"
+        @click="handleClickB"
+      />
     </div>
     <div class="shooting-composition btn-1">
-      <ImgButton image="shooting/构图指南.png" @click="openCompositionGuide" />
+      <ImgButton
+        image="shooting/构图指南.png"
+        @click="openCompositionGuide"
+      />
     </div>
 
     <!-- 引导步骤 -->
@@ -164,7 +189,7 @@ const back = () => {
       :visible="showModal"
       :clickable="false"
       :customStyle="{
-        backgroundImage: getBackgroundImage('film/shooting/构图指南底图')
+        backgroundImage: getBackgroundImage('film/shooting/构图指南底图'),
       }"
       customClass="inset-0 bg-cover bg-center bg-no-repeat"
       contentClass="relative w-full h-full"
@@ -177,15 +202,25 @@ const back = () => {
       />
 
       <!-- 构图指南 -->
-      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+      <ImgButton
+        class="absolute left-0 top-0 z-10"
+        image="shooting/标题-构图指南"
+      />
 
       <!-- 新手导航视频 -->
       <div class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2">
-        <ImgButton image="shooting/新手导航-视频回顾" @click="showModal3 = true" />
+        <ImgButton
+          image="shooting/新手导航-视频回顾"
+          @click="showModal3 = true"
+        />
         <div
           class="absolute left-[40%] top-[42%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
         >
-          <img class="w-32" :src="getStaticImage('work/小手')" alt="" />
+          <img
+            class="w-32"
+            :src="getStaticImage('work/小手')"
+            alt=""
+          />
           <span class="text-white text-2xl font-bold ml-5">点击进入</span>
         </div>
       </div>
@@ -220,8 +255,16 @@ const back = () => {
         @close="showModal2 = false"
       />
       <!-- 视频 -->
-      <Overlay :visible="showModal3" :clickable="false">
-        <Video :src="videoSrc" controls :volume="1" :muted="false"></Video>
+      <Overlay
+        :visible="showModal3"
+        :clickable="false"
+      >
+        <Video
+          :src="videoSrc"
+          controls
+          :volume="1"
+          :muted="false"
+        ></Video>
         <!-- 返回 -->
         <ImgButton
           class="absolute right-0 top-0 z-10"
diff --git a/src/views/film/practice/index.vue b/src/views/film/practice/index.vue
index 2984768..a48e9a0 100644
--- a/src/views/film/practice/index.vue
+++ b/src/views/film/practice/index.vue
@@ -4,7 +4,7 @@ import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
 import { useRouter } from 'vue-router'
-import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+import BackToTopIcon from '@/assets/images/components/置顶.png'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useFilmStore } from '@/stores/modules/film'
 
@@ -26,7 +26,9 @@ const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
 
 /** 是否正在从第二页回到第一页 */
 const isScrollingBackToFirst = computed<boolean>(() => {
-  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  return (
+    isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  )
 })
 
 /** 第一页坐着的人物是否显示 */
@@ -42,7 +44,7 @@ const guideKeyPrefix = 'film-practice-page'
 const steps = ref([
   '欢迎来到实战操作台！ 这里的内容很丰富，滚动鼠标就能浏览到全部内容啦~',
   '点击【我的创作笔记】，编写创作思路～',
-  '点击【查看】按钮，欣赏他人实战作品～'
+  '点击【查看】按钮，欣赏他人实战作品～',
 ])
 
 const currentGuideKey = computed(() => `${guideKeyPrefix}-${currentPage.value}`)
@@ -75,8 +77,8 @@ const worksList = ref<WorkItem[]>([
     stars: 4,
     path: '/video/film/practice/film_anli1.mp4',
     description:
-      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
-  }
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介',
+  },
 ])
 
 /** 左滑动作品列表 */
@@ -168,18 +170,44 @@ const handleWheel = (event: WheelEvent): void => {
   }
 }
 
+const restoreScrollPage = (): void => {
+  const savedPage = filmStore.practiceScrollPage
+  const targetPage = Math.max(0, Math.min(savedPage, TOTAL_PAGES - 1))
+
+  currentPage.value = targetPage
+  animatingToPage.value = targetPage
+  requestAnimationFrame(() => {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = targetPage * PAGE_HEIGHT
+    }
+  })
+}
+
+const saveScrollPage = (): void => {
+  const page = containerRef.value
+    ? Math.round(containerRef.value.scrollTop / PAGE_HEIGHT)
+    : currentPage.value
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  filmStore.setPracticeScrollPage(targetPage)
+}
+
 onMounted(() => {
+  restoreScrollPage()
   showPageGuide()
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
 onUnmounted(() => {
+  saveScrollPage()
   containerRef.value?.removeEventListener('wheel', handleWheel)
 })
 </script>
 
 <template>
-  <div ref="containerRef" class="w-full h-full overflow-auto">
+  <div
+    ref="containerRef"
+    class="w-full h-full overflow-auto"
+  >
     <div class="relative min-h-full overflow-hidden">
       <!-- 关闭 -->
       <ImgButton
@@ -188,16 +216,19 @@ onUnmounted(() => {
         @click="handleClose"
       />
       <!-- 实战操作台 -->
-      <div
-        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
-        :style="{ backgroundImage: getBackgroundImage('film/practice/实战操作台首页- 电影感') }"
-      >
+      <div class="w-full h-[1080px] bg-[#F5EFE6] relative">
         <ImgButton
-          class="absolute left-40 bottom-28 z-10"
+          class="absolute left-40 bottom-14 z-10"
           image="vlog/practice/查看任务要求"
           @click="scrollToNextPage"
         />
         <!-- img -->
+        <img
+          class="absolute left-0 top-0 z-10"
+          draggable="false"
+          :src="getStaticImage('film/practice/电影')"
+          alt=""
+        />
         <img
           class="absolute right-0"
           draggable="false"
@@ -212,12 +243,18 @@ onUnmounted(() => {
       >
         <ImgButton
           class="absolute right-20 bottom-0 z-99"
-          image="vlog/practice/我的创作笔记"
+          image="vlog/practice/我的创作笔记btn"
           path="/film/practice/my-notes"
         />
 
-        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
-          <img :src="getStaticImage('film/practice/滑动任务面板-电影感')" alt="" />
+        <div
+          class="task-panel w-[757px] h-full ml-10 overflow-y-auto"
+          @wheel.stop
+        >
+          <img
+            :src="getStaticImage('film/practice/任务要求')"
+            alt=""
+          />
         </div>
 
         <img
@@ -239,7 +276,9 @@ onUnmounted(() => {
       <!-- 他人实战作品 -->
       <div
         class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+        :style="{
+          backgroundImage: getBackgroundImage('vlog/practice/他人实战作品'),
+        }"
       >
         <!-- 作品列表 -->
         <div class="w-full overflow-hidden">
@@ -254,15 +293,27 @@ onUnmounted(() => {
             >
               <!-- 作品图片 -->
               <div class="w-full h-[280px] rounded-2xl overflow-hidden">
-                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+                <img
+                  class="w-full h-full object-cover"
+                  :src="work.image"
+                  :alt="work.title"
+                />
               </div>
               <!-- 作品信息 -->
               <div class="flex flex-col items-center pt-8 space-y-4">
-                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">
+                  {{ work.title }}
+                </h3>
                 <!-- 星星评分 -->
-                <StarRating :score="work.stars" size="lg" readonly />
+                <StarRating
+                  :score="work.stars"
+                  size="lg"
+                  readonly
+                />
                 <!-- 简介 -->
-                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                <p
+                  class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed"
+                >
                   {{ work.description }}
                 </p>
                 <!-- 查看按钮 -->
@@ -275,7 +326,7 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <!-- 指示按钮 -->
+        <!-- 指示按钮，暂时不要
         <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
           <img
             class="cursor-pointer hover:scale-110 transition-transform"
@@ -286,19 +337,23 @@ onUnmounted(() => {
           />
           <img
             class="cursor-pointer hover:scale-110 transition-transform rotate-180"
-            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                worksScrollIndex >= worksList.length - 3,
+            }"
             :src="getStaticImage('vlog/practice/滑动左')"
             alt="向右"
             @click="scrollWorksRight"
           />
         </div>
+        -->
       </div>
     </div>
 
     <!-- 下滑按钮 - 最后一页隐藏 -->
     <ImgButton
       v-show="!isLastPage"
-      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      class="absolute bottom-0 left-1/2 down-scroll-hint"
       :image="'vlog/practice/下滑'"
       @click="scrollToNextPage"
     />
@@ -306,13 +361,16 @@ onUnmounted(() => {
     <!-- 回到顶部按钮 - 最后一页显示 -->
     <img
       v-show="isLastPage"
-      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      class="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105"
       :src="BackToTopIcon"
       @click="scrollToTop"
     />
 
     <!-- 跨页人物动画 -->
-    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+    <div
+      v-show="showSittingPerson || isScrollingBackToFirst"
+      class="character-container"
+    >
       <!-- 坐着的人物 - 第一页 -->
       <Transition name="fade">
         <img
@@ -335,7 +393,11 @@ onUnmounted(() => {
       </Transition>
     </div>
 
-    <GuideSteps v-if="visible" position-offset-y="70%" @complete="visible = false">
+    <GuideSteps
+      v-if="visible"
+      position-offset-y="70%"
+      @complete="visible = false"
+    >
       <GuideStepsItem>{{ contentSteps }}</GuideStepsItem>
     </GuideSteps>
   </div>
@@ -355,6 +417,22 @@ onUnmounted(() => {
   /* Chrome/Safari/Opera */
 }
 
+.down-scroll-hint {
+  transform: translateX(-50%);
+  animation: down-scroll-hint 1.4s ease-in-out infinite;
+}
+
+@keyframes down-scroll-hint {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+
+  50% {
+    transform: translate(-50%, 12px);
+  }
+}
+
 /* 第一页人物动画容器 */
 .character-container {
   position: fixed;
diff --git a/src/views/film/practice/my-notes/index.vue b/src/views/film/practice/my-notes/index.vue
index 9c84e47..788fcd5 100644
--- a/src/views/film/practice/my-notes/index.vue
+++ b/src/views/film/practice/my-notes/index.vue
@@ -3,8 +3,9 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { Overlay } from '@/components/Overlay'
-import { StarRating } from '@/components/Rating'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
 
 const router = useRouter()
 
@@ -21,42 +22,33 @@ const handleBack = (): void => {
 
 const disabled = computed<boolean>(() => noteContent.value.trim() === '')
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
     title: '画面氛围',
     description: '画面具有明确情绪或空间气质，整体风格统一',
-    score: 4
+    score: 4,
   },
   {
     title: '拍摄方法',
     description: '拍摄方式选择合理，镜头语言服务于画面表达',
-    score: 2
+    score: 2,
   },
   {
     title: '剪辑逻辑',
     description: '剪辑节奏清晰，镜头衔接自然，有整体感',
-    score: 5
+    score: 5,
   },
   {
     title: '创作意识',
     description: '能体现主动构思，而非随拍拼接',
-    score: 0
+    score: 0,
   },
   {
     title: '综合观感',
     description: '作品具有“电影感”，完成度高',
-    score: 5
-  }
+    score: 5,
+  },
 ])
 const handleSave = (): void => {
   console.log('保存笔记')
@@ -67,7 +59,9 @@ const handleSave = (): void => {
 <template>
   <div
     class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
-    :style="{ backgroundImage: getBackgroundImage('film/practice/创作笔记底图-电影感') }"
+    :style="{
+      backgroundImage: getBackgroundImage('film/practice/我的创作笔记'),
+    }"
   >
     <ImgButton
       class="absolute top-0 right-0"
@@ -83,53 +77,25 @@ const handleSave = (): void => {
     ></textarea>
 
     <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
-      <ImgButton image="vlog/practice/保存" @click="handleSave" />
-      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+      <ImgButton
+        image="vlog/practice/保存"
+        @click="handleSave"
+      />
+      <ImgButton
+        image="vlog/practice/自评"
+        :disabled="disabled"
+        @click="showModal = true"
+      />
     </div>
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
-        :style="{ backgroundImage: getBackgroundImage('film/practice/评分底板-电影感') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div class="pl-10 space-y-10 mt-10">
-            <p class="glow-text">
-              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
-            </p>
-            <div
-              v-for="(item, index) in evaluationItems"
-              :key="index"
-              class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-              :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-            >
-              <div class="pr-8 space-y-10">
-                <h4 class="text-3xl font-bold text-white mb-3">
-                  {{ `0${index + 1}` }} {{ item.title }}
-                </h4>
-                <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                  {{ item.description }}
-                </p>
-              </div>
-              <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-            </div>
-            <p class="glow-text">
-              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
-            </p>
-            <div class="w-full flex justify-center">
-              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="film/practice/电影感短视频创作-作品评分表"
+      top-tip="评分时要关注5个维度哦～分别是画面氛围、抽摄方法、剪辑逻辑、创作意识、综合观感，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
 
@@ -146,25 +112,4 @@ textarea::placeholder {
   color: #5d5b5b;
   font-weight: 700;
 }
-
-.glow-text {
-  color: white;
-  font-size: 2rem;
-  font-weight: bold;
-  text-shadow:
-    /* 描边效果 - 多层阴影模拟描边 */
-    -1px -1px 0 #0066ff,
-    1px -1px 0 #0066ff,
-    -1px 1px 0 #0066ff,
-    1px 1px 0 #0066ff,
-    -2px -2px 0 #0066ff,
-    2px -2px 0 #0066ff,
-    -2px 2px 0 #0066ff,
-    2px 2px 0 #0066ff,
-    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
-    0 0 20px #0066ff,
-    0 0 30px #0066ff,
-    0 0 40px #0066ff,
-    0 0 50px #0066ff;
-}
 </style>
diff --git a/src/views/film/practice/video/index.vue b/src/views/film/practice/video/index.vue
index 626458b..fde5b16 100644
--- a/src/views/film/practice/video/index.vue
+++ b/src/views/film/practice/video/index.vue
@@ -2,9 +2,10 @@
 import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
-import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage, getPublicPath } from '@/utils'
-import { Overlay } from '@/components/Overlay'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
+import { IMAGE_PATHS, getPublicPath } from '@/utils'
 import { ref } from 'vue'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { useFilmStore } from '@/stores/modules/film'
@@ -20,46 +21,37 @@ if (showGuide.value) {
 const props = defineProps({
   path: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '画面氛围',
+    description: '画面具有明确情绪或空间气质，整体风格统一',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '拍摄方法',
+    description: '拍摄方式选择合理，镜头语言服务于画面表达',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '剪辑逻辑',
+    description: '剪辑节奏清晰，镜头衔接自然，有整体感',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '创作意识',
+    description: '能体现主动构思，而非随拍拼接',
+    score: 0,
   },
   {
-    title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    title: '综合观感',
+    description: '作品具有“电影感”，完成度高',
+    score: 5,
+  },
 ])
 
 /** 保存弹窗 */
@@ -91,49 +83,19 @@ const handleBack = (): void => {
       :loop="false"
     />
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
-    <GuideSteps :visible="showGuide" :highlight-selector="'.btn-1'" position-offset-y="60%">
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="film/practice/电影感短视频创作-作品评分表"
+      top-tip="评分时要关注5个维度哦～分别是画面氛围、抽摄方法、剪辑逻辑、创作意识、综合观感，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
+    <GuideSteps
+      :visible="showGuide"
+      :highlight-selector="'.btn-1'"
+      position-offset-y="60%"
+    >
       <GuideStepsItem>点击这里可以给作品评分噢～</GuideStepsItem>
     </GuideSteps>
   </div>
diff --git a/src/views/film/video/index.vue b/src/views/film/video/index.vue
index bcfaf82..4395ec3 100644
--- a/src/views/film/video/index.vue
+++ b/src/views/film/video/index.vue
@@ -2,8 +2,12 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, GuideStepsItem, StepNavigation } from '@/components/Guide'
-import { Video, QuestionQuiz, type Question } from '@/components'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
+import { Video } from '@/components'
+import QuestionQuiz, {
+  type Question,
+} from '@/components/QuestionQuiz/QuestionQuiz.vue'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useFilmStore } from '@/stores'
 
@@ -33,44 +37,44 @@ const navigationSteps = ref([
     id: 'step1',
     label: '后期制作',
     videoUrl: getPublicPath('video/film/work/dygmk_zf_batch.mp4'),
-    content: '遮幅'
+    content: '遮幅',
   },
   {
     id: 'step2',
     label: '拍摄执行',
     videoUrl: getPublicPath('video/film/work/dygmk_gx_batch.mp4'),
-    content: '光线'
+    content: '光线',
   },
   {
     id: 'step3',
     label: '拍摄执行',
     videoUrl: getPublicPath('video/film/work/dygmk_xs_batch.mp4'),
-    content: '虚实'
+    content: '虚实',
   },
   {
     id: 'step4',
     label: '拍摄执行',
     videoUrl: getPublicPath('video/film/work/dygmk_txjt_batch.mp4'),
-    content: '特写镜头'
+    content: '特写镜头',
   },
   {
     id: 'step5',
     label: '拍摄执行',
     videoUrl: getPublicPath('video/film/work/dygmk_fjt_batch.mp4'),
-    content: '分镜头'
+    content: '分镜头',
   },
   {
     id: 'step5',
     label: '后期制作',
     videoUrl: getPublicPath('video/film/work/dygmk_lj_batch.mp4'),
-    content: '滤镜'
+    content: '滤镜',
   },
   {
     id: 'step5',
     label: '拍摄执行',
     videoUrl: getPublicPath('video/film/work/dygmk_tqs_batch.mp4'),
-    content: '同期声'
-  }
+    content: '同期声',
+  },
 ])
 
 // 步骤导航相关状态
@@ -94,17 +98,17 @@ const getQuestionsForVideo = (index: number): Question[] => {
         options: [
           {
             id: 'a',
-            label: '前景、人物、背景全部清晰'
+            label: '前景、人物、背景全部清晰',
           },
           {
             id: 'b',
-            label: '前景虚化,人物清晰,背景有层次'
-          }
+            label: '前景虚化,人物清晰,背景有层次',
+          },
         ],
         correctOptionId: 'b',
         explanation:
-          '电影感的画面,往往会主动模糊一部分信息。这是为了把观众的注意力,留给正在发生的情绪。'
-      }
+          '电影感的画面,往往会主动模糊一部分信息。这是为了把观众的注意力,留给正在发生的情绪。',
+      },
     ]
   }
   // 分镜头（index 4）
@@ -117,25 +121,28 @@ const getQuestionsForVideo = (index: number): Question[] => {
         options: [
           {
             id: 'a',
-            label: '特写→中景→ 全景'
+            label: '特写→中景→ 全景',
           },
           {
             id: 'b',
-            label: '全景→ 中景→ 特写'
-          }
+            label: '全景→ 中景→ 特写',
+          },
         ],
         correctOptionId: 'b',
-        explanation: '电影里的镜头, 往往是从环境进入人物,再进入情绪。'
-      }
+        explanation: '电影里的镜头, 往往是从环境进入人物,再进入情绪。',
+      },
     ]
   }
   return []
 }
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const resolvedSrc = computed(() => {
-  if (key.value === 'case') return getPublicPath('video/film/work/dygmk_zbbwg_batch.mp4')
+  if (key.value === 'case')
+    return getPublicPath('video/film/work/dygmk_zbbwg_batch.mp4')
   if (key.value === 'profession') return currentVideo.value
   return ''
 })
@@ -148,8 +155,9 @@ const handleVideoChange = () => {
     steps.value = [
       {
         id: 'step1',
-        content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
-      }
+        content:
+          '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!',
+      },
     ]
     return
   }
@@ -164,7 +172,7 @@ const handleClose = () => {
     film.setFilmUnlockProgress(1)
     router.push({
       name: 'Film',
-      query: { guide: 'return' }
+      query: { guide: 'return' },
     })
     return
   }
@@ -200,7 +208,7 @@ const handleComplete = () => {
   if (key.value === 'profession') {
     if (!film.isFilmUnlock) film.setIsFilmUnlock(true)
     router.push({
-      name: 'FilmWork'
+      name: 'FilmWork',
     })
   }
 }
@@ -239,7 +247,10 @@ onMounted(() => {})
 </script>
 
 <template>
-  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+  <div
+    class="w-full h-full relative bg-white/10"
+    @click="handleClick"
+  >
     <template v-if="key !== 'case' && key !== 'profession'">
       <ImgButton
         class="absolute right-0 top-0 z-10"
@@ -254,7 +265,12 @@ onMounted(() => {})
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="35" height="35" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="35"
+        height="35"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -289,13 +305,24 @@ onMounted(() => {})
         />
       </template>
     </Video>
-    <div v-else-if="key === 'idea'" :src="image">
-      <img :src="getStaticImage('film/思路提点全屏')" alt="" />
+    <div
+      v-else-if="key === 'idea'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('film/思路提点全屏')"
+        alt=""
+      />
     </div>
   </div>
 
   <!-- 引导与高亮 -->
-  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+  <GuideSteps
+    v-if="status"
+    :steps="steps"
+    position-offset-y="85%"
+    @complete="handleComplete"
+  />
 
   <!-- 步骤导航抽屉 -->
   <StepNavigation
@@ -331,7 +358,12 @@ onMounted(() => {})
             class="w-10 h-10 bg-blue-500/80 hover:bg-blue-500 rounded-full inline-flex items-center justify-center text-white transition-all duration-200"
             title="步骤导航"
           >
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+            >
               <path
                 d="M3 4H17M3 8H17M3 12H17M3 16H17"
                 stroke="currentColor"
@@ -354,7 +386,8 @@ onMounted(() => {})
     @complete="handleComplete"
   >
     <GuideStepsItem :audio-src="getPublicPath('audio/py_4_007.MP3')">
-      一个好镜头，既要好看，又要好懂 —— 既有视觉吸引力，又能把信息清晰地传达出来。
+      一个好镜头，既要好看，又要好懂 ——
+      既有视觉吸引力，又能把信息清晰地传达出来。
     </GuideStepsItem>
     <GuideStepsItem :audio-src="getPublicPath('audio/py_4_008.MP3')">
       当这些条件被满足，一个镜头就有了“高级感”。
diff --git a/src/views/film/work/index.vue b/src/views/film/work/index.vue
index 9b87e2e..aa92f3f 100644
--- a/src/views/film/work/index.vue
+++ b/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"
     />
 
diff --git a/src/views/home/action.vue b/src/views/home/action.vue
index cfa9b83..325beb1 100644
--- a/src/views/home/action.vue
+++ b/src/views/home/action.vue
@@ -1,8 +1,13 @@
 <script lang="ts" setup>
 defineOptions({
-  name: 'Action'
+  name: 'Action',
 })
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS, getStaticImage } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  IMAGE_PATHS,
+  getStaticImage,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { ModuleSwitcher } from './components/ModuleSwitcher'
 import StudyProgressPopup from './components/StudyProgressPopup.vue'
@@ -13,7 +18,7 @@ import {
   useFilmStore,
   useVlogStore,
   useInterviewStore,
-  useBasicElementsStore
+  useBasicElementsStore,
 } from '@/stores'
 import { GuideSteps } from '@/components/Guide'
 import type { GuideStep } from '@/components/Guide/types'
@@ -46,66 +51,67 @@ const homeGuideSteps: GuideStep[] = [
     content: '点击新手导航按钮，可以展开/收起新手导航面板!',
     positionOffsetY: '50%',
     highlightSelector: '.newUserGuide',
-    audioSrc: getPublicPath('audio/py_0_005.MP3')
+    audioSrc: getPublicPath('audio/py_0_005.MP3'),
   },
   {
     id: 'home-guide-locked-modules',
     content: '新手导航模块全部完成后才能解锁三大进阶模块哦~',
     highlightSelector: '.newUserGuide',
     positionOffsetY: '50%',
-    audioSrc: getPublicPath('audio/py_0_006.MP3')
+    audioSrc: getPublicPath('audio/py_0_006.MP3'),
   },
   {
     id: 'home-guide-module-switcher',
-    content: '舞台划分为三大创作板块!点击 Vlog、访谈、电影的对应区域，右侧屏幕就会切换到对应板块！',
+    content:
+      '舞台划分为三大创作板块!点击 Vlog、访谈、电影的对应区域，右侧屏幕就会切换到对应板块！',
     highlightSelector: '.module-switcher-guide',
     positionOffsetY: '85%',
-    audioSrc: getPublicPath('audio/py_0_007.MP3')
+    audioSrc: getPublicPath('audio/py_0_007.MP3'),
   },
   {
     id: 'home-guide-tv',
     content: '再点击右侧屏幕就会开启对应的板块学习哦！',
     highlightSelector: '.tvGuide',
     positionOffsetY: '80%',
-    audioSrc: getPublicPath('audio/py_0_008.MP3')
+    audioSrc: getPublicPath('audio/py_0_008.MP3'),
   },
   {
     id: 'home-guide-skill',
     content: '点击技能树，可以一键回顾新手导航和三大创作板块所有的知识点哦！',
     highlightSelector: '.skill-tree',
     positionOffsetY: '50%',
-    audioSrc: getPublicPath('audio/py_0_009.MP3')
-  }
+    audioSrc: getPublicPath('audio/py_0_009.MP3'),
+  },
 ]
 
 const unlockedHomeGuideSteps: GuideStep[] = [
   {
     id: 'home-guide-welcome',
     content: '欢迎来到新手村！在这里，我会带着你解锁短视频创作的核心基本功！',
-    audioSrc: getPublicPath('audio/py_1_001.MP3')
+    audioSrc: getPublicPath('audio/py_1_001.MP3'),
   },
   {
     id: 'home-guide-map',
-    content: '我们会读懂构图、用好光线、灵活运镜，了解基础拍摄技巧和剪映软件的基本操作。',
-    audioSrc: getPublicPath('audio/py_1_002.MP3')
+    content:
+      '我们会读懂构图、用好光线、灵活运镜，了解基础拍摄技巧和剪映软件的基本操作。',
+    audioSrc: getPublicPath('audio/py_1_002.MP3'),
   },
   {
     id: 'home-guide-start-node',
     content: '选择任意节点开始学习~',
     highlightSelector: '.guide-content',
     positionOffsetY: '20%',
-    audioSrc: getPublicPath('audio/py_1_003.MP3')
-  }
+    audioSrc: getPublicPath('audio/py_1_003.MP3'),
+  },
 ]
 
 const elementGuideSteps: GuideStep[] = [
   {
     id: 'home-guide-start-element',
     content: '选择任意要素开始学习~',
-    highlightSelector: '.btn',
     positionOffsetY: '20%',
-    audioSrc: getPublicPath('audio/py_1_004.MP3')
-  }
+    audioSrc: getPublicPath('audio/py_1_004.MP3'),
+  },
 ]
 
 const handleHomeGuideComplete = () => {
@@ -137,17 +143,21 @@ const isImageLoading = ref(false)
 const imageMap = {
   vlog: IMAGE_PATHS.ACTION.VIDEO1,
   film: IMAGE_PATHS.ACTION.VIDEO2,
-  interview: IMAGE_PATHS.ACTION.VIDEO3
+  interview: IMAGE_PATHS.ACTION.VIDEO3,
 }
 
 //获取新手导航引导状态
 const isGuideNewUser = computed(() => basicElements.isGuideNewUser)
-const hasFinishedActionGuide = computed(() => basicElements.guideShown[actionGuideKey] === true)
+const hasFinishedActionGuide = computed(
+  () => basicElements.guideShown[actionGuideKey] === true,
+)
 
 // 预加载所有图片
 const preloadImages = () => {
-  const imageUrls = Object.values(imageMap).map(path => getBackgroundImage(path))
-  imageUrls.forEach(url => {
+  const imageUrls = Object.values(imageMap).map((path) =>
+    getBackgroundImage(path),
+  )
+  imageUrls.forEach((url) => {
     const img = new Image()
     img.src = url
   })
@@ -156,7 +166,11 @@ const preloadImages = () => {
 // 事件处理函数
 const handleOpenGuide = () => {
   guideShow.value = true
-  if (activeActionGuide.value !== 'home' && isGuideNewUser.value && !hasFinishedActionGuide.value) {
+  if (
+    activeActionGuide.value !== 'home' &&
+    isGuideNewUser.value &&
+    !hasFinishedActionGuide.value
+  ) {
     activeActionGuide.value = 'unlocked'
   }
 }
@@ -185,7 +199,9 @@ const handleClick = () => {
   // console.log(selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1))
   router.push({
     //首字母大写
-    name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
+    name:
+      selectedModule.value.charAt(0).toUpperCase() +
+      selectedModule.value.slice(1),
   })
 }
 
@@ -204,7 +220,7 @@ const handleSkill = () => {
   if (isSkillDisabled.value) return
 
   router.push({
-    name: 'Skill'
+    name: 'Skill',
   })
 }
 
@@ -227,10 +243,25 @@ const nodes: GuideNode[] = [
     y: 30,
     hasChildren: true,
     children: [
-      { id: 1, label: '构图', icon: 'home/action/新手导航构图', routeName: 'Composition' },
-      { id: 2, label: '光', icon: 'home/action/新手导航光', routeName: 'Light' },
-      { id: 3, label: '运镜', icon: 'home/action/新手导航运镜', routeName: 'CameraMovement' }
-    ]
+      {
+        id: 1,
+        label: '构图',
+        icon: 'home/action/新手导航构图',
+        routeName: 'Composition',
+      },
+      {
+        id: 2,
+        label: '光',
+        icon: 'home/action/新手导航光',
+        routeName: 'Light',
+      },
+      {
+        id: 3,
+        label: '运镜',
+        icon: 'home/action/新手导航运镜',
+        routeName: 'CameraMovement',
+      },
+    ],
   },
   {
     id: 2,
@@ -239,7 +270,7 @@ const nodes: GuideNode[] = [
     x: 50,
     y: 60,
     hasChildren: false,
-    routeName: 'BasicShootingSkills'
+    routeName: 'BasicShootingSkills',
   },
   {
     id: 3,
@@ -248,8 +279,8 @@ const nodes: GuideNode[] = [
     x: 80,
     y: 30,
     hasChildren: false,
-    routeName: 'ShortVideoEditingSkills'
-  }
+    routeName: 'ShortVideoEditingSkills',
+  },
 ]
 
 // 显示子节点的节点ID
@@ -326,7 +357,10 @@ onMounted(() => {
 
     <!-- 学习进度 -->
     <div class="absolute top-0 left-0">
-      <ImgButton image="home/action/学习进度入口" @click="handleOpenStudyProgress" />
+      <ImgButton
+        image="home/action/学习进度入口"
+        @click="handleOpenStudyProgress"
+      />
     </div>
 
     <StudyProgressPopup v-model="studyProgressVisible" />
@@ -344,11 +378,18 @@ onMounted(() => {
     </div>
 
     <!-- 选择模块 -->
-    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
+    <div
+      :class="[
+        'absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none',
+      ]"
+    >
       <div
         class="module-switcher-guide absolute w-[1380px] h-[600px] top-[460px] left-[calc(50%-690px)] pointer-events-none"
       ></div>
-      <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
+      <ModuleSwitcher
+        v-model="selectedModule"
+        @change="handleModuleChange"
+      />
     </div>
 
     <!-- 电视机 -->
@@ -372,14 +413,16 @@ onMounted(() => {
       v-if="isGuideNewUser && !hasFinishedActionGuide"
       :class="[
         'absolute inset-0 z-10',
-        activeActionGuide === 'home' ? 'bg-black/0' : 'bg-black/50'
+        activeActionGuide === 'home' ? 'bg-black/0' : 'bg-black/50',
       ]"
     ></div>
 
     <!-- 新手指导 -->
     <div
       class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN) }"
+      :style="{
+        backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN),
+      }"
       v-if="!guideShow"
     >
       <div
@@ -390,7 +433,9 @@ onMounted(() => {
 
     <div
       class="absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40 flex flex-col items-center justify-center pt-40"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG) }"
+      :style="{
+        backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG),
+      }"
       v-else
     >
       <ImgButton
@@ -401,13 +446,20 @@ onMounted(() => {
 
       <!-- 新手导航内容 -->
       <div class="relative w-[880px] h-[400px] mt-20">
-        <div class="w-full h-full relative guide-content" @click="handleClickOutside">
+        <div
+          class="w-full h-full relative guide-content"
+          @click="handleClickOutside"
+        >
           <!-- 标题区域 -->
           <div class="text-center mt-10 mb-8">
-            <h2 class="text-5xl font-bold mb-3 text-[#7bfffd] tracking-wider drop-shadow-lg">
+            <h2
+              class="text-5xl font-bold mb-3 text-[#7bfffd] tracking-wider drop-shadow-lg"
+            >
               新手导航
             </h2>
-            <p class="text-4xl text-white font-bold drop-shadow-md">点击节点即可开始学习</p>
+            <p class="text-4xl text-white font-bold drop-shadow-md">
+              点击节点即可开始学习
+            </p>
           </div>
 
           <!-- 节点图表 -->
@@ -492,24 +544,37 @@ onMounted(() => {
               </div>
 
               <!-- 子节点图标（当点击三大基础要素时显示） -->
-              <div
-                v-if="node.hasChildren && showChildrenNodeId === node.id"
-                class="absolute -top-40 left-1/2 transform -translate-x-1/2 flex z-20 btn"
-              >
+              <Transition name="child-node-pop">
                 <div
-                  v-for="childNode in node.children"
-                  :key="childNode.id"
-                  class="flex flex-col items-center cursor-pointer"
-                  @click.stop="handleChildNodeClick(childNode, $event)"
+                  v-if="node.hasChildren && showChildrenNodeId === node.id"
+                  class="child-node-buttons btn absolute -top-48 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center"
                 >
-                  <!-- 图标 -->
                   <div
-                    class="w-36 flex items-center justify-center transition-all duration-300 hover:scale-110"
+                    class="relative flex rounded-[30px] bg-[rgba(8,40,58,0.82)] px-3 py-2 shadow-[0_0_0_1px_rgba(123,255,253,0.28),0_0_20px_rgba(123,255,253,0.28)] after:absolute after:left-1/2 after:top-[calc(100%-1px)] after:h-0 after:w-0 after:-translate-x-1/2 after:border-x-[12px] after:border-t-[14px] after:border-x-transparent after:border-t-[rgba(8,40,58,0.82)]"
                   >
-                    <img :src="getStaticImage(childNode.icon)" :alt="childNode.label" />
+                    <div
+                      v-for="childNode in node.children"
+                      :key="childNode.id"
+                      class="group/child relative z-10 flex flex-col items-center cursor-pointer"
+                      @click.stop="handleChildNodeClick(childNode, $event)"
+                    >
+                      <!-- 图标 -->
+                      <div
+                        class="relative w-36 flex items-center justify-center transition-all duration-300 hover:scale-110"
+                      >
+                        <div
+                          class="absolute inset-x-5 inset-y-4 rounded-full bg-[#7bfffd]/12 blur-xl opacity-60 transition-opacity duration-300 group-hover/child:opacity-100"
+                        ></div>
+                        <img
+                          class="relative z-10 drop-shadow-[0_0_10px_rgba(123,255,253,0.45)] transition-all duration-300 group-hover/child:brightness-125 group-hover/child:drop-shadow-[0_0_18px_rgba(123,255,253,0.8)]"
+                          :src="getStaticImage(childNode.icon)"
+                          :alt="childNode.label"
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </Transition>
             </div>
           </div>
         </div>
@@ -517,3 +582,25 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.child-node-pop-enter-active,
+.child-node-pop-leave-active {
+  transition:
+    opacity 0.22s ease,
+    transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1.1);
+  transform-origin: bottom center;
+}
+
+.child-node-pop-enter-from,
+.child-node-pop-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(10px) scale(0.86);
+}
+
+.child-node-pop-enter-to,
+.child-node-pop-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+</style>
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 7cdf590..5f237f3 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -1,30 +1,47 @@
-import { defineComponent, ref } from 'vue'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { computed, defineComponent, ref } from 'vue'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { GuideSteps, ImagePreview } from '@/components'
+import { GuideSteps, ImagePreview, Video } from '@/components'
 import { useScale } from '@/composables/useScale'
 import { useBasicElementsStore } from '@/stores/modules/basic-elements'
 
 const CourseFrameGuide = () => (
   <div class="flex items-center justify-start">
     点击
-    <img class="w-20" src={getStaticImage(IMAGE_PATHS.BUTTONS.COURSE_FRAME)} alt="" />
+    <img
+      class="w-40"
+      src={getStaticImage(IMAGE_PATHS.BUTTONS.COURSE_FRAME)}
+      alt=""
+    />
     查看课程结构，快速了解每个模块的学习内容。
   </div>
 )
 
 const OperateGuide = () => (
   <div class="flex items-center justify-start">
-    <img class="w-20 inline" src={getStaticImage(IMAGE_PATHS.BUTTONS.OPERATE_GUIDE)} alt="" />
-    包含课程介绍和操作指南，观看指引视频，轻松上手课程。（资源建设中...）
+    <img
+      class="w-40 inline"
+      src={getStaticImage(IMAGE_PATHS.BUTTONS.OPERATE_GUIDE)}
+      alt=""
+    />
+    包含课程介绍和操作指南，点击即可查看！
   </div>
 )
 
 const StartFilmingGuide = () => (
   <div class="flex items-center justify-start">
     点击
-    <img class="w-20" src={getStaticImage(IMAGE_PATHS.BUTTONS.START_FILMING)} alt="" />
-    正式进入课程，开启你的短视频拍摄之旅。
+    <img
+      class="w-40"
+      src={getStaticImage(IMAGE_PATHS.BUTTONS.START_FILMING)}
+      alt=""
+    />
+    ，一起我们的短视频学习之旅吧！
   </div>
 )
 
@@ -38,7 +55,7 @@ export default defineComponent({
         content: '欢迎来到《短视频达人养成记》网络课程的学习！',
         highlightSelector: null,
         audioSrc: getPublicPath('audio/py_0_001.MP3'),
-        positionOffsetY: '80%'
+        positionOffsetY: '80%',
       },
       {
         id: 'step-2',
@@ -46,7 +63,7 @@ export default defineComponent({
         content: CourseFrameGuide,
         highlightSelector: '.kecheng-wrapper',
         audioSrc: getPublicPath('audio/py_0_002.MP3'),
-        positionOffsetY: '40%'
+        positionOffsetY: '40%',
       },
       {
         id: 'step-3',
@@ -54,7 +71,7 @@ export default defineComponent({
         content: OperateGuide,
         highlightSelector: '.zhiying-wrapper',
         audioSrc: getPublicPath('audio/py_0_003.MP3'),
-        positionOffsetY: '40%'
+        positionOffsetY: '40%',
       },
       {
         id: 'step-4',
@@ -62,15 +79,27 @@ export default defineComponent({
         content: StartFilmingGuide,
         highlightSelector: '.start-filming-wrapper',
         audioSrc: getPublicPath('audio/py_0_004.MP3'),
-        positionOffsetY: '40%'
-      }
+        positionOffsetY: '40%',
+      },
     ])
     const basicElementsStore = useBasicElementsStore()
     const guideKey = 'home-intro'
-    const showGuide = ref(!basicElementsStore.guideShown[guideKey])
+    const isFirstVisit = !basicElementsStore.guideShown[guideKey]
+    const showGuide = ref(isFirstVisit)
     const { scale, offsetX, offsetY } = useScale()
 
-    if (showGuide.value) {
+    // 首次进入的视频播放序列
+    const introVideos = computed(() => [
+      getPublicPath('video/campus life.mp4'),
+      getPublicPath('video/new/xsdh_CapCut_Tutorial.mp4'),
+    ])
+    const introVideoIndex = ref(0)
+    const showIntroVideo = ref(isFirstVisit)
+    const currentIntroSrc = computed(
+      () => introVideos.value[introVideoIndex.value] ?? '',
+    )
+
+    if (isFirstVisit) {
       basicElementsStore.markGuideShown(guideKey)
     }
 
@@ -78,11 +107,24 @@ export default defineComponent({
       showGuide.value = false
     }
 
+    const handleIntroVideoEnded = () => {
+      if (introVideoIndex.value < introVideos.value.length - 1) {
+        introVideoIndex.value++
+      } else {
+        showIntroVideo.value = false
+        // 引导步骤在视频播放结束后出现
+      }
+    }
+
     const openMindMap = () => {
       ImagePreview({
         images: [getStaticImage('maps/dt')],
         maskClosable: true,
-        getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+        getScaleMetrics: () => ({
+          scale: scale.value,
+          offsetX: offsetX.value,
+          offsetY: offsetY.value,
+        }),
       })
     }
 
@@ -94,19 +136,39 @@ export default defineComponent({
         />
 
         <div class="absolute right-[420px] bottom-[200px] start-filming-wrapper">
-          <ImgButton image="home/action-btn" path={{ name: 'Action' }} />
+          <ImgButton
+            image="home/action-btn"
+            path={{ name: 'Action' }}
+          />
         </div>
 
         <div class="absolute right-20 bottom-36 kecheng-wrapper">
-          <ImgButton image={IMAGE_PATHS.BUTTONS.COURSE_FRAME} onClick={openMindMap} />
+          <ImgButton
+            image={IMAGE_PATHS.BUTTONS.COURSE_FRAME}
+            onClick={openMindMap}
+          />
         </div>
 
         <div class="absolute right-20 bottom-10 zhiying-wrapper">
           <ImgButton image={IMAGE_PATHS.BUTTONS.OPERATE_GUIDE} />
         </div>
 
+        {showIntroVideo.value && (
+          <div class="absolute inset-0 z-[10000] bg-black flex items-center justify-center">
+            <Video
+              src={currentIntroSrc.value}
+              autoplay={true}
+              muted={false}
+              controls={true}
+              volume={1}
+              fit="contain"
+              onEnded={handleIntroVideoEnded}
+            />
+          </div>
+        )}
+
         <GuideSteps
-          visible={showGuide.value}
+          visible={showGuide.value && !showIntroVideo.value}
           steps={guideSteps.value}
           highlightPadding={12}
           highlightRadius={16}
@@ -116,5 +178,5 @@ export default defineComponent({
         />
       </div>
     )
-  }
+  },
 })
diff --git a/src/views/interview/after-editing/editing.vue b/src/views/interview/after-editing/editing.vue
index 66c2deb..0bc0e50 100644
--- a/src/views/interview/after-editing/editing.vue
+++ b/src/views/interview/after-editing/editing.vue
@@ -2,7 +2,7 @@
 import { nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { StepNavigation } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { IMAGE_PATHS } from '@/utils'
 import { Video } from '@/components'
 
@@ -19,20 +19,20 @@ const navigationSteps = [
     id: 'step1',
     label: '后期制作',
     content: '声画剪辑流程',
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step2',
     label: '后期制作',
     content: 'J-cut/L-cut运用',
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step3',
     label: '后期制作',
     content: '【Q3】节奏剪辑技巧',
-    type: 'post' as const
-  }
+    type: 'post' as const,
+  },
 ]
 
 const currentVideoIndex = ref(0)
@@ -83,7 +83,12 @@ const handleClose = () => {
       title="步骤导航"
       @click="showStepNavigation = true"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
diff --git a/src/views/interview/components/menu.vue b/src/views/interview/components/menu.vue
index 9590822..d77075f 100644
--- a/src/views/interview/components/menu.vue
+++ b/src/views/interview/components/menu.vue
@@ -16,61 +16,62 @@ const category = ref([
   {
     label: '前期准备',
     value: 1,
-    icon: getStaticImage('midterm/准备图标.png')
+    icon: getStaticImage('midterm/准备图标.png'),
   },
   {
     label: '中期拍摄',
     value: 2,
-    icon: getStaticImage('midterm/拍摄图标.png')
+    icon: getStaticImage('midterm/拍摄图标.png'),
   },
   {
     label: '后期剪辑',
     value: 3,
-    icon: getStaticImage('midterm/剪辑图标.png')
-  }
+    icon: getStaticImage('midterm/剪辑图标.png'),
+  },
 ])
+
 const menuItems = ref([
   {
     label: '资源筹备',
     routeName: 'InterviewResource',
     parentValue: 1,
-    disabled: false
+    disabled: false,
   },
   {
     label: '创意构想',
     routeName: 'InterviewCreative',
     parentValue: 1,
-    disabled: false
+    disabled: false,
   },
   {
     label: '脚本撰写',
     routeName: 'InterviewScriptWriting',
     parentValue: 1,
-    disabled: false
+    disabled: false,
   },
   {
     label: '分镜制作',
     routeName: 'InterviewStoryboard',
     parentValue: 1,
-    disabled: false
+    disabled: false,
   },
   {
     label: '设备准备',
     routeName: 'InterviewEquipment',
     parentValue: 2,
-    disabled: false
+    disabled: false,
   },
   {
     label: '实地取景',
     routeName: 'InterviewShooting',
     parentValue: 2,
-    disabled: false
+    disabled: false,
   },
   {
     label: '现场拍摄',
     routeName: 'InterviewOnsiteShooting',
     parentValue: 2,
-    disabled: false
+    disabled: false,
   },
   // {
   //   label: '素材管理',
@@ -82,26 +83,26 @@ const menuItems = ref([
     label: '剪辑',
     routeName: 'InterviewEditing',
     parentValue: 3,
-    disabled: false
+    disabled: false,
   },
   {
     label: '调色',
     routeName: 'InterviewColor',
     parentValue: 3,
-    disabled: false
+    disabled: false,
   },
   {
     label: '音频',
     routeName: 'InterviewAudio',
     parentValue: 3,
-    disabled: false
+    disabled: false,
   },
   {
     label: '导出发布',
     routeName: 'InterviewExportPublish',
     parentValue: 3,
-    disabled: false
-  }
+    disabled: false,
+  },
 ])
 
 const props = defineProps<{
@@ -119,28 +120,36 @@ const currentParentValue = computed<number>(() => {
   return props.currentStep
 }) // 当前选中的父级菜单项
 
-const currentItemValue = computed<string>(() => {
-  return router.currentRoute.value.name?.toString() ?? ''
-})
+const currentItemValue = ref<string>('') // 当前选中的子级菜单项
 
 const getMenuItems = computed(() => {
-  return menuItems.value.filter(item => item.parentValue === currentParentValue.value)
+  return menuItems.value.filter(
+    (item) => item.parentValue === currentParentValue.value,
+  )
 })
 
 const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
   if (item.disabled) return
+  currentItemValue.value = item.routeName
   router.push({ name: item.routeName })
 }
 </script>
 
 <template>
-  <div class="absolute left-20 top-0 bottom-0 w-[520px] pt-28" v-if="currentStep">
+  <div
+    class="absolute left-20 top-0 bottom-0 w-[520px] pt-28"
+    v-if="currentStep"
+  >
     <!-- 分类名称 -->
     <div class="absolute top-3 left-24 flex items-center space-x-2">
       <span class="text-4xl text-[#fbbf24] font-black">
         {{ category[currentParentValue - 1].label }}
       </span>
-      <img class="filter-blue" :src="category[currentParentValue - 1].icon" alt="" />
+      <img
+        class="filter-blue"
+        :src="category[currentParentValue - 1].icon"
+        alt=""
+      />
     </div>
     <!-- 背景图片 -->
     <div
@@ -148,12 +157,17 @@ const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
       :style="{ backgroundImage: getBackgroundImage('components/menu-bg.png') }"
     ></div>
     <div class="flex items-center flex-col pl-[60px]">
-      <template v-for="(item, index) in getMenuItems" :key="item.routeName">
+      <template
+        v-for="(item, index) in getMenuItems"
+        :key="item.routeName"
+      >
         <div
           class="relative w-[373px] h-[143px] pl-14 flex items-center justify-center group text-4xl font-black transition-colors"
           :class="[
-            currentItemValue === item.routeName ? 'text-blue-400' : 'text-white',
-            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer'
+            currentItemValue === item.routeName
+              ? 'text-blue-400'
+              : 'text-white',
+            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer',
           ]"
           :style="{ marginLeft: -index * 40 + 'px' }"
           @click="handleItemClick(item)"
@@ -161,13 +175,22 @@ const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
           <div
             v-if="!item.disabled"
             class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-            :style="{ backgroundImage: getBackgroundImage('components/menu-hover.png') }"
+            :style="{
+              backgroundImage: getBackgroundImage('components/menu-hover.png'),
+            }"
           ></div>
-          <span class="flex items-center gap-2" :class="[!item.disabled ? 'menu-glow-text' : '']">
+          <span
+            class="flex items-center gap-2"
+            :class="[!item.disabled ? 'menu-glow-text' : '']"
+          >
             <span>{{ item.label }}</span>
             <img
-              :class="['w-10', isViewed(item.routeName) ? 'brightness-90' : 'brightness-50']"
-              src="@/assets/images/midterm/完成.png"
+              class="w-10"
+              :src="
+                isViewed(item.routeName)
+                  ? '/src/assets/images/midterm/完成.png'
+                  : '/src/assets/images/midterm/未完成.png'
+              "
               alt=""
             />
           </span>
@@ -179,8 +202,8 @@ const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
 
 <style scoped>
 .filter-blue {
-  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
-    brightness(102%) contrast(98%);
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%)
+    hue-rotate(330deg) brightness(102%) contrast(98%);
 }
 
 .menu-glow-text {
diff --git a/src/views/interview/midterm-shooting/on-site/index.vue b/src/views/interview/midterm-shooting/on-site/index.vue
index 79f1ce9..888fcc9 100644
--- a/src/views/interview/midterm-shooting/on-site/index.vue
+++ b/src/views/interview/midterm-shooting/on-site/index.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton, Video } from '@/components'
-import { StepNavigation } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'
 
 const router = useRouter()
@@ -16,30 +16,32 @@ const navigationSteps = ref([
     label: '中期拍摄',
     content: '素材怎么拍',
     videoUrl: getPublicPath('video/interview/on-site/ftmk_sczmp_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'q1-required-shots',
     label: '中期拍摄',
     content: '必拍镜头有哪些',
     videoUrl: getPublicPath('video/interview/on-site/ftmk_bpjtynx_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'q2-moving-shot',
     label: '中期拍摄',
     content: '移动镜头的作用',
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'q2-close-up',
     label: '中期拍摄',
     content: '特写镜头的作用',
-    type: 'shooting' as const
-  }
+    type: 'shooting' as const,
+  },
 ])
 
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 const back = () => {
   router.back()
@@ -92,7 +94,12 @@ const handleEnded = () => {
           title="资源列表"
           @click="showStepNavigation = true"
         >
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
             <path
               d="M3 4H17M3 8H17M3 12H17M3 16H17"
               stroke="currentColor"
diff --git a/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue b/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue
index 074f557..2326e2f 100644
--- a/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue
+++ b/src/views/interview/midterm-shooting/shooting/components/StartOverlay.vue
@@ -1,7 +1,29 @@
+<script setup lang="ts">
+import { ImgButton } from '@/components/Button'
+import { getStaticImage } from '@/utils'
+
+defineEmits<{
+  start: []
+}>()
+
+const props = defineProps<{
+  scene: 'a' | 'b'
+}>()
+</script>
+
 <template>
   <div class="absolute bottom-0">
     <div class="relative">
-      <img src="@/assets/images/shooting/开始取景.png" alt="" />
+      <img
+        :src="
+          getStaticImage(
+            props.scene === 'a'
+              ? 'interview/shooting/开始拍摄-操场.png'
+              : 'interview/shooting/开始拍摄-教学楼.png',
+          )
+        "
+        alt=""
+      />
       <ImgButton
         class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
         image="shooting/按钮-开始取景.png"
@@ -10,11 +32,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ImgButton } from '@/components/Button'
-
-defineEmits<{
-  start: []
-}>()
-</script>
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue
index 2675b41..1fc3e00 100644
--- a/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-a/index.vue
@@ -35,7 +35,7 @@ const {
   getTransform,
   currentOffsetX,
   currentOffsetY,
-  handleWheel
+  handleWheel,
 } = useViewfinderA()
 
 // 刻度盘配置常量
@@ -88,7 +88,7 @@ const dialTicks = computed<DialTick[]>(() => {
       angle,
       isMajor,
       isInteger,
-      label: isInteger ? zoom + 'x' : ''
+      label: isInteger ? zoom + 'x' : '',
     })
   }
   return ticks
@@ -116,7 +116,7 @@ const capturePhoto = async () => {
   if (isLoading.value) return
 
   isCapturing.value = true
-  await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
+  await new Promise((resolve) => setTimeout(resolve, FLASH_DURATION))
 
   await capture({
     width: CANVAS_WIDTH,
@@ -124,7 +124,7 @@ const capturePhoto = async () => {
     scale: CANVAS_SCALE,
     delay: UI_UPDATE_DELAY,
     resultDelay: RESULT_DISPLAY_DELAY,
-    onDraw: ctx => {
+    onDraw: (ctx) => {
       if (!photoImage.value) {
         throw new Error('Photo image not found')
       }
@@ -142,12 +142,12 @@ const capturePhoto = async () => {
         -CANVAS_WIDTH / 2,
         -CANVAS_HEIGHT / 2,
         CANVAS_WIDTH,
-        CANVAS_HEIGHT
+        CANVAS_HEIGHT,
       )
     },
     onComplete: () => {
       isCapturing.value = false
-    }
+    },
   })
 }
 </script>
@@ -156,18 +156,31 @@ const capturePhoto = async () => {
   <div class="w-full h-full">
     <div
       class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage('interview/shooting/操场-模糊.png') }"
+      :style="{
+        backgroundImage: getBackgroundImage('interview/shooting/操场-模糊.png'),
+      }"
     >
       <ImgButton
         image="interview/shooting/操场-侧边标题.png"
         class="title-button absolute left-0"
       />
-      <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
+      <ImgButton
+        image="shooting/返回.png"
+        class="back-button absolute right-0"
+        @click="back"
+      />
 
-      <StartOverlay v-if="!start" @start="start = true" />
+      <StartOverlay
+        scene="a"
+        v-if="!start"
+        @start="start = true"
+      />
 
       <!-- 手机拍照界面 -->
-      <div class="absolute bottom-0 w-full h-[766px]" v-else>
+      <div
+        class="absolute bottom-0 w-full h-[766px]"
+        v-else
+      >
         <img
           class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
           src="@/assets/images/shooting/shoot.png"
@@ -186,7 +199,7 @@ const capturePhoto = async () => {
               :class="{
                 'transition-transform duration-300': !isDragging,
                 'cursor-grab': !isDragging,
-                'cursor-grabbing': isDragging
+                'cursor-grabbing': isDragging,
               }"
               :style="{ transform: getTransform() }"
               src="@/assets/images/interview/shooting/操场-清晰.png"
@@ -213,7 +226,9 @@ const capturePhoto = async () => {
 
         <div
           class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
-          :style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
+          :style="{
+            backgroundImage: getBackgroundImage('shooting/拍摄装饰.png'),
+          }"
         >
           <!-- 仿苹果半圆盘缩放控件 -->
           <div
@@ -237,13 +252,17 @@ const capturePhoto = async () => {
             <!-- 圆心在容器右侧外部，形成左侧弧形 -->
             <div
               class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
-              :style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
+              :style="{
+                transform: `translateY(-50%) rotate(${dialRotation}deg)`,
+              }"
             >
               <div
                 v-for="tick in dialTicks"
                 :key="tick.zoom"
                 class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
-                :style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
+                :style="{
+                  transform: `translate(0, -50%) rotate(${tick.angle}deg)`,
+                }"
                 @click.stop="setZoom(tick.zoom)"
               >
                 <!-- 刻度线本体 (位于圆盘左边缘) -->
@@ -252,17 +271,21 @@ const capturePhoto = async () => {
                   :class="{
                     'w-10 h-1 opacity-90': tick.isInteger,
                     'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
-                    'w-3 h-[1px] opacity-40': !tick.isMajor
+                    'w-3 h-[1px] opacity-40': !tick.isMajor,
                   }"
                 ></div>
                 <!-- 刻度文字 -->
                 <div
                   v-if="tick.isInteger"
                   class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
-                  :style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
+                  :style="{
+                    transform: `rotate(${-tick.angle - dialRotation}deg)`,
+                  }"
                 >
                   <span
-                    :class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
+                    :class="{
+                      'text-yellow-400 scale-110': currentZoom === tick.zoom,
+                    }"
                     class="block transition-all duration-200"
                   >
                     {{ tick.label }}
@@ -282,22 +305,39 @@ const capturePhoto = async () => {
       </div>
 
       <!-- 结果弹窗 -->
-      <Overlay :visible="showModal" @close="handleModalClose">
-        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+      <Overlay
+        :visible="showModal"
+        @close="handleModalClose"
+      >
+        <div
+          class="relative w-[1000px] h-[600px] flex items-center justify-center"
+        >
           <!-- 截图内容 -->
-          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
-            <img :src="capturedImageUrl" alt="拍摄结果" />
+          <div
+            v-if="capturedImageUrl"
+            class="bg-white p-2 rounded-md -rotate-6"
+          >
+            <img
+              :src="capturedImageUrl"
+              alt="拍摄结果"
+            />
           </div>
 
           <!-- 操作按钮 -->
           <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
-            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+            <ImgButton
+              image="shooting/按钮-前往下一个取景地"
+              @click="handleFinish"
+            />
           </div>
         </div>
       </Overlay>
     </div>
 
-    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+    <LoadingOverlay
+      :visible="isLoading"
+      text="正在出片中..."
+    />
   </div>
 </template>
 
@@ -321,7 +361,19 @@ const capturePhoto = async () => {
 }
 
 .mask-gradient {
-  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
 }
 </style>
diff --git a/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue
index 7f3a548..d5a2060 100644
--- a/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue
+++ b/src/views/interview/midterm-shooting/shooting/filmingLocation-b/index.vue
@@ -24,7 +24,13 @@ const handleModalClose = () => {
 }
 
 // 自由取景框模式
-const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
+const {
+  viewfinderContainer,
+  viewfinderBox,
+  viewfinder,
+  startDrag,
+  startResize,
+} = useViewfinderB()
 
 const showGuide = ref(false)
 const backgroundImage = ref<HTMLImageElement | null>(null)
@@ -50,7 +56,7 @@ const captureScene = async () => {
     height: viewfinder.value.height,
     scale: CANVAS_SCALE,
     delay: UI_UPDATE_DELAY,
-    onDraw: ctx => {
+    onDraw: (ctx) => {
       if (!backgroundImage.value) {
         throw new Error('Background image not found')
       }
@@ -72,7 +78,7 @@ const captureScene = async () => {
         0, // 目标 x
         0, // 目标 y
         viewfinder.value.width, // 目标 width
-        viewfinder.value.height // 目标 height
+        viewfinder.value.height, // 目标 height
       )
     },
     onComplete: () => {
@@ -80,7 +86,7 @@ const captureScene = async () => {
       setTimeout(() => {
         showGuide.value = true
       }, GUIDE_SHOW_DELAY)
-    }
+    },
   })
 }
 
@@ -90,7 +96,7 @@ const captureScene = async () => {
 const handleComplete = () => {
   showGuide.value = false
   router.push({
-    name: 'Interview'
+    name: 'Interview',
   })
 }
 </script>
@@ -102,7 +108,7 @@ const handleComplete = () => {
       :style="{
         backgroundImage: start
           ? getBackgroundImage('interview/shooting/教学楼-清晰.png')
-          : getBackgroundImage('interview/shooting/教学楼-模糊.png')
+          : getBackgroundImage('interview/shooting/教学楼-模糊.png'),
       }"
     >
       <!-- 标题 -->
@@ -118,10 +124,17 @@ const handleComplete = () => {
         @click="back"
       />
 
-      <StartOverlay v-if="!start" @start="start = true" />
+      <StartOverlay
+        scene="b"
+        v-if="!start"
+        @start="start = true"
+      />
 
       <!-- 取景 -->
-      <div class="absolute bottom-0 w-full h-full" v-else>
+      <div
+        class="absolute bottom-0 w-full h-full"
+        v-else
+      >
         <!-- 隐藏的背景图片，用于 Canvas 绘制 -->
         <img
           ref="backgroundImage"
@@ -132,14 +145,17 @@ const handleComplete = () => {
         />
 
         <!-- 取景框容器 -->
-        <div ref="viewfinderContainer" class="relative w-full h-full">
+        <div
+          ref="viewfinderContainer"
+          class="relative w-full h-full"
+        >
           <!-- 四个方向的遮罩层 -->
           <!-- 上遮罩 -->
           <div
             class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
             :style="{
               top: 0,
-              height: viewfinder.y + 'px'
+              height: viewfinder.y + 'px',
             }"
           ></div>
           <!-- 下遮罩 -->
@@ -147,7 +163,7 @@ const handleComplete = () => {
             class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
             :style="{
               top: viewfinder.y + viewfinder.height + 'px',
-              bottom: 0
+              bottom: 0,
             }"
           ></div>
           <!-- 左遮罩 -->
@@ -156,7 +172,7 @@ const handleComplete = () => {
             :style="{
               top: viewfinder.y + 'px',
               width: viewfinder.x + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
           ></div>
           <!-- 右遮罩 -->
@@ -165,7 +181,7 @@ const handleComplete = () => {
             :style="{
               top: viewfinder.y + 'px',
               left: viewfinder.x + viewfinder.width + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
           ></div>
 
@@ -177,13 +193,15 @@ const handleComplete = () => {
               left: viewfinder.x + 'px',
               top: viewfinder.y + 'px',
               width: viewfinder.width + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
             @mousedown="startDrag"
             @touchstart="startDrag"
           >
             <!-- 九宫格辅助线 -->
-            <div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
+            <div
+              class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3"
+            >
               <div
                 v-for="i in 9"
                 :key="i"
@@ -192,7 +210,7 @@ const handleComplete = () => {
                   'border-t-0': i <= 3,
                   'border-b-0': i >= 7,
                   'border-l-0': (i - 1) % 3 === 0,
-                  'border-r-0': i % 3 === 0
+                  'border-r-0': i % 3 === 0,
                 }"
               ></div>
             </div>
@@ -226,19 +244,34 @@ const handleComplete = () => {
           class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
           :style="{
             left: viewfinder.x + viewfinder.width / 2 + 'px',
-            top: viewfinder.y + viewfinder.height + 'px'
+            top: viewfinder.y + viewfinder.height + 'px',
           }"
         >
-          <ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
+          <ImgButton
+            class="w-36"
+            image="shooting/按钮-取景"
+            @click="captureScene"
+          />
         </div>
       </div>
 
       <!-- 结果弹窗 -->
-      <Overlay :visible="showModal" @close="handleModalClose">
-        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+      <Overlay
+        :visible="showModal"
+        @close="handleModalClose"
+      >
+        <div
+          class="relative w-[1000px] h-[600px] flex items-center justify-center"
+        >
           <!-- 截图内容 -->
-          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
-            <img :src="capturedImageUrl" alt="拍摄结果" />
+          <div
+            v-if="capturedImageUrl"
+            class="bg-white p-2 rounded-md -rotate-6"
+          >
+            <img
+              :src="capturedImageUrl"
+              alt="拍摄结果"
+            />
           </div>
 
           <!-- 操作按钮 -->
@@ -249,11 +282,20 @@ const handleComplete = () => {
       </Overlay>
     </div>
 
-    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+    <LoadingOverlay
+      :visible="isLoading"
+      text="正在出片中..."
+    />
 
     <!-- 引导步骤 -->
-    <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
-      <GuideStepsItem>实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~</GuideStepsItem>
+    <GuideSteps
+      v-if="showGuide"
+      positionOffsetY="80%"
+      @complete="handleComplete"
+    >
+      <GuideStepsItem>
+        实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~
+      </GuideStepsItem>
     </GuideSteps>
   </div>
 </template>
diff --git a/src/views/interview/midterm-shooting/shooting/index.vue b/src/views/interview/midterm-shooting/shooting/index.vue
index e837abc..1a21337 100644
--- a/src/views/interview/midterm-shooting/shooting/index.vue
+++ b/src/views/interview/midterm-shooting/shooting/index.vue
@@ -7,7 +7,7 @@ import { ImgButton } from '@/components/Button'
 import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
-import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
+import KnowledgeCard from '@/components/KnowledgeCard/InterviewKnowledgeCard.vue'
 import { useInterviewStore } from '@/stores/modules/interview'
 
 type Btn = {
@@ -36,31 +36,31 @@ const currentItem = ref<Btn>({
   name: '',
   btnImage: '',
   images: [],
-  desc: ''
+  desc: '',
 })
 
 const btnList = ref<Btn[]>([
   {
     key: '1',
-    name: '居中构图',
-    btnImage: 'shooting/居中构图底板',
-    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
-    images: ['shooting/居中构图1', 'shooting/居中构图2']
+    name: '前景构图',
+    btnImage: 'interview/composition/前景构图',
+    desc: '前景构图就是在拍摄前选择一个物体作为前景，通常会将前景虚化，通过前景和主体的虚实对比突出主体，前景构图可以增加画面的层次感和信息量。',
+    images: ['interview/composition/前景1', 'interview/composition/前景2'],
   },
   {
     key: '2',
-    name: '三分法构图',
-    btnImage: 'shooting/三分法构图底板',
-    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
-    images: ['shooting/图片待定1', 'shooting/图片待定2']
+    name: '留白构图',
+    btnImage: 'interview/composition/留白构图',
+    desc: '留白构图法也可以称为大构图，借用了中国书法、绘画的留白概念，简单来说就是给画面做减法，减少主体在画面中的占比，会让画面更加的干净并且能更加突出主体，会让照片更有故事感。',
+    images: ['interview/composition/留白1', 'interview/composition/留白2'],
   },
   {
     key: '3',
-    name: '对角线构图',
-    btnImage: 'shooting/对角线构图底板',
-    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
-    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
-  }
+    name: '三角构图',
+    btnImage: 'interview/composition/三角构图',
+    desc: '分为正三角形、倒三角和斜三角形，这种构图具有一种极强的稳定感和向上的冲击力，也是人像摄影中一种典型的构图形式，拍摄时可利用人物主体的肢体或动作姿态来组合构成三角形。',
+    images: ['interview/composition/三角1', 'interview/composition/三角2'],
+  },
 ])
 
 const handleModalClose = () => {
@@ -95,22 +95,40 @@ const back = () => {
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage('interview/shooting/实地取景底图') }"
+      :style="{
+        backgroundImage: getBackgroundImage('interview/shooting/实地取景底图'),
+      }"
     >
       <div class="shooting-title">
-        <img :src="shootingtitle" alt="" />
+        <img
+          :src="shootingtitle"
+          alt=""
+        />
       </div>
       <div class="shooting-return">
-        <ImgButton image="shooting/返回.png" @click="back" />
+        <ImgButton
+          image="shooting/返回.png"
+          @click="back"
+        />
       </div>
       <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-        <ImgButton image="interview/shooting/操场-入口.png" @click="handleClickA" />
+        <ImgButton
+          image="interview/shooting/操场-入口.png"
+          @click="handleClickA"
+        />
       </div>
       <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-        <ImgButton image="interview/shooting/教学楼-入口.png" @click="handleClickB" />
+        <ImgButton
+          image="interview/shooting/教学楼-入口.png"
+          @click="handleClickB"
+        />
       </div>
       <div class="shooting-composition">
-        <ImgButton class="mybutton" image="shooting/构图指南.png" @click="showModal = true" />
+        <ImgButton
+          class="mybutton"
+          image="shooting/构图指南.png"
+          @click="showModal = true"
+        />
       </div>
     </div>
 
@@ -132,7 +150,7 @@ const back = () => {
       :visible="showModal"
       :clickable="false"
       :customStyle="{
-        backgroundImage: getBackgroundImage('shooting/构图指南底图')
+        backgroundImage: getBackgroundImage('shooting/构图指南底图'),
       }"
       customClass="inset-0 bg-cover bg-center bg-no-repeat"
       contentClass="relative w-full h-full"
@@ -145,7 +163,10 @@ const back = () => {
       />
 
       <!-- 构图指南 -->
-      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+      <ImgButton
+        class="absolute left-0 top-0 z-10"
+        image="shooting/标题-构图指南"
+      />
 
       <!-- 新手导航视频 -->
       <ImgButton
@@ -174,8 +195,14 @@ const back = () => {
         @close="showModal2 = false"
       />
       <!-- 视频 -->
-      <Overlay :visible="showModal3" :clickable="false">
-        <video :src="videoSrc" controls></video>
+      <Overlay
+        :visible="showModal3"
+        :clickable="false"
+      >
+        <video
+          :src="videoSrc"
+          controls
+        ></video>
         <!-- 返回 -->
         <ImgButton
           class="absolute right-0 top-0 z-10"
diff --git a/src/views/interview/practice/index.vue b/src/views/interview/practice/index.vue
index c232ee1..4cdd39c 100644
--- a/src/views/interview/practice/index.vue
+++ b/src/views/interview/practice/index.vue
@@ -4,7 +4,8 @@ import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
 import { useRouter } from 'vue-router'
-import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+import BackToTopIcon from '@/assets/images/components/置顶.png'
+import { useInterviewStore } from '@/stores/modules/interview'
 
 const router = useRouter()
 
@@ -12,6 +13,8 @@ const TOTAL_PAGES = 3
 const PAGE_HEIGHT = 1080
 const SCROLL_DURATION = 1000
 
+const interviewStore = useInterviewStore()
+
 const currentPage = ref<number>(0)
 const worksScrollIndex = ref<number>(0)
 const animatingToPage = ref<number>(0)
@@ -23,7 +26,9 @@ const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
 
 /** 是否正在从第二页回到第一页 */
 const isScrollingBackToFirst = computed<boolean>(() => {
-  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  return (
+    isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  )
 })
 
 /** 第一页坐着的人物是否显示 */
@@ -45,13 +50,13 @@ interface WorkItem {
 const worksList = ref<WorkItem[]>([
   {
     id: 1,
-    image: 'https://picsum.photos/400/300?random=1',
-    title: '作品名称',
+    image: getStaticImage('interview/practice/访谈-匠心育人润物无声'),
+    title: '匠心育人润物无声',
     stars: 4,
-    path: '/video/interview/practice/fangtan_cace1_batch.mp4',
+    path: 'video/interview/practice/fangtan_cace1_batch.mp4',
     description:
-      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
-  }
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介',
+  },
   // {
   //   id: 2,
   //   image: 'https://picsum.photos/400/300?random=2',
@@ -150,17 +155,43 @@ const handleWheel = (event: WheelEvent): void => {
   }
 }
 
+const restoreScrollPage = (): void => {
+  const savedPage = interviewStore.practiceScrollPage
+  const targetPage = Math.max(0, Math.min(savedPage, TOTAL_PAGES - 1))
+
+  currentPage.value = targetPage
+  animatingToPage.value = targetPage
+  requestAnimationFrame(() => {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = targetPage * PAGE_HEIGHT
+    }
+  })
+}
+
+const saveScrollPage = (): void => {
+  const page = containerRef.value
+    ? Math.round(containerRef.value.scrollTop / PAGE_HEIGHT)
+    : currentPage.value
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  interviewStore.setPracticeScrollPage(targetPage)
+}
+
 onMounted(() => {
+  restoreScrollPage()
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
 onUnmounted(() => {
+  saveScrollPage()
   containerRef.value?.removeEventListener('wheel', handleWheel)
 })
 </script>
 
 <template>
-  <div ref="containerRef" class="w-full h-full overflow-auto">
+  <div
+    ref="containerRef"
+    class="w-full h-full overflow-auto"
+  >
     <div class="relative min-h-full overflow-hidden">
       <!-- 关闭 -->
       <ImgButton
@@ -169,16 +200,19 @@ onUnmounted(() => {
         @click="handleClose"
       />
       <!-- 实战操作台 -->
-      <div
-        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/实战操作台首页') }"
-      >
+      <div class="w-full h-[1080px] bg-[#F5EFE6] relative">
         <ImgButton
-          class="absolute left-40 bottom-28 z-10"
+          class="absolute left-40 bottom-12 z-10"
           image="vlog/practice/查看任务要求"
           @click="scrollToNextPage"
         />
         <!-- img -->
+        <img
+          class="absolute left-0 top-0 z-10"
+          draggable="false"
+          :src="getStaticImage('interview/practice/访谈')"
+          alt=""
+        />
         <img
           class="absolute right-0"
           draggable="false"
@@ -193,12 +227,18 @@ onUnmounted(() => {
       >
         <ImgButton
           class="absolute right-20 bottom-0 z-99"
-          image="vlog/practice/我的创作笔记"
-          path="/practice/my-notes"
+          image="vlog/practice/我的创作笔记btn"
+          path="/interview/practice/my-notes"
         />
 
-        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
-          <img :src="getStaticImage('vlog/practice/滑动任务面板')" alt="" />
+        <div
+          class="task-panel w-[757px] h-full ml-10 overflow-y-auto"
+          @wheel.stop
+        >
+          <img
+            :src="getStaticImage('interview/practice/任务要求')"
+            alt=""
+          />
         </div>
 
         <img
@@ -220,7 +260,9 @@ onUnmounted(() => {
       <!-- 他人实战作品 -->
       <div
         class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+        :style="{
+          backgroundImage: getBackgroundImage('vlog/practice/他人实战作品'),
+        }"
       >
         <!-- 作品列表 -->
         <div class="w-full overflow-hidden">
@@ -235,28 +277,40 @@ onUnmounted(() => {
             >
               <!-- 作品图片 -->
               <div class="w-full h-[280px] rounded-2xl overflow-hidden">
-                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+                <img
+                  class="w-full h-full object-cover"
+                  :src="work.image"
+                  :alt="work.title"
+                />
               </div>
               <!-- 作品信息 -->
               <div class="flex flex-col items-center pt-8 space-y-4">
-                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">
+                  {{ work.title }}
+                </h3>
                 <!-- 星星评分 -->
-                <StarRating :score="work.stars" size="lg" readonly />
+                <StarRating
+                  :score="work.stars"
+                  size="lg"
+                  readonly
+                />
                 <!-- 简介 -->
-                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                <p
+                  class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed"
+                >
                   {{ work.description }}
                 </p>
                 <!-- 查看按钮 -->
                 <ImgButton
                   image="vlog/practice/查看"
-                  :path="`/practice/video/${encodeURIComponent(work.path)}`"
+                  :path="`/interview/practice/video/${encodeURIComponent(work.path)}`"
                 />
               </div>
             </div>
           </div>
         </div>
 
-        <!-- 指示按钮 -->
+        <!-- 指示按钮，暂时不要
         <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
           <img
             class="cursor-pointer hover:scale-110 transition-transform"
@@ -267,19 +321,23 @@ onUnmounted(() => {
           />
           <img
             class="cursor-pointer hover:scale-110 transition-transform rotate-180"
-            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                worksScrollIndex >= worksList.length - 3,
+            }"
             :src="getStaticImage('vlog/practice/滑动左')"
             alt="向右"
             @click="scrollWorksRight"
           />
         </div>
+        -->
       </div>
     </div>
 
     <!-- 下滑按钮 - 最后一页隐藏 -->
     <ImgButton
       v-show="!isLastPage"
-      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      class="absolute bottom-0 left-1/2 down-scroll-hint"
       :image="'vlog/practice/下滑'"
       @click="scrollToNextPage"
     />
@@ -287,13 +345,24 @@ onUnmounted(() => {
     <!-- 回到顶部按钮 - 最后一页显示 -->
     <img
       v-show="isLastPage"
-      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      class="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105"
       :src="BackToTopIcon"
       @click="scrollToTop"
     />
 
+    <!-- 老师点评按钮 - 最后一页显示 -->
+    <ImgButton
+      v-show="isLastPage"
+      class="absolute right-2 bottom-10 z-30"
+      image="components/教师点评按钮"
+      path="/interview/practice/teacher-comment"
+    />
+
     <!-- 跨页人物动画 -->
-    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+    <div
+      v-show="showSittingPerson || isScrollingBackToFirst"
+      class="character-container"
+    >
       <!-- 坐着的人物 - 第一页 -->
       <Transition name="fade">
         <img
@@ -332,6 +401,22 @@ onUnmounted(() => {
   /* Chrome/Safari/Opera */
 }
 
+.down-scroll-hint {
+  transform: translateX(-50%);
+  animation: down-scroll-hint 1.4s ease-in-out infinite;
+}
+
+@keyframes down-scroll-hint {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+
+  50% {
+    transform: translate(-50%, 12px);
+  }
+}
+
 /* 第一页人物动画容器 */
 .character-container {
   position: fixed;
diff --git a/src/views/interview/practice/my-notes/index.vue b/src/views/interview/practice/my-notes/index.vue
index 290aa8b..23e5d68 100644
--- a/src/views/interview/practice/my-notes/index.vue
+++ b/src/views/interview/practice/my-notes/index.vue
@@ -3,8 +3,9 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { Overlay } from '@/components/Overlay'
-import { StarRating } from '@/components/Rating'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
 
 const router = useRouter()
 
@@ -21,42 +22,38 @@ const handleBack = (): void => {
 
 const disabled = computed<boolean>(() => noteContent.value.trim() === '')
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '人物表达',
+    description: '能清晰介绍人物身份、特点或故事，让观众认识人物',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '素材拍摄',
+    description: '画面包含必要人物镜头、环境镜头与细节素材，内容较丰富',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '镜头语言',
+    description: '合理使用移动镜头、特写、跟拍等方式增强表现力',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '剪辑结构',
+    description: '结构完整清晰，段落顺畅，内容有起承转合',
+    score: 0,
   },
   {
-    title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    title: '音画关系',
+    description: '画面与配音/环境音基本匹配，能辅助理解内容',
+    score: 5,
+  },
+  {
+    title: '综合观感',
+    description: '作品完整，有真实感与感染力，具备观看吸引力',
+    score: 5,
+  },
 ])
 const handleSave = (): void => {
   console.log('保存笔记')
@@ -67,7 +64,9 @@ const handleSave = (): void => {
 <template>
   <div
     class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
-    :style="{ backgroundImage: getBackgroundImage('vlog/practice/创作笔记底图') }"
+    :style="{
+      backgroundImage: getBackgroundImage('interview/practice/我的创作笔记'),
+    }"
   >
     <ImgButton
       class="absolute top-0 right-0"
@@ -83,52 +82,25 @@ const handleSave = (): void => {
     ></textarea>
 
     <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
-      <ImgButton image="vlog/practice/保存" @click="handleSave" />
-      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+      <ImgButton
+        image="vlog/practice/保存"
+        @click="handleSave"
+      />
+      <ImgButton
+        image="vlog/practice/自评"
+        :disabled="disabled"
+        @click="showModal = true"
+      />
     </div>
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="interview/practice/人物访谈短片创作-作品评分表"
+      top-tip="评分时要关注6个维度哦~分别是人物表达、素材拍摄、镜头语言、剪辑结构、音画关系、综合观感每个维度满分5分，能打1-5分，记得对照作品表现来打分呀~"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
 
diff --git a/src/views/interview/practice/teacher-comment/index.vue b/src/views/interview/practice/teacher-comment/index.vue
new file mode 100644
index 0000000..d152716
--- /dev/null
+++ b/src/views/interview/practice/teacher-comment/index.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-x-hidden">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+
+    <img
+      src="@/assets/images/interview/practice/教师点评.png"
+      alt=""
+    />
+  </div>
+</template>
diff --git a/src/views/interview/practice/video/index.vue b/src/views/interview/practice/video/index.vue
index 4120c50..a502367 100644
--- a/src/views/interview/practice/video/index.vue
+++ b/src/views/interview/practice/video/index.vue
@@ -2,9 +2,10 @@
 import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
-import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
-import { Overlay } from '@/components/Overlay'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
+import { IMAGE_PATHS, getPublicPath } from '@/utils'
 import { ref } from 'vue'
 
 const router = useRouter()
@@ -12,46 +13,42 @@ const router = useRouter()
 const props = defineProps({
   path: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '人物表达',
+    description: '能清晰介绍人物身份、特点或故事，让观众认识人物',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '素材拍摄',
+    description: '画面包含必要人物镜头、环境镜头与细节素材，内容较丰富',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '镜头语言',
+    description: '合理使用移动镜头、特写、跟拍等方式增强表现力',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '剪辑结构',
+    description: '结构完整清晰，段落顺畅，内容有起承转合',
+    score: 0,
   },
   {
-    title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    title: '音画关系',
+    description: '画面与配音/环境音基本匹配，能辅助理解内容',
+    score: 5,
+  },
+  {
+    title: '综合观感',
+    description: '作品完整，有真实感与感染力，具备观看吸引力',
+    score: 5,
+  },
 ])
 
 /** 保存弹窗 */
@@ -76,54 +73,20 @@ const handleBack = (): void => {
       @click="showModal = true"
     />
     <Video
-      :src="decodeURIComponent(props.path)"
+      :src="getPublicPath(decodeURIComponent(props.path))"
       :volume="1"
       :muted="false"
       :controls="true"
       :loop="false"
     />
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="interview/practice/人物访谈短片创作-作品评分表"
+      top-tip="评分时要关注6个维度哦~分别是人物表达、素材拍摄、镜头语言、剪辑结构、音画关系、综合观感每个维度满分5分，能打1-5分，记得对照作品表现来打分呀~"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
diff --git a/src/views/interview/video/index.vue b/src/views/interview/video/index.vue
index 1fa82f2..cf0b16d 100644
--- a/src/views/interview/video/index.vue
+++ b/src/views/interview/video/index.vue
@@ -2,7 +2,8 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, StepNavigation, type GuideStep } from '@/components/Guide'
+import { GuideSteps, type GuideStep } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useInterviewStore } from '@/stores'
@@ -21,8 +22,9 @@ const steps = ref<GuideStep[]>([
   {
     id: 'step1',
     audioSrc: getPublicPath('audio/py_3_006.MP3'),
-    content: '刚才我们学习了访谈作品的核心拍摄技能，现在通过这张思维导图来回顾一下吧！'
-  }
+    content:
+      '刚才我们学习了访谈作品的核心拍摄技能，现在通过这张思维导图来回顾一下吧！',
+  },
 ])
 
 const introGuideSteps = computed<GuideStep[]>(() => {
@@ -31,8 +33,8 @@ const introGuideSteps = computed<GuideStep[]>(() => {
       {
         id: 'case-intro',
         audioSrc: getPublicPath('audio/py_3_003.MP3'),
-        content: '现在，让我们通过一段访谈案例，去看看同龄人心中的职业蓝图吧！'
-      }
+        content: '现在，让我们通过一段访谈案例，去看看同龄人心中的职业蓝图吧！',
+      },
     ]
   }
 
@@ -41,13 +43,14 @@ const introGuideSteps = computed<GuideStep[]>(() => {
       {
         id: 'profession-intro1',
         audioSrc: getPublicPath('audio/py_3_004.MP3'),
-        content: '看完作品后，你可能已经感受到了，一条访谈视频，好像并不是“坐着讲话”这么简单。'
+        content:
+          '看完作品后，你可能已经感受到了，一条访谈视频，好像并不是“坐着讲话”这么简单。',
       },
       {
         id: 'profession-intro2',
         audioSrc: getPublicPath('audio/py_3_005.MP3'),
-        content: '那么，让我们一起来拆解访谈作品的核心技能吧！'
-      }
+        content: '那么，让我们一起来拆解访谈作品的核心技能吧！',
+      },
     ]
   }
 
@@ -67,29 +70,29 @@ const navigationSteps = ref([
     label: '拍摄执行',
     content: '机位设置',
     videoUrl: getPublicPath('video/interview/work/ftmk_jwsz_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step2',
     label: '拍摄执行',
     content: '轴线原则',
     videoUrl: getPublicPath('video/interview/work/ftmk_zxyz_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step3',
     label: '内容策划',
     content: '镜头组接逻辑',
     videoUrl: getPublicPath('video/interview/work/ftmk_jtzjlj_batch.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step4',
     label: '拍摄执行',
     content: '声音同步与收录',
     videoUrl: getPublicPath('video/interview/work/ftmk_sytbysl_batch.mp4'),
-    type: 'shooting' as const
-  }
+    type: 'shooting' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -100,7 +103,9 @@ const currentNavigationStep = ref(1) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const resolvedSrc = computed(() => {
   if (key.value === 'case') return '/video/interview/work/ft_zylt.mp4'
   if (key.value === 'profession') return currentVideo.value
@@ -131,7 +136,7 @@ const handleClose = () => {
     interview.setInterviewUnlockProgress(1)
     router.push({
       name: 'Interview',
-      query: { guide: 'return' }
+      query: { guide: 'return' },
     })
     return
   }
@@ -153,7 +158,7 @@ const handleComplete = () => {
   if (key.value === 'profession') {
     if (!interview.isInterviewUnlock) interview.setIsInterviewUnlock(true)
     router.push({
-      name: 'InterviewWork'
+      name: 'InterviewWork',
     })
   }
 }
@@ -179,7 +184,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+  <div
+    class="w-full h-full relative bg-white/10"
+    @click="handleClick"
+  >
     <template v-if="key !== 'case' && key !== 'profession'">
       <ImgButton
         class="absolute right-0 top-0 z-10"
@@ -194,7 +202,12 @@ onMounted(() => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -204,8 +217,14 @@ onMounted(() => {
       </svg>
     </button>
 
-    <div v-if="key === 'vlog'" :src="image">
-      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    <div
+      v-if="key === 'vlog'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('work/vlog背景全屏待定')"
+        alt=""
+      />
     </div>
     <Video
       v-else-if="key === 'case' || key === 'profession'"
@@ -226,8 +245,14 @@ onMounted(() => {
         />
       </template>
     </Video>
-    <div v-else-if="key === 'idea'" :src="image">
-      <img :src="getStaticImage('interview/work/思路提点全屏')" alt="" />
+    <div
+      v-else-if="key === 'idea'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('interview/work/思路提点全屏')"
+        alt=""
+      />
     </div>
   </div>
 
@@ -241,7 +266,12 @@ onMounted(() => {
   />
 
   <!-- 引导与高亮 -->
-  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+  <GuideSteps
+    v-if="status"
+    :steps="steps"
+    position-offset-y="85%"
+    @complete="handleComplete"
+  />
 
   <!-- 步骤导航抽屉 -->
   <StepNavigation
diff --git a/src/views/interview/work/index.vue b/src/views/interview/work/index.vue
index 7208d6e..0aa3653 100644
--- a/src/views/interview/work/index.vue
+++ b/src/views/interview/work/index.vue
@@ -1,7 +1,12 @@
 <script lang="tsx" name="Work" setup>
 defineOptions({ name: 'Work' })
 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 } from '@/components/Guide'
@@ -28,14 +33,14 @@ const steps = [
     id: 'step1',
     audioSrc: getPublicPath('audio/py_3_001.MP3'),
     content: '我们常常会思考，未来自己想成为什么样的人呢？',
-    highlightSelector: '.img-switch-item--case'
+    highlightSelector: '.img-switch-item--case',
   },
   {
     id: 'step2',
     audioSrc: getPublicPath('audio/py_3_002.MP3'),
     content: '如果把这份思考勇敢地说出来，被镜头记录下来，你会如何表达呢？',
-    highlightSelector: '.work-border'
-  }
+    highlightSelector: '.work-border',
+  },
 ]
 
 //切换图片
@@ -43,28 +48,28 @@ const sideSwitcherItems = ref([
   {
     key: 'vlog',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'case',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'profession',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'idea',
     description: '我的职业蓝图',
-    image: 'interview/work/思路提点小屏'
-  }
+    image: 'interview/work/思路提点小屏',
+  },
 ])
 
 //当前选中的item
 const currentItem = computed(() => {
-  return sideSwitcherItems.value.find(item => item.key === selected.value)
+  return sideSwitcherItems.value.find((item) => item.key === selected.value)
 })
 
 const handleSideSwitcherChange = (value: WorkTab) => {
@@ -76,10 +81,11 @@ const handleImageClick = () => {
     name: 'InterviewVideo',
     query: {
       image:
-        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
-        '',
-      key: selected.value
-    }
+        workSideSwitcherRef.value?.items.find(
+          (item) => item.key === selected.value,
+        )?.activeImage || '',
+      key: selected.value,
+    },
   })
 }
 
@@ -106,7 +112,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>
@@ -116,7 +126,9 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 背景图片-center -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage('interview/work/任务取景框背景') }"
+      :style="{
+        backgroundImage: getBackgroundImage('interview/work/任务取景框背景'),
+      }"
     ></div>
 
     <!-- 关闭 -->
@@ -133,10 +145,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
         class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
@@ -169,7 +185,11 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isInterviewUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="
+        isInterviewUnlock
+          ? IMAGE_PATHS.WORK.TASK_BTN_OK
+          : IMAGE_PATHS.WORK.TASK_BTN
+      "
       @click="handleWorkClick"
     />
 
diff --git a/src/views/vlog/after-editing/editing.vue b/src/views/vlog/after-editing/editing.vue
index c9f1448..a467e21 100644
--- a/src/views/vlog/after-editing/editing.vue
+++ b/src/views/vlog/after-editing/editing.vue
@@ -2,7 +2,8 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, GuideStepsItem, StepNavigation } from '@/components/Guide'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { getPublicPath, IMAGE_PATHS } from '@/utils'
 import { Video } from '@/components'
 import { useVlogStore } from '@/stores/modules/vlog'
@@ -22,32 +23,34 @@ const navigationSteps = ref([
     label: '后期制作',
     content: '剪辑起点',
     videoUrl: getPublicPath('video/vlog/editing/Vlogmk_jjqd_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step2',
     label: '后期制作',
     content: '音画匹配',
     videoUrl: getPublicPath('video/vlog/editing/Vlogmk_yhpp_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step3',
     label: '后期制作',
     content: '剪辑节奏',
     videoUrl: getPublicPath('video/vlog/editing/Vlogmk_jjjz_batch.mp4'),
-    type: 'post' as const
+    type: 'post' as const,
   },
   {
     id: 'step4',
     label: '后期制作',
     content: '声音与转场',
     videoUrl: getPublicPath('video/vlog/editing/Vlogmk_syyzc_batch.mp4'),
-    type: 'post' as const
-  }
+    type: 'post' as const,
+  },
 ])
 
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 const currentVideoIndex = ref(0)
 const playing = ref(false)
@@ -109,7 +112,12 @@ const handleEndingGuideComplete = () => {
       title="步骤导航"
       @click="showStepNavigation = true"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -127,7 +135,11 @@ const handleEndingGuideComplete = () => {
       @close="showStepNavigation = false"
     />
 
-    <GuideSteps v-if="showIntroGuide" position-offset-y="85%" @complete="handleIntroGuideComplete">
+    <GuideSteps
+      v-if="showIntroGuide"
+      position-offset-y="85%"
+      @complete="handleIntroGuideComplete"
+    >
       <GuideStepsItem :audio-src="getPublicPath('audio/py_2_019.MP3')">
         剪辑不是简单拼接素材，而是在重新组织故事、控制节奏、强化表达。
       </GuideStepsItem>
diff --git a/src/views/vlog/midterm-shooting/on-site/index.vue b/src/views/vlog/midterm-shooting/on-site/index.vue
index cb1c699..98f8634 100644
--- a/src/views/vlog/midterm-shooting/on-site/index.vue
+++ b/src/views/vlog/midterm-shooting/on-site/index.vue
@@ -2,7 +2,8 @@
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ImgButton } from '@/components/Button'
-import { GuideSteps, GuideStepsItem, StepNavigation } from '@/components/Guide'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
 import { getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { useVlogStore } from '@/stores/modules/vlog'
@@ -25,25 +26,27 @@ const navigationSteps = ref([
     label: '拍摄执行',
     content: '开场建立',
     videoUrl: getPublicPath('video/vlog/on-site/Vlogmk_kcjl_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'lens-language',
     label: '拍摄执行',
     content: '镜头语言',
     videoUrl: getPublicPath('video/vlog/on-site/Vlogmk_jtyy_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'motion-capture',
     label: '拍摄执行',
     content: '动态跟拍与抓拍',
     videoUrl: getPublicPath('video/vlog/on-site/Vlogmk_dtgpyzp_batch.mp4'),
-    type: 'shooting' as const
-  }
+    type: 'shooting' as const,
+  },
 ])
 
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 
 const handleClose = () => {
   router.back()
@@ -102,7 +105,12 @@ const handleIntroGuideComplete = () => {
           title="资源列表"
           @click="showStepNavigation = true"
         >
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
             <path
               d="M3 4H17M3 8H17M3 12H17M3 16H17"
               stroke="currentColor"
@@ -123,9 +131,14 @@ const handleIntroGuideComplete = () => {
       @close="handleStepNavigationClose"
     />
 
-    <GuideSteps v-if="showIntroGuide" position-offset-y="85%" @complete="handleIntroGuideComplete">
+    <GuideSteps
+      v-if="showIntroGuide"
+      position-offset-y="85%"
+      @complete="handleIntroGuideComplete"
+    >
       <GuideStepsItem :audio-src="getPublicPath('audio/py_2_015.MP3')">
-        接下来，我们进入最核心的实拍环节。看看一条真实 Vlog，是如何一步步被拍出来的。
+        接下来，我们进入最核心的实拍环节。看看一条真实
+        Vlog，是如何一步步被拍出来的。
       </GuideStepsItem>
     </GuideSteps>
   </div>
diff --git a/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue b/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue
index 074f557..94d408e 100644
--- a/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue
+++ b/src/views/vlog/midterm-shooting/shooting/components/StartOverlay.vue
@@ -1,7 +1,29 @@
+<script setup lang="ts">
+import { ImgButton } from '@/components/Button'
+import { getStaticImage } from '@/utils'
+
+defineEmits<{
+  start: []
+}>()
+
+const props = defineProps<{
+  scene: 'a' | 'b'
+}>()
+</script>
+
 <template>
   <div class="absolute bottom-0">
     <div class="relative">
-      <img src="@/assets/images/shooting/开始取景.png" alt="" />
+      <img
+        :src="
+          getStaticImage(
+            props.scene === 'a'
+              ? 'vlog/shooting/开始拍摄-热带植物馆.png'
+              : 'vlog/shooting/开始拍摄-沉水栈道.png',
+          )
+        "
+        alt=""
+      />
       <ImgButton
         class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
         image="shooting/按钮-开始取景.png"
@@ -10,11 +32,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ImgButton } from '@/components/Button'
-
-defineEmits<{
-  start: []
-}>()
-</script>
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue
index 005a72c..025b8a7 100644
--- a/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-a/index.vue
@@ -35,7 +35,7 @@ const {
   getTransform,
   currentOffsetX,
   currentOffsetY,
-  handleWheel
+  handleWheel,
 } = useViewfinderA()
 
 // 刻度盘配置常量
@@ -88,7 +88,7 @@ const dialTicks = computed<DialTick[]>(() => {
       angle,
       isMajor,
       isInteger,
-      label: isInteger ? zoom + 'x' : ''
+      label: isInteger ? zoom + 'x' : '',
     })
   }
   return ticks
@@ -116,7 +116,7 @@ const capturePhoto = async () => {
   if (isLoading.value) return
 
   isCapturing.value = true
-  await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
+  await new Promise((resolve) => setTimeout(resolve, FLASH_DURATION))
 
   await capture({
     width: CANVAS_WIDTH,
@@ -124,7 +124,7 @@ const capturePhoto = async () => {
     scale: CANVAS_SCALE,
     delay: UI_UPDATE_DELAY,
     resultDelay: RESULT_DISPLAY_DELAY,
-    onDraw: ctx => {
+    onDraw: (ctx) => {
       if (!photoImage.value) {
         throw new Error('Photo image not found')
       }
@@ -142,12 +142,12 @@ const capturePhoto = async () => {
         -CANVAS_WIDTH / 2,
         -CANVAS_HEIGHT / 2,
         CANVAS_WIDTH,
-        CANVAS_HEIGHT
+        CANVAS_HEIGHT,
       )
     },
     onComplete: () => {
       isCapturing.value = false
-    }
+    },
   })
 }
 </script>
@@ -156,10 +156,21 @@ const capturePhoto = async () => {
   <div class="w-full h-full">
     <div
       class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage('vlog/shooting/热带植物馆-模糊.png') }"
+      :style="{
+        backgroundImage: getBackgroundImage(
+          'vlog/shooting/热带植物馆-模糊.png',
+        ),
+      }"
     >
-      <ImgButton image="vlog/shooting/热带植物馆侧边.png" class="title-button absolute left-0" />
-      <ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
+      <ImgButton
+        image="vlog/shooting/热带植物馆侧边.png"
+        class="title-button absolute left-0"
+      />
+      <ImgButton
+        image="shooting/返回.png"
+        class="back-button absolute right-0"
+        @click="back"
+      />
 
       <p
         class="absolute left-1/2 -translate-x-1/2 top-[260px] text-red-500 text-4xl leading-normal font-bold"
@@ -167,10 +178,17 @@ const capturePhoto = async () => {
         操作说明：在手机取景框区域，滚动鼠标滚轮可缩放画面，按住鼠标左键拖动可调整画面位置。
       </p>
 
-      <StartOverlay v-if="!start" @start="start = true" />
+      <StartOverlay
+        scene="a"
+        v-if="!start"
+        @start="start = true"
+      />
 
       <!-- 手机拍照界面 -->
-      <div class="absolute bottom-0 w-full h-[766px]" v-else>
+      <div
+        class="absolute bottom-0 w-full h-[766px]"
+        v-else
+      >
         <img
           class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
           src="@/assets/images/shooting/shoot.png"
@@ -189,7 +207,7 @@ const capturePhoto = async () => {
               :class="{
                 'transition-transform duration-300': !isDragging,
                 'cursor-grab': !isDragging,
-                'cursor-grabbing': isDragging
+                'cursor-grabbing': isDragging,
               }"
               :style="{ transform: getTransform() }"
               src="@/assets/images/vlog/shooting/热带植物馆-清晰.png"
@@ -216,7 +234,9 @@ const capturePhoto = async () => {
 
         <div
           class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
-          :style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
+          :style="{
+            backgroundImage: getBackgroundImage('shooting/拍摄装饰.png'),
+          }"
         >
           <!-- 仿苹果半圆盘缩放控件 -->
           <div
@@ -240,13 +260,17 @@ const capturePhoto = async () => {
             <!-- 圆心在容器右侧外部，形成左侧弧形 -->
             <div
               class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
-              :style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
+              :style="{
+                transform: `translateY(-50%) rotate(${dialRotation}deg)`,
+              }"
             >
               <div
                 v-for="tick in dialTicks"
                 :key="tick.zoom"
                 class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
-                :style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
+                :style="{
+                  transform: `translate(0, -50%) rotate(${tick.angle}deg)`,
+                }"
                 @click.stop="setZoom(tick.zoom)"
               >
                 <!-- 刻度线本体 (位于圆盘左边缘) -->
@@ -255,17 +279,21 @@ const capturePhoto = async () => {
                   :class="{
                     'w-10 h-1 opacity-90': tick.isInteger,
                     'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
-                    'w-3 h-[1px] opacity-40': !tick.isMajor
+                    'w-3 h-[1px] opacity-40': !tick.isMajor,
                   }"
                 ></div>
                 <!-- 刻度文字 -->
                 <div
                   v-if="tick.isInteger"
                   class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
-                  :style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
+                  :style="{
+                    transform: `rotate(${-tick.angle - dialRotation}deg)`,
+                  }"
                 >
                   <span
-                    :class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
+                    :class="{
+                      'text-yellow-400 scale-110': currentZoom === tick.zoom,
+                    }"
                     class="block transition-all duration-200"
                   >
                     {{ tick.label }}
@@ -285,22 +313,39 @@ const capturePhoto = async () => {
       </div>
 
       <!-- 结果弹窗 -->
-      <Overlay :visible="showModal" @close="handleModalClose">
-        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+      <Overlay
+        :visible="showModal"
+        @close="handleModalClose"
+      >
+        <div
+          class="relative w-[1000px] h-[600px] flex items-center justify-center"
+        >
           <!-- 截图内容 -->
-          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
-            <img :src="capturedImageUrl" alt="拍摄结果" />
+          <div
+            v-if="capturedImageUrl"
+            class="bg-white p-2 rounded-md -rotate-6"
+          >
+            <img
+              :src="capturedImageUrl"
+              alt="拍摄结果"
+            />
           </div>
 
           <!-- 操作按钮 -->
           <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
-            <ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
+            <ImgButton
+              image="shooting/按钮-前往下一个取景地"
+              @click="handleFinish"
+            />
           </div>
         </div>
       </Overlay>
     </div>
 
-    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+    <LoadingOverlay
+      :visible="isLoading"
+      text="正在出片中..."
+    />
   </div>
 </template>
 
@@ -324,7 +369,19 @@ const capturePhoto = async () => {
 }
 
 .mask-gradient {
-  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
 }
 </style>
diff --git a/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue
index 7cccb3a..61b8436 100644
--- a/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue
+++ b/src/views/vlog/midterm-shooting/shooting/filmingLocation-b/index.vue
@@ -36,14 +36,23 @@ const handleModalClose = () => {
 }
 
 // 自由取景框模式
-const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
+const {
+  viewfinderContainer,
+  viewfinderBox,
+  viewfinder,
+  startDrag,
+  startResize,
+} = useViewfinderB()
 
 const handleStartDrag = (event: MouseEvent | TouchEvent): void => {
   hideInstruction()
   startDrag(event)
 }
 
-const handleStartResize = (direction: ResizeDirection, event: MouseEvent | TouchEvent): void => {
+const handleStartResize = (
+  direction: ResizeDirection,
+  event: MouseEvent | TouchEvent,
+): void => {
   hideInstruction()
   startResize(direction, event)
 }
@@ -74,7 +83,7 @@ const captureScene = async (): Promise<void> => {
     height: viewfinder.value.height,
     scale: CANVAS_SCALE,
     delay: UI_UPDATE_DELAY,
-    onDraw: ctx => {
+    onDraw: (ctx) => {
       if (!backgroundImage.value) {
         throw new Error('Background image not found')
       }
@@ -96,7 +105,7 @@ const captureScene = async (): Promise<void> => {
         0, // 目标 x
         0, // 目标 y
         viewfinder.value.width, // 目标 width
-        viewfinder.value.height // 目标 height
+        viewfinder.value.height, // 目标 height
       )
     },
     onComplete: () => {
@@ -104,7 +113,7 @@ const captureScene = async (): Promise<void> => {
       setTimeout(() => {
         showGuide.value = true
       }, GUIDE_SHOW_DELAY)
-    }
+    },
   })
 }
 
@@ -114,7 +123,7 @@ const captureScene = async (): Promise<void> => {
 const handleComplete = (): void => {
   showGuide.value = false
   router.push({
-    name: 'Vlog'
+    name: 'Vlog',
   })
 }
 </script>
@@ -126,11 +135,14 @@ const handleComplete = (): void => {
       :style="{
         backgroundImage: start
           ? getBackgroundImage('vlog/shooting/沉水栈道-清晰.png')
-          : getBackgroundImage('vlog/shooting/沉水栈道-模糊.png')
+          : getBackgroundImage('vlog/shooting/沉水栈道-模糊.png'),
       }"
     >
       <!-- 标题 -->
-      <ImgButton image="vlog/shooting/沉水栈道侧边.png" class="title-button absolute left-0" />
+      <ImgButton
+        image="vlog/shooting/沉水栈道侧边.png"
+        class="title-button absolute left-0"
+      />
 
       <!-- 返回按钮 -->
       <ImgButton
@@ -146,10 +158,17 @@ const handleComplete = (): void => {
         操作说明：拖动取景框四角调整裁剪范围，点击“取景”键就完成啦！
       </p>
 
-      <StartOverlay v-if="!start" @start="handleStart" />
+      <StartOverlay
+        scene="b"
+        v-if="!start"
+        @start="handleStart"
+      />
 
       <!-- 取景 -->
-      <div class="absolute bottom-0 w-full h-full" v-else>
+      <div
+        class="absolute bottom-0 w-full h-full"
+        v-else
+      >
         <!-- 隐藏的背景图片，用于 Canvas 绘制 -->
         <img
           ref="backgroundImage"
@@ -160,14 +179,17 @@ const handleComplete = (): void => {
         />
 
         <!-- 取景框容器 -->
-        <div ref="viewfinderContainer" class="relative w-full h-full">
+        <div
+          ref="viewfinderContainer"
+          class="relative w-full h-full"
+        >
           <!-- 四个方向的遮罩层 -->
           <!-- 上遮罩 -->
           <div
             class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
             :style="{
               top: 0,
-              height: viewfinder.y + 'px'
+              height: viewfinder.y + 'px',
             }"
           ></div>
           <!-- 下遮罩 -->
@@ -175,7 +197,7 @@ const handleComplete = (): void => {
             class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
             :style="{
               top: viewfinder.y + viewfinder.height + 'px',
-              bottom: 0
+              bottom: 0,
             }"
           ></div>
           <!-- 左遮罩 -->
@@ -184,7 +206,7 @@ const handleComplete = (): void => {
             :style="{
               top: viewfinder.y + 'px',
               width: viewfinder.x + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
           ></div>
           <!-- 右遮罩 -->
@@ -193,7 +215,7 @@ const handleComplete = (): void => {
             :style="{
               top: viewfinder.y + 'px',
               left: viewfinder.x + viewfinder.width + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
           ></div>
 
@@ -205,13 +227,15 @@ const handleComplete = (): void => {
               left: viewfinder.x + 'px',
               top: viewfinder.y + 'px',
               width: viewfinder.width + 'px',
-              height: viewfinder.height + 'px'
+              height: viewfinder.height + 'px',
             }"
             @mousedown="handleStartDrag"
             @touchstart="handleStartDrag"
           >
             <!-- 九宫格辅助线 -->
-            <div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
+            <div
+              class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3"
+            >
               <div
                 v-for="i in 9"
                 :key="i"
@@ -220,7 +244,7 @@ const handleComplete = (): void => {
                   'border-t-0': i <= 3,
                   'border-b-0': i >= 7,
                   'border-l-0': (i - 1) % 3 === 0,
-                  'border-r-0': i % 3 === 0
+                  'border-r-0': i % 3 === 0,
                 }"
               ></div>
             </div>
@@ -254,19 +278,34 @@ const handleComplete = (): void => {
           class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
           :style="{
             left: viewfinder.x + viewfinder.width / 2 + 'px',
-            top: viewfinder.y + viewfinder.height + 'px'
+            top: viewfinder.y + viewfinder.height + 'px',
           }"
         >
-          <ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
+          <ImgButton
+            class="w-36"
+            image="shooting/按钮-取景"
+            @click="captureScene"
+          />
         </div>
       </div>
 
       <!-- 结果弹窗 -->
-      <Overlay :visible="showModal" @close="handleModalClose">
-        <div class="relative w-[1000px] h-[600px] flex items-center justify-center">
+      <Overlay
+        :visible="showModal"
+        @close="handleModalClose"
+      >
+        <div
+          class="relative w-[1000px] h-[600px] flex items-center justify-center"
+        >
           <!-- 截图内容 -->
-          <div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
-            <img :src="capturedImageUrl" alt="拍摄结果" />
+          <div
+            v-if="capturedImageUrl"
+            class="bg-white p-2 rounded-md -rotate-6"
+          >
+            <img
+              :src="capturedImageUrl"
+              alt="拍摄结果"
+            />
           </div>
 
           <!-- 操作按钮 -->
@@ -277,11 +316,20 @@ const handleComplete = (): void => {
       </Overlay>
     </div>
 
-    <LoadingOverlay :visible="isLoading" text="正在出片中..." />
+    <LoadingOverlay
+      :visible="isLoading"
+      text="正在出片中..."
+    />
 
     <!-- 引导步骤 -->
-    <GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
-      <GuideStepsItem>实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~</GuideStepsItem>
+    <GuideSteps
+      v-if="showGuide"
+      positionOffsetY="80%"
+      @complete="handleComplete"
+    >
+      <GuideStepsItem>
+        实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~
+      </GuideStepsItem>
     </GuideSteps>
   </div>
 </template>
diff --git a/src/views/vlog/midterm-shooting/shooting/index.vue b/src/views/vlog/midterm-shooting/shooting/index.vue
index 0fe827d..c2b040a 100644
--- a/src/views/vlog/midterm-shooting/shooting/index.vue
+++ b/src/views/vlog/midterm-shooting/shooting/index.vue
@@ -37,7 +37,7 @@ const currentItem = ref<Btn>({
   name: '',
   btnImage: '',
   images: [],
-  desc: ''
+  desc: '',
 })
 
 const btnList = ref<Btn[]>([
@@ -45,23 +45,23 @@ const btnList = ref<Btn[]>([
     key: '1',
     name: '居中构图',
     btnImage: 'shooting/居中构图底板',
-    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
-    images: ['shooting/居中构图1', 'shooting/居中构图2']
+    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用。',
+    images: ['shooting/居中构图1', 'shooting/居中构图2'],
   },
   {
     key: '2',
     name: '三分法构图',
     btnImage: 'shooting/三分法构图底板',
-    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
-    images: ['shooting/图片待定1', 'shooting/图片待定2']
+    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调。',
+    images: ['shooting/图片待定1', 'shooting/图片待定2'],
   },
   {
     key: '3',
     name: '对角线构图',
     btnImage: 'shooting/对角线构图底板',
     desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
-    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
-  }
+    images: ['shooting/对角线构图1', 'shooting/对角线构图2'],
+  },
 ])
 
 const handleModalClose = () => {
@@ -96,22 +96,39 @@ const back = () => {
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
-      :style="{ backgroundImage: getBackgroundImage('vlog/shooting/实地取景底图') }"
+      :style="{
+        backgroundImage: getBackgroundImage('vlog/shooting/实地取景底图'),
+      }"
     >
       <div class="shooting-title">
-        <img :src="shootingtitle" alt="" />
+        <img
+          :src="shootingtitle"
+          alt=""
+        />
       </div>
       <div class="shooting-return">
-        <ImgButton image="shooting/返回.png" @click="back" />
+        <ImgButton
+          image="shooting/返回.png"
+          @click="back"
+        />
       </div>
       <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-        <ImgButton image="vlog/shooting/热带植物馆-入口.png" @click="handleClickA" />
+        <ImgButton
+          image="vlog/shooting/热带植物馆-入口.png"
+          @click="handleClickA"
+        />
       </div>
       <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-        <ImgButton image="vlog/shooting/沉水栈道-入口.png" @click="handleClickB" />
+        <ImgButton
+          image="vlog/shooting/沉水栈道-入口.png"
+          @click="handleClickB"
+        />
       </div>
       <div class="shooting-composition btn-1">
-        <ImgButton image="shooting/构图指南.png" @click="showModal = true" />
+        <ImgButton
+          image="shooting/构图指南.png"
+          @click="showModal = true"
+        />
       </div>
     </div>
 
@@ -133,7 +150,7 @@ const back = () => {
       :visible="showModal"
       :clickable="false"
       :customStyle="{
-        backgroundImage: getBackgroundImage('shooting/构图指南底图')
+        backgroundImage: getBackgroundImage('shooting/构图指南底图'),
       }"
       customClass="inset-0 bg-cover bg-center bg-no-repeat"
       contentClass="relative w-full h-full"
@@ -146,7 +163,10 @@ const back = () => {
       />
 
       <!-- 构图指南 -->
-      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+      <ImgButton
+        class="absolute left-0 top-0 z-10"
+        image="shooting/标题-构图指南"
+      />
 
       <!-- 新手导航视频 -->
       <ImgButton
@@ -175,8 +195,16 @@ const back = () => {
         @close="showModal2 = false"
       />
       <!-- 视频 -->
-      <Overlay :visible="showModal3" :clickable="false">
-        <Video :src="videoSrc" controls :volume="1" :muted="false"></Video>
+      <Overlay
+        :visible="showModal3"
+        :clickable="false"
+      >
+        <Video
+          :src="videoSrc"
+          controls
+          :volume="1"
+          :muted="false"
+        ></Video>
         <!-- 返回 -->
         <ImgButton
           class="absolute right-0 top-0 z-10"
diff --git a/src/views/vlog/practice/index.vue b/src/views/vlog/practice/index.vue
index 77ba47a..ca3df74 100644
--- a/src/views/vlog/practice/index.vue
+++ b/src/views/vlog/practice/index.vue
@@ -4,7 +4,8 @@ import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import { StarRating } from '@/components/Rating'
 import { useRouter } from 'vue-router'
-import BackToTopIcon from '@/assets/svg/back-to-top.svg'
+import BackToTopIcon from '@/assets/images/components/置顶.png'
+import { useVlogStore } from '@/stores/modules/vlog'
 
 const router = useRouter()
 
@@ -12,6 +13,8 @@ const TOTAL_PAGES = 3
 const PAGE_HEIGHT = 1080
 const SCROLL_DURATION = 1000
 
+const vlogStore = useVlogStore()
+
 const currentPage = ref<number>(0)
 const worksScrollIndex = ref<number>(0)
 const animatingToPage = ref<number>(0)
@@ -23,7 +26,9 @@ const isLastPage = computed<boolean>(() => currentPage.value >= TOTAL_PAGES - 1)
 
 /** 是否正在从第二页回到第一页 */
 const isScrollingBackToFirst = computed<boolean>(() => {
-  return isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  return (
+    isAnimating.value && currentPage.value === 1 && animatingToPage.value === 0
+  )
 })
 
 /** 第一页坐着的人物是否显示 */
@@ -45,21 +50,22 @@ interface WorkItem {
 const worksList = ref<WorkItem[]>([
   {
     id: 1,
-    image: 'https://picsum.photos/400/300?random=1',
-    title: '作品名称',
+    image: getStaticImage('vlog/practice/vlog-熙熙攘攘我们的劳动'),
+    title: '熙熙攘攘我们的劳动',
     stars: 4,
     path: '/video/vlog/practice/vlog_case1_batch.mp4',
     description:
-      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介',
   },
   {
     id: 2,
-    image: 'https://picsum.photos/400/300?random=2',
-    title: '作品名称',
+    image: getStaticImage('vlog/practice/vlog-匠心精神劳动承匠心'),
+    title: '匠心精神劳动承匠心',
     stars: 5,
     path: '/video/vlog/practice/vlog_case2_batch.mp4',
-    description: '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介'
-  }
+    description:
+      '作品简介作品简介作品简介作品简介作品简介作品简介作品简介作品简介',
+  },
 ])
 
 /** 左滑动作品列表 */
@@ -150,17 +156,43 @@ const handleWheel = (event: WheelEvent): void => {
   }
 }
 
+const restoreScrollPage = (): void => {
+  const savedPage = vlogStore.practiceScrollPage
+  const targetPage = Math.max(0, Math.min(savedPage, TOTAL_PAGES - 1))
+
+  currentPage.value = targetPage
+  animatingToPage.value = targetPage
+  requestAnimationFrame(() => {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = targetPage * PAGE_HEIGHT
+    }
+  })
+}
+
+const saveScrollPage = (): void => {
+  const page = containerRef.value
+    ? Math.round(containerRef.value.scrollTop / PAGE_HEIGHT)
+    : currentPage.value
+  const targetPage = Math.max(0, Math.min(page, TOTAL_PAGES - 1))
+  vlogStore.setPracticeScrollPage(targetPage)
+}
+
 onMounted(() => {
+  restoreScrollPage()
   containerRef.value?.addEventListener('wheel', handleWheel, { passive: false })
 })
 
 onUnmounted(() => {
+  saveScrollPage()
   containerRef.value?.removeEventListener('wheel', handleWheel)
 })
 </script>
 
 <template>
-  <div ref="containerRef" class="w-full h-full overflow-auto">
+  <div
+    ref="containerRef"
+    class="w-full h-full overflow-auto"
+  >
     <div class="relative min-h-full overflow-hidden">
       <!-- 关闭 -->
       <ImgButton
@@ -169,16 +201,19 @@ onUnmounted(() => {
         @click="handleClose"
       />
       <!-- 实战操作台 -->
-      <div
-        class="w-full h-[1080px] bg-cover bg-no-repeat relative"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/实战操作台首页') }"
-      >
+      <div class="w-full h-[1080px] bg-[#F5EFE6] relative">
         <ImgButton
           class="absolute left-40 bottom-28 z-10"
           image="vlog/practice/查看任务要求"
           @click="scrollToNextPage"
         />
         <!-- img -->
+        <img
+          class="absolute left-0 top-0 z-10"
+          draggable="false"
+          :src="getStaticImage('vlog/practice/vlog')"
+          alt=""
+        />
         <img
           class="absolute right-0"
           draggable="false"
@@ -193,12 +228,18 @@ onUnmounted(() => {
       >
         <ImgButton
           class="absolute right-20 bottom-0 z-99"
-          image="vlog/practice/我的创作笔记"
+          image="vlog/practice/我的创作笔记btn"
           path="/vlog/practice/my-notes"
         />
 
-        <div class="task-panel w-[757px] h-full ml-10 overflow-y-auto" @wheel.stop>
-          <img :src="getStaticImage('vlog/practice/滑动任务面板')" alt="" />
+        <div
+          class="task-panel w-[757px] h-full ml-10 overflow-y-auto"
+          @wheel.stop
+        >
+          <img
+            :src="getStaticImage('vlog/practice/任务要求')"
+            alt=""
+          />
         </div>
 
         <img
@@ -220,7 +261,9 @@ onUnmounted(() => {
       <!-- 他人实战作品 -->
       <div
         class="w-full h-[1080px] bg-cover bg-no-repeat pt-44 px-16"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/他人实战作品') }"
+        :style="{
+          backgroundImage: getBackgroundImage('vlog/practice/他人实战作品'),
+        }"
       >
         <!-- 作品列表 -->
         <div class="w-full overflow-hidden">
@@ -235,15 +278,27 @@ onUnmounted(() => {
             >
               <!-- 作品图片 -->
               <div class="w-full h-[280px] rounded-2xl overflow-hidden">
-                <img class="w-full h-full object-cover" :src="work.image" :alt="work.title" />
+                <img
+                  class="w-full h-full object-cover"
+                  :src="work.image"
+                  :alt="work.title"
+                />
               </div>
               <!-- 作品信息 -->
               <div class="flex flex-col items-center pt-8 space-y-4">
-                <h3 class="text-5xl font-bold text-gray-800 mb-2">{{ work.title }}</h3>
+                <h3 class="text-5xl font-bold text-gray-800 mb-2">
+                  {{ work.title }}
+                </h3>
                 <!-- 星星评分 -->
-                <StarRating :score="work.stars" size="lg" readonly />
+                <StarRating
+                  :score="work.stars"
+                  size="lg"
+                  readonly
+                />
                 <!-- 简介 -->
-                <p class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed">
+                <p
+                  class="h-[110px] text-2xl text-gray-600 mb-3 line-clamp-3 leading-relaxed"
+                >
                   {{ work.description }}
                 </p>
                 <!-- 查看按钮 -->
@@ -256,7 +311,7 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <!-- 指示按钮 -->
+        <!-- 指示按钮，暂时不要
         <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-16">
           <img
             class="cursor-pointer hover:scale-110 transition-transform"
@@ -267,19 +322,23 @@ onUnmounted(() => {
           />
           <img
             class="cursor-pointer hover:scale-110 transition-transform rotate-180"
-            :class="{ 'opacity-50 cursor-not-allowed': worksScrollIndex >= worksList.length - 3 }"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                worksScrollIndex >= worksList.length - 3,
+            }"
             :src="getStaticImage('vlog/practice/滑动左')"
             alt="向右"
             @click="scrollWorksRight"
           />
         </div>
+        -->
       </div>
     </div>
 
     <!-- 下滑按钮 - 最后一页隐藏 -->
     <ImgButton
       v-show="!isLastPage"
-      class="absolute bottom-0 left-1/2 -translate-x-1/2"
+      class="absolute bottom-0 left-1/2 down-scroll-hint"
       :image="'vlog/practice/下滑'"
       @click="scrollToNextPage"
     />
@@ -287,13 +346,24 @@ onUnmounted(() => {
     <!-- 回到顶部按钮 - 最后一页显示 -->
     <img
       v-show="isLastPage"
-      class="absolute bottom-10 right-10 cursor-pointer transition-all duration-300 hover:scale-105"
+      class="absolute bottom-10 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105"
       :src="BackToTopIcon"
       @click="scrollToTop"
     />
 
+    <!-- 老师点评按钮 - 最后一页显示 -->
+    <ImgButton
+      v-show="isLastPage"
+      class="absolute right-2 bottom-10 z-30"
+      image="components/教师点评按钮"
+      path="/vlog/practice/teacher-comment"
+    />
+
     <!-- 跨页人物动画 -->
-    <div v-show="showSittingPerson || isScrollingBackToFirst" class="character-container">
+    <div
+      v-show="showSittingPerson || isScrollingBackToFirst"
+      class="character-container"
+    >
       <!-- 坐着的人物 - 第一页 -->
       <Transition name="fade">
         <img
@@ -332,6 +402,22 @@ onUnmounted(() => {
   /* Chrome/Safari/Opera */
 }
 
+.down-scroll-hint {
+  transform: translateX(-50%);
+  animation: down-scroll-hint 1.4s ease-in-out infinite;
+}
+
+@keyframes down-scroll-hint {
+  0%,
+  100% {
+    transform: translate(-50%, 0);
+  }
+
+  50% {
+    transform: translate(-50%, 12px);
+  }
+}
+
 /* 第一页人物动画容器 */
 .character-container {
   position: fixed;
diff --git a/src/views/vlog/practice/my-notes/index.vue b/src/views/vlog/practice/my-notes/index.vue
index 7e4a09c..5b00dab 100644
--- a/src/views/vlog/practice/my-notes/index.vue
+++ b/src/views/vlog/practice/my-notes/index.vue
@@ -3,8 +3,9 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
-import { Overlay } from '@/components/Overlay'
-import { StarRating } from '@/components/Rating'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
 
 const router = useRouter()
 
@@ -21,42 +22,39 @@ const handleBack = (): void => {
 
 const disabled = computed<boolean>(() => noteContent.value.trim() === '')
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '开场建立',
+    description: '能清晰交代时间、地点与事件开端，观众易于进入情境',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '拍摄表达',
+    description:
+      '合理运用镜头语言（如推、拉、摇、跟拍等），能够表现空间关系或记录真实过程',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '真实捕捉',
+    description: '能捕捉到具有现场感的瞬间（如互动、行动、细节），画面不生硬',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '剪辑结构',
+    description: '结构清晰，内容有基本顺序（如开场—过程—收束），画面衔接自然',
+    score: 0,
+  },
+  {
+    title: '音画关系',
+    description: '画面与配音/环境音基本匹配，能辅助理解内容',
+    score: 5,
   },
   {
     title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    description: '视频完整、有连贯观看体验，能表达出一次真实记录或个人感受',
+    score: 5,
+  },
 ])
 const handleSave = (): void => {
   console.log('保存笔记')
@@ -67,7 +65,9 @@ const handleSave = (): void => {
 <template>
   <div
     class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
-    :style="{ backgroundImage: getBackgroundImage('vlog/practice/创作笔记底图') }"
+    :style="{
+      backgroundImage: getBackgroundImage('vlog/practice/我的创作笔记'),
+    }"
   >
     <ImgButton
       class="absolute top-0 right-0"
@@ -83,53 +83,25 @@ const handleSave = (): void => {
     ></textarea>
 
     <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
-      <ImgButton image="vlog/practice/保存" @click="handleSave" />
-      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+      <ImgButton
+        image="vlog/practice/保存"
+        @click="handleSave"
+      />
+      <ImgButton
+        image="vlog/practice/自评"
+        :disabled="disabled"
+        @click="showModal = true"
+      />
     </div>
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div class="pl-10 space-y-10 mt-10">
-            <p class="glow-text">
-              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
-            </p>
-            <div
-              v-for="(item, index) in evaluationItems"
-              :key="index"
-              class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-              :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-            >
-              <div class="pr-8 space-y-10">
-                <h4 class="text-3xl font-bold text-white mb-3">
-                  {{ `0${index + 1}` }} {{ item.title }}
-                </h4>
-                <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                  {{ item.description }}
-                </p>
-              </div>
-              <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-            </div>
-            <p class="glow-text">
-              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
-            </p>
-            <div class="w-full flex justify-center">
-              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="vlog/practice/Vlog作品评分表"
+      top-tip="评分时要关注6个维度哦~分别是开场建立、拍摄表达、真实捕捉、剪辑结构、音画关系、综合感受，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀~"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
 
@@ -146,25 +118,4 @@ textarea::placeholder {
   color: #5d5b5b;
   font-weight: 700;
 }
-
-.glow-text {
-  color: white;
-  font-size: 2rem;
-  font-weight: bold;
-  text-shadow:
-    /* 描边效果 - 多层阴影模拟描边 */
-    -1px -1px 0 #0066ff,
-    1px -1px 0 #0066ff,
-    -1px 1px 0 #0066ff,
-    1px 1px 0 #0066ff,
-    -2px -2px 0 #0066ff,
-    2px -2px 0 #0066ff,
-    -2px 2px 0 #0066ff,
-    2px 2px 0 #0066ff,
-    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
-    0 0 20px #0066ff,
-    0 0 30px #0066ff,
-    0 0 40px #0066ff,
-    0 0 50px #0066ff;
-}
 </style>
diff --git a/src/views/vlog/practice/teacher-comment/index.vue b/src/views/vlog/practice/teacher-comment/index.vue
new file mode 100644
index 0000000..b0af0a8
--- /dev/null
+++ b/src/views/vlog/practice/teacher-comment/index.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+const router = useRouter()
+
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full overflow-x-hidden">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+
+    <img
+      src="@/assets/images/vlog/practice/教师点评.png"
+      alt=""
+    />
+  </div>
+</template>
diff --git a/src/views/vlog/practice/video/index.vue b/src/views/vlog/practice/video/index.vue
index b1e7279..b5c8bc3 100644
--- a/src/views/vlog/practice/video/index.vue
+++ b/src/views/vlog/practice/video/index.vue
@@ -2,9 +2,10 @@
 import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
-import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage, getPublicPath } from '@/utils'
-import { Overlay } from '@/components/Overlay'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
+import { IMAGE_PATHS, getPublicPath } from '@/utils'
 import { ref } from 'vue'
 
 const router = useRouter()
@@ -12,46 +13,43 @@ const router = useRouter()
 const props = defineProps({
   path: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '开场建立',
+    description: '能清晰交代时间、地点与事件开端，观众易于进入情境',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '拍摄表达',
+    description:
+      '合理运用镜头语言（如推、拉、摇、跟拍等），能够表现空间关系或记录真实过程',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '真实捕捉',
+    description: '能捕捉到具有现场感的瞬间（如互动、行动、细节），画面不生硬',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '剪辑结构',
+    description: '结构清晰，内容有基本顺序（如开场—过程—收束），画面衔接自然',
+    score: 0,
+  },
+  {
+    title: '音画关系',
+    description: '画面与配音/环境音基本匹配，能辅助理解内容',
+    score: 5,
   },
   {
     title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    description: '视频完整、有连贯观看体验，能表达出一次真实记录或个人感受',
+    score: 5,
+  },
 ])
 
 /** 保存弹窗 */
@@ -83,47 +81,13 @@ const handleBack = (): void => {
       :loop="false"
     />
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="vlog/practice/Vlog作品评分表"
+      top-tip="评分时要关注6个维度哦~分别是开场建立、拍摄表达、真实捕捉、剪辑结构、音画关系、综合感受，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀~"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>
diff --git a/src/views/vlog/video/index.vue b/src/views/vlog/video/index.vue
index ab89223..38ac3cb 100644
--- a/src/views/vlog/video/index.vue
+++ b/src/views/vlog/video/index.vue
@@ -2,9 +2,15 @@
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { GuideSteps } from '@/components/Guide'
+import StepNavigation from '@/components/Guide/StepNavigation.vue'
 import { Video } from '@/components'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 import { useVlogStore } from '@/stores'
 
 const router = useRouter()
@@ -21,20 +27,22 @@ const ideaSteps = [
   {
     id: 'idea-step1',
     content: '一条优秀的 Vlog，往往不是记录"大事"，而是认真记录生活里的小事。',
-    audioSrc: getPublicPath('audio/py_2_004.MP3')
+    audioSrc: getPublicPath('audio/py_2_004.MP3'),
   },
   {
     id: 'idea-step2',
-    content: '试着把刚才学到的方法用起来，你会发现，原来平凡的日子里，也藏着许多值得被记录的瞬间。',
-    audioSrc: getPublicPath('audio/py_2_005.MP3')
-  }
+    content:
+      '试着把刚才学到的方法用起来，你会发现，原来平凡的日子里，也藏着许多值得被记录的瞬间。',
+    audioSrc: getPublicPath('audio/py_2_005.MP3'),
+  },
 ]
 
 const steps = ref<{ id: string; content: string; audioSrc?: string }[]>([
   {
     id: 'step1',
-    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
-  }
+    content:
+      '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。',
+  },
 ])
 
 // 步骤导航数据
@@ -44,36 +52,36 @@ const navigationSteps = ref([
     label: '拍摄执行',
     content: '基础景别应用',
     videoUrl: getPublicPath('video/vlog/work/Vlogmk_jcjbyy_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step2',
     label: '内容策划',
     content: '简单脚本策划',
     videoUrl: getPublicPath('video/vlog/work/Vlogmk_jdjbch_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step3',
     label: '后期制作',
     content: '素材导入、剪辑、拼接',
     videoUrl: getPublicPath('video/vlog/work/Vlogmk_scdrjjpj_batch.mp4'),
-    type: 'planning' as const
+    type: 'planning' as const,
   },
   {
     id: 'step4',
     label: '后期制作',
     content: '添加背景音乐',
     videoUrl: getPublicPath('video/vlog/work/Vlogmk_tjbjyy_batch.mp4'),
-    type: 'shooting' as const
+    type: 'shooting' as const,
   },
   {
     id: 'step5',
     label: '拍摄执行',
     content: '用视听语言初步表达观点',
     videoUrl: getPublicPath('video/vlog/work/Vlogmk_ystyycbbdgd_batch.mp4'),
-    type: 'post' as const
-  }
+    type: 'post' as const,
+  },
 ])
 
 // 步骤导航相关状态
@@ -84,7 +92,9 @@ const currentNavigationStep = ref(0) // 对应视频索引，从0开始
 const currentVideoIndex = ref(0)
 
 //按顺序播放
-const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)
+const currentVideo = computed(
+  () => navigationSteps.value[currentVideoIndex.value].videoUrl,
+)
 const resolvedSrc = computed(() => {
   if (key.value === 'case')
     return getPublicPath('video/vlog/work/anlishangxi_meishi_xiaoyuanzi.mp4')
@@ -116,7 +126,7 @@ const handleClose = () => {
     if (vlog.vlogUnlockProgress === 0) vlog.setVlogUnlockProgress(1)
     router.push({
       name: 'Vlog',
-      query: { guide: 'return' }
+      query: { guide: 'return' },
     })
     return
   }
@@ -147,7 +157,7 @@ const handleComplete = () => {
   if (key.value === 'profession') {
     if (!vlog.isVlogUnlock) vlog.setIsVlogUnlock(true)
     router.push({
-      name: 'VlogWork'
+      name: 'VlogWork',
     })
   }
 }
@@ -179,12 +189,14 @@ onMounted(() => {
       <div
         :class="[
           'absolute left-4 top-4 z-10 w-[359px] h-[96px] bg-cover bg-center',
-          'flex justify-center items-center'
+          'flex justify-center items-center',
         ]"
         :style="{ backgroundImage: getBackgroundImage(image) }"
       >
         <span
-          :class="['ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold']"
+          :class="[
+            'ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold',
+          ]"
         >
           {{ label }}
         </span>
@@ -203,7 +215,12 @@ onMounted(() => {
       @click="showStepNavigation = true"
       title="步骤导航"
     >
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
         <path
           d="M3 4H17M3 8H17M3 12H17M3 16H17"
           stroke="currentColor"
@@ -213,8 +230,14 @@ onMounted(() => {
       </svg>
     </button>
 
-    <div v-if="key === 'vlog'" :src="image">
-      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    <div
+      v-if="key === 'vlog'"
+      :src="image"
+    >
+      <img
+        :src="getStaticImage('work/vlog背景全屏待定')"
+        alt=""
+      />
     </div>
     <Video
       v-else-if="key === 'case' || key === 'profession'"
@@ -277,13 +300,24 @@ onMounted(() => {
         />
       </template>
     </Video>
-    <div v-else-if="key === 'idea'" :src="image">
-      <img :src="getStaticImage('work/思路提点全屏')" alt="" />
+    <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" />
+  <GuideSteps
+    v-if="status"
+    :steps="steps"
+    position-offset-y="85%"
+    @complete="handleComplete"
+  />
 
   <!-- 步骤导航抽屉 -->
   <StepNavigation
diff --git a/src/views/vlog/work/index.vue b/src/views/vlog/work/index.vue
index 0a607bd..cdb8523 100644
--- a/src/views/vlog/work/index.vue
+++ b/src/views/vlog/work/index.vue
@@ -1,7 +1,12 @@
 <script lang="tsx" name="VlogWork" setup>
 defineOptions({ name: 'VlogWork' })
 import { ref, computed } from 'vue'
-import { getBackgroundImage, getPublicPath, IMAGE_PATHS, getStaticImage } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  IMAGE_PATHS,
+  getStaticImage,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps } from '@/components/Guide'
@@ -28,22 +33,22 @@ const steps = [
     id: 'step1',
     content: '现在我们要一起走进 Vlog 的世界。',
     audioSrc: getPublicPath('audio/py_2_001.MP3'),
-    highlightSelector: '.work-border'
+    highlightSelector: '.work-border',
   },
   {
     id: 'step2',
     content:
       'Vlog 是用视频记录生活的一种方式。它像一本会动的日记，能把日常里的小事、真实的情绪，以及那些稍纵即逝的瞬间，用镜头生动地保存下来。',
     audioSrc: getPublicPath('audio/py_2_002.MP3'),
-    highlightSelector: '.work-border'
+    highlightSelector: '.work-border',
   },
   {
     id: 'step3',
     content:
       '接下来，我们将通过一个具体案例，一起看看 Vlog 是如何发现生活中的美好、记录生活中的温度。',
     audioSrc: getPublicPath('audio/py_2_003.MP3'),
-    highlightSelector: '.img-switch-item--case'
-  }
+    highlightSelector: '.img-switch-item--case',
+  },
 ]
 
 //切换图片
@@ -51,28 +56,28 @@ const sideSwitcherItems = ref([
   {
     key: 'vlog',
     description: '记录身边的美好',
-    image: 'work/vlog背景全屏待定'
+    image: 'work/vlog背景全屏待定',
   },
   {
     key: 'case',
     description: '案例赏析-桂花酒酿小圆子',
-    image: 'work/案例背景待定'
+    image: 'work/案例背景待定',
   },
   {
     key: 'profession',
     description: '专业剖析-桂花酒酿小圆子',
-    image: 'work/专业剖析小屏'
+    image: 'work/专业剖析小屏',
   },
   {
     key: 'idea',
     description: '思路提点-桂花酒酿小圆子',
-    image: 'work/思路提点小屏'
-  }
+    image: 'work/思路提点小屏',
+  },
 ])
 
 //当前选中的item
 const currentItem = computed(() => {
-  return sideSwitcherItems.value.find(item => item.key === selected.value)
+  return sideSwitcherItems.value.find((item) => item.key === selected.value)
 })
 
 const handleSideSwitcherChange = (value: WorkTab) => {
@@ -80,14 +85,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: 'VlogVideo',
     query: {
       image: currentItem?.activeImage || '',
       key: selected.value,
-      label: currentItem?.label || ''
-    }
+      label: currentItem?.label || '',
+    },
   })
 }
 
@@ -114,7 +121,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>
@@ -141,10 +152,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
         class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
@@ -177,7 +192,9 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isVlogUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="
+        isVlogUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN
+      "
       @click="handleWorkClick"
     />