danyang-match/miniapp/pages/report/report.wxss

/* 举报页 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;
}