/* 根容器,全屏且底部固定 */ .root-page { width: 100vw; height: 100vh; background: radial-gradient(ellipse at 20% 20%, #1a1e2b 0%, #0b0c12 100%); display: flex; flex-direction: column; } /* 滚动区域 */ .scroll-container { flex: 1; overflow-y: auto; padding: 30rpx 30rpx 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } /* 卡片 */ .card { background: rgba(25, 27, 36, 0.8); backdrop-filter: blur(20px); border: 1rpx solid rgba(201, 169, 88, 0.15); border-radius: 24rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.5); } /* 用户信息 */ .user-row { display: flex; align-items: center; margin-bottom: 30rpx; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; border: 2rpx solid rgba(201,169,88,0.4); margin-right: 20rpx; } .info { flex: 1; } .uid { font-size: 30rpx; color: #f0f2ff; font-weight: 600; } .time { font-size: 22rpx; color: #6a7090; margin-top: 4rpx; } .contact-btn { background: rgba(201,169,88,0.15); border: 1rpx solid rgba(201,169,88,0.3); border-radius: 20rpx; padding: 8rpx 24rpx; font-size: 24rpx; color: #c9a558; } /* 详情网格 */ .detail-grid { border-bottom: 1rpx solid rgba(255,255,255,0.06); margin-bottom: 20rpx; } .detail-item { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid rgba(255,255,255,0.04); } .detail-item:last-child { border-bottom: none; } .label { font-size: 26rpx; color: #8a90b0; width: 160rpx; flex-shrink: 0; } .value { font-size: 26rpx; color: #d0d4ff; font-weight: 500; } .rule-content { white-space: pre-wrap; line-height: 1.5; } .jinpai-note { font-size: 24rpx; color: #c9a558; font-weight: 600; margin-left: 10rpx; } /* 失败原因 */ .fail-box { background: rgba(255, 70, 70, 0.1); border-left: 4rpx solid #ff5e5e; padding: 16rpx; border-radius: 8rpx; margin-bottom: 20rpx; } .fail-label { font-size: 24rpx; color: #ff8a8a; } .fail-text { font-size: 24rpx; color: #ffd0d0; } /* 昵称修改 */ .nick-row { display: flex; align-items: center; margin-bottom: 30rpx; } .nick-input { flex: 1; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; padding: 12rpx 20rpx; color: #fff; font-size: 26rpx; margin-right: 20rpx; } .save-nick-btn { background: #c9a558; color: #0b0c12; padding: 12rpx 30rpx; border-radius: 30rpx; font-size: 26rpx; font-weight: 600; } /* 操作按钮 */ .action-row { display: flex; gap: 20rpx; margin-top: 20rpx; } .action-btn { flex: 1; height: 80rpx; display: flex; align-items: center; justify-content: center; border-radius: 40rpx; font-size: 28rpx; font-weight: 600; color: #fff; } .agree { background: linear-gradient(135deg, #c9a558, #9e7d2e); } .reject { background: linear-gradient(135deg, #a85050, #802a2a); } .transfer { background: linear-gradient(135deg, #4a6090, #2a3a60); } /* 加载/空状态 */ .loading, .no-more, .empty { text-align: center; padding: 30rpx; color: #6a7090; font-size: 28rpx; } /* 弹窗 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-box { width: 80%; background: #1e2030; border-radius: 24rpx; padding: 30rpx; border: 1rpx solid rgba(201,169,88,0.2); } .modal-header { font-size: 32rpx; color: #f0f2ff; font-weight: 600; margin-bottom: 20rpx; } .modal-body { font-size: 26rpx; color: #b0b8d0; margin-bottom: 20rpx; } .reason-input { width: 100%; height: 200rpx; background: rgba(255,255,255,0.05); border-radius: 12rpx; padding: 15rpx; color: #fff; font-size: 26rpx; box-sizing: border-box; margin-bottom: 20rpx; } .countdown-text { text-align: center; font-size: 28rpx; color: #c9a558; margin-bottom: 20rpx; } .modal-footer { display: flex; gap: 20rpx; } .btn { flex: 1; height: 80rpx; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; } .cancel { background: #2a2f3e; color: #fff; } .confirm { background: linear-gradient(135deg, #c9a558, #9e7d2e); color: #0b0c12; } .confirm.disabled { opacity: 0.4; pointer-events: none; }