64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<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>
|
|
|
|
<style scoped>
|
|
|
|
</style> |