首页测试碎片图片适配

 <!--
 <!--
  * @Date: 2024-04-07 10:15:55
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-14 10:05:55
+ * @LastEditTime: 2024-04-14 22:39:32
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -22,10 +22,15 @@
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>校园报名</span>
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>校园报名</span>
       </div>
       </div>
     </div>
     </div>
-    <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
-      <img :src="item.chip_src" class="img" :style="{ zIndex: index }">
-      <!-- 示例范围标记 -->
-      <!-- <div class="range"></div> -->
+    <div class="container" @click="onChipClick()">
+      <img
+        v-for="(item, index) in data_list"
+        :key="index"
+        :src="item.chip_src"
+        class="img"
+        :style="{ zIndex: index + 2 }"
+      >
+      <img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713103305.jpg" class="img" style="z-index: 1;">
     </div>
     </div>
 
 
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
@@ -79,28 +84,25 @@ useTitle($route.meta.title);
 
 
 const TREE_CHIP = { // 碎片图结构
 const TREE_CHIP = { // 碎片图结构
   1: {
   1: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s1.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/01.1713103305.png'
   },
   },
   2: {
   2: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s2.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/02.1713103305.png'
   },
   },
   3: {
   3: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s3.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/03.1713103305.png'
   },
   },
   4: {
   4: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s4.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/04.1713103305.png'
   },
   },
   5: {
   5: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s5.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/05.1713103305.png'
   },
   },
   6: {
   6: {
-    invalid: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png',
-    active: 'https://cdn.ipadbiz.cn/tmp/fx_park/s6.png'
+    active: 'https://cdn.ipadbiz.cn/xfPark/index/06.1713103305.png'
+  },
+  7: {
+    active: ''
   },
   },
 };
 };
 
 
@@ -120,36 +122,17 @@ onMounted(async () => {
   const { code, data } = await getTreeAPI();
   const { code, data } = await getTreeAPI();
   if (code) {
   if (code) {
     let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
     let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
-    if (index === -1) { // 未全点亮
-      data.forEach(item => {
-        item.chip_src = item.is_light === '0' ? TREE_CHIP[item.revision]['invalid'] :  TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
-      });
-    } else { // 全点亮
+
+    data_list.value = data.filter(item => item.is_tree === 1); // 获取植物信息，提出最后一个非植物。
+    data_list.value.forEach(item => {
+      item.chip_src = item.is_light === '0' ? '' :  TREE_CHIP[item.revision]['active']; // 根据点亮状态，显示碎片地址
+    });
+
+    console.log("🚀 ~ file: index.vue:137 ~ onMounted ~ data_list.value:", data_list.value);
+    if (index !== -1) { // 全点亮
       all_actived.value = true;
       all_actived.value = true;
-      // 过滤树类型碎片
-      data
-      .filter(item => item.is_tree === 1)
-      .forEach(item => {
-        item.chip_src = TREE_CHIP[item.revision]['active'];
-      });
     }
     }
-    //
-    data_list.value = data;
   }
   }
-  //
-  // nextTick(() => {
-  //   $('.container').on('click', function(event) {
-  //     const rect = event.target.getBoundingClientRect(); // 获取图片位置信息
-  //     const x = event.clientX - rect.left; // 鼠标点击位置相对于图片左边的距离
-  //     const y = event.clientY - rect.top; // 鼠标点击位置相对于图片顶部的距离
-  //     // 示例范围标记位置
-  //     $('.range').css({ left: x + 'px', top: y + 'px' }).show(); // 更新范围标记位置并显示
-  //     // 判断点击范围是否在图片的矩形内
-  //     if (x >= 0 && x <= 50 && y >= 0 && y <= 50) {
-  //         alert('点击了图片的矩形范围内');
-  //     }
-  //   });
-  // });
 });
 });
 
 
 const RefDanmu = ref(null);
 const RefDanmu = ref(null);