.DrawerPage { position: fixed; width: 100vw; height: 100vh; left: 0vw; background-color: #f1f1f1; transition: all 0.4s; } .DrawerPage.show { transform: scale(0.9, 0.9); left: 50vw; box-shadow: 0 0 60rpx rgba(0, 0, 0, 0.2); transform-origin: 0; } .DrawerWindow { position: absolute; width: 50vw; height: 100vh; left: 0; top: 0; transform: scale(0.9, 0.9) translateX(-100%); opacity: 0; pointer-events: none; transition: all 0.4s; } .DrawerWindow.show { transform: scale(1, 1) translateX(0%); opacity: 1; pointer-events: all; } .DrawerClose { position: absolute; width: 40vw; height: 100vh; right: 0; top: 0; color: transparent; padding-bottom: 30rpx; display: flex; align-items: flex-end; justify-content: center; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6)); letter-spacing: 5px; font-size: 50rpx; opacity: 0; pointer-events: none; transition: all 0.4s; } .DrawerClose.show { opacity: 1; pointer-events: all; width: 50vw; color: #fff; } .DrawerPage .cu-bar.tabbar .action button.icon { width: 64rpx; height: 64rpx; line-height: 64rpx; margin: 0; display: inline-block; } .DrawerPage .cu-bar.tabbar .action .cu-avatar { margin: 0; } .DrawerPage .nav { flex: 1; } .DrawerPage .nav .cu-item.cur { border-bottom: 0; position: relative; } .DrawerPage .nav .cu-item.cur::after { content: ""; width: 10rpx; height: 10rpx; background-color: currentColor; position: absolute; bottom: 10rpx; border-radius: 10rpx; left: 0; right: 0; margin: auto; } .DrawerPage .cu-bar.tabbar .action { flex: initial; }