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 {liveStore} from "~/stores/live/index.js";
const {getAuctionDetail, auctionDetail,getArtworkList} = 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>