liveh5-nuxt/app/pages/home/index.vue
xingyy aec3825a3b feat(component): 优化消息组件并添加新功能
- 重构 x-message 组件,支持更多自定义选项
- 添加 artDetail 页面用于展示艺术品详情
- 修改 liveRoom 页面,接入新的消息提示功能- 优化 profile 页面布局,增加去支付按钮
- 调整 home 页面,集成新的消息系统
- 修改 websocket 插件,支持携带 token 认证
2025-02-08 10:06:21 +08:00

74 lines
1.7 KiB
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 {message} from '@/components/x-message/useMessage.js'
const {fullLive,getAuctionDetail,auctionDetail} = goodStore();
const changeLive = () => {
fullLive.value = true;
};
if (!auctionDetail.value.uuid){
await getAuctionDetail()
}
</script>
<template>
<div class="flex-grow-1">
<client-only>
<liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"
:fullLive="fullLive"/>
</client-only>
<div v-if="!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>
</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>