juzi/taobao/pages/report/report.acss

/* ═════ 报告页样式(灰底白卡,对齐设计稿 08) ═════ */
page { background: #EFEFEF; }
.report { padding-bottom: 64rpx; }
.report-title {
  font-size: 40rpx;
  font-weight: 600;
  text-align: center;
  padding: 32rpx 0 8rpx;
}

/* ─── 总分卡 ─── */
.card-summary {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.ring-box {
  position: relative;
  width: 240rpx;
  height: 240rpx;
}
.ring-canvas {
  width: 240rpx;
  height: 240rpx;
}
.ring-center {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sum-age {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-label {
  font-size: 24rpx;
  color: #868686;
}
.stat-value { display: flex; align-items: baseline; }
.stat-num {
  font-size: 64rpx;
  font-weight: 700;
  color: #282828;
}
.stat-unit {
  font-size: 24rpx;
  color: #868686;
  margin-left: 4rpx;
}
.age-pill {
  margin-top: 12rpx;
  font-size: 22rpx;
  color: #282828;
  background: #F5F078;
  border-radius: 20rpx;
  padding: 4rpx 20rpx;
}

/* ─── 三维度 ─── */
.dims-row {
  display: flex;
  justify-content: space-between;
}
.dim {
  width: 31%;
  position: relative;
}
.dim-name {
  font-size: 26rpx;
  color: #4A4A4A;
}
.dim-score { margin: 8rpx 0; }
.dim-int {
  font-size: 48rpx;
  font-weight: 700;
}
.dim-dec {
  font-size: 28rpx;
  color: #868686;
}
.dim.worst .dim-int, .dim.worst .dim-dec { color: #D30C0C; }
.dim-bar {
  height: 8rpx;
  background: #EFEFEF;
  border-radius: 4rpx;
  overflow: hidden;
}
.dim-bar-fill {
  height: 100%;
  background: #E5E5E5;
  border-radius: 4rpx;
}
.dim.best .dim-bar-fill { background: #DBF6D6; }
.dim.worst .dim-bar-fill { background: #F5C6C6; }
.dim-flag {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20rpx;
  color: #D30C0C;
}
.dims-note { margin-top: 24rpx; }
.dims-note-l1 {
  font-size: 26rpx;
  color: #868686;
}
.dims-focus {
  color: #282828;
  font-weight: 600;
  text-decoration: underline;
}
.dims-note-l2 {
  font-size: 24rpx;
  color: #868686;
  margin-top: 4rpx;
}

/* ─── 6 分类 Tab ─── */
.detail-tabs {
  display: flex;
  border-bottom: 2rpx solid #E5E5E5;
  margin-bottom: 24rpx;
}
.dtab {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #868686;
  padding: 16rpx 0;
}
.dtab.active {
  color: #282828;
  font-weight: 600;
  border-bottom: 4rpx solid #F5F078;
}
.ditem { margin-bottom: 32rpx; }
.ditem-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}
.ditem-img {
  width: 100%;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  background: #EFEFEF;
}
.ditem-para {
  font-size: 26rpx;
  color: #4A4A4A;
  line-height: 1.7;
}

/* ─── 降级标注 + 免责 ─── */
.vm-notes {
  font-size: 22rpx;
  color: #868686;
  padding: 16rpx 32rpx 0;
  line-height: 1.6;
}
.report-disclaimer {
  font-size: 22rpx;
  color: #868686;
  text-align: center;
  line-height: 1.8;
  padding: 24rpx 32rpx;
}

/* ─── 护理建议 / 精华 ─── */
.care-item {
  font-size: 26rpx;
  color: #4A4A4A;
  line-height: 1.7;
  margin-bottom: 16rpx;
}
.care-summary {
  font-size: 24rpx;
  color: #868686;
  margin-top: 16rpx;
}
.essence-name {
  font-size: 32rpx;
  font-weight: 600;
}
.essence-triggers {
  font-size: 24rpx;
  color: #868686;
  margin-top: 12rpx;
}

/* ─── 产品推荐 ─── */
.prod-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 700;
  padding: 40rpx 0 8rpx;
}
.prod-title text { display: block; line-height: 1.5; }
.prod-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prod-info { flex: 1; padding-right: 24rpx; }
.prod-badge { height: 40rpx; margin-bottom: 16rpx; }
.prod-name {
  font-size: 30rpx;
  font-weight: 600;
  line-height: 1.4;
}
.prod-sub {
  font-size: 22rpx;
  color: #868686;
  margin-top: 8rpx;
}
.prod-img {
  width: 240rpx;
  height: 240rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
}

.btn-more {
  margin: 40rpx 32rpx 0;
}
.detail-tabs { display: block; white-space: nowrap; }
.detail-tabs-inner { display: flex; width: max-content; }
.dtab { flex-shrink: 0; padding: 16rpx 20rpx; }
.analysis-image { position: relative; width: 100%; overflow: hidden; border-radius: 16rpx; background: #202020; }
.analysis-photo { display: block; width: 100%; }
.dark-photo { opacity: .45; }
.analysis-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mark-box { position: absolute; box-sizing: border-box; border: 2rpx solid; border-radius: 4rpx; }
.side-views { display: flex; gap: 16rpx; margin: 24rpx 0; }
.side-view { flex: 1; min-width: 0; font-size: 24rpx; line-height: 1.8; }
.side-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: white; }
.side-note { color: #777; }
.detail-grade { color: #666; font-size: 24rpx; }
.care-name { font-weight: 600; margin-bottom: 8rpx; }
.dim-level { font-size: 22rpx; margin-top: 8rpx; color: #777; }
.ring-box { width: 120px; height: 120px; }