2312

app/pages/home/index.vue

@@ -93,8 +93,11 @@ const images = [
   '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=({target})=>{
+const clickSwipe=(index)=>{
-  console.log('data',target.currentSrc)
+  showImagePreview({
+    images: images,
+    startPosition:index,
+  })
 }
 </script>
 
@@ -189,9 +192,9 @@ const clickSwipe=({target})=>{
   </van-tabs>
   <van-back-top right="15vw" bottom="10vh"/>
   <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
-    <div class="content" :style="`height: calc(100vh - ${showHeight+39}px)`">
+    <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+39+46}px)`">
-      <van-swipe indicator-color="#B4B4B4"  lazy-render @click="clickSwipe">
+      <van-swipe style="height: 188px" indicator-color="#B4B4B4"   lazy-render >
-        <van-swipe-item v-for="image in images" :key="image">
+        <van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
           <van-image
               fit="contain"
               width="100%"
@@ -200,6 +203,37 @@ const clickSwipe=({target})=>{
           />
         </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>
   </van-action-sheet>
 </template>