/* 举报页 U26 — Design Tokens */ .page { min-height:100vh; background:var(--color-primary-lighter); } .body { padding:24rpx; box-sizing:border-box; } /* 被举报人提示条 */ .target-bar { background:var(--color-primary-light); border-radius:12rpx; padding:20rpx 24rpx; margin-bottom:24rpx; font-size:26rpx; color:var(--color-primary-strong); } /* 卡片 */ .card { background:var(--color-bg-card); border-radius:20rpx; padding:24rpx 32rpx; margin-bottom:24rpx; box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04); } /* 举报原因网格 */ .reason-grid { display:flex; flex-wrap:wrap; gap:16rpx; margin-top:16rpx; } .reason-item { flex:0 0 calc(33.333% - 12rpx); box-sizing:border-box; text-align:center; padding:20rpx 0; border-radius:12rpx; background:var(--color-bg-subtle); font-size:26rpx; color:var(--color-text-secondary); border:2rpx solid transparent; transition:all 0.2s; } .reason-item.active { background:var(--color-primary-light); color:var(--color-primary-strong); border-color:var(--color-primary); font-weight:bold; } /* 证据截图 */ .evidence-list { display:flex; flex-wrap:wrap; gap:16rpx; margin-top:16rpx; } .evidence-item { position:relative; width:160rpx; height:160rpx; border-radius:12rpx; overflow:hidden; } .evidence-item image { width:100%; height:100%; } .remove-btn { position:absolute; top:4rpx; right:4rpx; width:36rpx; min-height:var(--tap-min); line-height:var(--tap-min); text-align:center; background:rgba(0, 0, 0, 0.5); color:var(--color-text-inverse); border-radius:50%; font-size:24rpx; min-width:var(--tap-min);} .evidence-add { width:160rpx; height:160rpx; border-radius:12rpx; background:var(--color-bg-subtle); border:2rpx dashed var(--color-border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--color-text-tertiary); } .add-icon { font-size:48rpx; color:var(--color-text-disabled); line-height:1; } .add-text { font-size:24rpx; margin-top:8rpx; } /* 提交按钮 */ .btn-submit { width:100%; height:88rpx; line-height:88rpx; border-radius:44rpx; background:var(--color-primary-solid); color:var(--color-text-inverse); font-size:32rpx; border:none; margin-top:8rpx; } .btn-submit::after { border:none; } .btn-submit[disabled] { opacity:0.5; } .btn-primary { width:80%; height:88rpx; line-height:88rpx; border-radius:44rpx; background:var(--color-primary-solid); color:var(--color-text-inverse); font-size:32rpx; border:none; margin-top:48rpx; } .btn-primary::after { border:none; } .hint { display:block; text-align:center; font-size:24rpx; color:var(--color-text-disabled); margin-top:20rpx; padding:0 24rpx; } /* 成功态 */ .success-wrap { display:flex; flex-direction:column; align-items:center; padding:120rpx 48rpx; } .success-icon { width:120rpx; height:120rpx; line-height:120rpx; text-align:center; border-radius:50%; background:var(--color-success-light); color:var(--color-success-strong); font-size:64rpx; margin-bottom:32rpx; } .success-title { font-size:36rpx; font-weight:bold; color:var(--color-text-strong); margin-bottom:16rpx; } .success-hint { font-size:26rpx; color:var(--color-text-tertiary); text-align:center; line-height:1.6; } /* 公益免费标识 */ .free-badge { text-align:center; padding:24rpx; margin-top:16rpx; } .free-badge text { display:inline-block; font-size:22rpx; color:var(--color-success-strong); background:var(--color-success-light); padding:8rpx 24rpx; border-radius:24rpx; }