feat: 中期拍摄-设备准备

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

@@ -12,6 +12,7 @@
             <img src="@/assets/images/equipment/选中按钮.png" alt="" />
             <img src="@/assets/images/equipment/手机-亮.png" alt="" />
           </span>
+          <span>手机支架</span>
         </div>
         <!-- 设备准备按钮 -->
         <div class="equipment-bt">
@@ -21,20 +22,52 @@
           :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'"
           @click="hiddenbarclick()"
         >
-          <img src="@/assets/images/equipment/按钮-展开.png" alt="" />
+          <img
+            :src="
+              hiddenbar
+                ? '/src/assets/images/equipment/按钮-展开.png'
+                : '/src/assets/images/equipment/按钮-收缩.png'
+            "
+            alt=""
+          />
+        </div>
+      </div>
+      <div class="equipment-layout">
+        <div class="equipment-home">
+          <div
+            class="equipment-leftbutton"
+            @click="prevPhone"
+            :style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
+          >
+            <img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
+          </div>
+          <div class="equipment-phoneImg">
+            <img :src="phoneList[currentIndex].phoneImg" alt="" />
+          </div>
+          <div
+            class="equipment-rightbutton"
+            @click="nextPhone"
+            :style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
+          >
+            <img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
+          </div>
+        </div>
+        <div class="equipment-purpose">
+          <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=""> -->
+          </div>
+          <div class="text">
+            <img src="@/assets/images/equipment/内容-安卓小米.png" alt="" />
+            <!-- <img src="@/assets/images/equipment/内容-苹果.png" alt=""> -->
+          </div>
         </div>
       </div>
 
-      <!-- <GuideSteps
+      <!-- 引导步骤 -->
-        @complete="handleComplete"
-        @skip="handleSkip"
-        :keyboard-navigation="true"
-        position-offset-y="85%"
-      >
-        <GuideStepsItem>
-          <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
-        </GuideStepsItem>
-      </GuideSteps> -->
       <GuideSteps
         :steps="steps"
         :highlight-selector="currentHighlight"
@@ -54,39 +87,72 @@ 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: '这是主要内容区域的边框' }
 ]
 const stepIndex = ref(0)
-const hiddenbar = ref()
+const hiddenbar = ref(false)
+const currentIndex = ref(0) // 当前显示的图片索引
+
+const phoneList = ref([
+  { phoneImg: '/src/assets/images/equipment/设备-手机1.png' },
+  { phoneImg: '/src/assets/images/equipment/设备-手机2.png' }
+])
+
 const hiddenbarclick = () => {
   hiddenbar.value = !hiddenbar.value
 }
+
+// 下一张图片
+const nextPhone = () => {
+  if (currentIndex.value < phoneList.value.length - 1) {
+    currentIndex.value++
+  }
+}
+
+// 上一张图片
+const prevPhone = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
 interface SimpleStep {
   id: string
   content: string
 }
+
 const handleStepChange = (_step: SimpleStep | null, index: number) => {
   stepIndex.value = index
 }
+
 const currentHighlight = computed(() =>
   stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
 )
 </script>
 <style lang="less">
 .equipment-index {
-  // display: flex;
   width: 100%;
   height: 100%;
 }
 
 .equipment-bg {
-  display: flex;
+  // display: flex;
+}
+
+.equipment-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .equipment-bar {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
 
   .equipment-bt {
     position: absolute;
@@ -102,29 +168,27 @@ const currentHighlight = computed(() =>
 
   .equipment-unfold1 {
     position: absolute;
-    top: 45%;
+    top: 490px;
-    right: -110px;
+    left: -41px;
     width: 150px;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: contain;
-      /* 确保图片按比例缩放 */
     }
   }
 
   .equipment-unfold2 {
     position: absolute;
-    top: 45%;
+    top: 490px;
-    right: -69px;
+    left: 268px;
     width: 150px;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: contain;
-      /* 确保图片按比例缩放 */
     }
   }
 
@@ -147,4 +211,79 @@ const currentHighlight = computed(() =>
     top: 80% !important;
   }
 }
+
+.equipment-home {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .equipment-leftbutton {
+    position: absolute;
+    top: 511px;
+    left: 350px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .equipment-phoneImg {
+    position: absolute;
+    top: 313px;
+    left: 500px;
+    width: 446px;
+    height: 484px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .equipment-rightbutton {
+    position: absolute;
+    top: 511px;
+    right: 770px;
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+    z-index: 10;
+  }
+}
+
+.equipment-purpose {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .title {
+    position: absolute;
+    top: 0;
+    left: 1200px;
+  }
+
+  .text {
+    position: absolute;
+    top: 74px;
+    left: 1292px;
+    width: 364px;
+  }
+
+  .plate {
+    position: absolute;
+    top: 0;
+    left: 1200px;
+  }
+}
 </style>