feat: 设备准备部分完成

src/utils/index.ts

@@ -173,6 +173,7 @@ export const IMAGE_PATHS = {
   // 设备准备
   EQUIPMENT: {
     BG: 'equipment/设备准备-背景',
-    SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备'
+    SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备',
+    NAVIGATION_SIDEBAR: 'equipment/侧边导航栏'
   }
 } as const

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

@@ -1,26 +1,123 @@
-<script lang="ts" setup>
-import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
-</script>
 <template>
-  <div>
+  <div class="equipment-index">
     <!-- 背景图片 -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
-    ></div>
+    >
-    <!-- 设备准备按钮 -->
+      <div class="equipment-bar">
-    <div class="equipment-bt">
+        <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
-      <button
+        <div class="equipment-item" :hidden="hiddenbar">
-        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.SELECT_THE_BUTTON) }"
+          <span>
-      ></button>
+            <img src="@/assets/images/equipment/选中按钮.png" alt="" />
+            <img src="@/assets/images/equipment/手机-亮.png" alt="" />
+          </span>
+        </div>
+        <!-- 设备准备按钮 -->
+        <div class="equipment-bt">
+          <img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
+        </div>
+        <div
+          :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'"
+          @click="hiddenbarclick()"
+        >
+          <img src="@/assets/images/equipment/按钮-展开.png" alt="" />
+        </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>
     </div>
   </div>
 </template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+
+import { ref } from 'vue'
+const hiddenbar = ref()
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+const handleComplete = () => {
+  console.log('引导完成')
+}
+
+const handleSkip = () => {
+  console.log('跳过引导')
+}
+</script>
 <style lang="less" scoped>
-// .equipment-bg{
+.equipment-index {
-//     position: relative;
+  // display: flex;
-//     .equipment-bt{
+  width: 100%;
-//         position: absolute;
+  height: 100%;
-//     }
+}
-// }
+
+.equipment-bg {
+  display: flex;
+}
+
+.equipment-bar {
+  position: relative;
+
+  .equipment-bt {
+    position: absolute;
+    top: 0;
+    left: -135px;
+    width: 577px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .equipment-unfold1 {
+    position: absolute;
+    top: 45%;
+    right: -110px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      /* 确保图片按比例缩放 */
+    }
+  }
+
+  .equipment-unfold2 {
+    position: absolute;
+    top: 45%;
+    right: -69px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      /* 确保图片按比例缩放 */
+    }
+  }
+
+  .equipment-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+
+    span {
+      display: flex;
+    }
+  }
+}
 </style>