@dolphinweex/weex-harmony 0.1.27 → 0.1.28

package/src/components/midea-scene-card-drag-list-view.vue

@@ -4,106 +4,113 @@
     :class="{ editMode: data.isEditing }"
     :style="gridItemStyle"
   >
-    <div class="grid-items-wrapper">
-      <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
-        <div
-          v-for="(item, index) in processedList"
-          :key="item.itemView.id"
-          class="grid-item"
-          :class="{
-            'being-dragged': draggingIndex === index,
-            hidden: isDragClone && draggingIndex === index,
-            'hover-target': hoverIndex === index && draggingIndex !== index,
-            'disabled-item': item.itemView.enable === false,
-          }"
-          :style="{
-            overflow: data.isEditing ? 'visible' : 'hidden',
-          }"
-          @touchstart="(event) => startLongPress(event, index)"
-          @touchmove="checkLongPressMove"
-          @touchend="endTouch"
-          @touchcancel="endTouch"
-          :data-index="index"
-        >
-          <div
-            v-if="item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing"
-            class="lottie-container bg-anim"
-            :style="applyNormalAttribute(item.bgAnimView)"
-            :ref="`bgAnim-${item.itemView.id}`"
-          ></div>
-          <div
-            v-if="
-              item.frontAnimView &&
-              item.frontAnimView.animUrl &&
-              !data.isEditing
-            "
-            class="lottie-container front-anim"
-            :style="applyNormalAttribute(item.frontAnimView)"
-            :ref="`frontAnim-${item.itemView.id}`"
-          ></div>
+    <div class="items-container">
+      <div class="grid-items-wrapper">
+        <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
           <div
-            :style="applyNormalAttribute(item.itemView)"
-            class="grid-box"
-            :class="{ shaking: data.isEditing }"
-            @click.stop="(e) => itemViewClick(e, item, index)"
-
+            v-for="(item, index) in processedList"
+            :key="item.itemView.id"
+            class="grid-item"
+            :class="{
+              'being-dragged': draggingIndex === index,
+              hidden: isDragClone && draggingIndex === index,
+              'hover-target': hoverIndex === index && draggingIndex !== index,
+              'disabled-item': item.itemView.enable === false,
+            }"
+            :style="{
+              overflow: data.isEditing ? 'visible' : 'hidden',
+            }"
+            :data-index="index"
+            @touchstart="(event) => startLongPress(event, index)"
+            @touchmove="checkLongPressMove"
+            @touchend="endTouch"
+            @touchcancel="endTouch"
           >
-            <div class="flexBox">
-              <img
-                :src="item.iconImage.url"
-                :style="applyNormalAttribute(item.iconImage)"
-              />
-              <div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <button
-                    class="actionButton"
-                    @click.stop.prevent="(e) => actionClick(e, item, index)"
-                    :style="applyNormalAttribute(item.actionButton)"
-                  >
-                    {{ item.actionButton.text }}
-                  </button>
-                  <div
-                    v-if="item.loadingAnimView && item.loadingAnimView.animUrl"
-                    class="loading-anim"
-                    :style="applyNormalAttribute(item.loadingAnimView)"
-                    :ref="`loadingAnim-${item.itemView.id}`"
-                  ></div>
-                </div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <img
-                    :src="item.rightIcon.url"
-                    :style="applyNormalAttribute(item.rightIcon)"
-                    @click.stop.prevent="(e) => rightIconClick(e)"
-                  />
-                </div>
-                <div @click.stop.prevent v-if="!data.isEditing">
-                  <img
-                    class="leftTopIcon"
-                    :src="item.leftTopIcon.url"
-                    :style="applyNormalAttribute(item.leftTopIcon)"
-                    @click.stop.prevent
-                  />
-                </div>
-                <div @click.stop.prevent v-if="data.isEditing">
-                  <img
-                    class="isSelected"
-                    @click.stop.prevent="(e) => selectIconClick(e, item, index)"
-                    :src="
-                      item.itemView.isSelected
-                        ? item.selectIcon.selectedUrl
-                        : item.selectIcon.url
-                    "
-                    :style="applyNormalAttribute(item.selectIcon)"
-                  />
+            <div
+              v-if="
+                item.bgAnimView && item.bgAnimView.animUrl && !data.isEditing
+              "
+              class="lottie-container bg-anim"
+              :style="applyNormalAttribute(item.bgAnimView)"
+              :ref="`bgAnim-${item.itemView.id}`"
+            ></div>
+            <div
+              v-if="
+                item.frontAnimView &&
+                item.frontAnimView.animUrl &&
+                !data.isEditing
+              "
+              class="lottie-container front-anim"
+              :style="applyNormalAttribute(item.frontAnimView)"
+              :ref="`frontAnim-${item.itemView.id}`"
+            ></div>
+            <div
+              :style="applyNormalAttribute(item.itemView)"
+              class="grid-box"
+              :class="{ shaking: data.isEditing }"
+              @click.stop="(e) => itemViewClick(e, item, index)"
+            >
+              <div class="flexBox">
+                <img
+                  :src="item.iconImage.url"
+                  :style="applyNormalAttribute(item.iconImage)"
+                />
+                <div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <button
+                      class="actionButton"
+                      @click.stop.prevent="(e) => actionClick(e, item, index)"
+                      :style="applyNormalAttribute(item.actionButton)"
+                    >
+                      {{ item.actionButton.text }}
+                    </button>
+                    <div
+                      v-if="
+                        item.loadingAnimView && item.loadingAnimView.animUrl
+                      "
+                      class="loading-anim"
+                      :style="applyNormalAttribute(item.loadingAnimView)"
+                      :ref="`loadingAnim-${item.itemView.id}`"
+                    ></div>
+                  </div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <img
+                      :src="item.rightIcon.url"
+                      :style="applyNormalAttribute(item.rightIcon)"
+                      @click.stop.prevent="(e) => rightIconClick(e)"
+                    />
+                  </div>
+                  <div @click.stop.prevent v-if="!data.isEditing">
+                    <img
+                      class="leftTopIcon"
+                      :src="item.leftTopIcon.url"
+                      :style="applyNormalAttribute(item.leftTopIcon)"
+                      @click.stop.prevent
+                    />
+                  </div>
+                  <div @click.stop.prevent v-if="data.isEditing">
+                    <img
+                      class="isSelected"
+                      @click.stop.prevent="
+                        (e) => selectIconClick(e, item, index)
+                      "
+                      :src="
+                        item.itemView.isSelected
+                          ? item.selectIcon.selectedUrl
+                          : item.selectIcon.url
+                      "
+                      :style="applyNormalAttribute(item.selectIcon)"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="itemText" :style="[applyNormalAttribute(item.text)]">
-              {{ item.text.text }}
+              <div class="itemText" :style="[applyNormalAttribute(item.text)]">
+                {{ item.text.text }}
+              </div>
             </div>
           </div>
