feat(home): 优化直播间展开效果

- 修改直播间展开逻辑，点击后始终展开
- 添加淡入淡出动画效果
- 优化直播间样式，增加自定义 CSS 类

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" />
       </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>
+.changeLive.collapsed {
+  height: 188px;
+}
+
+.changeLive.expanded {
+  height: calc(100vh - var(--van-nav-bar-height));
+  transform: translateY(0);
+}
 </style>