From 0c2b973419f4f0cdf7dbd60ff7b4f2ebeca87dd2 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 14 Feb 2025 10:45:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(home):=20=E6=9B=BF=E6=8D=A2=E7=80=91?=
 =?UTF-8?q?=E5=B8=83=E6=B5=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 masonry-wall 组件
- 使用自定义 WaterfallFlow 组件替换- 保持原有布局和样式不变
---
 app/pages/home/components/ItemList/index.vue | 61 ++++++++++----------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/app/pages/home/components/ItemList/index.vue b/app/pages/home/components/ItemList/index.vue
index cde7abb..39880e2 100644
--- a/app/pages/home/components/ItemList/index.vue
+++ b/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
-                @click="openShow(item)"
-                class="w-full"
-            >
-              <div class="relative w-full">
-                <img
-                    :src="item.artwork?.hdPic"
-                    class="w-full object-cover rounded-4px"
-                />
-                <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]"
-                >
-                  LOT{{ item.index }}
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <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]"
+                  >
+                    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>