646 lines
24 KiB
Plaintext
646 lines
24 KiB
Plaintext
/* ═════ 08 报告页 —— 1:1 移植 H5 #s-report ═════
|
||
对照来源（逐条核对，后者覆盖前者）：
|
||
index.html #s-report L174-291
|
||
css/style.css L347-503 （基础）
|
||
css/ui-20261009.css L45-87 （第二轮 PSD）
|
||
css/ui-20261012.css L71-172 （第三轮 PSD，最终生效值）
|
||
换算：H5 的 calc(N * var(--u))（375 设计宽基准）→ 2N rpx；
|
||
H5 里固定的 px 字号、1px 描边、百分比、transform 原样保留；
|
||
注释用「基础 → ui-20261009 → ui-20261012」标出覆盖关系。
|
||
限制：只能用 class/id 选择器；acss 无 @font-face，字体沿用 app.acss 的系统栈，
|
||
故 H5 的 "MiSans Demibold"(700) 退化为系统字体 + font-weight:700。 */
|
||
|
||
/* ─── 页面容器（H5 #s-report / .report-body） ───
|
||
#s-report 还有一条 background:#efefef url(bg-report-h5.webp) center top/100% auto。
|
||
该 webp 实测为 1080×7512 的纯 #EFEFEF 单色图（全图只有一种颜色 239,239,239），
|
||
与 app.acss 里 page 的底色等价，所以这里不再引这张空图
|
||
（<image> 会额外解码约 32MB，并把页面滚动高度撑到 2608px）。
|
||
.report-body { padding: calc(28u) calc(17u) calc(42u) } */
|
||
.report { position: relative; }
|
||
/* 原生不透明页眉已预留系统顶部区域，正文恢复 H5 原有的 28u 上间距。 */
|
||
.report-body { position: relative; z-index: 1; padding: 56rpx 34rpx 84rpx; }
|
||
|
||
/* .report-title { font-size:23px; font-weight:600(覆盖 700); letter-spacing:calc(.5u);
|
||
text-align:center; margin-bottom:calc(23u) }；行高固定 30px = H5 实测行盒 */
|
||
.report-title {
|
||
font-size: 23px;
|
||
font-weight: 600;
|
||
color: #282828;
|
||
text-align: center;
|
||
letter-spacing: 1rpx;
|
||
line-height: 30px;
|
||
margin-bottom: 46rpx;
|
||
}
|
||
|
||
/* .card { background:#fff; border-radius:calc(7u)(覆盖 8u); margin-bottom:calc(12u) } */
|
||
.card { margin-bottom: 24rpx; }
|
||
|
||
/* ─── 总分卡：H5 是 display:grid 两列 1fr + row-gap calc(15u)，padding calc(16u) calc(14u)
|
||
acss 用 flex-wrap 等价实现：两个 50% 列 + 整行 .card-dims ─── */
|
||
.card-summary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
padding: 32rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* .sum-score { flex:none; border-right:1px solid #EFEFEF; flex-direction:column;
|
||
align-items:center; justify-content:center } */
|
||
.sum-score {
|
||
flex: 0 0 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
border-right: 1px solid #EFEFEF;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* .score-dial { position:relative; width:calc(108u); height:calc(108u) } */
|
||
.score-dial { position: relative; width: 216rpx; height: 216rpx; }
|
||
|
||
/* H5 用 <svg viewBox="0 0 120 120"> 画环形：r=52、stroke-width=9
|
||
→ 在 108px 画盘上外径 50.85、内径 42.75。
|
||
acss 无 svg，改成等价的三层几何：轨道圆环 + conic-gradient 进度弧 + 圆头补点。 */
|
||
.ring-track {
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
width: 203.4rpx; height: 203.4rpx;
|
||
margin: -101.7rpx 0 0 -101.7rpx;
|
||
border-radius: 50%;
|
||
background: #EFEFEF;
|
||
}
|
||
/* 进度弧：report.js 按总分写入 conic-gradient(#F5F078 0 deg, 透明 deg)。
|
||
conic-gradient 的 0deg 在正上方、顺时针递增，与 H5 SVG rotate(-90deg) 的进度方向一致。
|
||
圆的直径必须与 .ring-track 一致（203.4rpx）：若铺满 216rpx 画盘，
|
||
环会变成 11.25rpx 厚、外径 54（H5 是 8.1rpx 厚、外径 50.85）。 */
|
||
.ring-arc {
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
width: 203.4rpx; height: 203.4rpx;
|
||
margin: -101.7rpx 0 0 -101.7rpx;
|
||
border-radius: 50%;
|
||
}
|
||
/* 圆形内孔（卡片底色为白）：半径 42.75 → 直径 171rpx */
|
||
.ring-hole {
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
width: 171rpx; height: 171rpx;
|
||
margin: -85.5rpx 0 0 -85.5rpx;
|
||
border-radius: 50%;
|
||
background: #FFFFFF;
|
||
}
|
||
/* stroke-linecap:round 的等价物：半径 8.1rpx 的圆点落在弧的两端 */
|
||
.ring-cap {
|
||
position: absolute;
|
||
width: 16.2rpx; height: 16.2rpx;
|
||
margin: -8.1rpx 0 0 -8.1rpx;
|
||
border-radius: 50%;
|
||
background: #F5F078;
|
||
}
|
||
/* .ring-center { position:absolute; inset:0; flex-direction:column; align-items:center;
|
||
justify-content:center; gap:0 } */
|
||
.ring-center {
|
||
position: absolute;
|
||
left: 0; top: 0; right: 0; bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* .stat-value { color:var(--ink); line-height:1; white-space:nowrap; display:flex; align-items:baseline } */
|
||
.stat-value {
|
||
display: flex;
|
||
align-items: baseline;
|
||
color: #282828;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
/* .ring-center .stat-value b { font-size:40px } + #stat-score b { letter-spacing:0; display:block } */
|
||
.stat-b { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 0; }
|
||
/* #stat-score i { margin-left:2px } + .ring-center .stat-value i { font-size:14px } */
|
||
.stat-i { font-size: 14px; font-weight: 700; line-height: 1; margin-left: 2px; }
|
||
/* .ring-center .stat-label / .sum-age > .stat-label { margin:0; font-size:12px; line-height:1.5; color:var(--ink) } */
|
||
.stat-label { font-size: 12px; line-height: 1.5; color: #282828; margin: 0; }
|
||
|
||
/* .sum-age { flex:1; align-self:stretch; flex-direction:column; align-items:center;
|
||
justify-content:center; gap:0; padding-left:calc(16u)(覆盖 26u) } */
|
||
.sum-age {
|
||
flex: 0 0 50%;
|
||
align-self: stretch;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-left: 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* .age-dial { width:calc(108u); height:auto; display:flex; align-items:center; justify-content:center } */
|
||
.age-dial {
|
||
position: relative;
|
||
width: 216rpx;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
/* .age-dial .stat-age { margin-top:0; display:flex; align-items:baseline } */
|
||
.stat-age { margin-top: 0; display: flex; align-items: baseline; }
|
||
/* .age-dial .stat-age b { font-size:54px(覆盖 58px); display:block; line-height:1 }
|
||
letter-spacing 继承 .stat-value b 的 calc(.5u) → 1rpx */
|
||
.stat-age .stat-b { font-size: 54px; line-height: 1; letter-spacing: 1rpx; }
|
||
/* .stat-age i { font-size:19px; margin-left:2px } */
|
||
.stat-age .stat-i { font-size: 19px; margin-left: 2px; }
|
||
/* H5 ui-20261009.css: .age-pill, .dims-note { display:none !important }
|
||
ui-20261012 只恢复了 #dims-note，肌龄对比胶囊仍是隐藏态。
|
||
ageNote 仍由 report-model 产出（接口不变），这里与 H5 一致：保留数据不展示。 */
|
||
.age-pill { display: none; }
|
||
|
||
/* ─── 三维度（.card-dims 并进总分卡：H5 grid-column:1/-1；acss 用 width:100% + row-gap）
|
||
.card-dims { padding:0(覆盖 calc(18u) calc(7u) calc(7u)) }
|
||
.dim { flex:1; align-items:flex-start; padding:0 0 calc(4u) calc(14u) }
|
||
.dim + .dim { border-left:1px solid #EFEFEF } */
|
||
.card-dims { width: 100%; margin-top: 30rpx; }
|
||
.dims-row { display: flex; }
|
||
.dim {
|
||
flex: 1;
|
||
min-width: 0;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 0 0 8rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.dim + .dim { border-left: 1px solid #EFEFEF; }
|
||
/* .dim-name { font-size:11px(覆盖 12px); color:var(--ink) }
|
||
行高固定成 H5 实测行盒 14px：acss 是系统字体（H5 是 MiSans），
|
||
若放任 normal 行高，三维度卡会整体高 1px 并向下累积。 */
|
||
.dim-name { font-size: 11px; line-height: 14px; color: #282828; }
|
||
/* .dim-score { margin-top:calc(4u); font-size:27px(覆盖 30px); line-height:1.1; font-weight:700 }
|
||
.dim-score b { font-size:36px(覆盖 42px); font-weight:700 } */
|
||
.dim-score {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 8rpx;
|
||
font-size: 27px;
|
||
font-weight: 700;
|
||
color: #282828;
|
||
line-height: 1.1;
|
||
}
|
||
.dim-int { font-size: 36px; font-weight: 700; line-height: 1.1; }
|
||
.dim-dec { font-size: 27px; font-weight: 700; line-height: 1.1; }
|
||
/* .dim-score.dim-bad { color:var(--bad) } */
|
||
.dim-bad { color: #D30C0C; }
|
||
/* .dim-bar { margin-top:calc(6u); width:calc(69u); height:calc(6u);
|
||
border-radius:calc(3u); background:#EFEFEF; overflow:hidden } */
|
||
.dim-bar {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
width: 138rpx;
|
||
height: 12rpx;
|
||
border-radius: 6rpx;
|
||
background: #EFEFEF;
|
||
overflow: hidden;
|
||
}
|
||
/* .dim-bar i { height:100%; background:var(--yellow); border-radius:inherit } */
|
||
.dim-fill { height: 100%; border-radius: 6rpx; background: #F5F078; }
|
||
.dim.best .dim-fill { background: #D7EE6A; }
|
||
.dim.worst .dim-fill { background: #F4B04F; }
|
||
/* .dim-flag { visibility:hidden; margin-top:calc(6u); font-size:8px(覆盖 9px); color:var(--ink);
|
||
background:#F8F4A6; border-radius:calc(8u); padding:calc(1u) calc(8u) }
|
||
→ 非最低分维度用 visibility 保留占位，三列高度与 H5 一致 */
|
||
.dim-flag {
|
||
visibility: hidden;
|
||
margin-top: 12rpx;
|
||
font-size: 8px;
|
||
line-height: 10px;
|
||
color: #282828;
|
||
background: #F8F4A6;
|
||
border-radius: 16rpx;
|
||
padding: 2rpx 16rpx;
|
||
}
|
||
.dim.worst .dim-flag { visibility: visible; }
|
||
|
||
/* #dims-note { display:block !important; margin-top:12px; padding:10px 12px 10px 24px;
|
||
background:#F2F2F2; border-radius:calc(6u); position:relative }
|
||
#dims-note::before { left:12px; top:10px; bottom:10px; width:calc(3u); background:var(--yellow) } */
|
||
.dims-note {
|
||
position: relative;
|
||
margin-top: 24rpx;
|
||
background: #F2F2F2;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 24rpx 20rpx 48rpx;
|
||
text-align: left;
|
||
}
|
||
.dims-note::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 24rpx;
|
||
top: 20rpx;
|
||
bottom: 20rpx;
|
||
width: 6rpx;
|
||
border-radius: 4rpx;
|
||
background: #F5F078;
|
||
}
|
||
/* #dims-note .dims-note-l1 { font-size:12px; line-height:1.5; color:var(--para) }
|
||
.dims-note-l1 b { font-weight:500; color:var(--ink); text-decoration:underline } */
|
||
.dims-note-l1 { font-size: 12px; line-height: 1.5; color: #4A4A4A; }
|
||
.dims-focus {
|
||
font-weight: 500;
|
||
color: #282828;
|
||
text-decoration: underline;
|
||
}
|
||
/* #dims-note .dims-note-l2 { font-size:11px; line-height:1.5; margin-top:3px; color:var(--grey) } */
|
||
.dims-note-l2 { margin-top: 6rpx; font-size: 11px; line-height: 1.5; color: #868686; }
|
||
|
||
/* ─── 维度标题（H5 h2.dimension-title，落在灰底上的卡外标题）
|
||
.dimension-title { font-size:23px; font-weight:600; text-align:center;
|
||
margin:calc(18u) 0(覆盖 24u/12u) }，行高固定 30px = H5 实测行盒
|
||
.dimension-stability-title { font-size:22.106597px; line-height:28.738542px } */
|
||
.dimension-title {
|
||
font-size: 23px;
|
||
font-weight: 600;
|
||
color: #282828;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
margin: 36rpx 0;
|
||
}
|
||
.dimension-stability-title { font-size: 22.106597px; line-height: 28.738542px; }
|
||
|
||
/* ─── 维度详情卡（.card.card-detail）
|
||
.card-detail { margin-top:0; padding:calc(4u) calc(39u) calc(19u); border-radius:calc(7u) } */
|
||
.card-detail { margin-top: 0; padding: 8rpx 78rpx 38rpx; box-sizing: border-box; }
|
||
|
||
/* .detail-tabs { display:flex; border:none(覆盖 1px 底线) }
|
||
H5 高度由 .dtab 的 padding-top 13px + .dtab-tx 26px 撑成 40px → acss 固定 80rpx 更稳 */
|
||
.detail-tabs { display: flex; height: 80rpx; }
|
||
/* .dtab { flex:1; padding:calc(13u) 0 0; text-align:center; font-weight:500; color:var(--ink) }
|
||
容器 80rpx 内：上留白 28rpx（= H5 的 13px + 行盒基线偏移 1px），余下 52rpx 归 .dtab-tx；
|
||
用 flex 起点对齐消掉 inline-block 的基线偏移，让黄色下划线与 H5 一样停在
|
||
距标签卡顶 34px、底 41px 的位置。 */
|
||
.dtab {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
padding-top: 28rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
color: #282828;
|
||
}
|
||
.dtab.active { font-weight: 700; }
|
||
/* .dtab-tx { position:relative; display:inline-block; font-size:12px;
|
||
padding:0 calc(5u) calc(10u) } */
|
||
.dtab-tx {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
padding: 0 10rpx 20rpx;
|
||
}
|
||
/* .dtab.active .dtab-tx::after { left:50%; transform:translateX(-50%); bottom:-1px;
|
||
width:calc(76u); height:calc(7u);
|
||
border-radius:calc(3.5u); background:var(--yellow) } */
|
||
.dtab.active .dtab-tx::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: -1px;
|
||
width: 152rpx;
|
||
height: 14rpx;
|
||
border-radius: 7rpx;
|
||
background: #F5F078;
|
||
}
|
||
|
||
/* H5: follow the finger horizontally, leave vertical gestures to the report. */
|
||
.detail-viewport { overflow: hidden; touch-action: pan-y; transition: height .32s ease; }
|
||
.detail-viewport.dragging { transition: none; }
|
||
.detail-panels { display: flex; align-items: flex-start; transition: transform .32s cubic-bezier(.22,.61,.36,1); }
|
||
.detail-panels.dragging { transition: none; }
|
||
/* .detail-panels .dpanel { display:block; flex:0 0 100%; padding-top:calc(10u) } */
|
||
.dpanel { display: block; flex: 0 0 100%; min-width: 0; padding-top: 20rpx; box-sizing: border-box; pointer-events: none; }
|
||
.dpanel.active { pointer-events: auto; }
|
||
/* .ditem { display:block(覆盖 flex) } */
|
||
.ditem { display: block; }
|
||
.report-zoom { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
|
||
.report-zoom-enter { animation: report-zoom-in .22s ease both; }
|
||
.report-zoom-frame { position: relative; overflow: hidden; background: #F6F6F6; transform-origin: center; }
|
||
.report-zoom-side { position: absolute; }
|
||
.report-zoom-bitmap { left:0; top:0; width:100%; height:100%; }
|
||
.report-zoom-canvas { position:fixed; left:-10000px; top:0; width:835px; height:738px; pointer-events:none; }
|
||
@keyframes report-zoom-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
|
||
|
||
/* ─── 检测图框（.viz-frame ＋ .contour-front-frame 的 90% 高裁切）
|
||
.viz-frame { position:relative; width:calc(215u); height:calc(278u); margin:0 auto calc(12u);
|
||
background:#f6f6f6; border-radius:calc(5u); overflow:hidden }
|
||
.contour-front-frame { height:calc(250.2u); margin-bottom:calc(7.56u) }
|
||
.contour-front-frame .ditem-img { height:calc(278u) } */
|
||
.viz-frame {
|
||
position: relative;
|
||
width: 430rpx;
|
||
height: 556rpx;
|
||
margin: 0 auto 24rpx;
|
||
background: #F6F6F6;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
.contour-front-frame { height: 500.4rpx; margin-bottom: 15.12rpx; }
|
||
/* 画框内部固定 430×556rpx 的「照片坐标系」：照片与每个 face_maps 图层共用同一套
|
||
left/top/width/height（report.js 按 H5 vizFaceCrop 算出），保证叠加层与人脸严格对齐 */
|
||
.viz-stage {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 430rpx; height: 556rpx;
|
||
overflow: hidden;
|
||
}
|
||
.viz-photo { position: absolute; display: block; }
|
||
.viz-layer { position: absolute; display: block; }
|
||
/* H5 vizCompose: ctx.globalCompositeOperation='multiply'（白底色沉/缺水/红区图层） */
|
||
.viz-blend { mix-blend-mode: multiply; }
|
||
/* H5 vizCompose({dim:.55})：照片先压暗再叠增强线（仅皱纹） */
|
||
.viz-dim {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 100%; height: 100%;
|
||
background: #000000;
|
||
opacity: .55;
|
||
}
|
||
/* H5 坐标标注 canvas：lineWidth = max(3, 画布宽/200)，缩到 430rpx 画框后约 3rpx；
|
||
rectangle 用 strokeRect，所以只描边、不填充。 */
|
||
.viz-mark {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
border-style: solid;
|
||
border-width: 3rpx;
|
||
}
|
||
/* .viz-missing { position:absolute; inset:0; display:flex; align-items:center;
|
||
justify-content:center; color:#888; font-size:12px } */
|
||
.viz-missing {
|
||
position: absolute;
|
||
left: 0; top: 0; right: 0; bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #888888;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* .ditem-text { border-top:1px solid #eee; padding-top:calc(10u) }
|
||
.ditem-para { font-size:12px(覆盖 10.1px); line-height:1.55; color:var(--para);
|
||
font-weight:400; white-space:pre-line } */
|
||
.ditem-text { border-top: 1px solid #EEEEEE; padding-top: 20rpx; }
|
||
.ditem-para {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #4A4A4A;
|
||
line-height: 1.55;
|
||
white-space: pre-line;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
/* .viz-caption { color:#707070; font-size:11px; line-height:1.6; margin-top:10px } */
|
||
.viz-caption {
|
||
color: #707070;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
margin-top: 20rpx;
|
||
}
|
||
/* 稳韧力卡的标签/正文再小一号（.stability-card .dtab-tx / .ditem-para） */
|
||
.stability-card .dtab-tx { font-size: 11.055903px; }
|
||
.stability-card .ditem-para { font-size: 11.574074px; line-height: 14.467593px; }
|
||
|
||
/* ─── 侧脸照片（.contour-sides / .contour-side-photo / .wrinkle-side-photo）
|
||
.contour-sides { width:calc(215u); margin:0 auto calc(12u);
|
||
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(6.3u) }
|
||
.contour-side-photo { width:100%; height:calc(92.25u); border-radius:calc(5u);
|
||
background:#f6f6f6; overflow:hidden; position:relative }
|
||
.contour-side-photo img { position:absolute; inset:0; width:100%; height:100%;
|
||
object-fit:cover; transform:translateY(-25%) scale(2.8) } */
|
||
.contour-sides {
|
||
width: 430rpx;
|
||
margin: 0 auto 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.contour-side {
|
||
position: relative;
|
||
flex: none;
|
||
width: 208.7rpx;
|
||
height: 184.5rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
background: #F6F6F6;
|
||
}
|
||
/* H5 grid: figure[data-view="right"] { grid-column:2 } → 只剩右脸时仍占第二列 */
|
||
.contour-side.right { margin-left: auto; }
|
||
/* 轮廓和皱纹统一交换两张侧脸的位置，照片、标注及点击预览仍绑定原侧。 */
|
||
.contour-sides-reversed { flex-direction: row-reverse; }
|
||
.contour-sides-reversed .contour-side.right { margin-left: 0; margin-right: auto; }
|
||
.side-img {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 100%; height: 100%;
|
||
transform: translateY(-25%) scale(2.52);
|
||
transform-origin: center;
|
||
}
|
||
.side-dim {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 100%; height: 100%;
|
||
background: #000000;
|
||
opacity: .55;
|
||
}
|
||
/* .wrinkle-loading { inset:0; background:rgba(0,0,0,.4); color:#fff; text-align:center;
|
||
font-size:calc(10u); line-height:1.6 } */
|
||
.side-loading {
|
||
position: absolute;
|
||
left: 0; top: 0; right: 0; bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, .4);
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
line-height: 1.6;
|
||
}
|
||
/* .wrinkle-layer-note { width:calc(215u); margin:0 auto calc(12u); color:#888;
|
||
font-size:10px; line-height:1.4 } */
|
||
.wrinkle-layer-note {
|
||
width: 430rpx;
|
||
margin: 0 auto 24rpx;
|
||
color: #888888;
|
||
font-size: 10px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ─── 产品区大标题（.prod-title，落在灰底）
|
||
ui-20261012 最终值：width:calc(206.597222u); margin:calc(18u) auto;
|
||
transform:translateX(calc(.347222u)); font-size:22.106597px; line-height:28.738542px;
|
||
font-weight:700; white-space:nowrap; letter-spacing:0 */
|
||
.prod-title {
|
||
width: 413.194444rpx;
|
||
max-width: 100%;
|
||
margin: 36rpx auto;
|
||
padding: 0;
|
||
text-align: center;
|
||
transform: translateX(0.694444rpx);
|
||
font-size: 22.106597px;
|
||
line-height: 28.738542px;
|
||
font-weight: 700;
|
||
color: #282828;
|
||
letter-spacing: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ─── 日常护理 + 推荐产品（同一张白卡 .card.card-care.report-care-products）
|
||
.report-care-products { width:calc(340.625u); margin-left:auto; margin-right:auto;
|
||
padding:calc(21.180556u) calc(24.652778u) calc(7.986111u) } */
|
||
.report-care-products {
|
||
width: 681.25rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding: 42.361112rpx 49.305556rpx 15.972222rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* .report-care-products .card-heading { font-size:13.888889px; line-height:19.444444px;
|
||
font-weight:700; text-align:left;
|
||
margin-bottom:calc(5.208333u) } */
|
||
.card-heading {
|
||
font-size: 13.888889px;
|
||
line-height: 19.444444px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin-bottom: 10.416666rpx;
|
||
}
|
||
/* .report-care-products .care-item { font-size:11.574074px; line-height:14.467593px;
|
||
color:var(--para); margin-bottom:calc(14.467593u) }
|
||
.care-item:last-child { margin-bottom:0 } → acss 避开伪类，由 report.js 打 '.last' 标记 */
|
||
.care-item {
|
||
font-size: 11.574074px;
|
||
line-height: 14.467593px;
|
||
color: #4A4A4A;
|
||
margin-bottom: 28.935186rpx;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.care-item.last { margin-bottom: 0; }
|
||
/* .product-section-heading { position:relative; margin:calc(24.0625u) 0 calc(5.555556u);
|
||
font-size:13.888889px; line-height:19.444444px;
|
||
font-weight:700; text-align:left }
|
||
::before { left:0; right:0; top:calc(-12.03125u); border-top:1px solid #DDD } */
|
||
.product-section-heading {
|
||
position: relative;
|
||
margin: 48.125rpx 0 11.111112rpx;
|
||
font-size: 13.888889px;
|
||
line-height: 19.444444px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #282828;
|
||
}
|
||
.product-section-heading::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: -24.0625rpx;
|
||
border-top: 1px solid #DDDDDD;
|
||
}
|
||
/* H5 #product-unavailable 也是 .care-item（文案见 report.axml，与 H5 index.html L274 一致） */
|
||
.product-unavailable { margin-bottom: 0; }
|
||
|
||
/* .report-care-products .card-product { width:auto; margin:0 calc(-18.402778u);
|
||
border-radius:calc(3.472222u);
|
||
background:#F6F6F6; overflow:hidden } */
|
||
.card-product {
|
||
width: auto;
|
||
margin: 0 -36.805556rpx;
|
||
border-radius: 6.944444rpx;
|
||
background: #F6F6F6;
|
||
overflow: hidden;
|
||
}
|
||
/* .report-care-products .prod-card { height:auto; aspect-ratio:945/511 }
|
||
→ 卡片内容宽 582.64rpx + 左右各 36.8rpx = 656.25rpx，
|
||
高 = 656.25 × 511 ÷ 945 = 354.84rpx（定值，不依赖 aspect-ratio 支持度） */
|
||
.prod-card {
|
||
position: relative;
|
||
height: 354.84rpx;
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
/* .report-care-products .prod-info { flex-basis:49.100529%; padding:0 } */
|
||
.prod-info {
|
||
flex: 0 0 49.100529%;
|
||
min-width: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
/* .report-care-products #product-title { position:absolute; left:8.571429%; top:29.158513%;
|
||
font-size:14.467593px; line-height:18.06279px;
|
||
font-weight:700; white-space:nowrap } */
|
||
.prod-card-title {
|
||
position: absolute;
|
||
left: 8.571429%;
|
||
top: 29.158513%;
|
||
margin: 0;
|
||
font-size: 14.467593px;
|
||
line-height: 18.06279px;
|
||
font-weight: 700;
|
||
color: #282828;
|
||
white-space: nowrap;
|
||
}
|
||
/* .report-care-products .prod-name { left:8.677249%; top:41.09589%; font-size:12.013166px;
|
||
line-height:15.070408px; font-weight:700; color:#989898;
|
||
white-space:nowrap } */
|
||
.prod-name {
|
||
position: absolute;
|
||
left: 8.677249%;
|
||
top: 41.09589%;
|
||
margin: 0;
|
||
font-size: 12.013166px;
|
||
line-height: 15.070408px;
|
||
font-weight: 700;
|
||
color: #989898;
|
||
white-space: nowrap;
|
||
}
|
||
/* .report-care-products .prod-badge { left:8.783069%; top:56.751468%; width:10.687831%; margin:0 } */
|
||
.prod-badge {
|
||
position: absolute;
|
||
left: 8.783069%;
|
||
top: 56.751468%;
|
||
width: 10.687831%;
|
||
height: auto;
|
||
margin: 0;
|
||
}
|
||
/* .report-care-products .prod-scroll { flex-basis:50.899471% }
|
||
.prod-scroll img { width:100%; height:100%; aspect-ratio:auto; object-fit:fill } */
|
||
.prod-scroll {
|
||
flex: 0 0 50.899471%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.prod-img { display: block; width: 100%; height: 100%; }
|
||
|
||
/* ─── 免责声明（.report-care-products + .report-disclaimer）
|
||
margin:calc(12.152778u) calc(5.208333u) calc(20u);
|
||
font-size:7.233681px; line-height:10.127431px */
|
||
.report-disclaimer {
|
||
margin: 24.305556rpx 10.416666rpx 40rpx;
|
||
font-size: 7.233681px;
|
||
line-height: 10.127431px;
|
||
color: #4A4A4A;
|
||
}
|
||
.report-disclaimer-line { display: block; }
|
||
|
||
.session-guard { padding: 120rpx 40rpx; text-align: center; font-size: 13px; line-height: 1.8; color: #707070; }
|
||
.session-guard .btn-primary { margin: 32rpx auto 0; }
|