fix 植被介绍页图片结构调整

@@ -13,7 +13,6 @@ declare module 'vue' {
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanCol: typeof import('vant/es')['Col']
     VanField: typeof import('vant/es')['Field']
-    VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
     VanIcon: typeof import('vant/es')['Icon']
     VanLoading: typeof import('vant/es')['Loading']
     VanRow: typeof import('vant/es')['Row']

 <!--
  * @Date: 2024-04-10 16:08:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-14 21:42:38
+ * @LastEditTime: 2024-04-16 10:19:12
  * @FilePath: /fxPark/src/views/fxPark/intro.vue
  * @Description: 植被介绍页
 -->
 <template>
   <div class="intro-page">
-    <div @click="handleAudio" style="width: 3rem; height: 3rem; border-radius: 50%; position: absolute; right: 10px; top: 10px;">
-      <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 3rem; height: 3rem; border-radius: 50%;">
-    </div>
+    <div class="audio-wrapper" @click="handleAudio">
+      <img
+        :class="[audioStatus === 'play' ? 'play' : 'pause']"
+        :src="audioStatus === 'play' ? 'https://cdn.ipadbiz.cn/xfPark/intro/close-music-btn.1713232270.png' : 'https://cdn.ipadbiz.cn/xfPark/intro/open-music-btn.1713232270.png'"
+      >
       <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
-    <div>
-      <img :src="INTRO_IMG[revision]" style="width: 100%; pointer-events:none;">
     </div>
-    <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center; position: absolute;bottom: 1rem; left: 0; right: 0;">
-      <div @click="goToPoster" style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">完成“碳寻”任务</div>
+    <div class="go-back-wrapper" @click="goToIndex">
+      <img src="https://cdn.ipadbiz.cn/xfPark/intro/go-back-btn.1713232270.png">
+    </div>
+    <div class="intro-img-wrapper">
+      <img :src="INTRO_IMG[revision][0]">
+      <img :src="INTRO_IMG[revision][1]">
+    </div>
+    <div class="go-poster-wrapper" @click="goToPoster">
+      <!-- <div style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">完成“碳寻”任务</div> -->
+      <img src="https://cdn.ipadbiz.cn/xfPark/intro/gongxi.1713232270.png" style="pointer-events:none;display: block; width: 50%; margin-bottom: 1.5rem;">
+      <img src="https://cdn.ipadbiz.cn/xfPark/intro/finish-btn.1713232270.png" style="pointer-events:none;display: block; width: 50%;">
     </div>
     <!-- <div style="margin: 1rem;">
       <div style="margin-bottom: 1rem;">
@@ -66,12 +75,12 @@ const tree_data = ref({});
 
 // TODO: 等待正式数据
 const INTRO_IMG = { // 植被介绍七牛图片地址映射
-  '1': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
-  '2': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
-  '3': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
-  '4': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
-  '5': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
-  '6': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
+  '1': ['https://cdn.ipadbiz.cn/xfPark/intro/intro-1_01.1713232270.jpg', 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1_02.1713232270.jpg'],
+  '2': [],
+  '3': [],
+  '4': [],
+  '5': [],
+  '6': [],
 }
 
 const audioPlayer = ref(null);
@@ -152,6 +161,12 @@ const goToPoster = () => { // 去海报页
   });
 };
 
+const goToIndex = () => {
+  $router.push({
+    path: '/',
+  });
+}
+
 
 </script>
 
@@ -160,6 +175,45 @@ const goToPoster = () => { // 去海报页
   position: relative;
   display: flex;
   flex-direction: column;
+  .audio-wrapper {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    img {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+    }
+  }
+  .go-back-wrapper {
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    img {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+    }
+  }
+  .intro-img-wrapper {
+    img {
+      width: 100%;
+      pointer-events:none;
+      display: block;
+    }
+  }
+  .go-poster-wrapper {
+    margin: 1rem 1rem 2rem 1rem;
+    color: white;
+    text-align: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .task-tips {
     .title-wrapper {
       text-align: center;