From 07c7dfaa783587c23bc1e0966112181957475c95 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:59:54 +0800
Subject: [PATCH] 12

---
 app/pages/home/index.vue | 53 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 09f084d..6e600cd 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import liveBroadcast from '@/components/liveBroadcast/index.vue'
+import { useRect } from '@vant/use';
+import { ImagePreview } from 'vant';
 
+const liveRef=ref(null)
 const loading = ref(false)
 const finished = ref(false)
 const refreshing = ref(false)
@@ -76,10 +79,27 @@ const leftColumn = computed(() => {
 const rightColumn = computed(() => {
   return list.value.filter((_, index) => index % 2 === 1)
 })
+const show=ref(false)
+const showHeight=ref('')
+const openShow=()=>{
+  const rect = useRect(liveRef.value.$el);
+  showHeight.value=rect.height
+  nextTick(()=>{
+    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=({target})=>{
+  console.log('data',target.currentSrc)
+}
 </script>
 
 <template>
-  <liveBroadcast />
+  <liveBroadcast ref="liveRef" />
   <van-tabs sticky animated>
     <van-tab title="拍品列表">
       <div class="px-[16px] pt-[16px]">
@@ -96,6 +116,7 @@ const rightColumn = computed(() => {
                   v-for="(item, index) in leftColumn"
                   :key="index"
                   class="w-full"
+                  @click="openShow"
                 >
                   <div class="relative w-full">
                     <van-image
@@ -167,6 +188,32 @@ const rightColumn = computed(() => {
     </van-tab>
   </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)`">
+      <van-swipe indicator-color="#B4B4B4"  lazy-render @click="clickSwipe">
+        <van-swipe-item v-for="image in images" :key="image">
+          <van-image
+              fit="contain"
+              width="100%"
+              :height="188"
+              :src="image"
+          />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </van-action-sheet>
 </template>
-
-
+<style>
+:root:root  {
+  --van-action-sheet-header-height: 39px;
+}
+</style>
+<style scoped lang="scss">
+:deep(.van-swipe__indicator){
+  width: 8px;
+  height: 8px;
+}
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ){
+  background:rgba(0,0,0,0.8);
+}
+</style>