From 03d22960f0cb4b9d92708d4c8679d43c9b54dcfc Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Wed, 15 Jan 2025 10:55:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E4=BC=98=E5=8C=96=E7=9B=B4?=
 =?UTF-8?q?=E6=92=AD=E9=97=B4=E5=B1=95=E5=BC=80=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改直播间展开逻辑，点击后始终展开
- 添加淡入淡出动画效果
- 优化直播间样式，增加自定义 CSS 类
---
 app/pages/home/index.vue | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 79404c8..6295057 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -107,7 +107,7 @@ const openShow = () => {
   })
 }
 const changeLive=()=>{
-  fullLive.value= !fullLive.value
+  fullLive.value=true
 }
 </script>
 
@@ -116,14 +116,15 @@ const changeLive=()=>{
     <div
         @click="changeLive"
         :class="[
-          'transform transition-all duration-500 ease-out ',
-          fullLive ? 'absolute top-[var(--van-nav-bar-height)] bottom-0px left-0px right-0px h-[calc(100vh-var(--van-nav-bar-height))]' : 'h-188px'
+          'changeLive',
+          fullLive ? 'expanded' : 'collapsed'
         ]"
     >
       <client-only>
-        <LiveRoom   ref="liveRef" :fullLive="fullLive" />
+        <LiveRoom ref="liveRef" :fullLive="fullLive" />
       </client-only>
     </div>
+    <transition name="fade">
     <div v-show="!fullLive" class="bg-#fff" >
       <van-tabs sticky animated>
         <van-tab title="拍品列表">
@@ -227,6 +228,7 @@ const changeLive=()=>{
         </div>
       </van-action-sheet>
     </div>
+    </transition>
   </div>
 </template>
 
@@ -241,11 +243,27 @@ const changeLive=()=>{
   width: 8px;
   height: 8px;
 }
-
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
 :deep(.van-swipe__indicator:not(.van-swipe__indicator--active) ) {
   background: rgba(0, 0, 0, 0.8);
 }
-</style>
+.changeLive {
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.5s ease, transform 0.5s ease;
+}
 
-<style scoped>
-</style>
\ No newline at end of file
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  height: calc(100vh - var(--van-nav-bar-height));
+  transform: translateY(0);
+}
+</style>