scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 移除 masonry-wall 组件
- 使用自定义 WaterfallFlow 组件替换- 保持原有布局和样式不变
This commit is contained in:
xingyy 2025-02-14 10:45:06 +08:00
parent 0eafa906e6
commit 0c2b973419
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/pages/home/components/ItemList/index.vue
View File

@ -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>