/* pages/shenhedating/shenhedating.wxss - 暗夜鎏金主题 */ /* 根容器:深邃渐变背景 */ .shenhe-page { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 20% 20%, #1a1e2b 0%, #0b0c12 100%); overflow: hidden; } /* ========== 顶部固定模块区 ========== */ .module-quyu { width: 100%; background: rgba(20, 22, 30, 0.8); backdrop-filter: blur(25px); padding: 20rpx 0; border-bottom: 1rpx solid rgba(201, 169, 88, 0.15); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } .module-scroll { white-space: nowrap; height: 80rpx; width: 100%; } .module-container { display: inline-flex; padding: 0 24rpx; gap: 20rpx; height: 80rpx; align-items: center; } .module-item { display: inline-flex; align-items: center; justify-content: center; padding: 0 36rpx; height: 64rpx; border-radius: 32rpx; background: rgba(255, 255, 255, 0.06); transition: all 0.25s ease; min-width: 100rpx; position: relative; flex-shrink: 0; border: 1rpx solid rgba(255, 255, 255, 0.04); } .module-active { background: linear-gradient(135deg, #c9a558, #b28b3a); border-color: transparent; box-shadow: 0 4rpx 20rpx rgba(201, 169, 88, 0.35); } .module-active .module-name { color: #0b0c12; font-weight: 700; } .module-name { font-size: 26rpx; color: #a2a8ba; font-weight: 500; } .module-count { position: absolute; top: -10rpx; right: -6rpx; background: #d43b3b; color: #ffffff; border-radius: 14rpx; padding: 2rpx 12rpx; font-size: 20rpx; font-weight: 600; } /* ========== 列表容器 ========== */ .record-container { flex: 1; overflow: hidden; width: 100%; } .record-scroll { height: 100%; width: 100%; } .refresher-container { height: 80rpx; display: flex; align-items: center; justify-content: center; } .refreshing-text, .pull-down-text { font-size: 24rpx; color: #6a7090; } .empty-tip { padding: 200rpx 0; text-align: center; color: #6a7090; font-size: 28rpx; } /* ========== 审核卡片:玻璃态 ========== */ .record-card { background: rgba(25, 27, 36, 0.7); backdrop-filter: blur(15px); margin: 20rpx 24rpx; border-radius: 24rpx; padding: 28rpx; border: 1rpx solid rgba(201, 169, 88, 0.1); box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.5); transition: transform 0.15s; } .record-card:active { transform: scale(0.995); } .user-row { display: flex; align-items: center; margin-bottom: 24rpx; } .user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; background: #2a2d3a; border: 2rpx solid rgba(201, 169, 88, 0.3); box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.4); } .user-info { flex: 1; display: flex; flex-direction: column; } .user-uid { font-size: 30rpx; color: #f0f2ff; font-weight: 600; margin-bottom: 6rpx; } .user-time { font-size: 22rpx; color: #6a7090; } .detail-row { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid rgba(255, 255, 255, 0.05); gap: 20rpx; } .detail-row:last-of-type { border-bottom: none; } .detail-label { font-size: 26rpx; color: #8a90b0; flex-shrink: 0; width: 120rpx; } .detail-value { font-size: 26rpx; color: #d0d4ff; font-weight: 500; } .rule-row, .beizhu-row { padding: 16rpx 0; border-bottom: 1rpx solid rgba(255, 255, 255, 0.05); } .rule-header, .beizhu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; } .rule-label, .beizhu-label { font-size: 26rpx; color: #8a90b0; } .rule-more, .beizhu-more { font-size: 24rpx; color: #c9a558; font-weight: 500; } .rule-content, .beizhu-content { background: rgba(255, 255, 255, 0.05); padding: 18rpx; border-radius: 14rpx; border: 1rpx solid rgba(255, 255, 255, 0.06); } .rule-text, .beizhu-text { font-size: 24rpx; color: #b0b8d0; line-height: 1.6; } /* 底部按钮 */ .card-footer { display: flex; justify-content: flex-end; margin-top: 24rpx; } .shoushen-btn { background: linear-gradient(135deg, #c9a558, #9e7d2e); color: #0b0c12; padding: 14rpx 48rpx; border-radius: 40rpx; font-size: 28rpx; font-weight: 700; box-shadow: 0 6rpx 18rpx rgba(201, 169, 88, 0.3); transition: all 0.2s; } .shoushen-btn:active { transform: scale(0.97); opacity: 0.9; } /* 加载 */ .loading-more, .no-more { text-align: center; padding: 30rpx; font-size: 24rpx; color: #6a7090; } .loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(11, 12, 18, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; } .loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid rgba(255,255,255,0.1); border-top-color: #c9a558; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; } /* 弹窗 */ .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-content { width: 85%; max-height: 70vh; background: #1e2030; border-radius: 24rpx; padding: 30rpx; border: 1rpx solid rgba(201, 169, 88, 0.2); box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.8); } .modal-header { display: flex; justify-content: space-between; align-items: center; font-size: 32rpx; font-weight: 600; color: #f0f2ff; margin-bottom: 20rpx; } .modal-close { font-size: 40rpx; color: #8a90b0; padding: 0 10rpx; } .modal-body { max-height: 50vh; font-size: 28rpx; line-height: 1.6; color: #c0c8e0; }