Merge branch 'main' of https://gitee.com/zzyyymm/super_video

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

@@ -24,7 +24,8 @@
           <img src="@/assets/images/equipment/按钮-展开.png" alt="" />
         </div>
       </div>
-      <GuideSteps
+
+      <!-- <GuideSteps
         @complete="handleComplete"
         @skip="handleSkip"
         :keyboard-navigation="true"
@@ -33,6 +34,17 @@
         <GuideStepsItem>
           <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
         </GuideStepsItem>
+      </GuideSteps> -->
+      <GuideSteps
+        :steps="steps"
+        :highlight-selector="currentHighlight"
+        :highlight-padding="12"
+        :highlight-radius="20"
+        @step-change="handleStepChange"
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+        </GuideStepsItem>
       </GuideSteps>
     </div>
   </div>
@@ -41,21 +53,28 @@
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+const steps = [
+  { id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+const stepIndex = ref(0)
 const hiddenbar = ref()
 const hiddenbarclick = () => {
   hiddenbar.value = !hiddenbar.value
 }
-
+interface SimpleStep {
-const handleComplete = () => {
+  id: string
-  console.log('引导完成')
+  content: string
 }
-
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
-const handleSkip = () => {
+  stepIndex.value = index
-  console.log('跳过引导')
 }
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .equipment-index {
   // display: flex;
   width: 100%;
@@ -119,5 +138,13 @@ const handleSkip = () => {
       display: flex;
     }
   }
+
+  .guide-ui {
+    top: 80% !important;
+  }
+
+  .dragon-character {
+    top: 80% !important;
+  }
 }
 </style>

src/views/prepare/index.vue

@@ -112,13 +112,18 @@ const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
       :highlight-padding="12"
       :highlight-radius="20"
       @step-change="handleStepChangeGui"
-    />
+    >
+      <GuideStepsItem>
+        <img src="@/assets/images/midterm/前期准备引导1.png" alt="" />
+      </GuideStepsItem>
+    </GuideSteps>
   </div>
 </template>
 <style>
 .guide-ui {
   top: 80% !important;
 }
+
 .dragon-character {
   top: 80% !important;
 }