refactor(LiveRoom): 优化直播页面全屏逻辑和过渡效果
- 添加 fullLive1 变量用于控制全屏状态 - 使用 watch 监听 fullLive属性变化,延迟更新 fullLive1 - 调整过渡效果持续时间,提升用户体验
This commit is contained in:
parent
dee871759e
commit
19e1c3b1f6
@ -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(--van-nav-bar-height))':'height:100%'"></div>-->
|
:style="fullLive?'height: calc(100vh - var(--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,
|
||||||
|
Loading…
Reference in New Issue
Block a user