diff --git a/.history/app/components/itemDetail/index_20250226145158.vue b/.history/app/components/itemDetail/index_20250226145158.vue
new file mode 100644
index 0000000..eb55921
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250226145158.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154608.vue b/.history/app/components/itemDetail/index_20250306154608.vue
new file mode 100644
index 0000000..7544234
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154608.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex">
+    <div>固定跳价</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154630.vue b/.history/app/components/itemDetail/index_20250306154630.vue
new file mode 100644
index 0000000..041c953
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154630.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px]">
+    <div>固定跳价</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154639.vue b/.history/app/components/itemDetail/index_20250306154639.vue
new file mode 100644
index 0000000..9f57065
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154639.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px]">
+    <div>固定跳价:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154645.vue b/.history/app/components/itemDetail/index_20250306154645.vue
new file mode 100644
index 0000000..5c315cb
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154645.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px] justify-center">
+    <div>固定跳价:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154648.vue b/.history/app/components/itemDetail/index_20250306154648.vue
new file mode 100644
index 0000000..5c315cb
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154648.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px] justify-center">
+    <div>固定跳价:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154708.vue b/.history/app/components/itemDetail/index_20250306154708.vue
new file mode 100644
index 0000000..021a82f
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154708.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px] justify-center">
+    <div>{{$t('detail.text9')}}:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/components/itemDetail/index_20250306154817.vue b/.history/app/components/itemDetail/index_20250306154817.vue
new file mode 100644
index 0000000..021a82f
--- /dev/null
+++ b/.history/app/components/itemDetail/index_20250306154817.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { showImagePreview } from 'vant';
+
+import xImage from '@/components/x-image/index.vue'
+const props = defineProps({
+  detailInfo: {
+    type: Object,
+    default: null
+  }
+})
+const filteredPriceRules = computed(() => {
+  if (!props.detailInfo?.priceRules) return []
+
+  // 找到第一个price为空的索引
+  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
+
+  if (emptyIndex === -1) {
+    // 如果没有空价格，返回全部
+    return props.detailInfo.priceRules
+  } else {
+    // 如果有空价格，只返回到空价格之前的数据
+    return props.detailInfo.priceRules.slice(0, emptyIndex)
+  }
+})
+</script>
+
+<template>
+<div>
+  <div class="flex justify-center">
+    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
+  </div>
+  <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]">{{$t('detail.text1')}}：</div>
+        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
+        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
+        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
+      </div>
+      <div class="flex mb-[4px]">
+        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</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]">{{$t('detail.text6')}}：</div>
+    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
+  </div>
+  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
+    <div class="text-[#B58047] text-[14px]">成交价：</div>
+    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
+  </div>
+  <div class="px-[16px] bg-#fff pt-12px pb-18px">
+    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
+    <div v-if="detailInfo?.priceRuleType!=='diy'">
+      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+    </div>
+    <div v-else class="mt-20px">
+      <div class="flex text-#575757 text-12px">
+        <div class="grow-1 text-center">序号</div>
+        <div class="grow-1 text-center">叫价金额</div>
+      </div>
+      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
+        <div class="grow-1 text-center">{{item.index}}</div>
+        <div class="grow-1 text-center">{{item.price}}</div>
+      </div>
+    </div>
+
+  </div>
+  <div class="flex text-[#575757] text-[14px] justify-center">
+    <div>{{$t('detail.text9')}}:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250303111807.vue b/.history/app/pages/home/components/ItemList/index_20250303111807.vue
new file mode 100644
index 0000000..81f6b29
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250303111807.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306114740.vue b/.history/app/pages/home/components/ItemList/index_20250306114740.vue
new file mode 100644
index 0000000..80fe6d9
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306114740.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList.slice(0,1)"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306114815.vue b/.history/app/pages/home/components/ItemList/index_20250306114815.vue
new file mode 100644
index 0000000..323782e
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306114815.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  // pageRef.value.page++
+  // const { finished } = await getArtworkList()
+  // localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList.slice(0,1)"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306114817.vue b/.history/app/pages/home/components/ItemList/index_20250306114817.vue
new file mode 100644
index 0000000..323782e
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306114817.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  // pageRef.value.page++
+  // const { finished } = await getArtworkList()
+  // localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList.slice(0,1)"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306115647.vue b/.history/app/pages/home/components/ItemList/index_20250306115647.vue
new file mode 100644
index 0000000..81f6b29
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306115647.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306115652.vue b/.history/app/pages/home/components/ItemList/index_20250306115652.vue
new file mode 100644
index 0000000..81f6b29
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306115652.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{ formatNumber(item.index) }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306141705.vue b/.history/app/pages/home/components/ItemList/index_20250306141705.vue
new file mode 100644
index 0000000..da94d6b
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306141705.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306141747.vue b/.history/app/pages/home/components/ItemList/index_20250306141747.vue
new file mode 100644
index 0000000..81645f5
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306141747.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+/**
+ * 将数字格式化为"250XX"格式，其中XX是两位数
+ * @param {number} num - 要格式化的数字
+ * @return {string} - 格式化后的字符串
+ */
+ function formatNumber(num) {
+  // 确保输入是有效数字
+  if (typeof num !== 'number' && isNaN(Number(num))) {
+    throw new Error('输入必须是有效数字');
+  }
+  
+  // 转换为数字类型(以防输入是字符串数字)
+  const number = Number(num);
+  
+  // 数字部分格式化为两位数，不足补0
+  const formattedNum = number.toString().padStart(2, '0');
+  
+  // 添加前缀"250"并返回结果
+  return `250${formattedNum}`;
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306141844.vue b/.history/app/pages/home/components/ItemList/index_20250306141844.vue
new file mode 100644
index 0000000..6403033
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306141844.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306142633.vue b/.history/app/pages/home/components/ItemList/index_20250306142633.vue
new file mode 100644
index 0000000..4db4c24
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306142633.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item, index }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 骨架屏，在图片加载完成前显示 -->
+                  <van-skeleton
+                    title
+                    :row="0"
+                    class="w-full aspect-ratio-square rounded-4px overflow-hidden"
+                    v-if="!imageLoadingStatus[item.id]"
+                  />
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306142647.vue b/.history/app/pages/home/components/ItemList/index_20250306142647.vue
new file mode 100644
index 0000000..579a90a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306142647.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 骨架屏，在图片加载完成前显示 -->
+                  <van-skeleton
+                    title
+                    :row="0"
+                    class="w-full aspect-ratio-square rounded-4px overflow-hidden"
+                    v-if="!imageLoadingStatus[item.id]"
+                  />
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306142801.vue b/.history/app/pages/home/components/ItemList/index_20250306142801.vue
new file mode 100644
index 0000000..579a90a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306142801.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 骨架屏，在图片加载完成前显示 -->
+                  <van-skeleton
+                    title
+                    :row="0"
+                    class="w-full aspect-ratio-square rounded-4px overflow-hidden"
+                    v-if="!imageLoadingStatus[item.id]"
+                  />
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306142804.vue b/.history/app/pages/home/components/ItemList/index_20250306142804.vue
new file mode 100644
index 0000000..579a90a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306142804.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 骨架屏，在图片加载完成前显示 -->
+                  <van-skeleton
+                    title
+                    :row="0"
+                    class="w-full aspect-ratio-square rounded-4px overflow-hidden"
+                    v-if="!imageLoadingStatus[item.id]"
+                  />
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143140.vue b/.history/app/pages/home/components/ItemList/index_20250306143140.vue
new file mode 100644
index 0000000..7c425cb
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143140.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div :style="{ display: 'flex', width: '100%' }">
+      <van-skeleton-image />
+      <div :style="{ flex: 1, marginLeft: '16px' }">
+        <van-skeleton-paragraph row-width="60%" />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+      </div>
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143143.vue b/.history/app/pages/home/components/ItemList/index_20250306143143.vue
new file mode 100644
index 0000000..7c425cb
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143143.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div :style="{ display: 'flex', width: '100%' }">
+      <van-skeleton-image />
+      <div :style="{ flex: 1, marginLeft: '16px' }">
+        <van-skeleton-paragraph row-width="60%" />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+      </div>
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143321.vue b/.history/app/pages/home/components/ItemList/index_20250306143321.vue
new file mode 100644
index 0000000..32f4990
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143321.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div :style="{ display: 'flex', width: '100%' }">
+      <van-skeleton-image />
+     <van-skeleton-paragraph row-width="60%" />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143328.vue b/.history/app/pages/home/components/ItemList/index_20250306143328.vue
new file mode 100644
index 0000000..e050a09
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143328.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div :style="{ display: 'flex', width: '100%' }">
+      <van-skeleton-image />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143357.vue b/.history/app/pages/home/components/ItemList/index_20250306143357.vue
new file mode 100644
index 0000000..9067e55
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143357.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div>
+      <van-skeleton-image />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143628.vue b/.history/app/pages/home/components/ItemList/index_20250306143628.vue
new file mode 100644
index 0000000..8647cd4
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143628.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   v-if="!imageLoadingStatus[item.id]">
+  <template #template>
+    <div>
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143705.vue b/.history/app/pages/home/components/ItemList/index_20250306143705.vue
new file mode 100644
index 0000000..41dd3d2
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143705.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   >
+  <template #template>
+    <div>
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143826.vue b/.history/app/pages/home/components/ItemList/index_20250306143826.vue
new file mode 100644
index 0000000..2065d1e
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143826.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton   >
+  <template #template>
+    <div>
+      <van-skeleton-image class="w-full flex flex-col" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143843.vue b/.history/app/pages/home/components/ItemList/index_20250306143843.vue
new file mode 100644
index 0000000..0b8ae00
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143843.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col"  >
+  <template #template>
+    <div>
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306143933.vue b/.history/app/pages/home/components/ItemList/index_20250306143933.vue
new file mode 100644
index 0000000..8943c8a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306143933.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div>
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144009.vue b/.history/app/pages/home/components/ItemList/index_20250306144009.vue
new file mode 100644
index 0000000..8b1382c
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144009.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144013.vue b/.history/app/pages/home/components/ItemList/index_20250306144013.vue
new file mode 100644
index 0000000..8b1382c
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144013.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="w-full" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144044.vue b/.history/app/pages/home/components/ItemList/index_20250306144044.vue
new file mode 100644
index 0000000..1735773
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144044.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144045.vue b/.history/app/pages/home/components/ItemList/index_20250306144045.vue
new file mode 100644
index 0000000..1735773
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144045.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144047.vue b/.history/app/pages/home/components/ItemList/index_20250306144047.vue
new file mode 100644
index 0000000..1735773
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144047.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144142.vue b/.history/app/pages/home/components/ItemList/index_20250306144142.vue
new file mode 100644
index 0000000..c7dea9f
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144142.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144159.vue b/.history/app/pages/home/components/ItemList/index_20250306144159.vue
new file mode 100644
index 0000000..f7500c8
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144159.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1 h-100px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144205.vue b/.history/app/pages/home/components/ItemList/index_20250306144205.vue
new file mode 100644
index 0000000..39e8ce4
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144205.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1 h-100px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144214.vue b/.history/app/pages/home/components/ItemList/index_20250306144214.vue
new file mode 100644
index 0000000..d833f0e
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144214.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1 h-200px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144237.vue b/.history/app/pages/home/components/ItemList/index_20250306144237.vue
new file mode 100644
index 0000000..21c00a9
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144237.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1 !h-200px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144307.vue b/.history/app/pages/home/components/ItemList/index_20250306144307.vue
new file mode 100644
index 0000000..0ad7182
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144307.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image class="!w-full flex-1 !h-400px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144717.vue b/.history/app/pages/home/components/ItemList/index_20250306144717.vue
new file mode 100644
index 0000000..cea1fc4
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144717.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="--van-skeleton-image-size: 100%" class="!w-full flex-1 !h-400px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144728.vue b/.history/app/pages/home/components/ItemList/index_20250306144728.vue
new file mode 100644
index 0000000..8759410
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144728.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="--van-skeleton-image-size: 200px" class="!w-full flex-1 !h-400px" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144732.vue b/.history/app/pages/home/components/ItemList/index_20250306144732.vue
new file mode 100644
index 0000000..b2a9ae7
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144732.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="--van-skeleton-image-size: 200px" class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144816.vue b/.history/app/pages/home/components/ItemList/index_20250306144816.vue
new file mode 100644
index 0000000..41d1e7a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144816.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="--van-skeleton-image-size: 500px" class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144834.vue b/.history/app/pages/home/components/ItemList/index_20250306144834.vue
new file mode 100644
index 0000000..fa05a29
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144834.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="height;: 500px" class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306144838.vue b/.history/app/pages/home/components/ItemList/index_20250306144838.vue
new file mode 100644
index 0000000..0ba3b89
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306144838.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="height: 500px" class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306145158.vue b/.history/app/pages/home/components/ItemList/index_20250306145158.vue
new file mode 100644
index 0000000..0ba3b89
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306145158.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+              
+                  <van-skeleton class="flex flex-col !p-0"  >
+  <template #template>
+    <div class="flex flex-col">
+      <van-skeleton-image style="height: 500px" class="!w-full flex-1" />
+     <van-skeleton-paragraph />
+        <van-skeleton-paragraph />
+    </div>
+  </template>
+</van-skeleton>
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 添加方形比例的样式 */
+.aspect-ratio-square {
+  aspect-ratio: 1 / 1;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306145738.vue b/.history/app/pages/home/components/ItemList/index_20250306145738.vue
new file mode 100644
index 0000000..1fc502a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306145738.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="!imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
+                  >
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
+                  </div>
+                  
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                      :class="{'z-10': !imageLoadingStatus[item.id]}"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306145812.vue b/.history/app/pages/home/components/ItemList/index_20250306145812.vue
new file mode 100644
index 0000000..1fc502a
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306145812.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { ref } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="itemList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="!imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
+                  >
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
+                  </div>
+                  
+                  <img
+                      :src="item.artwork?.hdPic"
+                      class="w-full object-cover rounded-4px"
+                      :class="{'hidden': !imageLoadingStatus[item.id]}"
+                      @load="handleImageLoad(item.id)"
+                      @error="handleImageError(item.id)"
+                  />
+                  <div
+                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                      :class="{'z-10': !imageLoadingStatus[item.id]}"
+                  >
+                    Lot{{item.index+25000 }}
+                  </div>
+                </div>
+                <div class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306150719.vue b/.history/app/pages/home/components/ItemList/index_20250306150719.vue
new file mode 100644
index 0000000..502c189
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306150719.vue
@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 生成骨架屏列表数据
+const skeletonList = computed(() => {
+  // 如果有实际数据，返回空数组
+  if (itemList.value && itemList.value.length > 0) return []
+  // 否则返回6个骨架屏项目
+  return Array(6).fill().map((_, index) => ({
+    id: `skeleton-${index}`,
+    isSkeletonItem: true
+  }))
+})
+
+// 合并实际列表和骨架屏列表
+const displayList = computed(() => {
+  if (itemList.value && itemList.value.length > 0) return itemList.value
+  return skeletonList.value
+})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  if (item.isSkeletonItem) return
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="displayList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="item.isSkeletonItem || !imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
+                  >
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
+                  </div>
+                  
+                  <template v-if="!item.isSkeletonItem">
+                    <img
+                        :src="item.artwork?.hdPic"
+                        class="w-full object-cover rounded-4px"
+                        :class="{'hidden': !imageLoadingStatus[item.id]}"
+                        @load="handleImageLoad(item.id)"
+                        @error="handleImageError(item.id)"
+                    />
+                    <div
+                        class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                        :class="{'z-10': !imageLoadingStatus[item.id]}"
+                    >
+                      Lot{{item.index+25000 }}
+                    </div>
+                  </template>
+                </div>
+                <div v-if="!item.isSkeletonItem" class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306150743.vue b/.history/app/pages/home/components/ItemList/index_20250306150743.vue
new file mode 100644
index 0000000..502c189
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306150743.vue
@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 生成骨架屏列表数据
+const skeletonList = computed(() => {
+  // 如果有实际数据，返回空数组
+  if (itemList.value && itemList.value.length > 0) return []
+  // 否则返回6个骨架屏项目
+  return Array(6).fill().map((_, index) => ({
+    id: `skeleton-${index}`,
+    isSkeletonItem: true
+  }))
+})
+
+// 合并实际列表和骨架屏列表
+const displayList = computed(() => {
+  if (itemList.value && itemList.value.length > 0) return itemList.value
+  return skeletonList.value
+})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  if (item.isSkeletonItem) return
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="displayList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="item.isSkeletonItem || !imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
+                  >
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
+                  </div>
+                  
+                  <template v-if="!item.isSkeletonItem">
+                    <img
+                        :src="item.artwork?.hdPic"
+                        class="w-full object-cover rounded-4px"
+                        :class="{'hidden': !imageLoadingStatus[item.id]}"
+                        @load="handleImageLoad(item.id)"
+                        @error="handleImageError(item.id)"
+                    />
+                    <div
+                        class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                        :class="{'z-10': !imageLoadingStatus[item.id]}"
+                    >
+                      Lot{{item.index+25000 }}
+                    </div>
+                  </template>
+                </div>
+                <div v-if="!item.isSkeletonItem" class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/components/ItemList/index_20250306150745.vue b/.history/app/pages/home/components/ItemList/index_20250306150745.vue
new file mode 100644
index 0000000..502c189
--- /dev/null
+++ b/.history/app/pages/home/components/ItemList/index_20250306150745.vue
@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { goodStore } from "@/stores/goods"
+import DetailPopup from '../DetailPopup/index.vue'
+import WaterfallFlow from '@/components/waterfallFlow/index.vue'
+const {
+  itemList,
+  pageRef,
+  currentItem,
+  loading: storeLoading,
+  getArtworkList,
+} = goodStore()
+
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 生成骨架屏列表数据
+const skeletonList = computed(() => {
+  // 如果有实际数据，返回空数组
+  if (itemList.value && itemList.value.length > 0) return []
+  // 否则返回6个骨架屏项目
+  return Array(6).fill().map((_, index) => ({
+    id: `skeleton-${index}`,
+    isSkeletonItem: true
+  }))
+})
+
+// 合并实际列表和骨架屏列表
+const displayList = computed(() => {
+  if (itemList.value && itemList.value.length > 0) return itemList.value
+  return skeletonList.value
+})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
+// 加载更多
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 刷新
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+// 打开详情
+const openShow = async (item) => {
+  if (item.isSkeletonItem) return
+  localState.value.showDetail = true
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh
+        v-model="localState.refreshing"
+        :success-duration="700"
+        @refresh="onRefresh"
+    >
+      <template #success>
+        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+      </template>
+      <van-list
+          v-model:loading="storeLoading"
+          :finished="localState.finished"
+          :finished-text="$t('home.finished_text')"
+          @load="loadMore"
+      >
+        <div class="w-full flex gap-[16px]">
+          <WaterfallFlow :items="displayList"  :column-count="2">
+            <template #default="{ item }">
+              <div
+                  @click="openShow(item)"
+                  class="w-full"
+              >
+                <div class="relative w-full">
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="item.isSkeletonItem || !imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
+                  >
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
+                  </div>
+                  
+                  <template v-if="!item.isSkeletonItem">
+                    <img
+                        :src="item.artwork?.hdPic"
+                        class="w-full object-cover rounded-4px"
+                        :class="{'hidden': !imageLoadingStatus[item.id]}"
+                        @load="handleImageLoad(item.id)"
+                        @error="handleImageError(item.id)"
+                    />
+                    <div
+                        class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                        :class="{'z-10': !imageLoadingStatus[item.id]}"
+                    >
+                      Lot{{item.index+25000 }}
+                    </div>
+                  </template>
+                </div>
+                <div v-if="!item.isSkeletonItem" class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
+                  <div class="text-[14px] text-[#000000] leading-[20px]">
+                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                  </div>
+                  <div class="mt-[4px] text-[12px] text-[#575757]">
+                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                  </div>
+                  <div
+                      v-if="item.soldPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                  >
+                    {{ $t('home.close_price') }}：{{  item?.soldPrice??0  }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </WaterfallFlow>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306094955.vue b/.history/app/pages/home/index_20250306094955.vue
new file mode 100644
index 0000000..5d884cd
--- /dev/null
+++ b/.history/app/pages/home/index_20250306094955.vue
@@ -0,0 +1,96 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <ItemList></ItemList>
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306114651.vue b/.history/app/pages/home/index_20250306114651.vue
new file mode 100644
index 0000000..d3e199e
--- /dev/null
+++ b/.history/app/pages/home/index_20250306114651.vue
@@ -0,0 +1,99 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+
+          </div>
+          <ItemList></ItemList>
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306114655.vue b/.history/app/pages/home/index_20250306114655.vue
new file mode 100644
index 0000000..3cc9aed
--- /dev/null
+++ b/.history/app/pages/home/index_20250306114655.vue
@@ -0,0 +1,99 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306114938.vue b/.history/app/pages/home/index_20250306114938.vue
new file mode 100644
index 0000000..808fc6a
--- /dev/null
+++ b/.history/app/pages/home/index_20250306114938.vue
@@ -0,0 +1,99 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115027.vue b/.history/app/pages/home/index_20250306115027.vue
new file mode 100644
index 0000000..edb8588
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115027.vue
@@ -0,0 +1,99 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115109.vue b/.history/app/pages/home/index_20250306115109.vue
new file mode 100644
index 0000000..a4e45ec
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115109.vue
@@ -0,0 +1,102 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  height: 100%;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115149.vue b/.history/app/pages/home/index_20250306115149.vue
new file mode 100644
index 0000000..171d48d
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115149.vue
@@ -0,0 +1,102 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  height: 100%;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115151.vue b/.history/app/pages/home/index_20250306115151.vue
new file mode 100644
index 0000000..171d48d
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115151.vue
@@ -0,0 +1,102 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  height: 100%;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115253.vue b/.history/app/pages/home/index_20250306115253.vue
new file mode 100644
index 0000000..8388756
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115253.vue
@@ -0,0 +1,102 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115256.vue b/.history/app/pages/home/index_20250306115256.vue
new file mode 100644
index 0000000..8388756
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115256.vue
@@ -0,0 +1,102 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115330.vue b/.history/app/pages/home/index_20250306115330.vue
new file mode 100644
index 0000000..f185aef
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115330.vue
@@ -0,0 +1,103 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+  display: flex;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115336.vue b/.history/app/pages/home/index_20250306115336.vue
new file mode 100644
index 0000000..b4b6a61
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115336.vue
@@ -0,0 +1,104 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115423.vue b/.history/app/pages/home/index_20250306115423.vue
new file mode 100644
index 0000000..6d7ee79
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115423.vue
@@ -0,0 +1,107 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+:deep(.van-tabs__content.van-tabs__content--animated){
+  flex-grow: 1;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115449.vue b/.history/app/pages/home/index_20250306115449.vue
new file mode 100644
index 0000000..a474711
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115449.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+:deep(.van-tabs__content.van-tabs__content--animated){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115451.vue b/.history/app/pages/home/index_20250306115451.vue
new file mode 100644
index 0000000..a474711
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115451.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.van-tabs.van-tabs--line){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+:deep(.van-tabs__content.van-tabs__content--animated){
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115547.vue b/.history/app/pages/home/index_20250306115547.vue
new file mode 100644
index 0000000..6dd076a
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115547.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115555.vue b/.history/app/pages/home/index_20250306115555.vue
new file mode 100644
index 0000000..c10170c
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115555.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red min-h-full">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115559.vue b/.history/app/pages/home/index_20250306115559.vue
new file mode 100644
index 0000000..c10170c
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115559.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red min-h-full">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115611.vue b/.history/app/pages/home/index_20250306115611.vue
new file mode 100644
index 0000000..542d172
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115611.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red min-h-500px">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115635.vue b/.history/app/pages/home/index_20250306115635.vue
new file mode 100644
index 0000000..1d2de14
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115635.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red 600px">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115641.vue b/.history/app/pages/home/index_20250306115641.vue
new file mode 100644
index 0000000..6777ad2
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115641.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red 600px overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115705.vue b/.history/app/pages/home/index_20250306115705.vue
new file mode 100644
index 0000000..f634fe4
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115705.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115706.vue b/.history/app/pages/home/index_20250306115706.vue
new file mode 100644
index 0000000..f634fe4
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115706.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="bg-red min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115740.vue b/.history/app/pages/home/index_20250306115740.vue
new file mode 100644
index 0000000..8d212cf
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115740.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115742.vue b/.history/app/pages/home/index_20250306115742.vue
new file mode 100644
index 0000000..8d212cf
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115742.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306115809.vue b/.history/app/pages/home/index_20250306115809.vue
new file mode 100644
index 0000000..8d212cf
--- /dev/null
+++ b/.history/app/pages/home/index_20250306115809.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/home/index_20250306145820.vue b/.history/app/pages/home/index_20250306145820.vue
new file mode 100644
index 0000000..8d212cf
--- /dev/null
+++ b/.history/app/pages/home/index_20250306145820.vue
@@ -0,0 +1,109 @@
+<script setup>
+import liveRoom from '@/pages/liveRoom/index.client.vue';
+import {goodStore} from "@/stores/goods/index.js";
+import ItemList from './components/ItemList/index.vue'
+import Cescribe from './components/Cescribe/index.vue'
+import FloatingBubble from '~/components/floating2/index.vue'
+
+import {liveStore} from "~/stores/live/index.js";
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
+const {fullLive} = liveStore()
+const changeLive = () => {
+  if (!fullLive.value){
+    if (auctionDetail.value.isLiving===1){
+      fullLive.value = true;
+      getArtworkList(true)
+    }
+  }
+}
+await getAuctionDetail()
+
+</script>
+<template>
+  <div class="grow-1 flex flex-col">
+    <client-only>
+      <div class="relative" @click="changeLive">
+        <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">{{$t('home.text3')}}{{auctionDetail.isLiving===2?$t('home.text4'):$t('home.text5')}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{auctionDetail.startTitle}}</div>
+        </div>
+      </div>
+    </client-only>
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
+      <van-tabs sticky animated>
+        <van-tab :title="$t('home.tab1')">
+          <div class="min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
+        </van-tab>
+        <van-tab :title="$t('home.tab2')">
+          <Cescribe></Cescribe>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+    </div>
+
+  </div>
+</template>
+<style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.van-swipe__indicator) {
+  width: 8px;
+  height: 8px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active)) {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.4s ease, transform 0.4s ease;
+}
+
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  position: absolute;
+  z-index: 10;
+  height: calc(100vh - var(--van-nav-bar-height));
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250304114512.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250304114512.vue
new file mode 100644
index 0000000..873fff9
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250304114512.vue
@@ -0,0 +1,154 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131850.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131850.vue
new file mode 100644
index 0000000..a8f546d
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131850.vue
@@ -0,0 +1,157 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+          class="container"
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+          <van-back-top target=".container" bottom="30vh" />
+
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131852.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131852.vue
new file mode 100644
index 0000000..a8f546d
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131852.vue
@@ -0,0 +1,157 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+          class="container"
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+          <van-back-top target=".container" bottom="30vh" />
+
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131940.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131940.vue
new file mode 100644
index 0000000..873fff9
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306131940.vue
@@ -0,0 +1,154 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306132936.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306132936.vue
new file mode 100644
index 0000000..c112d96
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306132936.vue
@@ -0,0 +1,195 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: '',
+  isSearchingCurrentItem: false
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = async () => {
+  if (!itemList.value?.length) return
+  
+  const targetIndex = auctionData.value.artwork.index
+  const currentIndex = itemList.value.findIndex(
+      item => targetIndex === item?.index
+  )
+  
+  if (currentIndex === -1) {
+    try {
+      localState.value.isSearchingCurrentItem = true
+      
+      const originalPageSize = pageRef.value.pageSize
+      pageRef.value.pageSize = 20
+      pageRef.value.page = 1
+      
+      await getArtworkList(true)
+      
+      pageRef.value.pageSize = originalPageSize
+      
+      const newIndex = itemList.value.findIndex(
+        item => targetIndex === item?.index
+      )
+      
+      if (newIndex > -1) {
+        nextTick(() => {
+          scrollToElement(newIndex)
+        })
+      }
+    } finally {
+      localState.value.isSearchingCurrentItem = false
+    }
+  } else {
+    scrollToElement(currentIndex)
+  }
+}
+const scrollToElement = (index) => {
+  const container = document.querySelector('.list-container')
+  const targetElement = document.querySelectorAll('.item-wrapper')[index]
+  if (targetElement && container) {
+    const containerTop = container.getBoundingClientRect().top
+    const elementTop = targetElement.getBoundingClientRect().top
+    const scrollTop = elementTop - containerTop + container.scrollTop
+    container.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth'
+    })
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <div v-if="localState.isSearchingCurrentItem" class="searching-item-tip">
+            {{ $t('live_room.searching_current_lot') || '正在查找当前拍品...' }}
+          </div>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+              class="list-container"
+          >
+            <div
+                v-for="(item) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.searching-item-tip {
+  text-align: center;
+  padding: 10px 0;
+  color: #B58047;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133213.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133213.vue
new file mode 100644
index 0000000..ff3328b
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133213.vue
@@ -0,0 +1,236 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: '',
+  isSearchingCurrentItem: false
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = async () => {
+  if (!auctionData.value?.artwork?.index) return
+  
+  const targetIndex = auctionData.value.artwork.index
+  let currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+  
+  if (currentIndex === -1) {
+    try {
+      localState.value.isSearchingCurrentItem = true
+      
+      await searchSpecificItem(targetIndex)
+      
+      currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+      
+      if (currentIndex > -1) {
+        await nextTick()
+        scrollToElement(currentIndex)
+      }
+    } finally {
+      localState.value.isSearchingCurrentItem = false
+    }
+  } else {
+    await nextTick()
+    scrollToElement(currentIndex)
+  }
+}
+const searchSpecificItem = async (targetIndex) => {
+  try {
+    const originalPage = pageRef.value.page
+    const originalPageSize = pageRef.value.pageSize
+    
+    const estimatedPage = Math.ceil(targetIndex / 20)
+    
+    pageRef.value.pageSize = 50
+    
+    pageRef.value.page = estimatedPage > 0 ? estimatedPage : 1
+    await getArtworkList(true)
+    
+    let found = itemList.value.some(item => targetIndex === item?.index)
+    
+    if (!found) {
+      pageRef.value.page = 1
+      pageRef.value.pageSize = 100
+      await getArtworkList(true)
+    }
+    
+    pageRef.value.page = originalPage
+    pageRef.value.pageSize = originalPageSize
+  } catch (error) {
+    console.error('搜索特定拍品时出错:', error)
+  }
+}
+const scrollToElement = (index) => {
+  const container = document.querySelector('.list-container')
+  const allItems = document.querySelectorAll('.item-wrapper')
+  
+  if (!container || !allItems.length || index >= allItems.length) {
+    console.warn('无法滚动：容器或目标元素不存在')
+    return
+  }
+  
+  const targetElement = allItems[index]
+  
+  if (targetElement) {
+    const containerRect = container.getBoundingClientRect()
+    const elementRect = targetElement.getBoundingClientRect()
+    
+    const scrollTop = elementRect.top - containerRect.top + container.scrollTop
+    
+    container.scrollTo({
+      top: Math.max(0, scrollTop - 20),
+      behavior: 'smooth'
+    })
+    
+    targetElement.classList.add('highlight-item')
+    setTimeout(() => {
+      targetElement.classList.remove('highlight-item')
+    }, 2000)
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <div v-if="localState.isSearchingCurrentItem" class="searching-item-tip">
+            {{ $t('live_room.searching_current_lot') || '正在查找当前拍品...' }}
+          </div>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+              class="list-container"
+          >
+            <div
+                v-for="(item) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.searching-item-tip {
+  text-align: center;
+  padding: 10px 0;
+  color: #B58047;
+  font-size: 14px;
+}
+
+.highlight-item {
+  animation: highlight-pulse 2s ease-in-out;
+}
+
+@keyframes highlight-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0.7); }
+  50% { box-shadow: 0 0 0 10px rgba(181, 128, 71, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0); }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133617.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133617.vue
new file mode 100644
index 0000000..986333a
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133617.vue
@@ -0,0 +1,331 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref, nextTick, watch, onMounted} from "vue";
+
+const {pageRef, itemList, getArtworkList, loading: storeLoading} = goodStore();
+const {auctionData} = liveStore()
+const showDetail = ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: '',
+  isSearchingCurrentItem: false,
+  debugInfo: ''  // 添加调试信息字段
+})
+
+// DOM引用
+const listContainerRef = ref(null)
+
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+// 设置调试信息的辅助函数
+const setDebugInfo = (info) => {
+  console.log('调试信息:', info)
+  localState.value.debugInfo = info
+}
+
+// 增强版的滚动到当前拍品函数
+const scrollToCurrentItem = async () => {
+  if (!auctionData.value?.artwork?.index) {
+    setDebugInfo('当前拍品索引不存在')
+    return
+  }
+  
+  const targetIndex = auctionData.value.artwork.index
+  setDebugInfo(`开始查找目标拍品: LOT${targetIndex}`)
+  
+  let currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+  
+  if (currentIndex === -1) {
+    try {
+      localState.value.isSearchingCurrentItem = true
+      setDebugInfo(`当前列表中未找到目标拍品，开始加载更多数据...`)
+      
+      // 尝试搜索特定拍品
+      await searchSpecificItem(targetIndex)
+      
+      // 检查是否找到了
+      currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+      setDebugInfo(`加载数据后，拍品索引位置: ${currentIndex}`)
+      
+      if (currentIndex > -1) {
+        // 等待列表渲染完成
+        await new Promise(resolve => setTimeout(resolve, 300))
+        await nextTick()
+        scrollToElement(currentIndex)
+      } else {
+        setDebugInfo(`加载后仍未找到目标拍品 LOT${targetIndex}`)
+      }
+    } finally {
+      localState.value.isSearchingCurrentItem = false
+    }
+  } else {
+    setDebugInfo(`在现有列表中找到拍品，位置: ${currentIndex}`)
+    // 等待列表渲染完成
+    await new Promise(resolve => setTimeout(resolve, 300))
+    await nextTick()
+    scrollToElement(currentIndex)
+  }
+}
+
+// 搜索特定拍品的优化函数
+const searchSpecificItem = async (targetIndex) => {
+  try {
+    // 保存原始设置
+    const originalPage = pageRef.value.page
+    const originalPageSize = pageRef.value.pageSize
+    
+    setDebugInfo(`尝试使用更大页面大小搜索拍品LOT${targetIndex}`)
+    
+    // 策略1: 直接设置大页面大小加载首页数据
+    pageRef.value.page = 1
+    pageRef.value.pageSize = 100 // 使用较大的页面大小
+    await getArtworkList(true)
+    
+    // 检查是否找到
+    let found = itemList.value.some(item => targetIndex === item?.index)
+    setDebugInfo(`策略1结果: ${found ? '找到' : '未找到'}`)
+    
+    // 策略2: 如果没找到，尝试基于目标索引估算页码
+    if (!found) {
+      // 估算目标页面 (假设每页20个拍品)
+      const estimatedPage = Math.ceil(targetIndex / 10)
+      setDebugInfo(`尝试策略2: 估算页码 ${estimatedPage}`)
+      
+      pageRef.value.page = estimatedPage > 0 ? estimatedPage : 1
+      await getArtworkList(true)
+      
+      found = itemList.value.some(item => targetIndex === item?.index)
+      setDebugInfo(`策略2结果: ${found ? '找到' : '未找到'}`)
+    }
+    
+    // 恢复原始设置
+    pageRef.value.page = originalPage
+    pageRef.value.pageSize = originalPageSize
+    
+    return found
+  } catch (error) {
+    console.error('搜索特定拍品时出错:', error)
+    setDebugInfo(`搜索出错: ${error.message}`)
+    return false
+  }
+}
+
+// 改进滚动到元素的函数
+const scrollToElement = (index) => {
+  setDebugInfo(`尝试滚动到元素 index=${index}`)
+  
+  // 获取容器和目标元素
+  const allItems = document.querySelectorAll('.item-wrapper')
+  
+  if (!listContainerRef.value || !allItems.length || index >= allItems.length) {
+    setDebugInfo(`无法滚动: 容器或元素不存在 (找到${allItems.length}个元素)`)
+    return
+  }
+  
+  const targetElement = allItems[index]
+  const container = listContainerRef.value
+  
+  if (targetElement && container) {
+    try {
+      setDebugInfo(`找到目标元素和容器，执行滚动`)
+      
+      // 使用 Element.scrollIntoView 更可靠的滚动方法
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+      
+      // 添加高亮效果
+      targetElement.classList.add('highlight-item')
+      setTimeout(() => {
+        targetElement.classList.remove('highlight-item')
+      }, 2000)
+      
+      setDebugInfo(`滚动完成并应用高亮效果`)
+    } catch (error) {
+      setDebugInfo(`滚动过程出错: ${error.message}`)
+      console.error('滚动过程出错:', error)
+    }
+  }
+}
+
+const emit = defineEmits(['update:show'])
+const showDetailInfo = ref(null)
+const close = () => emit('update:show', false);
+const openShow = (item) => {
+  showDetailInfo.value=item
+  showDetail.value=true
+}
+
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 监听拍品变化
+watch(() => auctionData.value?.artwork?.index, (newValue, oldValue) => {
+  if (newValue && newValue !== oldValue && props.show) {
+    setDebugInfo(`检测到拍品索引变化: ${oldValue} -> ${newValue}`)
+    nextTick(() => {
+      scrollToCurrentItem()
+    })
+  }
+})
+
+// 监听弹窗显示状态
+watch(() => props.show, (newValue) => {
+  if (newValue) {
+    setDebugInfo('弹窗显示，准备滚动到当前拍品')
+    // 延迟执行，确保DOM已渲染
+    setTimeout(() => {
+      scrollToCurrentItem()
+    }, 500)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          
+          <!-- 搜索提示 -->
+          <div v-if="localState.isSearchingCurrentItem" class="searching-item-tip">
+            {{ $t('live_room.searching_current_lot') || '正在查找当前拍品...' }}
+          </div>
+          
+          <!-- 调试信息区域，可在生产环境中移除 -->
+          <div v-if="localState.debugInfo" class="debug-info">
+            {{ localState.debugInfo }}
+          </div>
+          
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+              class="list-container"
+              ref="listContainerRef"
+          >
+            <div
+                v-for="(item) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+                :class="{'current-item': auctionData?.artwork?.index === item?.index}"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.searching-item-tip {
+  text-align: center;
+  padding: 10px 0;
+  color: #B58047;
+  font-size: 14px;
+}
+
+.highlight-item {
+  animation: highlight-pulse 2s ease-in-out;
+}
+
+@keyframes highlight-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0.7); }
+  50% { box-shadow: 0 0 0 10px rgba(181, 128, 71, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0); }
+}
+
+.current-item {
+  background-color: rgba(181, 128, 71, 0.1);
+  border-radius: 4px;
+}
+
+.debug-info {
+  padding: 8px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #333;
+  font-size: 12px;
+  margin: 5px 0;
+  word-break: break-all;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133625.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133625.vue
new file mode 100644
index 0000000..986333a
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133625.vue
@@ -0,0 +1,331 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref, nextTick, watch, onMounted} from "vue";
+
+const {pageRef, itemList, getArtworkList, loading: storeLoading} = goodStore();
+const {auctionData} = liveStore()
+const showDetail = ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: '',
+  isSearchingCurrentItem: false,
+  debugInfo: ''  // 添加调试信息字段
+})
+
+// DOM引用
+const listContainerRef = ref(null)
+
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+// 设置调试信息的辅助函数
+const setDebugInfo = (info) => {
+  console.log('调试信息:', info)
+  localState.value.debugInfo = info
+}
+
+// 增强版的滚动到当前拍品函数
+const scrollToCurrentItem = async () => {
+  if (!auctionData.value?.artwork?.index) {
+    setDebugInfo('当前拍品索引不存在')
+    return
+  }
+  
+  const targetIndex = auctionData.value.artwork.index
+  setDebugInfo(`开始查找目标拍品: LOT${targetIndex}`)
+  
+  let currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+  
+  if (currentIndex === -1) {
+    try {
+      localState.value.isSearchingCurrentItem = true
+      setDebugInfo(`当前列表中未找到目标拍品，开始加载更多数据...`)
+      
+      // 尝试搜索特定拍品
+      await searchSpecificItem(targetIndex)
+      
+      // 检查是否找到了
+      currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+      setDebugInfo(`加载数据后，拍品索引位置: ${currentIndex}`)
+      
+      if (currentIndex > -1) {
+        // 等待列表渲染完成
+        await new Promise(resolve => setTimeout(resolve, 300))
+        await nextTick()
+        scrollToElement(currentIndex)
+      } else {
+        setDebugInfo(`加载后仍未找到目标拍品 LOT${targetIndex}`)
+      }
+    } finally {
+      localState.value.isSearchingCurrentItem = false
+    }
+  } else {
+    setDebugInfo(`在现有列表中找到拍品，位置: ${currentIndex}`)
+    // 等待列表渲染完成
+    await new Promise(resolve => setTimeout(resolve, 300))
+    await nextTick()
+    scrollToElement(currentIndex)
+  }
+}
+
+// 搜索特定拍品的优化函数
+const searchSpecificItem = async (targetIndex) => {
+  try {
+    // 保存原始设置
+    const originalPage = pageRef.value.page
+    const originalPageSize = pageRef.value.pageSize
+    
+    setDebugInfo(`尝试使用更大页面大小搜索拍品LOT${targetIndex}`)
+    
+    // 策略1: 直接设置大页面大小加载首页数据
+    pageRef.value.page = 1
+    pageRef.value.pageSize = 100 // 使用较大的页面大小
+    await getArtworkList(true)
+    
+    // 检查是否找到
+    let found = itemList.value.some(item => targetIndex === item?.index)
+    setDebugInfo(`策略1结果: ${found ? '找到' : '未找到'}`)
+    
+    // 策略2: 如果没找到，尝试基于目标索引估算页码
+    if (!found) {
+      // 估算目标页面 (假设每页20个拍品)
+      const estimatedPage = Math.ceil(targetIndex / 10)
+      setDebugInfo(`尝试策略2: 估算页码 ${estimatedPage}`)
+      
+      pageRef.value.page = estimatedPage > 0 ? estimatedPage : 1
+      await getArtworkList(true)
+      
+      found = itemList.value.some(item => targetIndex === item?.index)
+      setDebugInfo(`策略2结果: ${found ? '找到' : '未找到'}`)
+    }
+    
+    // 恢复原始设置
+    pageRef.value.page = originalPage
+    pageRef.value.pageSize = originalPageSize
+    
+    return found
+  } catch (error) {
+    console.error('搜索特定拍品时出错:', error)
+    setDebugInfo(`搜索出错: ${error.message}`)
+    return false
+  }
+}
+
+// 改进滚动到元素的函数
+const scrollToElement = (index) => {
+  setDebugInfo(`尝试滚动到元素 index=${index}`)
+  
+  // 获取容器和目标元素
+  const allItems = document.querySelectorAll('.item-wrapper')
+  
+  if (!listContainerRef.value || !allItems.length || index >= allItems.length) {
+    setDebugInfo(`无法滚动: 容器或元素不存在 (找到${allItems.length}个元素)`)
+    return
+  }
+  
+  const targetElement = allItems[index]
+  const container = listContainerRef.value
+  
+  if (targetElement && container) {
+    try {
+      setDebugInfo(`找到目标元素和容器，执行滚动`)
+      
+      // 使用 Element.scrollIntoView 更可靠的滚动方法
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+      
+      // 添加高亮效果
+      targetElement.classList.add('highlight-item')
+      setTimeout(() => {
+        targetElement.classList.remove('highlight-item')
+      }, 2000)
+      
+      setDebugInfo(`滚动完成并应用高亮效果`)
+    } catch (error) {
+      setDebugInfo(`滚动过程出错: ${error.message}`)
+      console.error('滚动过程出错:', error)
+    }
+  }
+}
+
+const emit = defineEmits(['update:show'])
+const showDetailInfo = ref(null)
+const close = () => emit('update:show', false);
+const openShow = (item) => {
+  showDetailInfo.value=item
+  showDetail.value=true
+}
+
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 监听拍品变化
+watch(() => auctionData.value?.artwork?.index, (newValue, oldValue) => {
+  if (newValue && newValue !== oldValue && props.show) {
+    setDebugInfo(`检测到拍品索引变化: ${oldValue} -> ${newValue}`)
+    nextTick(() => {
+      scrollToCurrentItem()
+    })
+  }
+})
+
+// 监听弹窗显示状态
+watch(() => props.show, (newValue) => {
+  if (newValue) {
+    setDebugInfo('弹窗显示，准备滚动到当前拍品')
+    // 延迟执行，确保DOM已渲染
+    setTimeout(() => {
+      scrollToCurrentItem()
+    }, 500)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          
+          <!-- 搜索提示 -->
+          <div v-if="localState.isSearchingCurrentItem" class="searching-item-tip">
+            {{ $t('live_room.searching_current_lot') || '正在查找当前拍品...' }}
+          </div>
+          
+          <!-- 调试信息区域，可在生产环境中移除 -->
+          <div v-if="localState.debugInfo" class="debug-info">
+            {{ localState.debugInfo }}
+          </div>
+          
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+              class="list-container"
+              ref="listContainerRef"
+          >
+            <div
+                v-for="(item) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+                :class="{'current-item': auctionData?.artwork?.index === item?.index}"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.searching-item-tip {
+  text-align: center;
+  padding: 10px 0;
+  color: #B58047;
+  font-size: 14px;
+}
+
+.highlight-item {
+  animation: highlight-pulse 2s ease-in-out;
+}
+
+@keyframes highlight-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0.7); }
+  50% { box-shadow: 0 0 0 10px rgba(181, 128, 71, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0); }
+}
+
+.current-item {
+  background-color: rgba(181, 128, 71, 0.1);
+  border-radius: 4px;
+}
+
+.debug-info {
+  padding: 8px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #333;
+  font-size: 12px;
+  margin: 5px 0;
+  word-break: break-all;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133628.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133628.vue
new file mode 100644
index 0000000..986333a
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133628.vue
@@ -0,0 +1,331 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref, nextTick, watch, onMounted} from "vue";
+
+const {pageRef, itemList, getArtworkList, loading: storeLoading} = goodStore();
+const {auctionData} = liveStore()
+const showDetail = ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: '',
+  isSearchingCurrentItem: false,
+  debugInfo: ''  // 添加调试信息字段
+})
+
+// DOM引用
+const listContainerRef = ref(null)
+
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+// 设置调试信息的辅助函数
+const setDebugInfo = (info) => {
+  console.log('调试信息:', info)
+  localState.value.debugInfo = info
+}
+
+// 增强版的滚动到当前拍品函数
+const scrollToCurrentItem = async () => {
+  if (!auctionData.value?.artwork?.index) {
+    setDebugInfo('当前拍品索引不存在')
+    return
+  }
+  
+  const targetIndex = auctionData.value.artwork.index
+  setDebugInfo(`开始查找目标拍品: LOT${targetIndex}`)
+  
+  let currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+  
+  if (currentIndex === -1) {
+    try {
+      localState.value.isSearchingCurrentItem = true
+      setDebugInfo(`当前列表中未找到目标拍品，开始加载更多数据...`)
+      
+      // 尝试搜索特定拍品
+      await searchSpecificItem(targetIndex)
+      
+      // 检查是否找到了
+      currentIndex = itemList.value.findIndex(item => targetIndex === item?.index)
+      setDebugInfo(`加载数据后，拍品索引位置: ${currentIndex}`)
+      
+      if (currentIndex > -1) {
+        // 等待列表渲染完成
+        await new Promise(resolve => setTimeout(resolve, 300))
+        await nextTick()
+        scrollToElement(currentIndex)
+      } else {
+        setDebugInfo(`加载后仍未找到目标拍品 LOT${targetIndex}`)
+      }
+    } finally {
+      localState.value.isSearchingCurrentItem = false
+    }
+  } else {
+    setDebugInfo(`在现有列表中找到拍品，位置: ${currentIndex}`)
+    // 等待列表渲染完成
+    await new Promise(resolve => setTimeout(resolve, 300))
+    await nextTick()
+    scrollToElement(currentIndex)
+  }
+}
+
+// 搜索特定拍品的优化函数
+const searchSpecificItem = async (targetIndex) => {
+  try {
+    // 保存原始设置
+    const originalPage = pageRef.value.page
+    const originalPageSize = pageRef.value.pageSize
+    
+    setDebugInfo(`尝试使用更大页面大小搜索拍品LOT${targetIndex}`)
+    
+    // 策略1: 直接设置大页面大小加载首页数据
+    pageRef.value.page = 1
+    pageRef.value.pageSize = 100 // 使用较大的页面大小
+    await getArtworkList(true)
+    
+    // 检查是否找到
+    let found = itemList.value.some(item => targetIndex === item?.index)
+    setDebugInfo(`策略1结果: ${found ? '找到' : '未找到'}`)
+    
+    // 策略2: 如果没找到，尝试基于目标索引估算页码
+    if (!found) {
+      // 估算目标页面 (假设每页20个拍品)
+      const estimatedPage = Math.ceil(targetIndex / 10)
+      setDebugInfo(`尝试策略2: 估算页码 ${estimatedPage}`)
+      
+      pageRef.value.page = estimatedPage > 0 ? estimatedPage : 1
+      await getArtworkList(true)
+      
+      found = itemList.value.some(item => targetIndex === item?.index)
+      setDebugInfo(`策略2结果: ${found ? '找到' : '未找到'}`)
+    }
+    
+    // 恢复原始设置
+    pageRef.value.page = originalPage
+    pageRef.value.pageSize = originalPageSize
+    
+    return found
+  } catch (error) {
+    console.error('搜索特定拍品时出错:', error)
+    setDebugInfo(`搜索出错: ${error.message}`)
+    return false
+  }
+}
+
+// 改进滚动到元素的函数
+const scrollToElement = (index) => {
+  setDebugInfo(`尝试滚动到元素 index=${index}`)
+  
+  // 获取容器和目标元素
+  const allItems = document.querySelectorAll('.item-wrapper')
+  
+  if (!listContainerRef.value || !allItems.length || index >= allItems.length) {
+    setDebugInfo(`无法滚动: 容器或元素不存在 (找到${allItems.length}个元素)`)
+    return
+  }
+  
+  const targetElement = allItems[index]
+  const container = listContainerRef.value
+  
+  if (targetElement && container) {
+    try {
+      setDebugInfo(`找到目标元素和容器，执行滚动`)
+      
+      // 使用 Element.scrollIntoView 更可靠的滚动方法
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+      
+      // 添加高亮效果
+      targetElement.classList.add('highlight-item')
+      setTimeout(() => {
+        targetElement.classList.remove('highlight-item')
+      }, 2000)
+      
+      setDebugInfo(`滚动完成并应用高亮效果`)
+    } catch (error) {
+      setDebugInfo(`滚动过程出错: ${error.message}`)
+      console.error('滚动过程出错:', error)
+    }
+  }
+}
+
+const emit = defineEmits(['update:show'])
+const showDetailInfo = ref(null)
+const close = () => emit('update:show', false);
+const openShow = (item) => {
+  showDetailInfo.value=item
+  showDetail.value=true
+}
+
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+
+// 监听拍品变化
+watch(() => auctionData.value?.artwork?.index, (newValue, oldValue) => {
+  if (newValue && newValue !== oldValue && props.show) {
+    setDebugInfo(`检测到拍品索引变化: ${oldValue} -> ${newValue}`)
+    nextTick(() => {
+      scrollToCurrentItem()
+    })
+  }
+})
+
+// 监听弹窗显示状态
+watch(() => props.show, (newValue) => {
+  if (newValue) {
+    setDebugInfo('弹窗显示，准备滚动到当前拍品')
+    // 延迟执行，确保DOM已渲染
+    setTimeout(() => {
+      scrollToCurrentItem()
+    }, 500)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          
+          <!-- 搜索提示 -->
+          <div v-if="localState.isSearchingCurrentItem" class="searching-item-tip">
+            {{ $t('live_room.searching_current_lot') || '正在查找当前拍品...' }}
+          </div>
+          
+          <!-- 调试信息区域，可在生产环境中移除 -->
+          <div v-if="localState.debugInfo" class="debug-info">
+            {{ localState.debugInfo }}
+          </div>
+          
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+              class="list-container"
+              ref="listContainerRef"
+          >
+            <div
+                v-for="(item) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+                :class="{'current-item': auctionData?.artwork?.index === item?.index}"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.searching-item-tip {
+  text-align: center;
+  padding: 10px 0;
+  color: #B58047;
+  font-size: 14px;
+}
+
+.highlight-item {
+  animation: highlight-pulse 2s ease-in-out;
+}
+
+@keyframes highlight-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0.7); }
+  50% { box-shadow: 0 0 0 10px rgba(181, 128, 71, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(181, 128, 71, 0); }
+}
+
+.current-item {
+  background-color: rgba(181, 128, 71, 0.1);
+  border-radius: 4px;
+}
+
+.debug-info {
+  padding: 8px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #333;
+  font-size: 12px;
+  margin: 5px 0;
+  word-break: break-all;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133712.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133712.vue
new file mode 100644
index 0000000..873fff9
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133712.vue
@@ -0,0 +1,154 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133716.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133716.vue
new file mode 100644
index 0000000..873fff9
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133716.vue
@@ -0,0 +1,154 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133943.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133943.vue
new file mode 100644
index 0000000..95500c4
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306133943.vue
@@ -0,0 +1,155 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,(newValue)=>{
+  if (newValue){
+    
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140953.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140953.vue
new file mode 100644
index 0000000..e350328
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140953.vue
@@ -0,0 +1,158 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140956.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140956.vue
new file mode 100644
index 0000000..e350328
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306140956.vue
@@ -0,0 +1,158 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141031.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141031.vue
new file mode 100644
index 0000000..0174574
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141031.vue
@@ -0,0 +1,159 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141033.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141033.vue
new file mode 100644
index 0000000..0174574
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141033.vue
@@ -0,0 +1,159 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141324.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141324.vue
new file mode 100644
index 0000000..c2087e5
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141324.vue
@@ -0,0 +1,165 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+      toast.close()
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141326.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141326.vue
new file mode 100644
index 0000000..c2087e5
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141326.vue
@@ -0,0 +1,165 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+      toast.close()
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141342.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141342.vue
new file mode 100644
index 0000000..1b8e79a
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141342.vue
@@ -0,0 +1,166 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+ 
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+   toast.close()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141836.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141836.vue
new file mode 100644
index 0000000..5e2c0cb
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141836.vue
@@ -0,0 +1,166 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+ 
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+   toast.close()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index+25000}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141916.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141916.vue
new file mode 100644
index 0000000..bfc5e01
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141916.vue
@@ -0,0 +1,166 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+ 
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+   toast.close()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-60px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index+25000}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141952.vue b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141952.vue
new file mode 100644
index 0000000..b46dc62
--- /dev/null
+++ b/.history/app/pages/liveRoom/components/SideButton/tangPopup_20250306141952.vue
@@ -0,0 +1,166 @@
+<script setup>
+import xPopup from '@/components/x-popup/index.vue'
+import {goodStore} from "@/stores/goods/index.js";
+import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
+import {liveStore} from "~/stores/live/index.js";
+import {ref} from "vue";
+const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
+const {auctionData} = liveStore()
+const showDetail=ref(false)
+const localState = ref({
+  finished: false,
+  refreshing: false,
+  showDetail: false,
+  showHeight: ''
+})
+const onRefresh = async () => {
+  try {
+    localState.value.refreshing = true
+    localState.value.finished = false
+    const { finished } = await getArtworkList(true)
+    localState.value.finished = finished
+  } finally {
+    localState.value.refreshing = false
+  }
+}
+const props = defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: ''
+  }
+})
+const scrollToCurrentItem = () => {
+  if (!itemList.value?.length) return
+  const currentIndex = itemList.value.findIndex(
+      item => auctionData.value.artwork.index === item?.index
+  )
+  if (currentIndex > -1) {
+    const container = document.querySelector('.list-container')
+    const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
+    if (targetElement && container) {
+      const containerTop = container.getBoundingClientRect().top
+      const elementTop = targetElement.getBoundingClientRect().top
+      const scrollTop = elementTop - containerTop + container.scrollTop
+      container.scrollTo({
+        top: scrollTop,
+        behavior: 'smooth'
+      })
+ 
+    }
+  }
+}
+const emit = defineEmits(['update:show'])
+const showDetailInfo=ref(null)
+const close = () => emit('update:show', false);
+const openShow=(item)=>{
+  showDetailInfo.value=item
+  showDetail.value=true
+
+}
+const loadMore = async () => {
+  pageRef.value.page++
+  const { finished } = await getArtworkList()
+  localState.value.finished = finished
+}
+watch(()=>{
+  return auctionData.value?.artwork?.index
+},(newValue)=>{
+  })
+watch(()=>props.show,async (newValue)=>{
+  if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
+ nextTick(()=>{
+   scrollToCurrentItem()
+   toast.close()
+ })
+  }
+})
+</script>
+
+<template>
+  <div>
+    <x-popup :show="show" @update:show="close">
+      <template #title>
+        <div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
+        <div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
+      </template>
+      <div>
+        <van-pull-refresh
+            v-model="localState.refreshing"
+            :success-text="$t('home.refresh_show')"
+            :success-duration="700"
+            @refresh="onRefresh"
+        >
+          <template #success>
+            <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+          </template>
+          <van-list
+              v-model:loading="storeLoading"
+              :finished="localState.finished"
+              :finished-text="$t('home.finished_text')"
+              @load="loadMore"
+
+          >
+            <div
+                v-for="(item,index) of itemList"
+                :key="item.uuid"
+                class="flex mb-21px item-wrapper"
+                @click="openShow(item)"
+            >
+              <div
+                  class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
+              >
+                <xImage
+                    :preview="false"
+                    class="w-80px h-80px"
+                    :src="item.artwork?.hdPic"
+                    :alt="item?.artworkTitle"
+                    loading="lazy"
+                />
+                <div class="w-65px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">Lot{{item.index+25000}}</div>
+                <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
+              </div>
+              <div>
+                <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
+                  {{ item.artworkTitle }}
+                </div>
+                <div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
+                <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
+              </div>
+            </div>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+    </x-popup>
+    <DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
+  </div>
+</template>
+
+<style scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.blink {
+  animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306114123.vue b/.history/app/pages/liveRoom/index.client_20250306114123.vue
new file mode 100644
index 0000000..eee42b1
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306114123.vue
@@ -0,0 +1,249 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <client-only>
+  </client-only>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306152016.vue b/.history/app/pages/liveRoom/index.client_20250306152016.vue
new file mode 100644
index 0000000..f5f127c
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306152016.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306152035.vue b/.history/app/pages/liveRoom/index.client_20250306152035.vue
new file mode 100644
index 0000000..f5f127c
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306152035.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306152725.vue b/.history/app/pages/liveRoom/index.client_20250306152725.vue
new file mode 100644
index 0000000..f5f127c
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306152725.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153357.vue b/.history/app/pages/liveRoom/index.client_20250306153357.vue
new file mode 100644
index 0000000..8b02b56
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153357.vue
@@ -0,0 +1,248 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+import { throttle } from 'lodash-es'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = throttle(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 1000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153359.vue b/.history/app/pages/liveRoom/index.client_20250306153359.vue
new file mode 100644
index 0000000..8b02b56
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153359.vue
@@ -0,0 +1,248 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+import { throttle } from 'lodash-es'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = throttle(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 1000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153403.vue b/.history/app/pages/liveRoom/index.client_20250306153403.vue
new file mode 100644
index 0000000..4fc3ce2
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153403.vue
@@ -0,0 +1,248 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+import { throttle } from 'lodash-es'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = throttle(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153405.vue b/.history/app/pages/liveRoom/index.client_20250306153405.vue
new file mode 100644
index 0000000..4fc3ce2
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153405.vue
@@ -0,0 +1,248 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { UseDraggable } from '@vueuse/components'
+import { throttle } from 'lodash-es'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = throttle(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153730.vue b/.history/app/pages/liveRoom/index.client_20250306153730.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153730.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153732.vue b/.history/app/pages/liveRoom/index.client_20250306153732.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153732.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153754.vue b/.history/app/pages/liveRoom/index.client_20250306153754.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153754.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153824.vue b/.history/app/pages/liveRoom/index.client_20250306153824.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153824.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153827.vue b/.history/app/pages/liveRoom/index.client_20250306153827.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153827.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153829.vue b/.history/app/pages/liveRoom/index.client_20250306153829.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153829.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306153831.vue b/.history/app/pages/liveRoom/index.client_20250306153831.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306153831.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/pages/liveRoom/index.client_20250306154125.vue b/.history/app/pages/liveRoom/index.client_20250306154125.vue
new file mode 100644
index 0000000..9676191
--- /dev/null
+++ b/.history/app/pages/liveRoom/index.client_20250306154125.vue
@@ -0,0 +1,247 @@
+<script setup>
+import {ref, onMounted, onBeforeUnmount, watch,useTemplateRef } from 'vue'
+import AliyunPlayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
+import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
+import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
+import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
+import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
+import {goodStore} from "@/stores/goods/index.js"
+import {message} from "~/components/x-message/useMessage.js"
+import {showConfirmDialog} from 'vant';
+import {artworkBuy} from "@/api/goods/index.js"
+import {useI18n} from 'vue-i18n'
+import floating2 from '@/components/floating2/index.vue'
+import { useThrottleFn } from '@vueuse/core'
+
+
+const { t } = useI18n()
+const { auctionDetail,getAuctionDetail} = goodStore();
+const player = ref(null)
+const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
+const pullLink = ref('')
+const handlePlayerError = (error) => {
+  showConfirmDialog({
+    message: t('live_room.error_mess'),
+    showCancelButton: true
+  }).then(() => {
+    initializePlayer()
+  }).catch(() => {
+  })
+ // player.value?.play()
+}
+const loading1=ref(false)
+const initializePlayer = async () => {
+  try {
+    if (player.value) {
+      player.value.dispose()
+    }
+
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
+    const playerConfig = {
+      id: playerId.value,
+      source: pullLink.value,
+      isLive: true,
+      preload: true,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
+      diagnosisButtonVisible:false,
+      // vodRetry:10,
+      // liveRetry:10,
+      autoplayPolicy: {
+        fallbackToMute: true
+      },
+      width: '100%', //容器的大小
+      height: '100%', //容器的大小
+      skinLayout: false,
+      controlBarVisibility: 'never',
+      license: {
+        domain: "szjixun.cn",
+        key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
+      }
+    }
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+      loading1.value = true
+      playerInstance?.play()
+    })
+    player.value.on('playing', () => {
+      loading1.value = false
+
+    })
+    player.value.on('loading', () => {
+      })
+    player.value.on('error', handlePlayerError)
+  } catch (error) {
+    showConfirmDialog({
+      message: t('live_room.error_mess'),
+      showCancelButton: true
+    }).then(() => {
+     initializePlayer()
+    }).catch(() => {
+    })
+    }
+}
+
+
+onMounted(async () => {
+  await getAuctionDetail()
+  pullLink.value = await getLiveLink()
+
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onActivated(()=>{
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
+})
+onBeforeUnmount(() => {
+  player.value?.dispose()
+  player.value = null
+})
+watch(() => fullLive.value, async (newVal) => {
+  if (!newVal) return
+
+  await getSocketData()
+
+})
+const goBuy = useThrottleFn(async () => {
+  const res = await artworkBuy({
+    auctionArtworkUuid: auctionData.value?.artwork?.uuid,
+    buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
+  })
+  if (res.status === 0) {
+    message.success(t('live_room.success_mess'))
+  }
+}, 2000)
+const sideButtonRef = useTemplateRef('sideButtonRef')
+const tipOpen = () => {
+  message.warning(t('live_room.warn_mess'))
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div :id="playerId" class="w-full h-full"></div>
+    <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
+      <van-loading   type="spinner" >直播加载中...</van-loading>
+    </div>
+    <transition name="fade">
+      <div v-if="fullLive">
+        <floating2
+          :snap-edge="true"
+          :position="{right:0,top:300}"
+  >
+    <sideButton></sideButton>
+  </floating2>
+        <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
+             style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
+          <div class="text-16px text-#FFB25F font-600 flex">
+            <div class="mr-5px">{{ t('live_room.now_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice}}</div>
+          </div>
+          <div class="text-16px text-#fff font-600 flex">
+            <div class="mr-5px">{{ t('live_room.lower_price') }}：{{ auctionData?.nowAuctionPrice?.currency }}</div>
+            <div  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice}}</div>
+          </div>
+          
+          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+            <van-button @click.stop="goBuy" color="#FFB25F" class="w-344px !h-[40px]">
+              <div>{{
+                  `${t('live_room.confirm')} ${auctionData?.nowAuctionPrice?.currency} ${auctionData?.nowAuctionPrice?.nowPrice ?? 0}`
+                }}
+              </div>
+            </van-button>
+          </div>
+          <div v-else class="mt-10px mb-10px">
+            <van-button @click="tipOpen" color="#D6D6D8" class="w-344px !h-[40px]" >
+              <div class="text-#7D7D7F text-14px">{{ t('live_room.button') }}</div>
+            </van-button>
+          </div>
+
+          <broadcast></broadcast>
+        </div>
+        <paymentInput v-model:show="show"/>
+        <div>
+        </div>
+        <paymentResults v-model:show="show1" type="error"/>
+        <div v-if="auctionData?.wsType==='newArtwork'"
+             class="w-344px h-31px rounded-4px absolute top-9px bg-[#151824]/45 backdrop-blur-[10px] backdrop-saturate-[180%] left-1/2 transform translate-x--1/2 flex text-#fff text-14px items-center px-12px line-height-none">
+          <div class="mr-11px whitespace-nowrap">LOT{{ auctionData.artwork.index }}</div>
+          <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
+          <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+.draggable-card {
+  z-index: 999999;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  transition: box-shadow 0.3s;
+}
+
+.draggable-card.is-dragging {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* 定义过渡动画 */
+.fade-enter-active {
+  transition: opacity 1s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* 定义进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+
+:deep(.prism-license-watermark) {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/.history/app/stores/goods/index_20250303111807.js b/.history/app/stores/goods/index_20250303111807.js
new file mode 100644
index 0000000..ae0d219
--- /dev/null
+++ b/.history/app/stores/goods/index_20250303111807.js
@@ -0,0 +1,109 @@
+import { createGlobalState,useLocalStorage } from '@vueuse/core'
+import { ref } from 'vue'
+import { artworkList, defaultDetail, artworkDetail } from "@/api/goods/index.js"
+
+export const goodStore = createGlobalState(() => {
+    // 状态定义
+    const actionDetails = ref({})
+    const currentItem = ref({})
+    const myArtWorks = ref([])
+    const pageRef = ref({
+        page: 0,
+        pageSize: 5,
+        itemCount: 0
+    })
+    const artWorkDetail = useLocalStorage('artWorkDetail',{})
+    const itemList = ref([])
+    const auctionDetail = ref({})
+    const loading = ref(false)
+    const error = ref(null)
+
+    // 重置分页
+    const resetPage = () => {
+        pageRef.value.page = 1
+        pageRef.value.pageSize=5
+        pageRef.value.itemCount = 0
+    }
+
+    // 获取拍卖详情
+    const getAuctionDetail = async () => {
+        try {
+            loading.value = true
+            const res = await defaultDetail({})
+            if (res.status === 0) {
+                auctionDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品列表
+    const getArtworkList = async (isRefresh = false) => {
+        if (isRefresh) {
+            resetPage()
+        }
+        try {
+            loading.value = true
+            const res = await artworkList({
+                auctionUuid: auctionDetail.value.uuid,
+                page: pageRef.value.page,
+                pageSize: pageRef.value.pageSize
+            })
+            if (res.status === 0) {
+                const newItems = res.data.data || []
+
+                if (isRefresh) {
+                    itemList.value = newItems
+                } else {
+                    itemList.value = [...itemList.value, ...newItems]
+                }
+
+                pageRef.value.itemCount = res.data.count || 0
+                return {
+                    finished: !newItems.length || newItems.length < pageRef.value.pageSize,
+                    items: newItems
+                }
+            }
+            return { finished: true, items: [] }
+        } catch (err) {
+            return { finished: true, items: [] }
+        } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品详情
+    const getArtworkDetail = async (uuid) => {
+        try {
+            loading.value = true
+            const res = await artworkDetail({ uuid })
+            if (res.status === 0) {
+                artWorkDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        // 状态
+        actionDetails,
+
+        currentItem,
+        myArtWorks,
+        pageRef,
+        artWorkDetail,
+        itemList,
+        auctionDetail,
+        loading,
+        error,
+        // 方法
+        getAuctionDetail,
+        getArtworkList,
+        getArtworkDetail,
+        resetPage
+    }
+})
\ No newline at end of file
diff --git a/.history/app/stores/goods/index_20250306132938.js b/.history/app/stores/goods/index_20250306132938.js
new file mode 100644
index 0000000..ae0d219
--- /dev/null
+++ b/.history/app/stores/goods/index_20250306132938.js
@@ -0,0 +1,109 @@
+import { createGlobalState,useLocalStorage } from '@vueuse/core'
+import { ref } from 'vue'
+import { artworkList, defaultDetail, artworkDetail } from "@/api/goods/index.js"
+
+export const goodStore = createGlobalState(() => {
+    // 状态定义
+    const actionDetails = ref({})
+    const currentItem = ref({})
+    const myArtWorks = ref([])
+    const pageRef = ref({
+        page: 0,
+        pageSize: 5,
+        itemCount: 0
+    })
+    const artWorkDetail = useLocalStorage('artWorkDetail',{})
+    const itemList = ref([])
+    const auctionDetail = ref({})
+    const loading = ref(false)
+    const error = ref(null)
+
+    // 重置分页
+    const resetPage = () => {
+        pageRef.value.page = 1
+        pageRef.value.pageSize=5
+        pageRef.value.itemCount = 0
+    }
+
+    // 获取拍卖详情
+    const getAuctionDetail = async () => {
+        try {
+            loading.value = true
+            const res = await defaultDetail({})
+            if (res.status === 0) {
+                auctionDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品列表
+    const getArtworkList = async (isRefresh = false) => {
+        if (isRefresh) {
+            resetPage()
+        }
+        try {
+            loading.value = true
+            const res = await artworkList({
+                auctionUuid: auctionDetail.value.uuid,
+                page: pageRef.value.page,
+                pageSize: pageRef.value.pageSize
+            })
+            if (res.status === 0) {
+                const newItems = res.data.data || []
+
+                if (isRefresh) {
+                    itemList.value = newItems
+                } else {
+                    itemList.value = [...itemList.value, ...newItems]
+                }
+
+                pageRef.value.itemCount = res.data.count || 0
+                return {
+                    finished: !newItems.length || newItems.length < pageRef.value.pageSize,
+                    items: newItems
+                }
+            }
+            return { finished: true, items: [] }
+        } catch (err) {
+            return { finished: true, items: [] }
+        } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品详情
+    const getArtworkDetail = async (uuid) => {
+        try {
+            loading.value = true
+            const res = await artworkDetail({ uuid })
+            if (res.status === 0) {
+                artWorkDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        // 状态
+        actionDetails,
+
+        currentItem,
+        myArtWorks,
+        pageRef,
+        artWorkDetail,
+        itemList,
+        auctionDetail,
+        loading,
+        error,
+        // 方法
+        getAuctionDetail,
+        getArtworkList,
+        getArtworkDetail,
+        resetPage
+    }
+})
\ No newline at end of file
diff --git a/.history/app/stores/goods/index_20250306133215.js b/.history/app/stores/goods/index_20250306133215.js
new file mode 100644
index 0000000..ae0d219
--- /dev/null
+++ b/.history/app/stores/goods/index_20250306133215.js
@@ -0,0 +1,109 @@
+import { createGlobalState,useLocalStorage } from '@vueuse/core'
+import { ref } from 'vue'
+import { artworkList, defaultDetail, artworkDetail } from "@/api/goods/index.js"
+
+export const goodStore = createGlobalState(() => {
+    // 状态定义
+    const actionDetails = ref({})
+    const currentItem = ref({})
+    const myArtWorks = ref([])
+    const pageRef = ref({
+        page: 0,
+        pageSize: 5,
+        itemCount: 0
+    })
+    const artWorkDetail = useLocalStorage('artWorkDetail',{})
+    const itemList = ref([])
+    const auctionDetail = ref({})
+    const loading = ref(false)
+    const error = ref(null)
+
+    // 重置分页
+    const resetPage = () => {
+        pageRef.value.page = 1
+        pageRef.value.pageSize=5
+        pageRef.value.itemCount = 0
+    }
+
+    // 获取拍卖详情
+    const getAuctionDetail = async () => {
+        try {
+            loading.value = true
+            const res = await defaultDetail({})
+            if (res.status === 0) {
+                auctionDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品列表
+    const getArtworkList = async (isRefresh = false) => {
+        if (isRefresh) {
+            resetPage()
+        }
+        try {
+            loading.value = true
+            const res = await artworkList({
+                auctionUuid: auctionDetail.value.uuid,
+                page: pageRef.value.page,
+                pageSize: pageRef.value.pageSize
+            })
+            if (res.status === 0) {
+                const newItems = res.data.data || []
+
+                if (isRefresh) {
+                    itemList.value = newItems
+                } else {
+                    itemList.value = [...itemList.value, ...newItems]
+                }
+
+                pageRef.value.itemCount = res.data.count || 0
+                return {
+                    finished: !newItems.length || newItems.length < pageRef.value.pageSize,
+                    items: newItems
+                }
+            }
+            return { finished: true, items: [] }
+        } catch (err) {
+            return { finished: true, items: [] }
+        } finally {
+            loading.value = false
+        }
+    }
+
+    // 获取艺术品详情
+    const getArtworkDetail = async (uuid) => {
+        try {
+            loading.value = true
+            const res = await artworkDetail({ uuid })
+            if (res.status === 0) {
+                artWorkDetail.value = res.data
+            }
+        } catch (err) {
+            } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        // 状态
+        actionDetails,
+
+        currentItem,
+        myArtWorks,
+        pageRef,
+        artWorkDetail,
+        itemList,
+        auctionDetail,
+        loading,
+        error,
+        // 方法
+        getAuctionDetail,
+        getArtworkList,
+        getArtworkDetail,
+        resetPage
+    }
+})
\ No newline at end of file
diff --git a/app/components/itemDetail/index.vue b/app/components/itemDetail/index.vue
index eb55921..021a82f 100644
--- a/app/components/itemDetail/index.vue
+++ b/app/components/itemDetail/index.vue
@@ -75,6 +75,10 @@ const filteredPriceRules = computed(() => {
     </div>
 
   </div>
+  <div class="flex text-[#575757] text-[14px] justify-center">
+    <div>{{$t('detail.text9')}}:</div>
+    <div>{{ detailInfo?.priceRuleAdd }}</div>
+  </div>
 </div>
 </template>
 
diff --git a/app/pages/[...all].vue b/app/pages/[...all].vue
deleted file mode 100644
index f9637a9..0000000
--- a/app/pages/[...all].vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: '404',
-})
-</script>
-
-<template>
-  <div> {{ $t('error_page.txt') }} </div>
-</template>
diff --git a/app/pages/externallinks/index.vue b/app/pages/externallinks/index.vue
deleted file mode 100644
index f14457a..0000000
--- a/app/pages/externallinks/index.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import CheckoutPage from '@/components/stripe/CheckoutPage.vue'
-import CompletePage from '@/components/stripe/CompletePage.vue'
-definePageMeta({
-  layout: 'default',
-  title: 'Stripe支付'
-})
-const route = useRoute()
-const key=route.query.key??''
-
-</script>
-
-<template>
-<div>
-  <CheckoutPage/>
-  <!-- <iframe class="w-100vw h-100vh" :src="`/stripe/checkout.html?key=${key}`"></iframe> -->
-</div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/app/pages/home/components/ItemList/index.vue b/app/pages/home/components/ItemList/index.vue
index 81f6b29..502c189 100644
--- a/app/pages/home/components/ItemList/index.vue
+++ b/app/pages/home/components/ItemList/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { goodStore } from "@/stores/goods"
 import DetailPopup from '../DetailPopup/index.vue'
 import WaterfallFlow from '@/components/waterfallFlow/index.vue'
@@ -17,6 +17,37 @@ const localState = ref({
   showDetail: false,
   showHeight: ''
 })
+
+// 记录每个图片的加载状态
+const imageLoadingStatus = ref({})
+
+// 生成骨架屏列表数据
+const skeletonList = computed(() => {
+  // 如果有实际数据，返回空数组
+  if (itemList.value && itemList.value.length > 0) return []
+  // 否则返回6个骨架屏项目
+  return Array(6).fill().map((_, index) => ({
+    id: `skeleton-${index}`,
+    isSkeletonItem: true
+  }))
+})
+
+// 合并实际列表和骨架屏列表
+const displayList = computed(() => {
+  if (itemList.value && itemList.value.length > 0) return itemList.value
+  return skeletonList.value
+})
+
+// 图片加载完成处理函数
+const handleImageLoad = (itemId) => {
+  imageLoadingStatus.value[itemId] = true
+}
+
+// 图片加载错误处理函数
+const handleImageError = (itemId) => {
+  imageLoadingStatus.value[itemId] = true // 也标记为加载完成，避免一直显示骨架屏
+}
+
 // 加载更多
 const loadMore = async () => {
   pageRef.value.page++
@@ -29,6 +60,8 @@ const onRefresh = async () => {
   try {
     localState.value.refreshing = true
     localState.value.finished = false
+    // 重置图片加载状态
+    imageLoadingStatus.value = {}
     const { finished } = await getArtworkList(true)
     localState.value.finished = finished
   } finally {
@@ -37,29 +70,10 @@ const onRefresh = async () => {
 }
 // 打开详情
 const openShow = async (item) => {
+  if (item.isSkeletonItem) return
   localState.value.showDetail = true
   currentItem.value = item
 }
-/**
- * 将数字格式化为"250XX"格式，其中XX是两位数
- * @param {number} num - 要格式化的数字
- * @return {string} - 格式化后的字符串
- */
- function formatNumber(num) {
-  // 确保输入是有效数字
-  if (typeof num !== 'number' && isNaN(Number(num))) {
-    throw new Error('输入必须是有效数字');
-  }
-  
-  // 转换为数字类型(以防输入是字符串数字)
-  const number = Number(num);
-  
-  // 数字部分格式化为两位数，不足补0
-  const formattedNum = number.toString().padStart(2, '0');
-  
-  // 添加前缀"250"并返回结果
-  return `250${formattedNum}`;
-}
 </script>
 
 <template>
@@ -79,24 +93,43 @@ const openShow = async (item) => {
           @load="loadMore"
       >
         <div class="w-full flex gap-[16px]">
-          <WaterfallFlow :items="itemList"  :column-count="2">
-            <template #default="{ item, index }">
+          <WaterfallFlow :items="displayList"  :column-count="2">
+            <template #default="{ item }">
               <div
                   @click="openShow(item)"
                   class="w-full"
               >
                 <div class="relative w-full">
-                  <img
-                      :src="item.artwork?.hdPic"
-                      class="w-full object-cover rounded-4px"
-                  />
-                  <div
-                      class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                  <!-- 自定义骨架屏 -->
+                  <div 
+                    v-if="item.isSkeletonItem || !imageLoadingStatus[item.id]" 
+                    class="custom-skeleton rounded-4px overflow-hidden"
                   >
-                    Lot{{ formatNumber(item.index) }}
+                    <div class="skeleton-image"></div>
+                    <div class="skeleton-content">
+                      <div class="skeleton-title"></div>
+                      <div class="skeleton-text"></div>
+                      <div class="skeleton-text"></div>
+                    </div>
                   </div>
+                  
+                  <template v-if="!item.isSkeletonItem">
+                    <img
+                        :src="item.artwork?.hdPic"
+                        class="w-full object-cover rounded-4px"
+                        :class="{'hidden': !imageLoadingStatus[item.id]}"
+                        @load="handleImageLoad(item.id)"
+                        @error="handleImageError(item.id)"
+                    />
+                    <div
+                        class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[60px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
+                        :class="{'z-10': !imageLoadingStatus[item.id]}"
+                    >
+                      Lot{{item.index+25000 }}
+                    </div>
+                  </template>
                 </div>
-                <div class="pt-[8px]">
+                <div v-if="!item.isSkeletonItem" class="pt-[8px]" :class="{'hidden': !imageLoadingStatus[item.id]}">
                   <div class="text-[14px] text-[#000000] leading-[20px]">
                     {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
                   </div>
@@ -125,4 +158,52 @@ const openShow = async (item) => {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+
+/* 自定义骨架屏样式 */
+.custom-skeleton {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.skeleton-image {
+  width: 100%;
+  padding-bottom: 100%; /* 保持1:1的宽高比 */
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+}
+
+.skeleton-content {
+  padding: 8px 0;
+}
+
+.skeleton-title {
+  height: 16px;
+  margin-bottom: 8px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+}
+
+.skeleton-text {
+  height: 12px;
+  margin-top: 4px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.4s ease infinite;
+  border-radius: 2px;
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 5d884cd..8d212cf 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -20,7 +20,7 @@ await getAuctionDetail()
 
 </script>
 <template>
-  <div class="grow-1">
+  <div class="grow-1 flex flex-col">
     <client-only>
       <div class="relative" @click="changeLive">
         <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
@@ -38,10 +38,13 @@ await getAuctionDetail()
         </div>
       </div>
     </client-only>
-    <div v-if="!fullLive" class="bg-#fff">
+    <div v-if="!fullLive" class="bg-#fff grow-1 flex flex-col">
       <van-tabs sticky animated>
         <van-tab :title="$t('home.tab1')">
-          <ItemList></ItemList>
+          <div class="min-h-[600px] overflow-hidden">
+            <ItemList></ItemList>
+          </div>
+         
         </van-tab>
         <van-tab :title="$t('home.tab2')">
           <Cescribe></Cescribe>
@@ -53,6 +56,16 @@ await getAuctionDetail()
   </div>
 </template>
 <style scoped lang="scss">
+// :deep(.van-tabs.van-tabs--line){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
+// :deep(.van-tabs__content.van-tabs__content--animated){
+//   flex-grow: 1;
+//   display: flex;
+//   flex-direction: column;
+// }
 .ellipsis {
   display: -webkit-box;
   -webkit-box-orient: vertical;
diff --git a/app/pages/liveRoom/components/Broadcast/index.vue b/app/pages/liveRoom/components/Broadcast/index.vue
index d4142f3..b841e1d 100644
--- a/app/pages/liveRoom/components/Broadcast/index.vue
+++ b/app/pages/liveRoom/components/Broadcast/index.vue
@@ -40,12 +40,14 @@ const headItem=(statusCode)=>{
           <div class="text-#939393 text-14px">{{ $t('live_room.next_lot') }}</div>
       </template>
       <template v-else-if="auctionData.auctionPriceList?.buys?.length>0">
-        <div v-for="(item, index) in auctionData.auctionPriceList?.buys" :key="index" class="flex flex-shrink-0">
+        <div v-for="(item, index) in auctionData.auctionPriceList?.buys" :key="index" class="flex flex-shrink-0 break-words whitespace-normal">
           <div class="text-start shrink-0 w-60px" :style="`color: ${headItem(item.statusCode).color}`" >{{ headItem(item.statusCode).label }}</div>
           <div class="text-start shrink-0 w-80px">{{ item.auctionType==='local'? $t('live_room.spot'):$t('live_room.network') }}</div>
           <div class="text-start shrink-0 w-80px">{{ item.createdAt }}</div>
-          <div class="text-start shrink-0 w-80px">{{item.baseCurrency}}{{ formatThousands(item.baseMoney) }}</div>
-          <div class="text-start text-#2B53AC shrink-0 w-20px">{{ item.userId===userInfo.ID?$t('live_room.me'):'' }}</div>
+          <div class="text-start shrink-0 w-80px ">
+  {{item.baseCurrency}}{{ formatThousands(item.baseMoney) }}
+</div>
+          <div class="text-end text-#2B53AC shrink-0 w-20px">{{ item.userId===userInfo.ID?$t('live_room.me'):'我' }}</div>
         </div>
       </template>
       <template v-if="auctionData.wsType==='newArtwork'">
diff --git a/app/pages/liveRoom/components/SideButton/tangPopup.vue b/app/pages/liveRoom/components/SideButton/tangPopup.vue
index 873fff9..b46dc62 100644
--- a/app/pages/liveRoom/components/SideButton/tangPopup.vue
+++ b/app/pages/liveRoom/components/SideButton/tangPopup.vue
@@ -47,6 +47,7 @@ const scrollToCurrentItem = () => {
         top: scrollTop,
         behavior: 'smooth'
       })
+ 
     }
   }
 }
@@ -67,10 +68,21 @@ watch(()=>{
   return auctionData.value?.artwork?.index
 },(newValue)=>{
   })
-watch(()=>props.show,(newValue)=>{
+watch(()=>props.show,async (newValue)=>{
   if (newValue){
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      const toast = showLoadingToast({
+  message: '加载中...',
+  forbidClick: true,
+});
+      pageRef.value.pageSize=auctionData.value?.artwork?.index-itemList.value?.length
+     await loadMore()
+     
+     pageRef.value.pageSize=5
+    }
  nextTick(()=>{
    scrollToCurrentItem()
+   toast.close()
  })
   }
 })
@@ -116,7 +128,7 @@ watch(()=>props.show,(newValue)=>{
                     :alt="item?.artworkTitle"
                     loading="lazy"
                 />
-                <div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
+                <div class="w-65px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">Lot{{item.index+25000}}</div>
                 <div  v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
               </div>
               <div>
diff --git a/app/pages/liveRoom/index.client.vue b/app/pages/liveRoom/index.client.vue
index dceb9aa..9676191 100644
--- a/app/pages/liveRoom/index.client.vue
+++ b/app/pages/liveRoom/index.client.vue
@@ -14,7 +14,7 @@ import {showConfirmDialog} from 'vant';
 import {artworkBuy} from "@/api/goods/index.js"
 import {useI18n} from 'vue-i18n'
 import floating2 from '@/components/floating2/index.vue'
-import { UseDraggable } from '@vueuse/components'
+import { useThrottleFn } from '@vueuse/core'
 
 
 const { t } = useI18n()
@@ -101,7 +101,7 @@ const initializePlayer = async () => {
 onMounted(async () => {
   await getAuctionDetail()
   pullLink.value = await getLiveLink()
-  console.log('auctionDetail.value.isLiving',auctionDetail.value.isLiving)
+
   if (auctionDetail.value.isLiving===1){
     initializePlayer()
   }
@@ -121,7 +121,7 @@ watch(() => fullLive.value, async (newVal) => {
   await getSocketData()
 
 })
-const goBuy = async () => {
+const goBuy = useThrottleFn(async () => {
   const res = await artworkBuy({
     auctionArtworkUuid: auctionData.value?.artwork?.uuid,
     buyMoney: String(auctionData?.value.nowAuctionPrice?.nowPrice??0)
@@ -129,7 +129,7 @@ const goBuy = async () => {
   if (res.status === 0) {
     message.success(t('live_room.success_mess'))
   }
-}
+}, 2000)
 const sideButtonRef = useTemplateRef('sideButtonRef')
 const tipOpen = () => {
   message.warning(t('live_room.warn_mess'))
@@ -142,8 +142,6 @@ const tipOpen = () => {
     <div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
       <van-loading   type="spinner" >直播加载中...</van-loading>
     </div>
-    <client-only>
-  </client-only>
     <transition name="fade">
       <div v-if="fullLive">
         <floating2
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 50d0bb0..6e9f690 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -173,7 +173,8 @@
     "text5": "画作简介",
     "text6": "起拍价",
     "text7": "竞价表",
-    "text8": "拍卖品详情"
+    "text8": "拍卖品详情",
+    "text9": "固定跳价"
   },
   "art_detail_page": {
     "button": "去支付",