diff --git a/app/components/itemDetail/index.vue b/app/components/itemDetail/index.vue
index 5762a82..6798f57 100644
--- a/app/components/itemDetail/index.vue
+++ b/app/components/itemDetail/index.vue
@@ -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>
 
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 3e44fe4..c8111be 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -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>