liveh5-nuxt/app/pages/home/index.vue

<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 {artworkList} from "~/api/goods/index.js";
const {fullLive,getAuctionDetail,auctionDetail,itemList,pageRef,liveRef} = goodStore();
definePageMeta({
  layout: 'default',
  i18n: 'menu.home',
})
const changeLive = () => {
  fullLive.value = true;
};
const initData=async ()=>{
  await getAuctionDetail()
 const res= await artworkList({auctionUuid: auctionDetail.value.uuid,...pageRef.value})
  if (res.status===0){
    itemList.value=res.data.data
    pageRef.value.itemCount=res.data.count
  }
}
initData()
</script>

<template>
  <div class="flex-grow-1">
    <client-only>
      <LiveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef" :fullLive="fullLive"/>
    </client-only>
    <transition name="fade">
      <div v-show="!fullLive" class="bg-#fff">
        <van-tabs sticky animated>
          <van-tab title="拍品列表">
            <ItemList></ItemList>
          </van-tab>
          <van-tab title="拍卖说明">
            <Cescribe></Cescribe>
          </van-tab>
        </van-tabs>
        <van-back-top right="15vw" bottom="10vh"/>
      </div>
    </transition>
  </div>
</template>
<style>
:root:root {
  --van-action-sheet-header-height: 39px;
}
</style>
<style scoped lang="scss">
: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.5s ease, transform 0.5s ease;
}

.changeLive.collapsed {
  height: 188px;
}

.changeLive.expanded {
  position: absolute;
  z-index: 10;
  height: calc(100vh - var(--van-nav-bar-height));
}
</style>