1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- .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;
- }
|