diff --git a/.gitignore b/.gitignore
index 48fcd8f..8eae3cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,6 @@ logs
 .DS_Store
 .fleet
 .idea
+.history/
+.history/**
+**/.history/**
\ No newline at end of file
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/api-collect-code/auth/index.js b/app/api-collect-code/auth/index.js
index 07177d0..ff4ebdf 100644
--- a/app/api-collect-code/auth/index.js
+++ b/app/api-collect-code/auth/index.js
@@ -20,4 +20,11 @@ export async function mobileLogin(data) {
         method: 'POST',
         data
     })
+}
+export async function sessionUserNo(data) {
+    return await request( {
+        url:'/api/v1/auction/sessionUserNo/check',
+        method: 'POST',
+        data
+    })
 }
\ No newline at end of file
diff --git a/app/app.vue b/app/app.vue
index e6e6688..8c2c324 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -49,13 +49,20 @@ provide('slideDirection', slideDirection)
       <NuxtLayout>
         <NuxtPage :transition="{
         name: slideDirection
-      }" keepalive />
+      }"  />
       </NuxtLayout>
     </VanConfigProvider>
   </client-only>
 </template>
 
 <style>
+.van-popup.van-toast{
+  background: var(--van-toast-background)!important;
+}
+.van-popup.van-popup--center.van-image-preview{
+  background-color: transparent!important;
+  max-width: 100%!important;
+}
 :root:root {
   --van-dialog-radius: 8px
 }
diff --git a/app/components/StripeCheckout.vue b/app/components/StripeCheckout.vue
deleted file mode 100644
index 84d853b..0000000
--- a/app/components/StripeCheckout.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <div class="stripe-container">
-    <form id="payment-form" @submit.prevent="handleSubmit">
-      <div id="payment-element">
-        <!--Stripe.js injects the Payment Element-->
-      </div>
-      <button id="submit">
-        <div class="spinner hidden" id="spinner"></div>
-        <span id="button-text">Pay now</span>
-      </button>
-      <div id="payment-message" class="hidden"></div>
-    </form>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-// The items the customer wants to buy
-const items = [{ id: "xl-tshirt", amount: 1000 }]
-
-const stripe = ref(null)
-const elements = ref(null)
-const isLoading = ref(false)
-
-onMounted(async () => {
-  try {
-    // 初始化 Stripe
-    stripe.value = window.Stripe("pk_test_51QfbSAAB1Vm8VfJq3AWsR4k2mZjnlF7XFrmlbc6XVXrtwXquAUfwzZmOFDbxMIAwqJBgqao8KLt2wmPc4vNOCTeo00WB78KtfV")
-    await initialize()
-  } catch (error) {
-    showMessage("Failed to initialize payment system")
-  }
-})
-
-// Fetches a payment intent and captures the client secret
-const initialize = async () => {
-  try {
-    const response = await fetch("/create-payment-intent", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ items }),
-    })
-    const { clientSecret } = await response.json()
-
-    const appearance = {
-      theme: 'stripe',
-    }
-
-    // 创建 elements 实例
-    elements.value = stripe.value.elements({ 
-      appearance, 
-      clientSecret,
-    })
-
-    // 创建并挂载 Payment Element
-    const paymentElement = elements.value.create("payment", {
-      layout: "accordion",
-    })
-
-    // 确保挂载到正确的 DOM 元素
-    const mountElement = document.getElementById("payment-element")
-    if (mountElement) {
-      paymentElement.mount(mountElement)
-    } else {
-      throw new Error("Payment element mount point not found")
-    }
-  } catch (error) {
-    showMessage("Failed to load payment form")
-  }
-}
-
-const handleSubmit = async () => {
-  if (!stripe.value || !elements.value) {
-    showMessage("Payment system not initialized")
-    return
-  }
-
-  setLoading(true)
-
-  try {
-    const { error } = await stripe.value.confirmPayment({
-      elements: elements.value,
-      confirmParams: {
-        return_url: window.location.origin + "/complete.html",
-      },
-    })
-
-    if (error) {
-      if (error.type === "card_error" || error.type === "validation_error") {
-        showMessage(error.message)
-      } else {
-        showMessage("An unexpected error occurred.")
-      }
-    }
-  } catch (e) {
-    showMessage("Payment processing failed")
-  } finally {
-    setLoading(false)
-  }
-}
-
-const showMessage = (messageText) => {
-  const messageContainer = document.querySelector("#payment-message")
-
-  messageContainer.classList.remove("hidden")
-  messageContainer.textContent = messageText
-
-  setTimeout(() => {
-    messageContainer.classList.add("hidden")
-    messageContainer.textContent = ""
-  }, 4000)
-}
-
-// Show a spinner on payment submission
-const setLoading = (isLoading) => {
-  if (isLoading) {
-    // Disable the button and show a spinner
-    document.querySelector("#submit").disabled = true
-    document.querySelector("#spinner").classList.remove("hidden")
-    document.querySelector("#button-text").classList.add("hidden")
-  } else {
-    document.querySelector("#submit").disabled = false
-    document.querySelector("#spinner").classList.add("hidden")
-    document.querySelector("#button-text").classList.remove("hidden")
-  }
-}
-</script>
-
-<style scoped>
-.stripe-container {
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  height: 100vh;
-  width: 100vw;
-}
-
-form {
-  width: 30vw;
-  min-width: 500px;
-  align-self: center;
-  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
-    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
-  border-radius: 7px;
-  padding: 40px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.hidden {
-  display: none;
-}
-
-#payment-message {
-  color: rgb(105, 115, 134);
-  font-size: 16px;
-  line-height: 20px;
-  padding-top: 12px;
-  text-align: center;
-}
-
-#payment-element {
-  margin-bottom: 24px;
-}
-
-button {
-  background: #0055DE;
-  font-family: Arial, sans-serif;
-  color: #ffffff;
-  border-radius: 4px;
-  border: 0;
-  padding: 12px 16px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  display: block;
-  transition: all 0.2s ease;
-  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
-  width: 100%;
-}
-
-button:hover {
-  filter: contrast(115%);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.spinner,
-.spinner:before,
-.spinner:after {
-  border-radius: 50%;
-}
-
-.spinner {
-  color: #ffffff;
-  font-size: 22px;
-  text-indent: -99999px;
-  margin: 0px auto;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  box-shadow: inset 0 0 0 2px;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-.spinner:before,
-.spinner:after {
-  position: absolute;
-  content: "";
-}
-
-.spinner:before {
-  width: 10.4px;
-  height: 20.4px;
-  background: #0055DE;
-  border-radius: 20.4px 0 0 20.4px;
-  top: -0.2px;
-  left: -0.2px;
-  -webkit-transform-origin: 10.4px 10.2px;
-  transform-origin: 10.4px 10.2px;
-  -webkit-animation: loading 2s infinite ease 1.5s;
-  animation: loading 2s infinite ease 1.5s;
-}
-
-.spinner:after {
-  width: 10.4px;
-  height: 10.2px;
-  background: #0055DE;
-  border-radius: 0 10.2px 10.2px 0;
-  top: -0.1px;
-  left: 10.2px;
-  -webkit-transform-origin: 0px 10.2px;
-  transform-origin: 0px 10.2px;
-  -webkit-animation: loading 2s infinite ease;
-  animation: loading 2s infinite ease;
-}
-
-@-webkit-keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  form {
-    width: 80vw;
-    min-width: initial;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/app/components/floating2/index.vue b/app/components/floating2/index.vue
new file mode 100644
index 0000000..c57c7e2
--- /dev/null
+++ b/app/components/floating2/index.vue
@@ -0,0 +1,238 @@
+<template>
+  <div ref="floatPanel" :style="panelStyle" class="float-panel" 
+       @mousedown="handleMouseDown" 
+       @touchstart="handleTouchStart">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  position: {
+    type: Object,
+    default: () => ({})
+  },
+  fixedX: Boolean,
+  fixedY: Boolean,
+  snapEdge: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const floatPanel = ref(null);
+const panelPos = ref({ x: 0, y: 0 });
+const panelSize = ref({ width: 0, height: 0 });
+const windowSize = ref({ width: 0, height: 0 });
+const dragOffset = ref({ x: 0, y: 0 });
+const wasDragged = ref(false);
+
+// 更新面板和窗口尺寸信息
+const updateSizes = () => {
+  if (floatPanel.value) {
+    panelSize.value = {
+      width: floatPanel.value.offsetWidth,
+      height: floatPanel.value.offsetHeight
+    };
+  }
+  windowSize.value = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+};
+
+// 初始位置计算
+const initPosition = () => {
+  updateSizes();
+  const { left, right, top, bottom } = props.position;
+  
+  if (right !== undefined) {
+    panelPos.value.x = windowSize.value.width - parseInt(right || 0) - panelSize.value.width;
+  } else if (left !== undefined) {
+    panelPos.value.x = parseInt(left || 0);
+  }
+  
+  if (bottom !== undefined) {
+    panelPos.value.y = windowSize.value.height - parseInt(bottom || 0) - panelSize.value.height;
+  } else if (top !== undefined) {
+    panelPos.value.y = parseInt(top || 0);
+  }
+};
+
+// 面板样式
+const panelStyle = computed(() => {
+  return {
+    left: `${panelPos.value.x}px`,
+    top: `${panelPos.value.y}px`
+  };
+});
+
+// 处理鼠标按下事件
+const handleMouseDown = (event) => {
+  // 只有点击浮动面板本身时才启动拖拽
+  if (event.target === floatPanel.value || floatPanel.value.contains(event.target)) {
+    // 判断是否是面板自身，如果是才阻止默认行为
+    if (event.target === floatPanel.value) {
+      event.preventDefault();
+    }
+    
+    wasDragged.value = false;
+    
+    const startX = event.clientX;
+    const startY = event.clientY;
+    
+    // 计算点击位置与面板左上角的偏移
+    dragOffset.value = {
+      x: startX - panelPos.value.x,
+      y: startY - panelPos.value.y
+    };
+    
+    const handleMouseMove = (e) => {
+      wasDragged.value = true;
+      
+      const newX = e.clientX - dragOffset.value.x;
+      const newY = e.clientY - dragOffset.value.y;
+      
+      // 应用约束
+      if (!props.fixedX) {
+        panelPos.value.x = Math.max(0, Math.min(newX, windowSize.value.width - panelSize.value.width));
+      }
+      
+      if (!props.fixedY) {
+        panelPos.value.y = Math.max(0, Math.min(newY, windowSize.value.height - panelSize.value.height));
+      }
+    };
+    
+    const handleMouseUp = (e) => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      
+      if (wasDragged.value && props.snapEdge) {
+        snapToEdge();
+      }
+    };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }
+};
+
+// 处理触摸开始事件
+const handleTouchStart = (event) => {
+  // 只有触摸浮动面板本身时才启动拖拽
+  if (event.target === floatPanel.value || floatPanel.value.contains(event.target)) {
+    // 判断是否是面板自身，如果是才阻止默认行为
+    if (event.target === floatPanel.value) {
+      event.preventDefault();
+    }
+    
+    wasDragged.value = false;
+    
+    const touch = event.touches[0];
+    const startX = touch.clientX;
+    const startY = touch.clientY;
+    
+    // 计算点击位置与面板左上角的偏移
+    dragOffset.value = {
+      x: startX - panelPos.value.x,
+      y: startY - panelPos.value.y
+    };
+    
+    const handleTouchMove = (e) => {
+      e.preventDefault();
+      wasDragged.value = true;
+      
+      const touch = e.touches[0];
+      const newX = touch.clientX - dragOffset.value.x;
+      const newY = touch.clientY - dragOffset.value.y;
+      
+      // 应用约束
+      if (!props.fixedX) {
+        panelPos.value.x = Math.max(0, Math.min(newX, windowSize.value.width - panelSize.value.width));
+      }
+      
+      if (!props.fixedY) {
+        panelPos.value.y = Math.max(0, Math.min(newY, windowSize.value.height - panelSize.value.height));
+      }
+    };
+    
+    const handleTouchEnd = (e) => {
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      
+      if (wasDragged.value && props.snapEdge) {
+        snapToEdge();
+      }
+    };
+    
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd);
+  }
+};
+
+// 执行吸附
+const snapToEdge = () => {
+  const centerX = windowSize.value.width / 2;
+  const panelCenterX = panelPos.value.x + panelSize.value.width / 2;
+  
+  if (panelCenterX < centerX) {
+    panelPos.value.x = 0; // 吸附到左边
+    console.log('吸附到左边边缘');
+  } else {
+    panelPos.value.x = windowSize.value.width - panelSize.value.width; // 吸附到右边
+    console.log('吸附到右边边缘');
+  }
+};
+
+// 窗口大小变化处理
+const handleResize = () => {
+  const oldWidth = windowSize.value.width;
+  const oldHeight = windowSize.value.height;
+  
+  updateSizes();
+  
+  // 保持相对右边和底部的距离
+  if (props.position.right !== undefined) {
+    const rightDistance = oldWidth - (panelPos.value.x + panelSize.value.width);
+    panelPos.value.x = windowSize.value.width - rightDistance - panelSize.value.width;
+  }
+  
+  if (props.position.bottom !== undefined) {
+    const bottomDistance = oldHeight - (panelPos.value.y + panelSize.value.height);
+    panelPos.value.y = windowSize.value.height - bottomDistance - panelSize.value.height;
+  }
+  
+  // 确保不超出边界
+  panelPos.value.x = Math.max(0, Math.min(panelPos.value.x, windowSize.value.width - panelSize.value.width));
+  panelPos.value.y = Math.max(0, Math.min(panelPos.value.y, windowSize.value.height - panelSize.value.height));
+};
+
+onMounted(() => {
+  console.log('组件挂载, snapEdge =', props.snapEdge);
+  updateSizes();
+  initPosition();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+// 暴露方法
+defineExpose({
+  snapToEdge
+});
+</script>
+
+<style scoped>
+.float-panel {
+  position: fixed;
+  z-index: 1000;
+  cursor: move;
+  user-select: none;
+  touch-action: none;
+  transition: left 0.2s ease-out;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/itemDetail/index.vue b/app/components/itemDetail/index.vue
index eb55921..2dec729 100644
--- a/app/components/itemDetail/index.vue
+++ b/app/components/itemDetail/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { showImagePreview } from 'vant';
-
+import {authStore} from "@/stores/auth/index.js";
+const {userInfo}= authStore()
 import xImage from '@/components/x-image/index.vue'
 const props = defineProps({
   detailInfo: {
@@ -22,10 +23,52 @@ const filteredPriceRules = computed(() => {
     return props.detailInfo.priceRules.slice(0, emptyIndex)
   }
 })
+const position = ref({x: window?.innerWidth - 200 || 0, y: 240})
+const startPosition = ref({x: 0, y: 0})
+const isDragging = ref(false)
+
+const startDrag = (e) => {
+  isDragging.value = true
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY
+  startPosition.value = {
+    x: clientX - position.value.x,
+    y: clientY - position.value.y
+  }
+}
+
+const onDrag = (e) => {
+  if (isDragging.value) {
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY
+
+    const maxX = window.innerWidth - 108
+    const maxY = window.innerHeight - 137
+
+    const x = Math.min(Math.max(0, clientX - startPosition.value.x), maxX)
+    const y = Math.min(Math.max(0, clientY - startPosition.value.y), maxY)
+    position.value = {x, y}
+  }
+}
+const stopDrag = () => {
+  isDragging.value = false
+}
+onMounted(() => {
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchmove', onDrag)
+  document.addEventListener('touchend', stopDrag)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('touchend', stopDrag)
+})
 </script>
 
 <template>
-<div>
+<div class="relative">
   <div class="flex justify-center">
     <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
   </div>
@@ -55,18 +98,18 @@ const filteredPriceRules = computed(() => {
     <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]">{{$t('home.close_price')}}：</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=""/>
+      <xImage :src="detailInfo?.priceRuleImage+'?x-oss-process=image/resize,w_580,h_580/format,webp/quality,q_80'" 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 class="grow-1 text-center">{{ $t('detail.text11') }}</div>
+        <div class="grow-1 text-center">{{ $t('detail.text10') }}</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>
@@ -75,6 +118,27 @@ 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
+  v-if="userInfo.ID==detailInfo?.userId"
+        class="w-108px h-137px absolute cursor-move"
+        :style="{
+        left: position.x + 'px',
+        top: position.y + 'px'
+      }"
+        @mousedown="startDrag"
+        @touchstart.prevent="startDrag"
+    >
+      <img src="@/static/images/zd5530@2x.png" class="w-full h-full" alt="">
+      <div
+          class="flex flex-col items-center absolute bottom-25px text-14px text-#B58047 left-1/2 transform translate-x--1/2 whitespace-nowrap shrink-0">
+        <div>{{ $t('art_detail_page.prompt_title')}}</div>
+        <div>{{ $t('art_detail_page.prompt_desc')}}</div>
+      </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/artDetail/index.vue b/app/pages/artDetail/index.vue
index 7039a28..6bd2dff 100644
--- a/app/pages/artDetail/index.vue
+++ b/app/pages/artDetail/index.vue
@@ -15,41 +15,13 @@ const initData = async () => {
   const res = await userArtwork({uuid})
   if (res.status === 0) {
     detail.value = res.data
+    detail.value.auctionArtworkInfo.userId=detail.value.userID
     }
 }
 const router = useRouter();
-const position = ref({x: window?.innerWidth - 120 || 0, y: 240})
-const startPosition = ref({x: 0, y: 0})
-const isDragging = ref(false)
 
-const startDrag = (e) => {
-  isDragging.value = true
-  const clientX = e.touches ? e.touches[0].clientX : e.clientX
-  const clientY = e.touches ? e.touches[0].clientY : e.clientY
-  startPosition.value = {
-    x: clientX - position.value.x,
-    y: clientY - position.value.y
-  }
-}
-
-const onDrag = (e) => {
-  if (isDragging.value) {
-    const clientX = e.touches ? e.touches[0].clientX : e.clientX
-    const clientY = e.touches ? e.touches[0].clientY : e.clientY
-
-    const maxX = window.innerWidth - 108
-    const maxY = window.innerHeight - 137
-
-    const x = Math.min(Math.max(0, clientX - startPosition.value.x), maxX)
-    const y = Math.min(Math.max(0, clientY - startPosition.value.y), maxY)
-    position.value = {x, y}
-  }
-}
-const stopDrag = () => {
-  isDragging.value = false
-}
 const goPay=()=>{
-  payment.value.leftPrice=detail.value.leftPrice
+  payment.value.leftPrice=detail.value.leftCnyPrice
   payment.value.leftCurrency=detail.value.leftCurrency
   payment.value.buyUid=detail.value.uuid
   payment.value.auctionArtworkUuid=detail.value?.auctionArtworkUuid
@@ -60,18 +32,7 @@ const goPay=()=>{
   }
   //router.push('/payment')
 }
-onMounted(() => {
-  document.addEventListener('mousemove', onDrag)
-  document.addEventListener('mouseup', stopDrag)
-  document.addEventListener('touchmove', onDrag)
-  document.addEventListener('touchend', stopDrag)
-})
-onUnmounted(() => {
-  document.removeEventListener('mousemove', onDrag)
-  document.removeEventListener('mouseup', stopDrag)
-  document.removeEventListener('touchmove', onDrag)
-  document.removeEventListener('touchend', stopDrag)
-})
+
 function formatThousands(num) {
 
   return Number(num).toLocaleString();
@@ -87,22 +48,7 @@ initData()
         <span class="text-#fff text-14px">{{ $t('art_detail_page.button') }} {{detail.leftCurrency}}{{formatThousands(detail.leftPrice)}}</span>
       </van-button>
     </div>
-    <div
-        class="w-108px h-137px absolute cursor-move"
-        :style="{
-        left: position.x + 'px',
-        top: position.y + 'px'
-      }"
-        @mousedown="startDrag"
-        @touchstart.prevent="startDrag"
-    >
-      <img src="@/static/images/zd5530@2x.png" class="w-full h-full" alt="">
-      <div
-          class="flex flex-col items-center absolute bottom-25px text-14px text-#B58047 left-1/2 transform translate-x--1/2 whitespace-nowrap shrink-0">
-        <div>{{ $t('art_detail_page.prompt_title')}}</div>
-        <div>{{ $t('art_detail_page.prompt_desc')}}</div>
-      </div>
-    </div>
+  
   </div>
 </template>
 
diff --git a/app/pages/collectCode/login/index.vue b/app/pages/collectCode/login/index.vue
index d908856..e7b49fd 100644
--- a/app/pages/collectCode/login/index.vue
+++ b/app/pages/collectCode/login/index.vue
@@ -7,7 +7,7 @@ import {message} from '@/components/x-message/useMessage.js'
 // ... 现有导入 ...
 import FingerprintJS from '@fingerprintjs/fingerprintjs'
 import {checkPhone, mobileLogin, userSend} from "@/api-collect-code/auth/index.js";
-
+import countryCode from '@/pages/countryRegion/data/index.js'
 const {userInfo, codeToken, fingerprint} = codeAuthStore()
 const router = useRouter();
 const route = useRoute();
@@ -103,6 +103,40 @@ const showPassword = ref(false)
 const togglePasswordVisibility = () => {
   showPassword.value = !showPassword.value
 }
+const getDefaultCountry = () => {
+  let defaultCode = 'CN' // 默认中国大陆
+  switch (locale.value) {
+    case 'zh-CN':
+      defaultCode = 'CN'
+      break
+    case 'zh-TW':
+      defaultCode = 'TW'
+      break
+    case 'ja-JP':
+      defaultCode = 'JP'
+      break
+    case 'en-US':
+      defaultCode = 'US'
+      break
+  }
+
+  const country = countryCode.find(c => c.code === defaultCode)
+  return {
+    zone: country.zone,
+    name: locale.value === 'zh-CN' ? country.cn :
+      locale.value === 'zh-TW' ? country.tw :
+        locale.value === 'ja-JP' ? country.ja :
+          country.en
+  }
+}
+const defaultCountry = getDefaultCountry()
+
+const selectedCountry = ref('')
+
+// onMounted(()=>{
+//   selectedZone.value=route.query.zone || defaultCountry.zone
+//   selectedCountry.value=route.query.countryName || defaultCountry.name
+// })
 </script>
 
 <template>
diff --git a/app/pages/collectCode/mine/index.vue b/app/pages/collectCode/mine/index.vue
index 4398da2..c2b22ea 100644
--- a/app/pages/collectCode/mine/index.vue
+++ b/app/pages/collectCode/mine/index.vue
@@ -2,8 +2,7 @@
 import { userArtworks } from "@/api/goods/index.js";
 import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
 import { showImagePreview } from 'vant';
-
-
+import { useThrottleFn } from '@vueuse/core'
 import XImage from '@/components/x-image/index.vue'
 import {useRouter} from "#vue-router";
 import {goodStore} from "~/stores-collect-code/goods/index.js";
@@ -11,6 +10,7 @@ import {ref} from "vue";
 import {offlineQrcodeCreate, offlineQrcodeDelete, offlineQrcodeList} from "~/api-collect-code/goods/index.js";
 import codeCard from './components/codeCard/index.vue'
 import {message} from "~/components/x-message/useMessage.js";
+
 definePageMeta({
   layout: 'default',
   i18n: 'menu.profile',
@@ -40,7 +40,7 @@ const createForm=ref({
   lotNo:'',
   price:'',
 })
-const confirm=async ()=>{
+const confirm=useThrottleFn(async ()=>{
   if (!createForm.value.price){
     message.warning(t('collectCode.message.amountRequired'))
     return false
@@ -61,7 +61,7 @@ if (!is25Format(createForm.value.lotNo)){
     show.value=false
     onRefresh()
   }
-}
+},2000)
 const onRefresh = async () => {
   try {
     localState.value.refreshing = true
diff --git a/app/pages/collectCode/payment/index.vue b/app/pages/collectCode/payment/index.vue
index 7330b1a..4e5e180 100644
--- a/app/pages/collectCode/payment/index.vue
+++ b/app/pages/collectCode/payment/index.vue
@@ -51,8 +51,6 @@ const confirmPay = async () => {
         stripeKey:res.data.checkoutSessionUrl
       }
     })
-
-  
   }
 }
 
diff --git a/app/pages/collectCode/payment/result/index.vue b/app/pages/collectCode/payment/result/index.vue
index 04cc33e..451b330 100644
--- a/app/pages/collectCode/payment/result/index.vue
+++ b/app/pages/collectCode/payment/result/index.vue
@@ -1,44 +1,87 @@
 <script setup>
 import {orderQuery} from "~/api/goods/index.js";
+import { showLoadingToast, closeToast } from 'vant';
+
 definePageMeta({
   i18n: 'payment.text1',
 })
+
 const router = useRouter()
-const {t}=useI18n();
+const {t} = useI18n();
 const route = useRoute();
-const resData=ref({})
-const res=await orderQuery({
-  orderNo:route.query.orderNo
+const resData = ref({})
+let timer = null
+let startTime = Date.now()
+
+const queryOrder = async () => {
+  // 首先检查是否已经超过5秒
+  if (Date.now() - startTime > 5000) {
+    clearInterval(timer)
+    closeToast()
+    return
+  }
+
+  showLoadingToast({
+    message:t('common.loading'),
+    forbidClick: true,
+  });
+
+  try {
+    const res = await orderQuery({
+      orderNo: route.query.orderNo
+    })
+
+    if (res.status === 0) {
+      resData.value = res.data
+
+      // 只在支付成功时停止轮询
+      if (resData.value.status === 1) {
+        clearInterval(timer)
+        closeToast()
+      }
+    }
+  } catch (error) {
+    clearInterval(timer)
+    closeToast()
+  }
+}
+
+// 立即执行一次
+await queryOrder()
+
+// 开始轮询
+timer = setInterval(async () => {
+  await queryOrder()
+}, 1000)
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    closeToast()
+  }
 })
-if (res.status===0){
-  resData.value=res.data
-}
-const statusLabel={
-  1:t('payment.text2'),
-  2:t('payment.text3'),
-  3:t('payment.text4'),
-  4:t('payment.text5'),
-}
-const goHome=()=>{
-  router.push('/')
+
+const statusLabel = {
+  1: t('payment.text2'),
+  2: t('payment.text3'),
+  3: t('payment.text4'),
+  4: t('payment.text5'),
 }
+
 </script>
 
 <template>
-  <div class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
+  <div
+      class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
     <div class="flex flex-col items-center mt-150px">
-      <img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
-      <div class="text-#000 text-16px mb-25px">{{statusLabel[resData.status]}}!</div>
-      <div class="text-#999 text-16px">{{resData.currency}}{{resData.money}}</div>
+      <img v-if="resData.status===1" class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
+      <img v-else class="w-119px h-120px mb-36px" src="@/static/images/zu6021@2x.png" alt="">
+      <div class="text-#000 text-16px mb-25px">{{ statusLabel[resData.status] }}!</div>
+      <div class="text-#999 text-16px">{{ resData.currency }}{{ resData.money }}</div>
     </div>
-<!--    <div class="w-full mt-auto mb-40px">
-      <van-button type="primary" block @click="goHome">
-        回到首页
-      </van-button>
-    </div>-->
   </div>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/app/pages/collectCode/signature/panel/index.vue b/app/pages/collectCode/signature/panel/index.vue
index dabedac..592af72 100644
--- a/app/pages/collectCode/signature/panel/index.vue
+++ b/app/pages/collectCode/signature/panel/index.vue
@@ -4,8 +4,9 @@ import { showToast } from 'vant';
 import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
 import {signOffline} from "~/api/goods/index.js";
 import {useI18n} from "vue-i18n";
+import {showLoadingToast} from 'vant'
 const {t} = useI18n();
-const {formData,number}=codeAuthStore()
+const {formData,number,qrData}=codeAuthStore()
 const signaturePad = ref(null);
 definePageMeta({
   layout: ''
@@ -31,14 +32,29 @@ const clearSignature = () => {
 };
 
 const confirm=async ()=>{
-  const res=await signOffline({
-    userInfo:formData.value,
-    signOrder:Number(number.value),
-    signImgFileData:imgUrl.value,
+const toast=  showLoadingToast({
+    message:t('collectCode.signature.loading'),
+    forbidClick:true,
   })
+  try {
+    const res=await signOffline({
+      auctionArtworkUuid:qrData.value.auctionArtworkUuid,
+      userInfo:formData.value,
+      signOrder:Number(number.value),
+      signImgFileData:imgUrl.value,
+    })
+
   if (res.status===0){
-    router.push('/collectCode/signature/result')
+    if(Number(number.value)===1){
+      router.push('/collectCode/signature/result')
+    }else if(Number(number.value)===2){
+      router.push('/collectCode/payment')
+    }
+    toast.close() 
   }
+} catch (error) {
+  toast.close()
+}
 }
 </script>
 
diff --git a/app/pages/collectCode/signature/personal-Info/index.vue b/app/pages/collectCode/signature/personal-Info/index.vue
index 3983ce7..ccaa6dc 100644
--- a/app/pages/collectCode/signature/personal-Info/index.vue
+++ b/app/pages/collectCode/signature/personal-Info/index.vue
@@ -4,7 +4,9 @@ import XVanSelect from '@/components/x-van-select/index.vue'
 import XVanDate from '@/components/x-van-date/index.vue'
 import {codeAuthStore} from "@/stores-collect-code/auth/index.js";
 import {message} from "@/components/x-message/useMessage.js";
+import countryCode from '@/pages/countryRegion/data/index.js'
 import {fddInfo, offlineQrcode} from "~/api-collect-code/goods/index.js";
+import {sessionUserNo} from "@/api-collect-code/auth/index.js";
 import {signOffline} from "~/api/goods/index.js";
 const {formData,number,auctionArtworkUuid,qrUid,qrData}=codeAuthStore()
 definePageMeta({
@@ -12,7 +14,7 @@ definePageMeta({
   i18n: 'menu.profile',
 })
 
-const {t} = useI18n()
+const {t,locale} = useI18n()
 const router = useRouter()
 const route = useRoute()
 const columns = ref([
@@ -24,6 +26,33 @@ const columns1 = ref([
   {text: t('realAuth.passport'), value: 2},
   {text: t('realAuth.other'), value: 3},
 ])
+const getDefaultCountry = () => {
+  let defaultCode = 'CN' // 默认中国大陆
+  switch (locale.value) {
+    case 'zh-CN':
+      defaultCode = 'CN'
+      break
+    case 'zh-TW':
+      defaultCode = 'TW'
+      break
+    case 'ja-JP':
+      defaultCode = 'JP'
+      break
+    case 'en-US':
+      defaultCode = 'US'
+      break
+  }
+
+  const country = countryCode.find(c => c.code === defaultCode)
+  return {
+    zone: country.zone,
+    name: locale.value === 'zh-CN' ? country.cn :
+      locale.value === 'zh-TW' ? country.tw :
+        locale.value === 'ja-JP' ? country.ja :
+          country.en
+  }
+}
+
 const goCountryRegion=()=>{
   router.push({
     path:'/countryRegion'
@@ -64,11 +93,12 @@ const initData= async ()=>{
       router.replace('/collectCode/payment')
     }
   }
-
+  if(!formData.value.countryCode){
+    const defaultCountry = getDefaultCountry()
+    formData.value.countryCode= defaultCountry.zone
+  }
   if (route.query.zone){
     formData.value.countryCode=route.query.zone
-  }else {
-    formData.value.countryCode='86'
   }
 }
 const nextClick=async ()=>{
@@ -78,6 +108,15 @@ const nextClick=async ()=>{
       message.warning(t('signature.error.incompleteForm'))
       return
     }
+    const res2=await sessionUserNo({
+      phone:formData.value.phone
+    })
+    if (res2.status===0){
+          if(res2.data.exist){
+            message.warning(`您的号牌是${res2.data.userInfo.auction_user_no}`)
+            return
+          }
+    } 
     //国内签署要用法大大
     if (formData.value.countryCode==='86'&&formData.value.cardType===1){
       const res=await fddInfo({
@@ -110,6 +149,7 @@ const nextClick=async ()=>{
     router.push('/collectCode/signature/protocol')
   }
 }
+
 initData()
 </script>
 
@@ -140,7 +180,6 @@ initData()
         <van-field  :label="$t('realAuth.bankCard')" v-model="formData.bankNo" class="mb-10px" :placeholder="$t('realAuth.bankCardPlaceholder')"/>
         <x-van-select  v-model="formData.cardType" :label="$t('realAuth.idTye')" :columns="columns1"/>
         <van-field  :label="$t('realAuth.idCard')" v-model="formData.cardId" class="mb-10px" :placeholder="$t('realAuth.idCardPlaceholder')"/>
-        <x-van-select  v-model="formData.gender" :label="$t('realAuth.gender')" :columns="columns"/>
       </template>
     
     </div>
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..f4f478a 100644
--- a/app/pages/home/components/ItemList/index.vue
+++ b/app/pages/home/components/ItemList/index.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { ref } from 'vue'
-import { goodStore } from "@/stores/goods"
+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,
@@ -20,7 +21,7 @@ const localState = ref({
 // 加载更多
 const loadMore = async () => {
   pageRef.value.page++
-  const { finished } = await getArtworkList()
+  const {finished} = await getArtworkList()
   localState.value.finished = finished
 }
 
@@ -29,7 +30,7 @@ const onRefresh = async () => {
   try {
     localState.value.refreshing = true
     localState.value.finished = false
-    const { finished } = await getArtworkList(true)
+    const {finished} = await getArtworkList(true)
     localState.value.finished = finished
   } finally {
     localState.value.refreshing = false
@@ -40,26 +41,6 @@ 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>
@@ -70,7 +51,8 @@ const openShow = async (item) => {
         @refresh="onRefresh"
     >
       <template #success>
-        <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
+        <van-icon name="success"/>
+        <span>{{ $t('home.refresh_show') }}</span>
       </template>
       <van-list
           v-model:loading="storeLoading"
@@ -79,7 +61,7 @@ const openShow = async (item) => {
           @load="loadMore"
       >
         <div class="w-full flex gap-[16px]">
-          <WaterfallFlow :items="itemList"  :column-count="2">
+          <WaterfallFlow :items="itemList" :column-count="2">
             <template #default="{ item, index }">
               <div
                   @click="openShow(item)"
@@ -87,27 +69,29 @@ const openShow = async (item) => {
               >
                 <div class="relative w-full">
                   <img
-                      :src="item.artwork?.hdPic"
-                      class="w-full object-cover rounded-4px"
+                     :src="item.artwork?.hdPic + '?x-oss-process=image/resize,w_500,h_500/format,webp/quality,q_80'"
+                      class="w-full object-cover rounded-4px min-h-[200px]"
+      loading="lazy"
+
                   />
-                  <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 
+                      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{{ formatNumber(item.index) }}
+                    Lot{{ item.index+25000 }}
                   </div>
                 </div>
                 <div class="pt-[8px]">
                   <div class="text-[14px] text-[#000000] leading-[20px]">
-                    {{ item?.artwork?.name }} | {{item?.artwork?.artistName}}
+                    {{ item?.artwork?.name }} | {{ item?.artwork?.artistName }}
                   </div>
                   <div class="mt-[4px] text-[12px] text-[#575757]">
-                    {{ $t('home.start_price') }}：{{ item?.startPrice??0 }}
+                    {{ $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  }}
+                    {{ $t('home.close_price') }}：{{ item?.soldPrice ?? 0 }}
                   </div>
                 </div>
               </div>
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 3933b60..80fd206 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -3,9 +3,10 @@ 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} = goodStore();
+const {auctionDetail,getArtworkList,getAuctionDetail} = goodStore();
 const {fullLive} = liveStore()
 const changeLive = () => {
   if (!fullLive.value){
@@ -15,11 +16,10 @@ const changeLive = () => {
     }
   }
 }
-
-
+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']"/>
@@ -37,10 +37,13 @@ const changeLive = () => {
         </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>
@@ -52,6 +55,16 @@ const changeLive = () => {
   </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..fac0244 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/index.vue b/app/pages/liveRoom/components/SideButton/index.vue
index 06c1c34..7727baa 100644
--- a/app/pages/liveRoom/components/SideButton/index.vue
+++ b/app/pages/liveRoom/components/SideButton/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue"
+import { ref, computed } from "vue"
 import lockClosed from "@/static/images/lockdfd@2x.png"
 import lockOpen from "@/static/images/lock4@2x.png"
 import { liveStore } from "@/stores/live/index.js"
@@ -15,104 +15,6 @@ const { pageRef } = goodStore()
 const { userInfo ,payment} = authStore()
 const showTang = ref(false)
 const router = useRouter()
-// 拖动相关状态
-const isDragging = ref(false)
-const startX = ref(0)
-const startY = ref(0)
-const currentTop = ref(196)
-const currentLeft = ref(window.innerWidth - 60)
-const sidebarRef = ref(null)
-
-// 限制拖动范围
-const minTop = 0
-const maxTop = window.innerHeight - 180
-const minLeft = 0
-const maxLeft = window.innerWidth - 60
-
-// 吸附相关
-const snapThreshold = 30
-const snapPosition = () => {
-  const centerX = currentLeft.value + 30
-  if (centerX < window.innerWidth / 2) {
-    currentLeft.value = 0
-  } else {
-    currentLeft.value = window.innerWidth - 60
-  }
-}
-
-// 开始拖动
-const handleMouseDown = (e) => {
-  isDragging.value = true
-  startX.value = e.clientX - currentLeft.value
-  startY.value = e.clientY - currentTop.value
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
-}
-
-// 拖动中
-const handleMouseMove = (e) => {
-  if (!isDragging.value) return
-
-  let newTop = e.clientY - startY.value
-  let newLeft = e.clientX - startX.value
-
-  // 限制范围
-  newTop = Math.max(minTop, Math.min(newTop, maxTop))
-  newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft))
-
-  currentTop.value = newTop
-  currentLeft.value = newLeft
-
-  // 更新位置
-  if (sidebarRef.value) {
-    sidebarRef.value.style.top = `${newTop}px`
-    sidebarRef.value.style.left = `${newLeft}px`
-  }
-}
-
-// 结束拖动
-const handleMouseUp = () => {
-  isDragging.value = false
-  snapPosition()
-  if (sidebarRef.value) {
-    sidebarRef.value.style.left = `${currentLeft.value}px`
-  }
-  document.removeEventListener('mousemove', handleMouseMove)
-  document.removeEventListener('mouseup', handleMouseUp)
-}
-
-// 触摸事件处理
-const handleTouchStart = (e) => {
-  isDragging.value = true
-  startX.value = e.touches[0].clientX - currentLeft.value
-  startY.value = e.touches[0].clientY - currentTop.value
-}
-
-const handleTouchMove = (e) => {
-  if (!isDragging.value) return
-
-  let newTop = e.touches[0].clientY - startY.value
-  let newLeft = e.touches[0].clientX - startX.value
-
-  newTop = Math.max(minTop, Math.min(newTop, maxTop))
-  newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft))
-
-  currentTop.value = newTop
-  currentLeft.value = newLeft
-
-  if (sidebarRef.value) {
-    sidebarRef.value.style.top = `${newTop}px`
-    sidebarRef.value.style.left = `${newLeft}px`
-  }
-}
-
-const handleTouchEnd = () => {
-  isDragging.value = false
-  snapPosition()
-  if (sidebarRef.value) {
-    sidebarRef.value.style.left = `${currentLeft.value}px`
-  }
-}
 
 const captureVideoFrame = () => {
   try {
@@ -134,17 +36,6 @@ const captureVideoFrame = () => {
 }
 
 const handleCapture = () => {
-/*  const imageUrl = captureVideoFrame()
-  if (imageUrl) {
-    lastSnapshot.value=imageUrl
-
-/!*    showMinWindow(lastSnapshot.value,{
-      onClick:()=>{
-        router.replace('/')
-        fullLive.value=true
-        }
-    })*!/
-  }*/
   showMinWindow1({
     onClick:()=>{
       router.replace('/')
@@ -154,32 +45,18 @@ const handleCapture = () => {
   })
 }
 
-// 组件挂载时添加事件监听
-onMounted(() => {
-  if (sidebarRef.value) {
-    sidebarRef.value.style.top = `${currentTop.value}px`
-    sidebarRef.value.style.left = `${currentLeft.value}px`
-  }
-})
-
-// 组件卸载时清理事件监听
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', handleMouseMove)
-  document.removeEventListener('mouseup', handleMouseUp)
-})
-
 const openOne = () => {
   showTang.value = true
 }
 
 const paySide = computed(() => {
   //当前是否已成交
- return auctionData.value.needPayBuys?.length>0
+  return auctionData.value.needPayBuys?.length>0
 })
 
 const goPay = () => {
   payment.value.leftCurrency=auctionData.value.needPayBuys?.[0]?.leftCurrency
-  payment.value.leftPrice=auctionData.value.needPayBuys?.[0]?.leftPrice
+  payment.value.leftPrice=auctionData.value.needPayBuys?.[0]?.leftCnyPrice
   payment.value.buyUid=auctionData.value.needPayBuys?.[0]?.uuid
   payment.value.auctionArtworkUuid=auctionData.value.needPayBuys?.[0]?.auctionArtworkUuid
   handleCapture()
@@ -188,14 +65,7 @@ const goPay = () => {
 </script>
 
 <template>
-  <div
-      ref="sidebarRef"
-      class="bg-white w-60px rounded-4px overflow-hidden absolute z-999 cursor-move"
-      @mousedown="handleMouseDown"
-      @touchstart="handleTouchStart"
-      @touchmove="handleTouchMove"
-      @touchend="handleTouchEnd"
-  >
+  <div class="bg-white w-60px rounded-4px overflow-hidden">
     <!-- 拍品信息 -->
     <van-button
         class="w-60px !h-60px"
@@ -250,10 +120,4 @@ const goPay = () => {
 </template>
 
 <style scoped>
-.cursor-move {
-  cursor: move;
-  user-select: none;
-  touch-action: none;
-  transition: left 0.3s ease;
-}
 </style>
\ No newline at end of file
diff --git a/app/pages/liveRoom/components/SideButton/tangPopup.vue b/app/pages/liveRoom/components/SideButton/tangPopup.vue
index 873fff9..827aba0 100644
--- a/app/pages/liveRoom/components/SideButton/tangPopup.vue
+++ b/app/pages/liveRoom/components/SideButton/tangPopup.vue
@@ -7,6 +7,7 @@ import {liveStore} from "~/stores/live/index.js";
 import {ref} from "vue";
 const {pageRef,itemList,getArtworkList,  loading: storeLoading,} = goodStore();
 const {auctionData} = liveStore()
+const {t:$t} = useI18n()
 const showDetail=ref(false)
 const localState = ref({
   finished: false,
@@ -47,6 +48,7 @@ const scrollToCurrentItem = () => {
         top: scrollTop,
         behavior: 'smooth'
       })
+ 
     }
   }
 }
@@ -67,11 +69,26 @@ watch(()=>{
   return auctionData.value?.artwork?.index
 },(newValue)=>{
   })
-watch(()=>props.show,(newValue)=>{
+watch(()=>props.show,async (newValue)=>{
   if (newValue){
- nextTick(()=>{
-   scrollToCurrentItem()
- })
+    if(auctionData.value?.artwork?.index>itemList.value?.length+1){
+      pageRef.value.pageSize = 5;
+      const targetIndex = auctionData.value?.artwork?.index;
+      const currentLength = itemList.value?.length || 0;
+      const needLoadTimes = Math.ceil((targetIndex - currentLength) / pageRef.value.pageSize);
+      
+      for(let i = 0; i < needLoadTimes; i++) {
+        pageRef.value.page++;
+        await getArtworkList();
+      }
+      
+      await nextTick();
+      scrollToCurrentItem();
+    } else {
+      nextTick(()=>{
+        scrollToCurrentItem();
+      });
+    }
   }
 })
 </script>
@@ -112,11 +129,11 @@ watch(()=>props.show,(newValue)=>{
                 <xImage
                     :preview="false"
                     class="w-80px h-80px"
-                    :src="item.artwork?.hdPic"
+                    :src="item.artwork?.hdPic+'?x-oss-process=image/resize,w_280,h_280/format,webp/quality,q_80'"
                     :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 161761b..4a107b2 100644
--- a/app/pages/liveRoom/index.client.vue
+++ b/app/pages/liveRoom/index.client.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, onMounted, onBeforeUnmount, watch} from 'vue'
+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'
@@ -13,10 +13,12 @@ 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 {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive,wsClient} = liveStore()
 const pullLink = ref('')
 const handlePlayerError = (error) => {
   showConfirmDialog({
@@ -26,7 +28,6 @@ const handlePlayerError = (error) => {
     initializePlayer()
   }).catch(() => {
   })
- // player.value?.play()
 }
 const loading1=ref(false)
 const initializePlayer = async () => {
@@ -97,22 +98,30 @@ const initializePlayer = async () => {
 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
+  if (!newVal) {
+    wsClient.value?.disconnect()
+    return
+  }
 
   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)
@@ -120,8 +129,8 @@ 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'))
 }
@@ -131,22 +140,28 @@ const tipOpen = () => {
   <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>
+      <van-loading   type="spinner" >{{ t('liveRoom.loading') }}...</van-loading>
     </div>
     <transition name="fade">
       <div v-if="fullLive">
-        <sideButton class="absolute top-196px right-0 z-999"></sideButton>
+        <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  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nowPrice||0}}</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  class="min-w-50px">{{auctionData?.nowAuctionPrice?.nextPrice||0}}</div>
           </div>
-          <div v-if="quoteStatus&&auctionData?.nowAuctionPrice?.nowPrice!=='0'" class="mt-10px mb-10px">
+          
+          <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}`
@@ -168,7 +183,7 @@ const tipOpen = () => {
         <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-11px whitespace-nowrap">LOT{{ Number(auctionData.artwork.index+25000) }}</div>
           <div class="mr-10px truncate">{{ auctionData.artwork.name }}</div>
           <div class="whitespace-nowrap">{{ t('live_room.start') }}</div>
         </div>
@@ -179,6 +194,21 @@ const tipOpen = () => {
 
 
 <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;
diff --git a/app/pages/login/index.vue b/app/pages/login/index.vue
index e364535..29526bb 100644
--- a/app/pages/login/index.vue
+++ b/app/pages/login/index.vue
@@ -11,7 +11,7 @@ const router = useRouter();
 const route = useRoute();
 const { locale } = useI18n()
 definePageMeta({
-  keepalive: true,
+  name: 'login',
   i18n: 'login.title'
 })
 const loadingRef=ref({
@@ -72,18 +72,11 @@ const getDefaultCountry = () => {
 
 const defaultCountry = getDefaultCountry()
 
+const selectedCountry = ref('')
 
-const selectedCountry = ref(route.query.countryName || defaultCountry.name)
 onMounted(()=>{
   selectedZone.value=route.query.zone || defaultCountry.zone
-})
-// 监听语言变化，更新默认国家
-watch(locale, () => {
-  if (!route.query.zone) {
-    const newDefault = getDefaultCountry()
-    selectedZone.value = newDefault.zone
-    selectedCountry.value = newDefault.name
-  }
+  selectedCountry.value=route.query.countryName || defaultCountry.name
 })
 const vanSwipeRef=ref(null)
 const getCode =async () => {
diff --git a/app/pages/payment/index.vue b/app/pages/payment/index.vue
index 618afc4..4ab5dde 100644
--- a/app/pages/payment/index.vue
+++ b/app/pages/payment/index.vue
@@ -79,9 +79,9 @@ const handleInput = (e) => {
       <img class="w-126px h-126px" src="@/static/images/dddf34@2x.png" alt="">
     </div>
     <div class="text-#1A1A1A text-16px mb-25px font-bold">{{payStatus===0 ? t('payment.fullPayment') : t('payment.partialPayment')}}</div>
-    <div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">{{payment.leftCurrency}} {{payment?.leftPrice}}</div>
+    <div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">CNY {{payment?.leftPrice}}</div>
     <div class="mb-12px" v-else>
-      <input v-model="amount" class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" :placeholder="`${t('payment.placeholder.amount')}${payment.leftCurrency}${payment?.leftPrice}`"     @input="handleInput">
+      <input v-model="amount" class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" :placeholder="`${t('payment.placeholder.amount')}CNY${payment?.leftPrice}`"     @input="handleInput">
     </div>
     <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1 ? t('payment.fullPayment') : t('payment.partialPayment')}}</div>
     <div class="w-full mt-auto mb-40px">
diff --git a/app/pages/payment/result/index.vue b/app/pages/payment/result/index.vue
index db87be4..77ac0d8 100644
--- a/app/pages/payment/result/index.vue
+++ b/app/pages/payment/result/index.vue
@@ -22,7 +22,7 @@ const queryOrder = async () => {
   }
 
   showLoadingToast({
-    message: '加载中...',
+    message:t('common.loading'),
     forbidClick: true,
   });
 
@@ -78,7 +78,8 @@ const goHome = () => {
   <div
       class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
     <div class="flex flex-col items-center mt-150px">
-      <img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
+      <img v-if="resData.status===1" class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
+      <img v-else class="w-119px h-120px mb-36px" src="@/static/images/zu6021@2x.png" alt="">
       <div class="text-#000 text-16px mb-25px">{{ statusLabel[resData.status] }}!</div>
       <div class="text-#999 text-16px">{{ resData.currency }}{{ resData.money }}</div>
     </div>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 20cdfbd..b1a526b 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -47,7 +47,7 @@ const onRefresh = async () => {
 }
 
 const goPay = (item) => {
-  payment.value.leftPrice=item.leftPrice
+  payment.value.leftPrice=item.leftCnyPrice
   payment.value.leftCurrency=item.leftCurrency
   payment.value.buyUid=item.uuid
  payment.value.auctionArtworkUuid=item?.auctionArtworkUuid
@@ -137,7 +137,7 @@ fetchData()
                     <div>
                       <div class="text-#575757 text-14px line-height-none mb-5px">
                         {{ $t('home.start_price') }}：{{item.auctionArtworkInfo?.startPriceCurrency}} {{item.auctionArtworkInfo?.startPrice}}
-                      </div>
+                      </div> 
                       <div class="text-#B58047 text-14px line-height-none">
                         {{ $t('home.close_price') }}：{{item.baseCurrency}} {{item.baseMoney}}
                       </div>
diff --git a/app/pages/realAuth/index.vue b/app/pages/realAuth/index.vue
index 6e945f0..a9bb161 100644
--- a/app/pages/realAuth/index.vue
+++ b/app/pages/realAuth/index.vue
@@ -18,7 +18,6 @@ const {userInfo,selectedZone}= authStore()
 const active=ref(locale.value==='zh-CN'?0:1)
 const { t } = useI18n()
 const columns1 = ref([
-  {text: t('realAuth.idCard'), value: '1'},
   {text: t('realAuth.passport'), value: '2'},
   {text: t('realAuth.other'), value: '3'},
 ])
diff --git a/app/pages/signature/panel/index.vue b/app/pages/signature/panel/index.vue
index b833eb7..45db0ef 100644
--- a/app/pages/signature/panel/index.vue
+++ b/app/pages/signature/panel/index.vue
@@ -23,7 +23,7 @@ const submitSignature = () => {
     return;
   }
   toast.value=showLoadingToast({
-    message: '加载中...',
+    message: $t('common.loading'),
     forbidClick: true,
   });
   const { data } = signaturePad.value?.saveSignature(); // 返回 base64 格式的图片数据
diff --git a/app/pages/signature/protocol/index.vue b/app/pages/signature/protocol/index.vue
index b95a797..718c49a 100644
--- a/app/pages/signature/protocol/index.vue
+++ b/app/pages/signature/protocol/index.vue
@@ -1,9 +1,10 @@
 <script setup>
 import pdfView from './pdfView'
 import { contractView } from "~/api/goods/index.js"
+import { signOnline } from "~/api/goods/index.js"
 import { authStore } from "~/stores/auth/index.js"
 import {useI18n} from "vue-i18n";
-
+import { useThrottleFn } from '@vueuse/core'
 definePageMeta({
   layout: 'default',
   i18n: 'signature.protocol.title'
@@ -45,14 +46,32 @@ const handleCollapseChange = (name) => {
   }
 }
 
-const goSignature = () => {
-  router.push({
-    path: '/signature/panel'
+const goSignature =useThrottleFn(async () => {
+  if(userInfo.value.userExtend.isMainland===1){
+    const res = await signOnline({
+    auctionArtworkUuid:payment.value.auctionArtworkUuid
   })
-}
+  if (res.status===0){
+    if(res.data.signType==='fdd'){
+      window.location.href = res.data.fddVerifyUrl
+    }else{
+      router.push({
+        path: '/signature/panel'
+      })
+    }
+  
+  }
+  }else if(userInfo.value.userExtend.isMainland===0){
+    router.push({
+      path: '/signature/panel'
+    })
+  }
+
+},2000) 
 </script>
 
 <template>
+
   <div class="bg-#EBEBEB h-screen-nav flex flex-col">
     <div class="h-50px text-14px text-#191919 bg-#fff flex items-center px-21px mb-6px shrink-0">
       {{ $t('signature.tips.prePayment') }}
diff --git a/app/static/images/zu6021@2x.png b/app/static/images/zu6021@2x.png
new file mode 100644
index 0000000..b08348d
Binary files /dev/null and b/app/static/images/zu6021@2x.png differ
diff --git a/app/stores/live/index.js b/app/stores/live/index.js
index 6ecab95..adab290 100644
--- a/app/stores/live/index.js
+++ b/app/stores/live/index.js
@@ -149,13 +149,13 @@ export const liveStore = createGlobalState(() => {
             ...extraStyle
         }
     })
-
+    const wsClient=ref(null)
     const getSocketData = async () => {
-        const wsClient = new WebSocketClient(
+        wsClient.value = new WebSocketClient(
             config.public.NUXT_PUBLIC_SOCKET_URL,
             token.value
         )
-        const ws = wsClient.connect('/api/v1/m/auction/live', {
+        const ws = wsClient.value.connect('/api/v1/m/auction/live', {
             auctionUuid: auctionDetail.value.uuid,
         })
 
@@ -248,7 +248,7 @@ export const liveStore = createGlobalState(() => {
         }
         }
     return{
-        decryptUtils,
+        wsClient,
         fullLive,
         isMinWindow,
         lastSnapshot,
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index f4f4173..c0ec6f9 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -173,7 +173,9 @@
     "text5": "Artwork Introduction",
     "text6": "Starting Price",
     "text7": "Bid History",
-    "text8": "Lot Details"
+    "text8": "Lot Details",
+    "text10": "Call amount",
+    "text11": "Serial number"
   },
   "art_detail_page": {
     "button": "Proceed to payment",
@@ -184,7 +186,7 @@
     "tab1": "Lots List",
     "tab2": "Auction Instructions",
     "lot_detail": "Lot Details",
-    "refresh_show": "Refresh successful",
+    "refresh_show": "Refresh successfully",
     "finished_text": "No more data",
     "start_price": "Starting Price",
     "close_price": "Hammer Price",
@@ -314,7 +316,7 @@
     }
   },
   "liveRoom": {
-    "loading": "Live stream loading...",
+    "loading": "Live broadcast loading...",
     "error": {
       "player": "Player error:",
       "init": "Player initialization failed:",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 228837a..a316c82 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -173,7 +173,9 @@
     "text5": "作品説明",
     "text6": "開始価格",
     "text7": "入札履歴",
-    "text8": "商品詳細"
+    "text8": "商品詳細",
+    "text10": "呼び出し金額",
+    "text11": "シリアルナンバー"
   },
   "art_detail_page": {
     "button": "支払う",
@@ -184,7 +186,7 @@
     "tab1": "商品一覧",
     "tab2": "オークション説明",
     "lot_detail": "商品詳細",
-    "refresh_show": "更新成功",
+    "refresh_show": "正常にリフレッシュします",
     "finished_text": "これ以上ありません",
     "start_price": "開始価格",
     "close_price": "落札価格",
@@ -314,7 +316,7 @@
     }
   },
   "liveRoom": {
-    "loading": "ライブストリーム読み込み中...",
+    "loading": "ライブブロードキャストの読み込み...",
     "error": {
       "player": "プレーヤーエラー:",
       "init": "プレーヤーの初期化に失敗しました:",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 50d0bb0..376c725 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -173,7 +173,10 @@
     "text5": "画作简介",
     "text6": "起拍价",
     "text7": "竞价表",
-    "text8": "拍卖品详情"
+    "text8": "拍卖品详情",
+    "text9": "固定跳价",
+    "text10": "叫价金额",
+    "text11": "序号"
   },
   "art_detail_page": {
     "button": "去支付",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index bf34b19..5e9694f 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -224,7 +224,9 @@
     "text5": "畫作簡介",
     "text6": "起拍價",
     "text7": "競價表",
-    "text8": "拍賣品詳情"
+    "text8": "拍賣品詳情",
+    "text10": "叫價金額",
+    "text11": "序號"
   },
   "art_detail_page": {
     "button": "去支付",
diff --git a/nuxt.config.js b/nuxt.config.js
index 15b784d..007d0c4 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -133,7 +133,9 @@ export default defineNuxtConfig({
     vscode: {
       // 配置为 cursor 编辑器
       editor: 'cursor'
-    }
+    },
+
+    enabled: true
   },
 
   typescript: {
@@ -151,8 +153,8 @@ export default defineNuxtConfig({
   // 指定 Nuxt 应用程序的兼容性日期，确保应用程序在未来的 Nuxt 版本中保持稳定性
   compatibilityDate: '2025-02-28',
   devServer: {
-    // https: httpsOptions,
+  // https: httpsOptions,
     host: '0.0.0.0',
     port: 3000,
   },
-})
\ No newline at end of file
+})
diff --git a/package.json b/package.json
index 7d53dc9..b0a46f5 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@nuxtjs/i18n": "^9.1.1",
     "@vue-office/pdf": "^2.0.10",
+    "@vueuse/components": "^12.8.2",
     "@vueuse/core": "^12.4.0",
     "aliyun-aliplayer": "^2.28.5",
     "axios": "^1.7.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 634949f..ea90507 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@vue-office/pdf':
         specifier: ^2.0.10
         version: 2.0.10(vue-demi@0.14.10(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      '@vueuse/components':
+        specifier: ^12.8.2
+        version: 12.8.2(typescript@5.7.3)
       '@vueuse/core':
         specifier: ^12.4.0
         version: 12.6.1(typescript@5.7.3)
@@ -1378,6 +1381,9 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
@@ -1617,15 +1623,27 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vueuse/components@12.8.2':
+    resolution: {integrity: sha512-Nj27u1KsDWzoTthlChzVndJ9g0sW5APCXO3EJkSxlG11nN/ANTUlPPeoJOFvtbdDRnvsMJalboJyE0rRyg7yNg==}
+
   '@vueuse/core@12.6.1':
     resolution: {integrity: sha512-FpgM1tXGAHsAC5n4Tflyg0vSoJUmdevfKaAhKFdxiK9BTIdHOHOiWmo+xivwdzjYFIvI8cEeJWYuqs646jOM2w==}
 
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
   '@vueuse/metadata@12.6.1':
     resolution: {integrity: sha512-2094HNXGdsU3aqRbad0vmlRgGncMC4u2f6nFdW1mUn7b7ym4hORrDZfyeq8G5BfGvX4y0zZynWfCdtB2WwpyVw==}
 
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
   '@vueuse/shared@12.6.1':
     resolution: {integrity: sha512-ukTb2na19KT1/YVjj4CYBDOgiV/xmsSJRL6TcKeiz2db+P5bT3I0OJxy38eRR3WSN8CmSnt7MdVJ16vX6VZFxg==}
 
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -6016,6 +6034,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@types/yauzl@2.10.3':
     dependencies:
       '@types/node': 22.13.4
@@ -6449,6 +6469,14 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@vueuse/components@12.8.2(typescript@5.7.3)':
+    dependencies:
+      '@vueuse/core': 12.8.2(typescript@5.7.3)
+      '@vueuse/shared': 12.8.2(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/core@12.6.1(typescript@5.7.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -6458,14 +6486,31 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/core@12.8.2(typescript@5.7.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/metadata@12.6.1': {}
 
+  '@vueuse/metadata@12.8.2': {}
+
   '@vueuse/shared@12.6.1(typescript@5.7.3)':
     dependencies:
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - typescript
 
+  '@vueuse/shared@12.8.2(typescript@5.7.3)':
+    dependencies:
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
diff --git a/public/favicon.ico b/public/favicon.ico
index 18993ad..5b8675a 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