170 lines
4.6 KiB
Plaintext
170 lines
4.6 KiB
Plaintext
/* 根容器，全屏且底部固定 */
|
|
.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; } |