style(liveRoom/realAuth): 优化页面动画和样式

- liveRoom:
  - 为 transition 组件添加 fade 名称,优化动画效果
  - 添加 fade
This commit is contained in:
xingyy 2025-02-17 13:48:24 +08:00
parent 2f2f2e1294
commit 83e116e210
2 changed files with 19 additions and 6 deletions

View File

@ -100,7 +100,7 @@ const updateShow = () => {
<template> <template>
<div class="relative h-full"> <div class="relative h-full">
<div :id="playerId" class="w-full h-full"></div> <div :id="playerId" class="w-full h-full"></div>
<transition> <transition name="fade">
<div v-if="fullLive"> <div v-if="fullLive">
<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" <div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center"
@ -159,16 +159,26 @@ const updateShow = () => {
</style> </style>
<style scoped> <style scoped>
.v-enter-active,
.v-leave-active { /* 定义过渡动画 */
transition: opacity 0.3s ease; .fade-enter-active{
transition: opacity 1s ease;
} }
.v-enter-from, .fade-leave-active {
.v-leave-to { transition: opacity 0.2s ease;
}
/* 定义进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}
.my-rolling-text { .my-rolling-text {
--van-rolling-text-item-width: 10px; --van-rolling-text-item-width: 10px;
--van-rolling-text-font-size: 16px; --van-rolling-text-font-size: 16px;

View File

@ -145,6 +145,9 @@ const goLogin=()=>{
</template> </template>
<style scoped> <style scoped>
:deep(.van-cell__title.van-field__label){
width: 80px;
}
:deep(.van-tabs__line) { :deep(.van-tabs__line) {
height: 2px; height: 2px;
width: 107px; width: 107px;