scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layouts): 优化默认布局结构

Browse Source 
- 调整 default.vue 中的主容器样式，使其更加灵活
- 在 home/index.vue 和 profile/index.vue 中应用 flex 布局，提高页面结构的适应性
- 优化代码格式和缩进，提高可读性
This commit is contained in:
xingyy 2025-01-13 11:12:11 +08:00
parent 873fb1aa32
commit c32a64456e
3 changed files with 114 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layouts/default.vue
View File

@ -2,7 +2,7 @@
<main class="flex flex-col min-h-svh"> <main class="flex flex-col min-h-svh">
<AppHeader class="h-[var(--van-nav-bar-height)]" /> <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 /> <slot />
</div> </div>

211
app/pages/home/index.vue
View File

@ -1,14 +1,15 @@
<script setup> <script setup>
import liveBroadcast from '@/components/liveBroadcast/index.vue' import liveBroadcast from '@/components/liveBroadcast/index.vue'
import { useRect } from '@vant/use'; import {useRect} from '@vant/use';
import itemDetail from '@/components/itemDetail/index.vue' import itemDetail from '@/components/itemDetail/index.vue'
definePageMeta({ definePageMeta({
layout: 'default', layout: 'default',
title: '主页', title: '主页',
i18n: 'menu.home', i18n: 'menu.home',
}) })
const liveRef=ref(null) const liveRef = ref(null)
const loading = ref(false) const loading = ref(false)
const finished = ref(false) const finished = ref(false)
const refreshing = ref(false) const refreshing = ref(false)
@ -78,123 +79,130 @@ function onRefresh() {
refreshing.value = true refreshing.value = true
loadData() loadData()
} }
const leftColumn = computed(() => { const leftColumn = computed(() => {
return list.value.filter((_, index) => index % 2 === 0) return list.value.filter((_, index) => index % 2 === 0)
}) })
const rightColumn = computed(() => { const rightColumn = computed(() => {
return list.value.filter((_, index) => index % 2 === 1) return list.value.filter((_, index) => index % 2 === 1)
}) })
const show=ref(false) const show = ref(false)
const showHeight=ref('') const showHeight = ref('')
const openShow=()=>{ const openShow = () => {
const rect = useRect(liveRef.value.$el); const rect = useRect(liveRef.value.$el);
showHeight.value=rect.height showHeight.value = rect.height
nextTick(()=>{ nextTick(() => {
show.value=true show.value = true
}) })
} }
</script> </script>
<template> <template>
<liveBroadcast ref="liveRef" /> <div class="bg-#fff flex-grow-1">
<van-tabs sticky animated> <liveBroadcast ref="liveRef"/>
<van-tab title="拍品列表"> <van-tabs sticky animated>
<div class="px-[16px] pt-[16px]"> <van-tab title="拍品列表">
<van-pull-refresh> <div class="px-[16px] pt-[16px]">
<van-list <van-pull-refresh>
v-model:loading="loading" <van-list
:finished="finished" v-model:loading="loading"
finished-text="没有更多了" :finished="finished"
@load="loadData" finished-text="没有更多了"
> @load="loadData"
<div class="w-full flex gap-[16px]"> >
<div class="flex flex-1 flex-col gap-[16px]"> <div class="w-full flex gap-[16px]">
<div <div class="flex flex-1 flex-col gap-[16px]">
v-for="(item, index) in leftColumn" <div
:key="index" v-for="(item, index) in leftColumn"
class="w-full" :key="index"
@click="openShow" class="w-full"
> @click="openShow"
<div class="relative w-full"> >
<van-image <div class="relative w-full">
:src="item.image" <van-image
:style="{ aspectRatio: item.ratio }" :src="item.image"
fit="cover" :style="{ aspectRatio: item.ratio }"
class="w-full" 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="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> </div>
<div class="pt-[8px]"> </div>
<div class="text-[14px] text-[#000000] leading-[20px]"> <div class="flex flex-1 flex-col gap-[16px]">
{{ item.title }} <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>
<div class="mt-[4px] text-[12px] text-[#575757]"> <div class="pt-[8px]">
起拍价：{{ item.startingPrice }} <div class="text-[14px] text-[#000000] leading-[20px]">
</div> {{ item.title }}
<div </div>
v-if="item.transactionPrice" <div class="mt-[4px] text-[12px] text-[#575757]">
class="mt-[4px] text-[12px] text-[#b58047]" 起拍价：{{ item.startingPrice }}
> </div>
成交价：{{ item.transactionPrice }} <div
v-if="item.transactionPrice"
class="mt-[4px] text-[12px] text-[#b58047]"
>
成交价：{{ item.transactionPrice }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-1 flex-col gap-[16px]"> </van-list>
<div </van-pull-refresh>
v-for="(item, index) in rightColumn" </div>
:key="index" </van-tab>
class="w-full" <van-tab title="拍卖说明">
@click="openShow" <div class="px-16px pt-14px">
> <div class="text-#575757 text-14px">
<div class="relative w-full"> 这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
<van-image </div>
:src="item.image" <div></div>
:style="{ aspectRatio: item.ratio }" </div>
fit="cover" </van-tab>
class="w-full" </van-tabs>
/> <van-back-top right="15vw" bottom="10vh"/>
<div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"> <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
LOT{{ index * 2 + 2 }} <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
</div> <itemDetail></itemDetail>
</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>
</div> </div>
</van-tab> </van-action-sheet>
<van-tab title="拍卖说明"> </div>
<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>
</template> </template>
<style> <style>
:root:root { :root:root {
@ -202,11 +210,12 @@ const openShow=()=>{
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.van-swipe__indicator){ :deep(.van-swipe__indicator) {
width: 8px; width: 8px;
height: 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> </style>

6
app/pages/profile/index.vue
View File

@ -7,7 +7,7 @@ definePageMeta({
</script> </script>
<template> <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="flex items-center px-16px mb-43px">
<div class="mr-23px"> <div class="mr-23px">
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt=""> <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 class="text-#575757 text-14px">15834362333</div>
</div> </div>
</div> </div>
<div> <div class="flex-grow-1">
<div class="border-b-1px border-b-#D3D3D3 px-16px flex"> <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> </div>
<van-pull-refresh> <van-pull-refresh>
<van-list <van-list