liveh5-nuxt/app/pages/liveRoom/components/SideButton/tangPopup.vue

<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'
const {pageRef,itemList} = goodStore();
const showDetail=ref(false)
const props = defineProps({
  show: Boolean,
  title: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:show'])

const close = () => emit('update:show', false);
const openShow=()=>{
  showDetail.value=true
}
</script>

<template>
  <x-popup :show="show" @update:show="close">
    <template #title>
      <div class="text-#000 text-16px">拍品列表</div>
      <div class="text-#939393 text-16px ml-14px">共{{ pageRef.itemCount }}个拍品</div>
    </template>
    <div>
      <div
          v-for="(item,index) of itemList"
          :key="item.uuid"
          class="flex mb-21px"
          @click="openShow"
      >
        <div
            class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
        >
          <xImage
              :preview="false"
              class="w-80px h-80px"
              :src="item.artwork?.hdPic"
              :alt="item?.artworkTitle"
              loading="lazy"
          />
        </div>
        <div>
          <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
            {{ item.artworkTitle }}
          </div>
          <div class="text-14px text-#575757">起拍价：RMB 1,000</div>
          <div class="text-14px text-#B58047">成交价：等待更新</div>
        </div>
      </div>
    </div>
  </x-popup>
  <DetailPopup v-model:show="showDetail"></DetailPopup>
</template>

<style scoped>
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>