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">
<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>

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

@ -3,6 +3,7 @@ import liveBroadcast from '@/components/liveBroadcast/index.vue'
import {useRect} from '@vant/use';
import itemDetail from '@/components/itemDetail/index.vue'
definePageMeta({
layout: 'default',
title: '主页',
@ -78,6 +79,7 @@ function onRefresh() {
refreshing.value = true
loadData()
}
const leftColumn = computed(() => {
return list.value.filter((_, index) => index % 2 === 0)
})
@ -97,6 +99,7 @@ const openShow=()=>{
</script>
<template>
<div class="bg-#fff flex-grow-1">
<liveBroadcast ref="liveRef"/>
<van-tabs sticky animated>
<van-tab title="拍品列表">
@ -123,7 +126,8 @@ const openShow=()=>{
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]">
<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>
@ -157,7 +161,8 @@ const openShow=()=>{
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]">
<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>
@ -184,7 +189,9 @@ const openShow=()=>{
</van-tab>
<van-tab title="拍卖说明">
<div class="px-16px pt-14px">
<div class="text-#575757 text-14px">这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空</div>
<div class="text-#575757 text-14px">
这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
</div>
<div></div>
</div>
</van-tab>
@ -195,6 +202,7 @@ const openShow=()=>{
<itemDetail></itemDetail>
</div>
</van-action-sheet>
</div>
</template>
<style>
:root:root {
@ -206,6 +214,7 @@ const openShow=()=>{
width: 8px;
height: 8px;
}
:deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) {
background: rgba(0, 0, 0, 0.8);
}

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

@ -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