style(fe): 成长报告海报预览卡排版打磨
- 头像改圆形 + 白边(和保存的图一致) - 周期做成小胶囊;数据清单每行「绿勾 + 项目 + 数值右对齐」,更整齐 - 健康状态做成绿色徽章;生成自弱化 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+32
-5
@@ -339,16 +339,43 @@ textarea{display:block;padding:var(--sp-4);line-height:1.6}
|
||||
linear-gradient(160deg,#FFF7E8,#FFFFFF);
|
||||
border:1rpx solid #F2DFC3;border-radius:var(--r-lg);padding:var(--sp-5);text-align:center;overflow:hidden;position:relative;
|
||||
}
|
||||
/* 圆头像 + 白边,和保存的图一致 */
|
||||
.poster-avatar{
|
||||
width:152rpx;height:152rpx;margin:var(--sp-3) auto var(--sp-3);border-radius:var(--r-lg);
|
||||
width:160rpx;height:160rpx;margin:var(--sp-4) auto var(--sp-3);border-radius:50%;
|
||||
background:linear-gradient(135deg,#FFE5B7,#FFC06B);display:flex;align-items:center;justify-content:center;
|
||||
font-size:80rpx;box-shadow:var(--sd-1);overflow:hidden;
|
||||
font-size:80rpx;box-shadow:var(--sd-1);overflow:hidden;border:6rpx solid #fff;
|
||||
}
|
||||
.poster-avatar-img{width:100%;height:100%;display:block}
|
||||
.poster-period{margin-top:8rpx;font-size:var(--fs-cap);color:var(--primary-ink);font-weight:var(--fw-b)}
|
||||
.poster-list{
|
||||
background:rgba(255,255,255,.78);border-radius:var(--r-md);padding:var(--sp-4);margin:var(--sp-4) 0;text-align:left;line-height:1.8;font-size:var(--fs-md);
|
||||
.poster-meta{font-size:var(--fs-md);color:var(--muted)}
|
||||
/* 周期做成小胶囊 */
|
||||
.poster-period{
|
||||
display:inline-block;margin-top:12rpx;padding:4rpx var(--sp-3);border-radius:var(--r-full);
|
||||
background:var(--primary-soft);color:var(--primary-ink);
|
||||
font-size:var(--fs-cap);font-weight:var(--fw-b);
|
||||
}
|
||||
/* 数据清单:每行 打勾 + 项目 + 数值 右对齐 */
|
||||
.poster-list{
|
||||
background:rgba(255,255,255,.78);border-radius:var(--r-md);
|
||||
padding:var(--sp-3) var(--sp-4);margin:var(--sp-5) 0 var(--sp-4);
|
||||
}
|
||||
.poster-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
|
||||
.poster-tick{
|
||||
width:36rpx;height:36rpx;flex:none;border-radius:50%;
|
||||
background:var(--green-soft);color:var(--green-ink);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
}
|
||||
.poster-rt{flex:1;text-align:left;font-size:var(--fs-md);color:var(--text-2)}
|
||||
.poster-rn{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
|
||||
/* 健康状态徽章 */
|
||||
.poster-status{
|
||||
display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
|
||||
font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);margin-top:var(--sp-2);
|
||||
}
|
||||
.poster-badge{
|
||||
padding:4rpx var(--sp-3);border-radius:var(--r-full);
|
||||
background:var(--green-soft);color:var(--green-ink);font-size:var(--fs-sm);
|
||||
}
|
||||
.poster-from{margin-top:var(--sp-4);font-size:var(--fs-cap);color:var(--muted2)}
|
||||
|
||||
/* 风险盒 */
|
||||
.risk-box{
|
||||
|
||||
Reference in New Issue
Block a user