refactor(home): 替换瀑布流组件

- 移除 masonry-wall 组件
- 使用自定义 WaterfallFlow 组件替换- 保持原有布局和样式不变

app/pages/home/components/ItemList/index.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { goodStore } from "@/stores/goods"
 import DetailPopup from '../DetailPopup/index.vue'
 import MasonryWall from '@yeger/vue-masonry-wall'
+import WaterfallFlow from '@/components/WaterfallFlow.vue'
 const {
   itemList,
   pageRef,
@@ -59,40 +60,40 @@ const openShow = async (item) => {
           @load="loadMore"
       >
         <div class="w-full flex gap-[16px]">
-          <masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2"  :gap="5">
+          <WaterfallFlow :items="itemList"  :column-count="2">
             <template #default="{ item, index }">
-            <div
+              <div
-                @click="openShow(item)"
+                  @click="openShow(item)"
-                class="w-full"
+                  class="w-full"
-            >
+              >
-              <div class="relative w-full">
+                <div class="relative w-full">
-                <img
+                  <img
-                    :src="item.artwork?.hdPic"
+                      :src="item.artwork?.hdPic"
-                    class="w-full object-cover rounded-4px"
+                      class="w-full object-cover rounded-4px"
-                />
+                  />
-                <div
+                  <div
-                    class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
-                >
+                  >
-                  LOT{{ item.index }}
+                    LOT{{ item.index }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item.name }}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.startPrice??0  }}
+                  </div>
                 </div>
               </div>
-              <div class="pt-[8px]">
-                <div class="text-[14px] text-[#000000] leading-[20px]">
-                  {{ item.name }}
-                </div>
-                <div class="mt-[4px] text-[12px] text-[#575757]">
-                  {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
-                </div>
-                <div
-                    v-if="item.soldPrice"
-                    class="mt-[4px] text-[12px] text-[#b58047]"
-                >
-                {{ $t('home.close_price') }}：{{  item?.startPrice??0  }}
-                </div>
-              </div>
-            </div>
             </template>
-          </masonry-wall>
+          </WaterfallFlow>
         </div>
       </van-list>
     </van-pull-refresh>