/* 遮罩层样式 */ .overlay.data-v-40fcca19 { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 999; will-change: opacity; transition: opacity 0.3s ease; opacity: 0; display: block; /* 由 v-show 控制 */ } /* 当 isVisible 为 true 时,添加 overlay-show 类,触发遮罩渐显 */ .overlay-show.data-v-40fcca19 { opacity: 1; } /* 抽屉整体样式 */ .drawer.data-v-40fcca19 { position: fixed; top: 0; right: 0; height: 100vh; background: #fff; z-index: 1000; border-top-left-radius: 80rpx; border-bottom-left-radius: 80rpx; /* 使用 transform 做动画,避免布局重排 */ transform: translateX(100%); transition: transform 0.4s ease; will-change: transform; } /* 抽屉打开时 */ .drawer-open.data-v-40fcca19 { transform: translateX(0); } .drawer-content.data-v-40fcca19 { position: relative; width: 100%; height: 100%; } .drawer-content-circle.data-v-40fcca19 { position: absolute; top: calc(50% - 55rpx); left: -40rpx; width: 100rpx; height: 110rpx; border-radius: 50%; z-index: -1; background: linear-gradient(to bottom, #dfecfa, #c9dbee); display: flex; align-items: center; -webkit-clip-path: inset(0 60% 0 0); clip-path: inset(0 60% 0 0); } .drawer-img.data-v-40fcca19 { width: 25rpx; height: 25rpx; margin-left: 10rpx; transform: rotate(180deg); }