refactor(layouts): 优化默认布局结构
- 调整 default.vue 中的主容器样式，使其更加灵活 - 在 home/index.vue 和 profile/index.vue 中应用 flex 布局，提高页面结构的适应性 - 优化代码格式和缩进，提高可读性
This commit is contained in:
xingyy
parent
873fb1aa32
commit
c32a64456e
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user