-        </div>
-      </transition-group>
+        </transition-group>
+      </div>
     </div>
 
     <!-- 拖拽克隆元素 -->
@@ -169,7 +176,7 @@ export default {
       processedList: [],
       selected: null,
       longPressTimer: null,
-      longPressDuration: 400, // 略微延长长按时间，减少误触发
+      longPressDuration: 350,
       longPressStartIndex: null,
       draggingIndex: null,
       hoverIndex: null,
@@ -178,7 +185,6 @@ export default {
       isAnimating: false,
       touchStartX: 0,
       touchStartY: 0,
-      touchStartTime: 0, // 记录触摸开始时间，用于计算滑动速度
       draggedItemRect: null,
       isDragClone: false,
       dragCloneX: 0,
@@ -188,17 +194,13 @@ export default {
       gridBoxWidth: 0,
       lottieAnimations: {},
       isScrolling: false,
-      scrollThreshold: 8, // 增大滚动检测阈值
+      scrollThreshold: 5,
       fixedItemWidth: 0,
       fixedItemHeight: 0,
       animationFrameId: null,
       lastBestTarget: null,
       targetChangeTime: null,
       pendingTarget: null,
-      weexListInnerEl: null,
-      weexRefreshEl: null,
-      originListInnerStyle: null,
-      originRefreshStyle: null,
     };
   },
   computed: {
@@ -206,9 +208,6 @@ export default {
       return {
         '--grid-cols': this.data.spanCount || this.cols,
         '--grid-gap': `${this.data.spaceSize || 8}px`,
-        '--grid-margin': `${
-          this.data.layoutConfig.marginStart + this.data.layoutConfig.marginEnd
-        }px`,
         marginTop: this.data.layoutConfig.marginTop * scla,
         marginBottom: this.data.layoutConfig.marginBottom * scla,
         marginLeft: this.data.layoutConfig.marginStart * scla,
@@ -252,14 +251,18 @@ export default {
       const dataIndex = this.data.list.findIndex(
         (item) => item.itemView.id == id
       );
-      // 更新原始数据以确保watch能触发
-      if(dataIndex !== -1) {
-        // 使用Vue的$set确保响应式更新
-        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
-      }
+
       if (index === -1) {
         return;
       }
+
+      // 检查是否有动画URL的变化
+      const oldBgAnimUrl = this.processedList[index].bgAnimView.animUrl || '';
+      const oldLoadingAnimUrl =
+        this.processedList[index].loadingAnimView.animUrl || '';
+      const oldFrontAnimUrl =
+        this.processedList[index].frontAnimView.animUrl || '';
+
       const newBgAnimUrl = data.bgAnimView.animUrl || '';
       const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
       const newFrontAnimUrl = data.frontAnimView.animUrl || '';
@@ -267,40 +270,72 @@ export default {
       this.processedList[index] = data;
       this.processedList = [...this.processedList];
 
+      // 更新原始数据以确保watch能触发
+      if (dataIndex !== -1) {
+        // 使用Vue的$set确保响应式更新
+        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
+      }
 
-      // 无论是否有URL变化，都处理动画更新
-      // 这样确保任何visibility或其他属性变化也能被处理
+      // 如果动画URL有变化，重新初始化相关的Lottie动画
+      console.log('检测到动画URL变化，重新初始化动画');
+
+      // 等待下一帧DOM更新完成后再操作
       this.$nextTick(() => {
         // 清理旧的动画实例
         const itemId = String(data.itemView.id);
-        // 加载背景动画
-        if (newBgAnimUrl) {
-          this.loadLottieAnimation(
-            data.bgAnimView,
-            `bgAnim-${itemId}`,
-            `bg-${itemId}`,
-            data,
-            dataIndex
-          );
-        }
-        if (newLoadingAnimUrl) {
-          this.loadLottieAnimation(
-            data.loadingAnimView,
-            `loadingAnim-${itemId}`,
-            `loading-${itemId}`,
-            data,
-            dataIndex
-          );
-        }
-        if (newFrontAnimUrl) {
-          this.loadLottieAnimation(
-            data.frontAnimView,
-            `frontAnim-${itemId}`,
-            `front-${itemId}`,
-            data,
-            dataIndex
-          );
-        }
+
+        // 清除所有相关的动画实例
+        const animKeys = [
+          `bg-${itemId}`,
+          `loading-${itemId}`,
+          `front-${itemId}`,
+        ];
+        animKeys.forEach((key) => {
+          if (this.lottieAnimations[key]) {
+            console.log(`销毁动画实例: ${key}`);
+            const anim = this.lottieAnimations[key];
+            try {
+              anim.removeEventListener('complete');
+            } catch (e) {
+              console.warn(`移除事件监听器失败: ${e.message}`);
+            }
+            anim.destroy();
+            delete this.lottieAnimations[key];
+          }
+        });
+
+        console.log('清理完成，开始重新初始化动画');
+
+        // 延迟一点时间确保DOM完全更新
+        setTimeout(() => {
+          // 重新初始化背景动画
+          if (oldBgAnimUrl !== newBgAnimUrl) {
+            this.loadLottieAnimation(
+              data.bgAnimView,
+              `bgAnim-${itemId}`,
+              `bg-${itemId}`,
+              data
+            );
+          }
+
+          if (oldLoadingAnimUrl !== newLoadingAnimUrl) {
+            this.loadLottieAnimation(
+              data.loadingAnimView,
+              `loadingAnim-${itemId}`,
+              `loading-${itemId}`,
+              data
+            );
+          }
+
+          if (oldFrontAnimUrl !== newFrontAnimUrl) {
+            this.loadLottieAnimation(
+              data.frontAnimView,
+              `frontAnim-${itemId}`,
+              `front-${itemId}`,
+              data
+            );
+          }
+        }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
       });
     },
     getListData(callback) {
@@ -315,6 +350,7 @@ export default {
       callback({ listData: data });
     },
     rightIconClick(e) {
+      console.log('rightIconClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation();
       this.$emit('onClickRightIcon', e);
@@ -329,7 +365,9 @@ export default {
     selectIconClick(e, item, index) {
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
-      item.itemView.isSelected = !item.itemView.isSelected;
+      if (item.selectIcon.visibility) {
+        item.itemView.isSelected = !item.itemView.isSelected;
+      }
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -346,27 +384,37 @@ export default {
       if (e.defaultPrevented) {
         return;
       }
-      e.preventDefault();
-      e.stopPropagation();
-      // 确保取消任何长按计时器
-      this.cancelLongPress();
-      if (this.data.isEditing) {
-        item.itemView.isSelected = !item.itemView.isSelected;
-        this.$emit('onSelectItems', target);
-        return;
-      }
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
         index,
         ...e,
       };
+      console.log('itemViewClick');
+      // 确保取消任何长按计时器
+      this.cancelLongPress();
+      if (this.data.isEditing) {
+        if (item.selectIcon.visibility) {
+          item.itemView.isSelected = !item.itemView.isSelected;
+        }
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+
       this.$emit('onClickItem', target);
+      this.data.isEditing&&item.selectIcon.visibility&&this.$emit('onSelectItems', target);
+
     },
 
     actionClick(e, item, index) {
+      console.log('actionClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
+
+      // 在触发事件前，先清理所有其他项目的动画实例
+      this.cleanupOtherAnimations(item.itemView.id);
+
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -377,6 +425,58 @@ export default {
       return false;
     },
 
+    // 新增方法：清理除指定项目外的所有动画实例
+    cleanupOtherAnimations(currentItemId) {
+      console.log('清理其他项目的动画实例，当前项目ID:', currentItemId);
+
+      Object.keys(this.lottieAnimations).forEach((key) => {
+        if (!key.includes(`-${currentItemId}`)) {
+          if (this.lottieAnimations[key]) {
+            console.log(`销毁其他项目的动画实例: ${key}`);
+            const anim = this.lottieAnimations[key];
+
+            // 不要立即销毁，而是先停止动画
+            anim.pause();
+
+            // 使用 setTimeout 延迟销毁，给新动画一个启动的时间
+            setTimeout(() => {
+              try {
+                if (this.lottieAnimations[key] === anim) {
+                  anim.removeEventListener('complete');
+                  anim.destroy();
+                  delete this.lottieAnimations[key];
+
+                  // 提取项目ID和动画类型
+                  const parts = key.split('-');
+                  if (parts.length === 2) {
+                    const animType = parts[0];
+                    const itemId = parts[1];
+
+                    // 延迟隐藏对应的动画容器
+                    this.$nextTick(() => {
+                      const refName = `${animType}Anim-${itemId}`;
+                      const animContainer =
+                        this.$refs[refName] && this.$refs[refName][0];
+                      if (animContainer) {
+                        // 使用 opacity 过渡而不是直接设置 display: none
+                        animContainer.style.opacity = '0';
+                        animContainer.style.transition = 'opacity 0.2s';
+                        setTimeout(() => {
+                          animContainer.style.display = 'none';
+                        }, 200);
+                      }
+                    });
+                  }
+                }
+              } catch (e) {
+                console.warn(`清理动画失败: ${e.message}`);
+              }
+            }, 50);
+          }
+        }
+      });
+    },
+
     // 生成处理后的数据列表
     generateDataList() {
       if (!this.data || !this.data.list || !this.data.globalData) {
@@ -405,12 +505,12 @@ export default {
           // 使用mergeDate合并全局数据和项目数据
           processedItem[type] = this.mergeDate(item[type] || {}, type);
         });
-
         return processedItem;
       });
     },
     getItemStyle(item, type) {
       const result = this.mergeDate(item[type] || {}, type);
+      console.log(type, this.applyNormalAttribute(result), 'ggg');
       return this.applyNormalAttribute(result);
     },
     mergeDate(target, type) {
@@ -476,44 +576,43 @@ export default {
     },
     // 开始长按
     startLongPress(e, index) {
-      console.log(e, 'cdj-------startLongPress');
       if (!this.data.isEditable) {
         return;
       }
-
-      // 确保事件不被其他处理器抢先处理
-      // e.oriEvent.stopPropagation();
-
+      this.$emit('onDragEventStart', e);
+      
+      // 只在编辑模式下阻止事件冒泡和默认行为
+      if (this.data.isEditing) {
+        if (e.oriEvent) {
+          // e.oriEvent.preventDefault();
+          // e.oriEvent.stopPropagation();
+          // e.oriEvent.stopImmediatePropagation();
+        }
+        // e.preventDefault && e.preventDefault();
+        // e.stopPropagation && e.stopPropagation();
+        // e.stopImmediatePropagation && e.stopImmediatePropagation();
+      }
+      
       // 清除任何现有计时器
       this.cancelLongPress();
-
       // 记录起始触摸位置和索引
       const touch = e.changedTouches[0];
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
+      console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
       this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
-      // 记录触摸开始时间，用于判断是否为快速滑动
-      this.touchStartTime = Date.now();
-
-      if (this.isTouchDragging) {
-        this.$emit('drag-end', {
-          items: [...this.itemsList],
-        });
-      }
-
-      // 通知外部触摸开始事件
-      this.$emit('onDragEventStart', e);
+      // 添加临时事件监听器，在长按期间阻止滚动
+      document.addEventListener('touchmove', this.onTouchMove, {
+        passive: false // 设置为false以允许阻止默认行为
+      });
 
-      // 设置新的长按计时器 - 延长一点时间避免误触发
+      // 设置新的长按计时器
       this.longPressTimer = setTimeout(() => {
         // 只有在没有滚动的情况下才激活拖拽模式
         if (!this.isScrolling) {
-          console.log('长按时间到，激活拖拽模式');
           this.activateDragMode(index);
-        } else {
-          console.log('检测到滚动，取消拖拽激活');
         }
       }, this.longPressDuration);
     },
@@ -525,109 +624,93 @@ export default {
       }
 
       const touch = e.changedTouches[0];
+      const moveX = Math.abs(touch.pageX - this.touchStartX);
+      const moveY = Math.abs(touch.pageY - this.touchStartY);
+
+      // 如果水平移动大于垂直移动，则阻止事件传播
+      if (moveX > moveY &&!this.isTouchDragging && this.data.isEditing) {
+        if (e.oriEvent) {
+          e.oriEvent.preventDefault();
+          e.oriEvent.stopPropagation();
+          e.oriEvent.stopImmediatePropagation();
+          e.preventDefault && e.preventDefault();
+          e.stopPropagation && e.stopPropagation();
+          e.stopImmediatePropagation && e.stopImmediatePropagation();
+        }
+      }
+
       // 如果已经在拖拽模式，交给onTouchMove处理
       if (this.isTouchDragging) {
         this.onTouchMove(e);
         return;
       }
 
-      const moveX = Math.abs(touch.pageX - this.touchStartX);
-      const moveY = Math.abs(touch.pageY - this.touchStartY);
-
-      // 计算触摸移动速度 (像素/毫秒)
-      const currentTime = Date.now();
-      const timeDiff = currentTime - this.touchStartTime;
-      const speedY = moveY / Math.max(1, timeDiff); // 垂直滑动速度
-
-      // 速度检测：快速滑动可能表示滚动意图
-      const isQuickSwipe = speedY > 0.5; // 如果垂直滑动速度大于0.5px/ms，判定为快速滑动
-
-      // 更敏感地检测滚动意图
-      // 1. 垂直移动显著大于水平移动
-      // 2. 垂直移动超过阈值的两倍
-      // 3. 快速垂直滑动
-      if (
-        (moveY > moveX * 1.2 && moveY > this.scrollThreshold) ||
-        moveY > this.scrollThreshold * 2 ||
-        (isQuickSwipe && moveY > this.scrollThreshold)
-      ) {
-        console.log('检测到滚动意图，取消长按', { moveY, moveX, speedY });
+      // 检测是否在滚动
+      if (moveY > this.scrollThreshold * 3) {
+        // 增加滚动阈值以更容易识别滚动意图
         this.isScrolling = true;
         this.cancelLongPress();
         return;
       }
 
-      // 如果移动超过阈值，取消长按 - 但不阻止默认行为
+      // 如果移动超过阈值，取消长按
       if (moveX > this.scrollThreshold || moveY > this.scrollThreshold) {
         this.cancelLongPress();
-        return;
       }
 
-      // 只有确认不是滚动意图，且在长按倒计时中，才阻止默认行为
-      if (this.longPressTimer && !this.isScrolling) {
-        e.oriEvent.preventDefault();
-      }
+      return false;
     },
 
     // 激活拖拽模式
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
+      // 进入编辑模式
 
-      // 先确保编辑模式已开启
-      if (!this.data.isEditing) {
-        // 设置编辑状态并隐藏weex-refresh
-        this.data.isEditing = true;
-        this.$emit('onEditStateChanged', true);
-      } else {
-        // 无论之前是否处于编辑模式，都设置拖拽状态
-        // 设置当前拖拽索引
-        this.draggingIndex = index;
-        this.isTouchDragging = true;
-        // 使用存储的固定宽高
-        this.draggedItemRect = {
-          width: this.fixedItemWidth,
-          height: this.fixedItemHeight,
-        };
-
-        // 获取当前元素位置用于计算偏移
-        const element = document.querySelectorAll('.grid-item')[index];
-        if (element) {
-          const rect = element.getBoundingClientRect();
-          // 计算触摸点相对于元素左上角的偏移
-          this.touchOffsetX = this.touchStartX - rect.left;
-          this.touchOffsetY = this.touchStartY - rect.top;
-
-          // 设置克隆元素的初始位置
-          this.dragCloneX = rect.left;
-          this.dragCloneY = rect.top;
-
-          // 显示拖拽克隆
-          this.isDragClone = true;
-
-          // 禁止页面滚动
-          document.body.style.overflow = 'hidden';
-          document.body.style.touchAction = 'none';
-
-          // 添加全局触摸事件处理，确保捕获所有触摸事件
-          document.addEventListener('touchmove', this.onGlobalTouchMove, {
-            passive: false,
-            capture: true,
-          });
-          document.addEventListener('touchend', this.onTouchEnd, {
-            passive: false,
-            capture: true,
-          });
+      if(this.data.isEditing){
+            // 设置当前拖拽索引
+      this.draggingIndex = index;
+      this.isTouchDragging = true;
 
-          // 立即执行一次定位以确保初始位置准确
-          requestAnimationFrame(() => {
-            this.dragCloneX = this.touchStartX - this.touchOffsetX;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY;
-          });
+      // 此时添加阻止默认行为的事件监听，但只影响拖拽状态下的行为
+      document.addEventListener('touchmove', this.onTouchMove, {
+        passive: false, // 只有在拖拽模式下才阻止默认行为
+      });
+      document.addEventListener('touchend', this.onTouchEnd, {
+        passive: true,
+      });
 
-          console.log('拖拽克隆已创建');
-        }
-      }
+      // 使用存储的固定宽高
+      this.draggedItemRect = {
+        width: this.fixedItemWidth,
+        height: this.fixedItemHeight,
+      };
+
+      // 获取当前元素位置用于计算偏移
+      const element = document.querySelectorAll('.grid-item')[index];
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        // 计算触摸点相对于元素左上角的偏移
+        this.touchOffsetX = this.touchStartX - rect.left;
+        this.touchOffsetY = this.touchStartY - rect.top;
+
+        // 设置克隆元素的初始位置
+        this.dragCloneX = rect.left;
+        this.dragCloneY = rect.top;
+
+        // 显示拖拽克隆
+        this.isDragClone = true;
+
+        // 立即执行一次定位以确保初始位置准确
+        requestAnimationFrame(() => {
+          this.dragCloneX = this.touchStartX - this.touchOffsetX;
+          this.dragCloneY = this.touchStartY - this.touchOffsetY;
+        });
 
+        console.log('拖拽克隆已创建');
+      }
+      }
+      this.data.isEditing = true;
+      this.$emit('onEditStateChanged', true);
       this.longPressTimer = null;
     },
 
@@ -638,45 +721,24 @@ export default {
         this.longPressTimer = null;
       }
       this.longPressStartIndex = null;
-
-      // 确保不再阻止滚动
-      if (this.isScrolling) {
-        // 如果已经确定为滚动意图，应该立即恢复系统默认滚动行为
-        document.body.style.overflow = '';
-        document.body.style.touchAction = '';
-      }
-    },
-
-    // 全局触摸移动处理 - 捕获阶段拦截所有触摸移动
-    onGlobalTouchMove(e) {
-      if (this.isTouchDragging) {
-        // 在捕获阶段强制阻止默认行为，防止页面滚动
-        e.preventDefault();
-        e.stopPropagation();
-
-        // 继续处理拖拽逻辑
-        this.handleTouchMove(e);
-      }
     },
 
     // 触摸移动处理
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
-      // 当处于拖拽状态时，阻止默认行为
-      if (this.isTouchDragging) {
-        e.oriEvent.preventDefault();
-        e.oriEvent.stopPropagation();
+      // 确保在拖拽模式下阻止所有事件传播
+      if (this.isTouchDragging && this.data.isEditing) {
+        if (e.oriEvent) {
+          e.oriEvent.preventDefault();
+          e.oriEvent.stopPropagation();
+          e.oriEvent.stopImmediatePropagation(); // 添加这行以确保事件不会继续传播
+        }
+        e.preventDefault && e.preventDefault();
+        e.stopPropagation && e.stopPropagation();
+        e.stopImmediatePropagation && e.stopImmediatePropagation();
       }
 
-      this.handleTouchMove(e);
-    },
-
-    // 抽取通用的触摸移动处理逻辑
-    handleTouchMove(e) {
-      console.log(this.isTouchDragging, 'this.isTouchDragging111111');
-      if (!this.isTouchDragging) return;
-
       const touch = e.changedTouches[0];
 
       // 更新目标位置而非直接设置
@@ -731,9 +793,9 @@ export default {
           );
           const centerScore = 1 - distanceFromCenter;
 
-          // 放宽元素中心区域的判定，让交换更容易触发
-          // 降低阈值，让交换更敏感
-          if (centerScore > maxCenterScore && centerScore > 0.2) {
+          // 只有当分数更高且高于阈值时才更新bestTarget
+          // 提高阈值到0.35，确保更稳定的交换判断
+          if (centerScore > maxCenterScore && centerScore > 0.35) {
             maxCenterScore = centerScore;
             bestTarget = itemIndex;
           }
@@ -743,24 +805,36 @@ export default {
       // 设置悬停高亮，仅当有合格的目标时才高亮
       this.hoverIndex = bestTarget;
 
-      // 简化交换防抖动处理，让交换更直接响应
-      if (bestTarget !== null) {
-        // 直接使用当前的最佳目标
-        this.lastBestTarget = bestTarget;
-      } else {
-        // 如果没有目标，清除lastBestTarget
-        this.lastBestTarget = null;
+      // 增加交换防抖动处理
+      // 如果bestTarget变化但不等于上次的目标，先记录一下
+      if (this.lastBestTarget !== bestTarget && bestTarget !== null) {
+        if (!this.targetChangeTime) {
+          this.targetChangeTime = Date.now();
+          this.pendingTarget = bestTarget;
+        } else if (Date.now() - this.targetChangeTime > 100) {
+          // 只有当目标持续100ms稳定不变时，才认为是有效目标
+          this.lastBestTarget = this.pendingTarget;
+          this.targetChangeTime = null;
+          this.pendingTarget = null;
+        }
+      } else if (bestTarget === null) {
+        // 如果没有目标，清除防抖状态
+        this.targetChangeTime = null;
+        this.pendingTarget = null;
       }
 
       // 使用已稳定的目标进行交换
       bestTarget = this.lastBestTarget;
 
-      // 控制交换频率，不要太高，但也不要太慢
+      // 控制交换频率，改为250ms，大幅增加稳定性
       const now = Date.now();
-      if (now - this.lastSwapTime < 150 || bestTarget === null) return;
+      if (now - this.lastSwapTime < 250 || bestTarget === null) return;
 
       // 执行交换逻辑
       if (bestTarget !== this.draggingIndex) {
+        console.log(`交换元素: ${this.draggingIndex} 和 ${bestTarget}`);
+
+        // 使用ES6解构直接交换数组元素
         [
           this.processedList[this.draggingIndex],
           this.processedList[bestTarget],
@@ -768,16 +842,13 @@ export default {
           this.processedList[bestTarget],
           this.processedList[this.draggingIndex],
         ];
+
+        // 同时更新原始数据，保持同步
         [this.data.list[this.draggingIndex], this.data.list[bestTarget]] = [
           this.data.list[bestTarget],
           this.data.list[this.draggingIndex],
         ];
 
-        console.log(this.data.list, 'cdj------this.data.list');
-        
-        // 更新processedList以触发视图更新和动画效果
-        this.processedList = this.generateDataList();
-        
         // 更新拖拽索引
         this.draggingIndex = bestTarget;
         this.lastSwapTime = now;
@@ -787,7 +858,7 @@ export default {
     // 新增：平滑更新拖拽位置的方法
     updateDragPosition() {
       // 计算当前位置到目标位置的平滑过渡
-      const easing = 0.8; // 大幅提高缓动系数，让拖拽更紧跟手指
+      const easing = 0.6; // 增加缓动系数，让拖拽更跟手
 
       this.dragCloneX +=
         (this.targetTouchX - this.touchOffsetX - this.dragCloneX) * easing;
@@ -812,74 +883,58 @@ export default {
 
     // 元素本身的触摸结束
     endTouch(e) {
-      console.log('cdj------触摸结束');
+      console.log('触摸结束');
       this.$emit('onDragEventEnd', e);
       // 如果只是短按（还在计时），就取消长按
       this.cancelLongPress();
 
       // 如果正在拖拽中，确保清理状态
       if (this.isTouchDragging) {
-        // 取消动画帧
-        if (this.animationFrameId) {
-          cancelAnimationFrame(this.animationFrameId);
-          this.animationFrameId = null;
-        }
-
         // 移除全局事件监听
-        document.removeEventListener('touchmove', this.onGlobalTouchMove, {
+        document.removeEventListener('touchmove', this.onTouchMove, {
           passive: false,
-          capture: true,
         });
         document.removeEventListener('touchend', this.onTouchEnd, {
           passive: false,
-          capture: true,
         });
 
-        // 恢复页面滚动
-        document.body.style.overflow = '';
-        document.body.style.touchAction = '';
+        // 取消动画帧
+        if (this.animationFrameId) {
+          cancelAnimationFrame(this.animationFrameId);
+          this.animationFrameId = null;
+        }
 
         this.isTouchDragging = false;
         this.isDragClone = false;
         this.hoverIndex = null;
         this.draggingIndex = null;
-
-        // 如果不再拖拽，恢复touch-action（但保持refresh隐藏，因为仍在编辑状态）
-        const elements = this.findParentElements();
-        if (elements.listInner) {
-          elements.listInner.style.touchAction = this.originListInnerStyle;
-        }
+        this.lastBestTarget = null;
+        this.targetChangeTime = null;
+        this.pendingTarget = null;
+        this.touchStartX = 0;
+        this.touchStartY = 0;
+        this.targetTouchX = 0;
+        this.targetTouchY = 0;
       }
     },
 
     // 触摸结束处理 - 全局事件
     onTouchEnd(e) {
-      console.log('cdj------全局触摸结束');
-
-      if (this.isTouchDragging) {
-        // 确保阻止默认行为
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      // 取消动画帧
-      if (this.animationFrameId) {
-        cancelAnimationFrame(this.animationFrameId);
-        this.animationFrameId = null;
-      }
+      console.log('全局触摸结束');
 
       // 移除全局事件监听
-      document.removeEventListener('touchmove', this.onGlobalTouchMove, {
+      document.removeEventListener('touchmove', this.onTouchMove, {
         passive: false,
-        capture: true,
       });
       document.removeEventListener('touchend', this.onTouchEnd, {
         passive: false,
-        capture: true,
       });
 
-      // 恢复页面滚动
-      document.body.style.overflow = '';
-      document.body.style.touchAction = '';
+      // 取消动画帧
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
 
       // 重置拖拽状态
       this.isTouchDragging = false;
@@ -897,6 +952,7 @@ export default {
         if (gridBoxes && gridBoxes.length > 0) {
           const box = gridBoxes[0];
           this.gridBoxWidth = box.offsetWidth;
+          console.log('Grid box宽度:', this.gridBoxWidth);
 
           // 更新text样式，确保不超出
           const textElements = document.querySelectorAll('.itemText');
@@ -909,14 +965,15 @@ export default {
 
     initLottieAnimations() {
       this.$nextTick(() => {
+        // 清理之前的动画实例
         Object.keys(this.lottieAnimations).forEach((key) => {
           const anim = this.lottieAnimations[key];
           if (anim && typeof anim.destroy === 'function') {
-            console.log(`cdj------销毁旧动画实例: ${key}`);
+            console.log(`销毁旧动画实例: ${key}`);
             try {
               anim.removeEventListener('complete');
             } catch (e) {
-              console.warn(`cdj------移除事件监听器失败: ${e.message}`);
+              console.warn(`移除事件监听器失败: ${e.message}`);
             }
             anim.destroy();
           }
@@ -927,155 +984,166 @@ export default {
         this.lottieAnimations = {};
 
         console.log(
-          'cdj------开始初始化Lottie动画，列表项数量:',
+          '开始初始化Lottie动画，列表项数量:',
           this.processedList.length
         );
 
-        // 为每个列表项初始化动画
-        this.processedList.forEach((item) => {
-          const itemId = String(item.itemView.id);
-          // 加载背景动画
-          if (item.bgAnimView && item.bgAnimView.animUrl) {
+        // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
+        setTimeout(() => {
+          // 为每个列表项初始化动画
+          this.processedList.forEach((item) => {
+            const itemId = String(item.itemView.id);
+            console.log('处理项目ID:', itemId);
+            console.log('loadingAnimView:', item.loadingAnimView);
+            console.log('bgAnimView:', item.bgAnimView);
+            console.log('frontAnimView:', item.frontAnimView);
+
+            // 加载背景动画
             this.loadLottieAnimation(
               item.bgAnimView,
               `bgAnim-${itemId}`,
               `bg-${itemId}`,
               item
             );
-          }
 
-          // 加载加载中动画
-          if (item.loadingAnimView && item.loadingAnimView.animUrl) {
+            // 加载加载中动画
             this.loadLottieAnimation(
               item.loadingAnimView,
               `loadingAnim-${itemId}`,
               `loading-${itemId}`,
               item
             );
-          }
 
-          // 加载前景动画
-          if (item.frontAnimView && item.frontAnimView.animUrl) {
+            // 加载前景动画
             this.loadLottieAnimation(
               item.frontAnimView,
               `frontAnim-${itemId}`,
               `front-${itemId}`,
               item
             );
-          }
-        });
+          });
+        }, 50); // 小延迟确保DOM已更新和旧动画已销毁
       });
     },
 
     // 抽取公共的loadLottieAnimation方法
-    loadLottieAnimation(animView, refName, animKey, item, dataIndex) {
+    loadLottieAnimation(animView, refName, animKey, item) {
       if (!animView || !animView.animUrl) {
+        console.log(`[${animKey}] 跳过加载：animUrl不存在`);
         return;
       }
 
+      console.log(
+        `[${animKey}] 尝试初始化${refName}, animUrl:`,
+        animView.animUrl
+      );
+
       const animEl = this.$refs[refName];
       if (!animEl || !animEl[0]) {
+        console.warn(`[${animKey}] 未找到${refName}的DOM引用`);
         return;
       }
 
       try {
-        // 如果已经有实例，先销毁它
+        // 如果已经有实例，先暂停它
         if (this.lottieAnimations[animKey]) {
-          this.lottieAnimations[animKey].destroy();
-          delete this.lottieAnimations[animKey];
+          this.lottieAnimations[animKey].pause();
         }
 
-        // 确保animView.visibility不为0才初始化动画
+        // 确保容器可见且透明度重置
+        animEl[0].style.display = '';
+        animEl[0].style.opacity = '1';
+        animEl[0].style.transition = 'opacity 0.2s';
+
         if (
           typeof animView.visibility !== 'number' ||
           animView.visibility !== 0
         ) {
-          if (this.lottieAnimations[animKey]) {
-            this.lottieAnimations[animKey].destroy();
-            delete this.lottieAnimations[animKey];
-          }
-
-          // 创建新的动画实例
-          const anim = lottie.loadAnimation({
-            container: animEl[0],
-            renderer: 'svg',
-            loop: Boolean(item.animRepeatCount) || false,
-            autoplay: true,
-            path: animView.animUrl,
-            rendererSettings: {
-              preserveAspectRatio: 'xMidYMid slice',
-            },
-          });
-
-          // 保存动画实例
-          this.lottieAnimations[animKey] = anim;
-
-          // 添加动画事件监听
-          anim.addEventListener('complete', () => {
-            // 检查是否需要销毁动画（非循环动画完成后销毁）
-            if (!item.animRepeatCount) {
-              // 销毁前再次检查实例是否存在
-              if (this.lottieAnimations[animKey] === anim) {
-                // 移除所有事件监听器
-                anim.removeEventListener('complete');
-                // 销毁动画实例
-                anim.destroy();
-                delete this.lottieAnimations[animKey];
-
-                // 查找并清空对应的动画容器，彻底移除所有内容
-                this.$nextTick(() => {
-                  const animContainer =
-                    this.$refs[refName] && this.$refs[refName][0];
-                  if (animContainer) {
-                    // 隐藏容器
-                    animContainer.style.display = 'none';
-                    // 清空容器内容，确保不显示最后一帧
-                    animContainer.innerHTML = '';
-                    // 确保不会阻止触摸事件
-                    animContainer.style.pointerEvents = 'none';
-                  }
+          // 延迟一帧再销毁旧实例
+          requestAnimationFrame(() => {
+            if (this.lottieAnimations[animKey]) {
+              this.lottieAnimations[animKey].destroy();
+              delete this.lottieAnimations[animKey];
+            }
 
-                  if (animKey.startsWith('bg-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].bgAnimView = {
-                      ...item.bgAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].bgAnimView = {
-                      ...item.bgAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                  } else if (animKey.startsWith('loading-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].loadingAnimView = {
-                      ...item.loadingAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].loadingAnimView = {
-                      ...item.loadingAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                  } else if (animKey.startsWith('front-') && !item.animRepeatCount) {
-                    this.data.list[dataIndex].frontAnimView = {
-                      ...item.frontAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
-                    this.processedList[dataIndex].frontAnimView = {
-                      ...item.frontAnimView,
-                      animUrl: '',
-                      visibility: 0,
-                    };
+            // 创建新的动画实例
+            console.log(`[${animKey}] 创建新的动画实例`);
+            const anim = lottie.loadAnimation({
+              container: animEl[0],
+              renderer: 'svg',
+              loop: Boolean(item.animRepeatCount) || false,
+              autoplay: true,
+              path: animView.animUrl,
+              rendererSettings: {
+                preserveAspectRatio: 'xMidYMid slice',
+                progressiveLoad: true, // 启用渐进式加载
+                hideOnTransparent: true, // 优化透明度处理
+              },
+            });
+
+            this.lottieAnimations[animKey] = anim;
+            anim.addEventListener('complete', () => {
+              // 检查是否需要销毁动画（非循环动画完成后销毁）
+              if (!item.animRepeatCount) {
+                // 销毁前再次检查实例是否存在
+                if (this.lottieAnimations[animKey] === anim) {
+                  anim.removeEventListener('complete');
+                  anim.destroy();
+                  delete this.lottieAnimations[animKey];
+                  // 将对应数据中的animUrl清空
+                  const itemId = String(item.itemView.id);
+                  const index = this.processedList.findIndex(
+                    (i) => i.itemView.id == itemId
+                  );
+                  if (index !== -1) {
+                    // 根据动画类型设置对应的animUrl为空
+                    if (animKey.startsWith('bg-')) {
+                      this.$set(
+                        this.processedList[index].bgAnimView,
+                        'animUrl',
+                        ''
+                      );
+                      this.$set(
+                        this.data.list[index].bgAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    } else if (animKey.startsWith('loading-')) {
+                      this.$set(
+                        this.processedList[index].loadingAnimView,
+                        'animUrl',
+                        ''
+                      );
+                      this.$set(
+                        this.data.list[index].loadingAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    } else if (animKey.startsWith('front-')) {
+                      this.$set(
+                        this.processedList[index].frontAnimView,
+                        'animUrl',
+                        ''
+                      );
+                      this.$set(
+                        this.data.list[index].frontAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    }
+                    console.log(`[${animKey}] 已清空动画URL数据`);
+                    item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
+                    item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
+                    item.addEventListener('touchend', this.endTouch, { passive: false });
+                    item.addEventListener('touchcancel', this.endTouch, { passive: false });
                   }
-                });
+                }
               }
-            }
+            });
           });
         }
       } catch (error) {
-        console.error('加载Lottie动画失败:', error);
+        console.error(`[${animKey}] 初始化失败:`, error);
       }
     },
 
@@ -1090,35 +1158,66 @@ export default {
         }
       });
     },
-    // 查找父级元素和refresh元素
-    findParentElements() {
-      // 返回存储的元素引用
-      return {
-        listInner: this.weexListInnerEl,
-        refresh: this.weexRefreshEl,
-      };
+
+    // 暂未使用，但保留用于将来扩展
+    leftTopIconClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      // 这里可以添加将来的处理逻辑
+      return false;
     },
   },
   watch: {
+    // 监听初始数据变化
+    initialItems: {
+      handler(newItems) {
+        if (!this.isTouchDragging) {
+          this.items = [...newItems];
+        }
+      },
+      deep: true,
+    },
     // 监听列表数据变化，自动更新处理后的数据
     'data.list': {
       handler(newList, oldList) {
         this.processedList = this.generateDataList();
-        console.log(newList, this.processedList, 'cdj------数据变化');
         this.$nextTick(() => {
-          this.updateGridBoxWidth();
-          this.updateFixedItemSize();
+          // 再次使用 nextTick 确保 DOM 完全更新
+          this.$nextTick(() => {
+            const gridItems = document.querySelectorAll('.grid-item');
+            gridItems.forEach((item, index) => {
+              const hasEvents = item._vei;
+              if (!hasEvents) {
+                item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
+                item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
+                item.addEventListener('touchend', this.endTouch, { passive: false });
+                item.addEventListener('touchcancel', this.endTouch, { passive: false });
+              }
+            });
+            this.initLottieAnimations();
+          });
         });
       },
       deep: true,
     },
+    // 监听所有动画URL变化，确保能及时更新动画
+    processedList: {
+      handler(newList, oldList) {
+        if (!newList || !newList.length || this.isTouchDragging) return;
+        // 避免在拖拽过程中重新初始化动画
+        if (this.draggingIndex !== null) return;
+        // 检查每个项目的动画URL是否有变化
+      },
+      deep: true,
+    },
   },
   mounted() {
-    console.log(this.data, 'cdj------djdjdjdjdjdjdj');
+    console.log(this.data, 'djdjdjdjdjdjdj');
     // 初始获取grid-box宽度
     this.updateGridBoxWidth();
     // 获取并存储固定宽高
     this.updateFixedItemSize();
+
     // 监听窗口大小变化，更新grid-box宽度
     window.addEventListener('resize', () => {
       this.updateGridBoxWidth();
@@ -1137,19 +1236,6 @@ export default {
     document.removeEventListener('touchend', this.onTouchEnd, {
       passive: false,
     });
-    // 确保全局事件监听也被清理
-    document.removeEventListener('touchmove', this.onGlobalTouchMove, {
-      passive: false,
-      capture: true,
-    });
-    document.removeEventListener('touchend', this.onTouchEnd, {
-      passive: false,
-      capture: true,
-    });
-    // 恢复页面滚动状态
-    document.body.style.overflow = '';
-    document.body.style.touchAction = '';
-
     window.removeEventListener('resize', () => {
       this.updateGridBoxWidth();
       this.updateFixedItemSize();
@@ -1165,27 +1251,19 @@ export default {
     Object.keys(this.lottieAnimations).forEach((key) => {
       const anim = this.lottieAnimations[key];
       if (anim && typeof anim.destroy === 'function') {
+        console.log(`组件销毁时清理动画: ${key}`);
         try {
           anim.removeEventListener('complete');
+          anim.removeEventListener('DOMLoaded');
+          anim.removeEventListener('data_ready');
+          anim.removeEventListener('loaded_images');
+          anim.removeEventListener('loopComplete');
         } catch (e) {
           console.warn(`移除事件监听器失败: ${e.message}`);
         }
         anim.destroy();
       }
       delete this.lottieAnimations[key];
-
-      // 尝试清理对应的DOM容器
-      const parts = key.split('-');
-      if (parts.length === 2) {
-        const animType = parts[0]; // bg, loading, front
-        const itemId = parts[1];
-        const refName = `${animType}Anim-${itemId}`;
-        const animContainer = this.$refs[refName] && this.$refs[refName][0];
-        if (animContainer) {
-          animContainer.innerHTML = '';
-          animContainer.style.display = 'none';
-        }
-      }
     });
 
     // 确保动画实例对象被清空
@@ -1211,6 +1289,10 @@ button {
   position: relative;
 }
 
+.items-container {
+  width: 100%;
+}
+
 .grid-items-wrapper {
   width: 100%;
   position: relative;
@@ -1220,15 +1302,13 @@ button {
   display: grid;
   grid-template-columns: repeat(var(--grid-cols), 1fr);
   grid-gap: var(--grid-gap);
-  width: calc(100% - var(--grid-margin));
+  width: calc(100% - 74px);
 }
 
 /* 优化排序过渡效果 */
 .grid-fade-move {
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
   will-change: transform;
-  position: relative;
-  z-index: 2;
 }
 
 .grid-item {
@@ -1268,9 +1348,7 @@ button {
   top: 0;
   pointer-events: none;
 }
-.lottie-container >>> * {
-  pointer-events: none;
-}
+
 .bg-anim,
 .front-anim {
   z-index: 1;