135 lines
4.4 KiB
Vue
135 lines
4.4 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 {artworkList} from "~/api/goods/index.js";
|
||
import {ref} from "vue";
|
||
|
||
const {fullLive, getAuctionDetail, auctionDetail, itemList, pageRef, liveRef} = goodStore();
|
||
definePageMeta({
|
||
layout: 'default',
|
||
i18n: 'menu.home',
|
||
})
|
||
const changeLive = () => {
|
||
fullLive.value = true;
|
||
};
|
||
const showBottom = ref(true)
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex-grow-1">
|
||
<client-only>
|
||
<LiveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef"
|
||
:fullLive="fullLive"/>
|
||
</client-only>
|
||
<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>
|
||
<van-popup
|
||
v-model:show="showBottom"
|
||
position="bottom"
|
||
:style="{ height: '74%' }"
|
||
>
|
||
<div class="flex flex-col">
|
||
<div class="h-40px flex items-center pl-16px pr-19px border-b-1px border-b-[#D3D3D3]">
|
||
<div class="text-#000 text-16px">拍品列表</div>
|
||
<div class="text-#939393 text-16px ml-14px">共188个拍品</div>
|
||
<div class="ml-auto flex items-center">
|
||
<van-icon size="20" name="cross" color="#939393"/>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 px-16px py-18px">
|
||
<div>
|
||
<div class="flex mb-21px">
|
||
<div class="mr-10px flex-shrink-0">
|
||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||
</div>
|
||
<div>
|
||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰</div>
|
||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mb-21px">
|
||
<div class="mr-10px flex-shrink-0">
|
||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||
</div>
|
||
<div>
|
||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰</div>
|
||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mb-21px">
|
||
<div class="mr-10px flex-shrink-0">
|
||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||
</div>
|
||
<div>
|
||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作</div>
|
||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
<style>
|
||
:root:root {
|
||
--van-action-sheet-header-height: 39px;
|
||
}
|
||
</style>
|
||
<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.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> |