diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b32c3b0..2fcbd57 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,7 +2,7 @@
<main class="flex flex-col min-h-svh">
<AppHeader class="h-[var(--van-nav-bar-height)]" />
- <div class="flex-1 pb-[var(--van-nav-bar-height)]">
+ <div class="flex-1 flex flex-col">
<slot />
</div>
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index fb1df44..584055e 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,14 +1,15 @@
<script setup>
import liveBroadcast from '@/components/liveBroadcast/index.vue'
-import { useRect } from '@vant/use';
+import {useRect} from '@vant/use';
import itemDetail from '@/components/itemDetail/index.vue'
+
definePageMeta({
layout: 'default',
title: '主页',
i18n: 'menu.home',
})
-const liveRef=ref(null)
+const liveRef = ref(null)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
@@ -78,123 +79,130 @@ function onRefresh() {
refreshing.value = true
loadData()
}
+
const leftColumn = computed(() => {
return list.value.filter((_, index) => index % 2 === 0)
})
const rightColumn = computed(() => {
return list.value.filter((_, index) => index % 2 === 1)
})
-const show=ref(false)
-const showHeight=ref('')
-const openShow=()=>{
+const show = ref(false)
+const showHeight = ref('')
+const openShow = () => {
const rect = useRect(liveRef.value.$el);
- showHeight.value=rect.height
- nextTick(()=>{
- show.value=true
+ showHeight.value = rect.height
+ nextTick(() => {
+ show.value = true
})
}
</script>
<template>
- <liveBroadcast ref="liveRef" />
- <van-tabs sticky animated>
- <van-tab title="拍品列表">
- <div class="px-[16px] pt-[16px]">
- <van-pull-refresh>
- <van-list
- v-model:loading="loading"
- :finished="finished"
- finished-text="没有更多了"
- @load="loadData"
- >
- <div class="w-full flex gap-[16px]">
- <div class="flex flex-1 flex-col gap-[16px]">
- <div
- v-for="(item, index) in leftColumn"
- :key="index"
- class="w-full"
- @click="openShow"
- >
- <div class="relative w-full">
- <van-image
- :src="item.image"
- :style="{ aspectRatio: item.ratio }"
- fit="cover"
- class="w-full"
- />
- <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
- LOT{{ index * 2 + 1 }}
+ <div class="bg-#fff flex-grow-1">
+ <liveBroadcast ref="liveRef"/>
+ <van-tabs sticky animated>
+ <van-tab title="拍品列表">
+ <div class="px-[16px] pt-[16px]">
+ <van-pull-refresh>
+ <van-list
+ v-model:loading="loading"
+ :finished="finished"
+ finished-text="没有更多了"
+ @load="loadData"
+ >
+ <div class="w-full flex gap-[16px]">
+ <div class="flex flex-1 flex-col gap-[16px]">
+ <div
+ v-for="(item, index) in leftColumn"
+ :key="index"
+ class="w-full"
+ @click="openShow"
+ >
+ <div class="relative w-full">
+ <van-image
+ :src="item.image"
+ :style="{ aspectRatio: item.ratio }"
+ fit="cover"
+ class="w-full"
+ />
+ <div
+ class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+ LOT{{ index * 2 + 1 }}
+ </div>
+ </div>
+ <div class="pt-[8px]">
+ <div class="text-[14px] text-[#000000] leading-[20px]">
+ {{ item.title }}
+ </div>
+ <div class="mt-[4px] text-[12px] text-[#575757]">
+ 起拍价：{{ item.startingPrice }}
+ </div>
+ <div
+ v-if="item.transactionPrice"
+ class="mt-[4px] text-[12px] text-[#b58047]"
+ >
+ 成交价：{{ item.transactionPrice }}
+ </div>
</div>
</div>
- <div class="pt-[8px]">
- <div class="text-[14px] text-[#000000] leading-[20px]">
- {{ item.title }}
+ </div>
+ <div class="flex flex-1 flex-col gap-[16px]">
+ <div
+ v-for="(item, index) in rightColumn"
+ :key="index"
+ class="w-full"
+ @click="openShow"
+ >
+ <div class="relative w-full">
+ <van-image
+ :src="item.image"
+ :style="{ aspectRatio: item.ratio }"
+ fit="cover"
+ class="w-full"
+ />
+ <div
+ class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+ LOT{{ index * 2 + 2 }}
+ </div>
</div>
- <div class="mt-[4px] text-[12px] text-[#575757]">
- 起拍价：{{ item.startingPrice }}
- </div>
- <div
- v-if="item.transactionPrice"
- class="mt-[4px] text-[12px] text-[#b58047]"
- >
- 成交价：{{ item.transactionPrice }}
+ <div class="pt-[8px]">
+ <div class="text-[14px] text-[#000000] leading-[20px]">
+ {{ item.title }}
+ </div>
+ <div class="mt-[4px] text-[12px] text-[#575757]">
+ 起拍价：{{ item.startingPrice }}
+ </div>
+ <div
+ v-if="item.transactionPrice"
+ class="mt-[4px] text-[12px] text-[#b58047]"
+ >
+ 成交价：{{ item.transactionPrice }}
+ </div>
</div>
</div>
</div>
</div>
- <div class="flex flex-1 flex-col gap-[16px]">
- <div
- v-for="(item, index) in rightColumn"
- :key="index"
- class="w-full"
- @click="openShow"
- >
- <div class="relative w-full">
- <van-image
- :src="item.image"
- :style="{ aspectRatio: item.ratio }"
- fit="cover"
- class="w-full"
- />
- <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
- LOT{{ index * 2 + 2 }}
- </div>
- </div>
- <div class="pt-[8px]">
- <div class="text-[14px] text-[#000000] leading-[20px]">
- {{ item.title }}
- </div>
- <div class="mt-[4px] text-[12px] text-[#575757]">
- 起拍价：{{ item.startingPrice }}
- </div>
- <div
- v-if="item.transactionPrice"
- class="mt-[4px] text-[12px] text-[#b58047]"
- >
- 成交价：{{ item.transactionPrice }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </van-list>
- </van-pull-refresh>
+ </van-list>
+ </van-pull-refresh>
+ </div>
+ </van-tab>
+ <van-tab title="拍卖说明">
+ <div class="px-16px pt-14px">
+ <div class="text-#575757 text-14px">
+ 这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
+ </div>
+ <div></div>
+ </div>
+ </van-tab>
+ </van-tabs>
+ <van-back-top right="15vw" bottom="10vh"/>
+ <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
+ <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
+ <itemDetail></itemDetail>
</div>
- </van-tab>
- <van-tab title="拍卖说明">
- <div class="px-16px pt-14px">
- <div class="text-#575757 text-14px">这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空</div>
- <div></div>
- </div>
- </van-tab>
- </van-tabs>
- <van-back-top right="15vw" bottom="10vh"/>
- <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
- <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
- <itemDetail></itemDetail>
- </div>
- </van-action-sheet>
+ </van-action-sheet>
+ </div>
</template>
<style>
:root:root {
@@ -202,11 +210,12 @@ const openShow=()=>{
}
</style>
<style scoped lang="scss">
-:deep(.van-swipe__indicator){
+:deep(.van-swipe__indicator) {
width: 8px;
height: 8px;
}
-:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ){
- background:rgba(0,0,0,0.8);
+
+:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) {
+ background: rgba(0, 0, 0, 0.8);
}
</style>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 9921b64..b182617 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -7,7 +7,7 @@ definePageMeta({
</script>
<template>
- <div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px">
+ <div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col">
<div class="flex items-center px-16px mb-43px">
<div class="mr-23px">
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
@@ -17,9 +17,9 @@ definePageMeta({
<div class="text-#575757 text-14px">15834362333</div>
</div>
</div>
- <div>
+ <div class="flex-grow-1">
<div class="border-b-1px border-b-#D3D3D3 px-16px flex">
- <div class="text-#000 text-16px border-b-2 border-b-#2B53AC h-36px">我的拍品</div>
+ <div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">我的拍品</div>
</div>
<van-pull-refresh>
<van-list