第二版修改
This commit is contained in:
root
+45
-25
@@ -314,6 +314,31 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
|
||||
}
|
||||
.cam-nudge.show { opacity: 1; transform: translateX(-50%); }
|
||||
|
||||
/* 两张之间的停顿卡:本张完成 + 下一张预告,停顿期间不检测 */
|
||||
.cam-next {
|
||||
position: absolute; left: 50%; top: 50%;
|
||||
transform: translate(-50%, -50%) scale(.94);
|
||||
width: calc(230 * var(--u)); padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
background: rgba(0,0,0,.72); border-radius: calc(12 * var(--u));
|
||||
color: #fff; text-align: center;
|
||||
z-index: 3; opacity: 0; pointer-events: none;
|
||||
transition: opacity .2s ease, transform .2s ease;
|
||||
}
|
||||
.cam-next.show { opacity: 1; transform: translate(-50%, -50%); }
|
||||
.cam-next-ok {
|
||||
width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
|
||||
background: #34C759; position: relative; margin-bottom: calc(12 * var(--u));
|
||||
}
|
||||
.cam-next-ok::after {
|
||||
content: ""; position: absolute; left: 50%; top: 45%;
|
||||
width: calc(16 * var(--u)); height: calc(8 * var(--u));
|
||||
border: solid #fff; border-width: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
.cam-next b { font-size: calc(17 * var(--u)); font-weight: 500; }
|
||||
.cam-next span { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: rgba(255,255,255,.85); line-height: 1.5; }
|
||||
|
||||
/* ═══════════ 08 报告页 ═══════════ */
|
||||
#s-report { background: var(--bg); }
|
||||
.report-body { padding: 0 calc(18 * var(--u)) calc(28 * var(--u)); }
|
||||
@@ -408,40 +433,35 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
|
||||
.dims-note-l1 b { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
|
||||
.dims-note-l2 { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--grey); }
|
||||
|
||||
/* 维度区块:大标题 + 卡内子 Tab + 大图 + 说明 */
|
||||
.sec-title {
|
||||
font-size: calc(22 * var(--u)); font-weight: 700; color: var(--ink);
|
||||
text-align: center; letter-spacing: calc(1 * var(--u));
|
||||
margin: calc(26 * var(--u)) 0 calc(16 * var(--u));
|
||||
}
|
||||
.card-detail { padding: calc(14 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); }
|
||||
.detail-tabs { display: flex; justify-content: space-between; border-bottom: 1px solid #EFEFEF; }
|
||||
.dtab {
|
||||
position: relative;
|
||||
min-width: calc(80 * var(--u));
|
||||
padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(11 * var(--u));
|
||||
font-size: calc(14.5 * var(--u)); font-weight: 500; color: var(--ink);
|
||||
}
|
||||
/* 维度详情卡(原布局):紧塑力/活力感/稳定力三个 Tab,每个 Tab 两条「竖排标题 + 左图右文」;检测图点击放大 */
|
||||
.card-detail { padding: 0 calc(19 * var(--u)) calc(19 * var(--u)); }
|
||||
.detail-tabs { display: flex; border-bottom: 1px solid #F0F0F0; }
|
||||
.dtab { flex: 1; padding: calc(13 * var(--u)) 0 0; font-weight: 500; color: var(--ink); }
|
||||
.dtab-tx { position: relative; display: inline-block; font-size: calc(10.1 * var(--u)); padding: 0 calc(5 * var(--u)) calc(7 * var(--u)); }
|
||||
.dtab.active { font-weight: 700; }
|
||||
.dtab.active::after {
|
||||
content: ""; position: absolute; left: 0; right: 0; bottom: calc(-3 * var(--u));
|
||||
height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--yellow);
|
||||
.dtab.active .dtab-tx::after {
|
||||
content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px;
|
||||
width: calc(78 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(3.5 * var(--u)); background: var(--yellow);
|
||||
}
|
||||
.dpanel { display: none; }
|
||||
.dpanel.active { display: block; animation: fade .25s ease; padding-top: calc(14 * var(--u)); }
|
||||
.dpanel.active { display: block; animation: fade .25s ease; padding-top: calc(19 * var(--u)); }
|
||||
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
|
||||
.ditem { display: flex; gap: calc(9 * var(--u)); align-items: center; }
|
||||
.ditem + .ditem { margin-top: calc(18 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid #F0F0F0; }
|
||||
.ditem-img {
|
||||
width: calc(213 * var(--u)); height: calc(277 * var(--u));
|
||||
margin: 0 auto calc(14 * var(--u));
|
||||
object-fit: cover; border-radius: calc(6 * var(--u));
|
||||
width: calc(92 * var(--u)); height: calc(96 * var(--u));
|
||||
object-fit: cover; border-radius: calc(6 * var(--u)); flex-shrink: 0;
|
||||
background: #F5F5F5; cursor: zoom-in;
|
||||
}
|
||||
.ditem-img[hidden] { display: none; }
|
||||
.ditem-para {
|
||||
padding-top: calc(12 * var(--u)); border-top: 1px solid #EFEFEF;
|
||||
font-size: calc(13 * var(--u)); color: var(--para); line-height: 1.72;
|
||||
text-align: justify; overflow-wrap: anywhere;
|
||||
.ditem-text { flex: 1; min-width: 0; }
|
||||
.ditem-title {
|
||||
writing-mode: vertical-rl;
|
||||
letter-spacing: calc(4 * var(--u));
|
||||
font-size: calc(11.5 * var(--u)); font-weight: 500; color: var(--ink);
|
||||
margin-right: calc(3.5 * var(--u)); flex-shrink: 0;
|
||||
}
|
||||
.ditem-para { font-size: calc(10.1 * var(--u)); font-weight: 400; color: var(--para); line-height: 1.41; overflow-wrap: anywhere; }
|
||||
|
||||
.vm-notes { font-size: calc(10 * var(--u)); color: var(--grey-3); line-height: 1.7; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; }
|
||||
.report-disclaimer {
|
||||
|
||||
Reference in New Issue
Block a user