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

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

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"