.popup-picker { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } /* 遮罩层 */ .popup-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; } .popup-mask.show { opacity: 1; } /* 内容区 */ .popup-content { position: fixed; left: 0; right: 0; bottom: 0; background-color: #FFFFFF; border-radius: 24rpx 24rpx 0 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; transition: all 0.3s ease; visibility: hidden; } .popup-content.show { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } /* 头部 */ .popup-header { display: flex; justify-content: space-between; align-items: center; height: 88rpx; padding: 0 32rpx; border-bottom: 1rpx solid #EEEEEE; } .cancel { font-size: 32rpx; color: #999999; } .title { font-size: 32rpx; color: #333333; font-weight: 500; } .confirm { font-size: 32rpx; color: #4080FF; } /* 选择器 */ .picker-view { width: 100%; height: 480rpx; } .picker-item { line-height: 68rpx; text-align: center; font-size: 32rpx; color: #333333; } /* 平台适配 */ .popup-content { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }