refactor(LiveRoom): 优化直播页面全屏逻辑和过渡效果

- 添加 fullLive1 变量用于控制全屏状态
- 使用 watch 监听 fullLive属性变化,延迟更新 fullLive1
- 调整过渡效果持续时间,提升用户体验
This commit is contained in:
xingyy 2025-01-21 15:11:26 +08:00
parent dee871759e
commit 19e1c3b1f6

View File

@ -70,6 +70,20 @@ onBeforeUnmount(() => {
const goPay = () => { const goPay = () => {
show.value = true show.value = true
} }
const fullLive1 = ref(false)
watch(()=>{
return props.fullLive
}, (newVal) => {
console.log('newVal',newVal)
if (newVal) {
setTimeout(() => {
fullLive1.value = true
}, 400)
}else {
fullLive1.value = false
}
})
</script> </script>
<template> <template>
@ -89,8 +103,10 @@ const goPay = () => {
</div> </div>
<!-- <div :id="playerId" class="w-screen" <!-- <div :id="playerId" class="w-screen"
:style="fullLive?'height: calc(100vh - var(&#45;&#45;van-nav-bar-height))':'height:100%'"></div>--> :style="fullLive?'height: calc(100vh - var(&#45;&#45;van-nav-bar-height))':'height:100%'"></div>-->
<transition> <transition>
<div v-if="fullLive"> <div v-if="fullLive1">
<sideButton class="absolute top-196px right-0 z-999"></sideButton> <sideButton class="absolute top-196px right-0 z-999"></sideButton>
<div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)"> <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
<div class="text-16px text-#FFB25F font-600"> <div class="text-16px text-#FFB25F font-600">
@ -114,6 +130,7 @@ const goPay = () => {
</div> </div>
<paymentResults v-model:show="show1" type="error"/> <paymentResults v-model:show="show1" type="error"/>
</div> </div>
</transition> </transition>
@ -127,7 +144,7 @@ const goPay = () => {
<style scoped> <style scoped>
.v-enter-active, .v-enter-active,
.v-leave-active { .v-leave-active {
transition: opacity 0.5s ease; transition: opacity 0.3s ease;
} }
.v-enter-from, .v-enter-from,