style(liveRoom/realAuth): 优化页面动画和样式
- liveRoom: - 为 transition 组件添加 fade 名称,优化动画效果 - 添加 fade
This commit is contained in:
parent
2f2f2e1294
commit
83e116e210
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user