.confirm-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; &.anim-visible { opacity: 1; } } .modal-content { position: relative; width: 660rpx; background-color: #ffffff; border-radius: 24rpx; overflow: hidden; transform: scale(0.9); opacity: 0; transition: all 0.3s ease; &.anim-visible { transform: scale(1); opacity: 1; } } .modal-header { padding-top: 50rpx; width: 100%; margin-bottom: 30rpx; .modal-title { width: 100%; height: 36rpx; font-weight: bolder; font-size: 36rpx; color: #252535; line-height: 36rpx; text-align: center; margin-bottom: 24rpx; } .modal-sub-title { width: 100%; height: 32rpx; font-weight: 400; font-size: 32rpx; color: #1385FA; line-height: 32rpx; text-align: center; } } .modal-body { width: 100%; box-sizing: border-box; padding: 0 30rpx; margin-bottom: 30rpx; .modal-body-box { width: 100%; padding: 0 30rpx; box-sizing: border-box; border-radius: 16rpx; background-color: #F6F6F6; .info-row { width: 100%; height: 80rpx; display: flex; padding: 10rpx 0; align-items: center; justify-content: space-between; box-sizing: border-box; border-bottom: 1px solid #EAECF1; .info-label { color: #77849E; height: 80rpx; font-size: 28rpx; line-height: 80rpx; } .info-value { color: #252535; height: 80rpx; font-weight: 500; font-size: 28rpx; line-height: 80rpx; } &:last-of-type { border-bottom: none; } } } } .modal-footer { width: 100%; height: 110rpx; display: flex; border-top: 1rpx solid #EAECF1; .modal-btn { flex: 1; height: 110rpx; line-height: 110rpx; font-size: 36rpx; text-align: center; } .modal-btn-cancel { color: #77849E; border-right: 1rpx solid #EAECF1; } .modal-btn-confirm { color: #1385FA; font-weight: 500; } }