From c32a64456ee87c9b9da3b26970c98a7e9f3f3d29 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:12:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor(layouts):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 default.vue 中的主容器样式，使其更加灵活
- 在 home/index.vue 和 profile/index.vue 中应用 flex 布局，提高页面结构的适应性
- 优化代码格式和缩进，提高可读性
---
 app/layouts/default.vue     |   2 +-
 app/pages/home/index.vue    | 211 +++++++++++++++++++-----------------
 app/pages/profile/index.vue |   6 +-
 3 files changed, 114 insertions(+), 105 deletions(-)

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