feat: 中期拍摄-实地取景

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

@@ -56,13 +56,14 @@
           <div class="plate">
             <img src="@/assets/images/equipment/浮空屏.png" alt="" />
           </div>
+
           <div class="title">
-            <img src="@/assets/images/equipment/标题-安卓小米.png" alt="" />
-            <!-- <img src="@/assets/images/equipment/标题-苹果.png" alt=""> -->
+            <img :src="platetitleList[currentIndex].title" alt="" />
           </div>
-          <div class="text">
-            <img src="@/assets/images/equipment/内容-安卓小米.png" alt="" />
-            <!-- <img src="@/assets/images/equipment/内容-苹果.png" alt=""> -->
+          <div class="plate-content">
+            <div class="text">
+              <img :src="platetextList[currentIndex].text" alt="" />
+            </div>
           </div>
         </div>
       </div>
@@ -74,6 +75,7 @@
         :highlight-padding="12"
         :highlight-radius="20"
         @step-change="handleStepChange"
+        position-offset-y="85%"
       >
         <GuideStepsItem>
           <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
@@ -85,9 +87,7 @@
 <script lang="tsx" setup>
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
-
 import { ref, computed } from 'vue'
-
 const steps = [
   { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
   { id: 'step2', content: '这是主要内容区域的边框' }
@@ -101,6 +101,15 @@ const phoneList = ref([
   { phoneImg: '/src/assets/images/equipment/设备-手机2.png' }
 ])
 
+const platetitleList = ref([
+  { title: '/src/assets/images/equipment/标题-苹果.png' },
+  { title: '/src/assets/images/equipment/标题-安卓小米.png' }
+])
+
+const platetextList = ref([
+  { text: '/src/assets/images/equipment/内容-苹果.png' },
+  { text: '/src/assets/images/equipment/内容-安卓小米.png' }
+])
 const hiddenbarclick = () => {
   hiddenbar.value = !hiddenbar.value
 }
@@ -267,23 +276,66 @@ const currentHighlight = computed(() =>
   justify-content: center;
   align-items: center;
 
-  .title {
+  .plate {
     position: absolute;
-    top: 0;
+    top: 30px;
     left: 1200px;
+    width: 600px;
+    /* 调整为你需要的宽度 */
+    height: 1000px;
+    /* 调整为你需要的高度 */
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .plate-content {
+    position: absolute;
+    bottom: 144px;
+    left: 1235px;
+    width: 600px;
+    height: 797px;
+    overflow: hidden;
+    /* 隐藏超出部分 */
+    object-fit: contain;
+
+    // display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    /* 允许垂直滚动 */
+    scrollbar-width: none;
+    /* Firefox隐藏滚动条 */
+    -ms-overflow-style: none;
+    /* IE和Edge隐藏滚动条 */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Chrome, Safari隐藏滚动条 */
+    }
+  }
+
+  .title {
+    // margin-top: 47px;
+    width: 400px;
+    z-index: 2;
+    position: absolute;
+    top: 36px;
+    left: 1304px;
   }
 
   .text {
     position: absolute;
-    top: 74px;
-    left: 1292px;
-    width: 364px;
-  }
+    top: -9px;
+    left: 8px;
+    z-index: 2;
 
-  .plate {
-    position: absolute;
-    top: 0;
-    left: 1200px;
+    img {
+      width: 100%;
+      height: auto;
+    }
   }
 }
 </style>