59 lines
2.3 KiB
Plaintext
59 lines
2.3 KiB
Plaintext
/* 支付组件样式，与罚款列表统一 */
|
|
.pay-mask {
|
|
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.5); z-index: 2000;
|
|
display: flex; align-items: flex-end; justify-content: center;
|
|
}
|
|
.pay-panel {
|
|
width: 100%; max-height: 85vh; background: #fff;
|
|
border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column; overflow: hidden;
|
|
}
|
|
.pay-head {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 28rpx 30rpx 16rpx; border-bottom: 1px solid #eee;
|
|
}
|
|
.pay-title { font-size: 32rpx; font-weight: 600; }
|
|
.pay-close {
|
|
width: 44rpx; height: 44rpx; background: #f5f5f5;
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
font-size: 26rpx; color: #888;
|
|
}
|
|
.pay-body { padding: 20rpx 30rpx; flex: 1; overflow-y: auto; }
|
|
.pay-foot {
|
|
display: flex; padding: 16rpx 30rpx 30rpx; gap: 20rpx; border-top: 1px solid #eee;
|
|
}
|
|
|
|
.method-item {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 40rpx 30rpx; background: #f9f9f9; border-radius: 20rpx; margin-bottom: 20rpx;
|
|
}
|
|
.method-icon { font-size: 48rpx; margin-bottom: 12rpx; }
|
|
.method-name { font-size: 28rpx; color: #333; }
|
|
|
|
.balance-item {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 24rpx 0; border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
.balance-name { font-size: 28rpx; color: #333; }
|
|
.balance-amount { font-size: 28rpx; color: #E53935; }
|
|
|
|
.confirm-row { font-size: 28rpx; margin-bottom: 16rpx; }
|
|
.confirm-tip { font-size: 24rpx; color: #888; display: block; margin-top: 20rpx; }
|
|
|
|
.loading-box {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
background: rgba(0,0,0,0.6);
|
|
}
|
|
.spinner {
|
|
width: 60rpx; height: 60rpx;
|
|
border: 4rpx solid rgba(255,255,255,0.3);
|
|
border-top-color: #fff; border-radius: 50%;
|
|
animation: spin 1s linear infinite; margin-bottom: 20rpx;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.loading-text { color: #fff; font-size: 26rpx; }
|
|
|
|
.btn { flex: 1; text-align: center; padding: 22rpx 0; border-radius: 16rpx; font-size: 28rpx; font-weight: 600; }
|
|
.primary { background: #2e7d32; color: #fff; }
|
|
.default { background: #f0f0f0; color: #555; }
|
|
.btn:active { opacity: 0.8; } |