a423a7f801
- 移除 Column 组件，使用 vue-masonry-wall 实现瀑布流布局- 更新 ItemList 组件，集成瀑布流布局和新的详情弹窗 - 修改 DetailPopup 组件，使用新的详情信息结构 - 更新 itemDetail 组件，适配新的详情信息数据 - 在项目中添加 vue-masonry-wall 依赖
75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<script setup>
|
|
import { showImagePreview } from 'vant';
|
|
|
|
import xImage from '@/components/x-image/index.vue'
|
|
const props = defineProps({
|
|
detailInfo: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
})
|
|
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>
|
|
<div class="flex justify-center">
|
|
<xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
|
|
</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]">{{detailInfo?.artworkTitle}}</div>
|
|
<div class="text-#575757 text-[14px] pb-8px">
|
|
<div class="flex mb-[4px]">
|
|
<div class="w-[70px]">作者：</div>
|
|
<div>{{detailInfo?.artwork?.artistName??'-'}}</div>
|
|
</div>
|
|
<div class="flex mb-[4px]">
|
|
<div class="w-[70px] flex-shrink-0">总平尺数：</div>
|
|
<div>{{detailInfo?.artwork?.ruler??'-'}}</div>
|
|
</div>
|
|
<div class="flex mb-[4px]">
|
|
<div class="w-[70px] flex-shrink-0">长*宽：</div>
|
|
<div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
|
|
</div>
|
|
<div class="flex mb-[4px]">
|
|
<div class="w-[70px] flex-shrink-0">画作简介：</div>
|
|
<div>{{detailInfo?.artwork?.abstract??'-'}}</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>
|
|
|
|
<style scoped>
|
|
|
|
</style> |