首页新增全非点亮时显示放大镜效果

 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-15 10:05:02
+ * @LastEditTime: 2024-04-15 11:33:30
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 首页
 -->
@@ -10,16 +10,16 @@
     <danmaku :show="show_danmu" :text="add_text" />
     <div class="quick-entrance-wrapper">
       <div class="quick-entrance-item" @click="goToAudio">
-        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-1.1713137877.png" />
+        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-1.1713148257.png" />
       </div>
       <div class="quick-entrance-item">
-        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-2.1713137877.png" />
+        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-2.1713148257.png" />
       </div>
       <div class="quick-entrance-item" @click="goToPoster">
-        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-3.1713137877.png" />
+        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-3.1713148257.png" />
       </div>
       <div class="quick-entrance-item" @click="onCloseDanmu">
-        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-4.1713137877.png" />
+        <van-icon size="3.5rem" name="https://cdn.ipadbiz.cn/xfPark/index/btn-4.1713148346.png" />
       </div>
     </div>
     <div class="container" @click="onChipClick()">
@@ -31,6 +31,7 @@
         :style="{ zIndex: index + 2 }"
       >
       <img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713145862.jpg" class="img" style="z-index: 1;">
+      <div v-if="all_no_light" id="magnifying-glass-box"></div>
     </div>
 
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" :closeable="false">
@@ -110,6 +111,7 @@ const offset = ref({ x: -10, y: 500 });
 
 const data_list = ref([]);
 const all_actived = ref(false); // 全部激活
+const all_no_light = ref(false); // 全部未激活
 
 const space_height = ref('10vh'); // 第一次进入没有导航栏
 
@@ -122,6 +124,7 @@ onMounted(async () => {
   const { code, data } = await getTreeAPI();
   if (code) {
     let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
+    let light_index = data.findIndex(item => item.is_light === '1'); // 点亮标识
 
     data_list.value = data.filter(item => item.is_tree === 1); // 获取植物信息，提出最后一个非植物。
     data_list.value.forEach(item => {
@@ -131,6 +134,9 @@ onMounted(async () => {
     if (index !== -1) { // 全点亮
       all_actived.value = true;
     }
+    if (light_index === -1) { // 全未点亮
+      all_no_light.value = true;
+    }
   }
 });
 
@@ -307,4 +313,43 @@ const onCloseDanmu = () => { // 弹幕开关
     color: #ABABAB;
   }
 }
+
+.animate-container {
+  position: absolute;
+  top: 45%;
+  overflow: hidden;
+  width: 13rem;
+  height: 6rem;
+  z-index: 10;
+}
+
+#magnifying-glass-box{
+  width:5rem;
+  height:5rem;
+  position: absolute;
+  left:10px;
+  top:45%;
+  animation-name: rightMove, bottomMove;
+  animation-duration: 8s;
+  animation-iteration-count: infinite;
+  background-image: url('https://cdn.ipadbiz.cn/xfPark/index/5b66ec87489f01b3501a76ad319p24mk24-imageonline.co-47829-1.png');
+  background-size: 5rem;
+  z-index: 10;
+}
+
+@keyframes rightMove{
+  50% {
+    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
+    left: 30%;
+  }
+}
+
+@keyframes bottomMove{
+  50% {
+    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
+    top: 35%;
+  }
+}
+
+
 </style>