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

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

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"