refactor(components): 将拍品详情移至独立组件
-将拍品详情从首页组件中抽离，创建独立的 itemDetail 组件 - 在首页中引入并使用新的 itemDetail 组件- 优化代码结构，提高组件的可复用性和可维护性
This commit is contained in:
xingyy
parent
8235b9a779
commit
e5fdd4e7ef
@ -1,10 +1,61 @@
|
||||
<script setup>
|
||||
|
||||
import { ImagePreview } from 'vant';
|
||||
const images = [
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
|
||||
];
|
||||
const clickSwipe=(index)=>{
|
||||
showImagePreview({
|
||||
images: images,
|
||||
startPosition:index,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
|
||||
<van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
|
||||
<van-image
|
||||
fit="contain"
|
||||
width="100%"
|
||||
:height="188"
|
||||
:src="image"
|
||||
/>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
|
||||
<div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
|
||||
<div class="text-#575757 text-[14px] pb-8px">
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px]">作者：</div>
|
||||
<div>张天赐</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">总平尺数：</div>
|
||||
<div>—</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">长*宽：</div>
|
||||
<div>100*200cm</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">画作简介：</div>
|
||||
<div>是打卡时间到卡上即可点击卡拉斯科健康就阿斯科利打卡时间到卡萨带手机的啊科技是打卡时</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
|
||||
<div class="text-[#575757] text-[14px]">起拍价：</div>
|
||||
<div class="text-#575757 text-14px font-bold">RMB 1,000</div>
|
||||
</div>
|
||||
<div class="px-[16px] bg-#fff pt-12px pb-18px">
|
||||
<div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
|
||||
<div>
|
||||
<img src="@/static/images/1981736313.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import liveBroadcast from '@/components/liveBroadcast/index.vue'
|
||||
import { useRect } from '@vant/use';
|
||||
import { ImagePreview } from 'vant';
|
||||
|
||||
import itemDetail from '@/components/itemDetail/index.vue'
|
||||
const liveRef=ref(null)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
@ -88,17 +88,7 @@ const openShow=()=>{
|
||||
show.value=true
|
||||
})
|
||||
}
|
||||
const images = [
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
|
||||
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
|
||||
];
|
||||
const clickSwipe=(index)=>{
|
||||
showImagePreview({
|
||||
images: images,
|
||||
startPosition:index,
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -197,47 +187,7 @@ const clickSwipe=(index)=>{
|
||||
<van-back-top right="15vw" bottom="10vh"/>
|
||||
<van-action-sheet :round="false" v-model:show="show" title="拍品详情">
|
||||
<div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
|
||||
<van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
|
||||
<van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
|
||||
<van-image
|
||||
fit="contain"
|
||||
width="100%"
|
||||
:height="188"
|
||||
:src="image"
|
||||
/>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
|
||||
<div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
|
||||
<div class="text-#575757 text-[14px] pb-8px">
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px]">作者：</div>
|
||||
<div>张天赐</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">总平尺数：</div>
|
||||
<div>—</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">长*宽：</div>
|
||||
<div>100*200cm</div>
|
||||
</div>
|
||||
<div class="flex mb-[4px]">
|
||||
<div class="w-[70px] flex-shrink-0">画作简介：</div>
|
||||
<div>是打卡时间到卡上即可点击卡拉斯科健康就阿斯科利打卡时间到卡萨带手机的啊科技是打卡时</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
|
||||
<div class="text-[#575757] text-[14px]">起拍价：</div>
|
||||
<div class="text-#575757 text-14px font-bold">RMB 1,000</div>
|
||||
</div>
|
||||
<div class="px-[16px] bg-#fff pt-12px pb-18px">
|
||||
<div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
|
||||
<div>
|
||||
<img src="@/static/images/1981736313.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<itemDetail></itemDetail>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user