/* pages/kaohe_jilu/kaohe_jilu.wxss - 晨露微光风格(左右均等边距) */ page { background: linear-gradient(135deg, #FDFBF7 0%, #F2EFE9 100%); color: #4A4A4A; font-family: 'SF Pro Display', 'PingFang SC', system-ui; height: 100vh; overflow: hidden; } .page-root { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* 筛选栏 */ .filter-bar { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-bottom: 1rpx solid rgba(0,0,0,0.04); flex-shrink: 0; padding: 20rpx 0 0; } .module-scroll { white-space: nowrap; height: 70rpx; padding: 0 30rpx; } .module-container { display: inline-flex; gap: 20rpx; align-items: center; height: 70rpx; } .filter-item { display: inline-flex; align-items: center; justify-content: center; padding: 0 30rpx; height: 56rpx; border-radius: 28rpx; background: #F0EFEC; font-size: 26rpx; color: #6B6B6B; transition: all 0.2s; } .filter-item.active { background: #C8A27A; color: #FFFFFF; font-weight: 600; box-shadow: 0 4rpx 12rpx rgba(200, 162, 122, 0.3); } .status-row { display: flex; padding: 15rpx 30rpx 20rpx; gap: 30rpx; } .status-item { font-size: 26rpx; color: #8B8B8B; padding-bottom: 8rpx; border-bottom: 4rpx solid transparent; transition: all 0.2s; } .status-item.active { color: #C8A27A; border-bottom-color: #C8A27A; font-weight: 600; } /* 列表容器 */ .list-container { flex: 1; overflow: hidden; } .list-scroll { height: 100%; padding: 20rpx 0; /* 上下内边距 */ } .empty-tip { text-align: center; color: #A0A0A0; font-size: 28rpx; padding-top: 200rpx; } /* 卡片:统一左右边距 30rpx */ .card { background: #FFFFFF; border-radius: 28rpx; padding: 30rpx; margin: 0 30rpx 24rpx 30rpx; /* 左右严格相等 */ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04); transition: all 0.3s; } .card-header { display: flex; align-items: center; margin-bottom: 24rpx; } .avatar { width: 72rpx; height: 72rpx; border-radius: 50%; margin-right: 18rpx; border: 2rpx solid #F0EDE8; background: #F7F5F2; } .user-info { flex: 1; } .nickname { font-size: 30rpx; font-weight: 600; color: #3A3A3A; display: block; } .uid { font-size: 24rpx; color: #9A9A9A; margin-top: 4rpx; } .status-tag { font-size: 24rpx; padding: 6rpx 18rpx; border-radius: 20rpx; font-weight: 500; } .status-0 { background: #FFF3E0; color: #EF6C00; } .status-1 { background: #E8F5E9; color: #2E7D32; } .status-2 { background: #FFEBEE; color: #C62828; } .status-3 { background: #E3F2FD; color: #1565C0; } .card-summary { display: flex; flex-wrap: wrap; gap: 16rpx 24rpx; margin-bottom: 20rpx; } .summary-item { display: flex; align-items: center; font-size: 26rpx; } .summary-item .label { color: #8B8B8B; margin-right: 12rpx; } .summary-item .value { color: #3A3A3A; font-weight: 500; } .card-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 20rpx; border-top: 1rpx solid #F5F2ED; } .expand-btn { font-size: 26rpx; color: #C8A27A; font-weight: 500; } .judge-btn { font-size: 26rpx; background: #C8A27A; color: #FFFFFF; padding: 8rpx 24rpx; border-radius: 24rpx; font-weight: 500; } /* 展开详情(左右边距继承卡片,无需额外设置) */ .card-detail { margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #F5F2ED; } .detail-section { margin-bottom: 20rpx; } .detail-title { font-size: 26rpx; font-weight: 600; color: #5A5A5A; margin-bottom: 10rpx; display: block; } .detail-text { font-size: 24rpx; color: #6B6B6B; line-height: 1.6; } .fee-row, .reject-row { font-size: 24rpx; color: #6B6B6B; padding: 6rpx 0; } .reject-item { display: flex; flex-direction: column; background: #FFF9F5; padding: 12rpx 16rpx; border-radius: 12rpx; margin-bottom: 12rpx; } .reject-time { font-size: 22rpx; color: #B0A090; margin-bottom: 4rpx; } .reject-reason { font-size: 24rpx; color: #7A5A4A; } .detail-empty { font-size: 24rpx; color: #A0A0A0; padding: 8rpx 0; } .info-grid { display: flex; flex-direction: column; gap: 8rpx; font-size: 24rpx; color: #6B6B6B; } /* 加载 */ .loading-more, .no-more { text-align: center; padding: 30rpx; font-size: 24rpx; color: #A0A0A0; } .loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(253, 251, 247, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; } .loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid #E0DDD5; border-top-color: #C8A27A; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; } @keyframes spin { to { transform: rotate(360deg); } }