xsl
fed52930cc
五个页面按 h5/css 的 style.css → ui-20261009 → ui-20261012 覆盖顺序逐条重排， 换算规则固定为 calc(N * var(--u)) → 2N rpx，固定 px 的字号保持 px。 - app.acss：换回 H5 设计 token（方角小倒角按钮 10rpx、卡片 14rpx、.chev 折线箭头） - splash/profile/history：底图与按钮文字图改用 H5 资源，隐私/政策弹窗按 H5 重排 - report：环形分用 conic-gradient、人脸裁切窗口叠加 face_maps、标记点百分比盒、 侧脸皱纹 pending/unavailable 文案；用 Playwright 抓 H5 94 个选择器几何比对， 整页高 2438.7 vs 2438.67 - camera：淘宝 <camera> 组件在真机整页崩溃（嵌了微信专有的 <cover-view>）， 改为默认系统相机 + `config.nativeCamera` 开关 + pages/camtest 冒烟页验证组件 - permissions：淘宝用带前缀的 scope.camera（裸名返回 5022 Scope:camera信息不存在）， 先试带前缀再退回裸名，拒绝后不再重复弹窗 - voice：非 HTTPS 资源导致的异常不再冒泡成整页崩溃；app.js 加开发版错误 toast - 开发版入口：权限诊断（启动页/相机页）、相机组件测试 - 测试 20/20（新增权限与相机能力用例）
455 lines
10 KiB
Plaintext
455 lines
10 KiB
Plaintext
/* ═════ 01 启动页 —— 逐条对照 H5:
|
|
style.css #s-splash(L83-102) .splash-bg .splash-slogan .splash-bottom .brand-row .btn-primary
|
|
ui-20261009.css L8,L20-30,L88,L100-105
|
|
ui-20261012.css L4,L9-30 .splash-slogan / .splash-slogan-copy / .splash-bottom / .brand-lockup
|
|
换算:calc(N * var(--u)) → 2N rpx;固定 px 的字号/行高/圆角保持不变。 ═════ */
|
|
|
|
page { background: #101823; }
|
|
|
|
/* H5 .screen(#s-splash: position:absolute; inset:0; overflow-y:auto) */
|
|
.splash {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #101823;
|
|
}
|
|
|
|
/* ─── H5 .splash-bg ─── */
|
|
.splash-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ─── H5 .account-status(.account-status-home) ─── */
|
|
.account-status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
.account-status-home {
|
|
position: absolute;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
right: 12px;
|
|
z-index: 2;
|
|
background: rgba(0, 0, 0, .533);
|
|
color: #fff;
|
|
}
|
|
/* H5 .account-status span::before */
|
|
.account-label { display: flex; align-items: center; }
|
|
.account-dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-right: 7px;
|
|
border-radius: 50%;
|
|
background: #b7bac0;
|
|
}
|
|
.account-status-on .account-dot { background: #34ca7b; }
|
|
.account-text { white-space: nowrap; }
|
|
/* H5 .account-logout(ui-20261012 L4) */
|
|
.account-logout {
|
|
font-size: 11px;
|
|
opacity: .8;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ─── H5 .splash-slogan.splash-slogan-updated(ui-20261012 L9-20) ─── */
|
|
.splash-slogan {
|
|
position: absolute;
|
|
left: calc(50% - 1.041667px);
|
|
top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
|
|
width: 249.305556px;
|
|
height: 75.347222px;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 23px;
|
|
font-weight: 400;
|
|
line-height: 1.16;
|
|
letter-spacing: 0;
|
|
text-shadow: none;
|
|
}
|
|
/* H5 .splash-slogan-updated .splash-slogan-copy{width:100%;height:100%;clip-path:inset(68% 0 0)}
|
|
→ 等价实现:只露出底部 32%(24.111111px),image 整体上移 68%(51.236111px) */
|
|
.splash-slogan-copy-clip {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 51.236111px;
|
|
height: 24.111111px;
|
|
overflow: hidden;
|
|
}
|
|
.splash-slogan-copy {
|
|
position: absolute;
|
|
left: 0;
|
|
top: -51.236111px;
|
|
width: 100%;
|
|
height: 75.347222px;
|
|
}
|
|
.splash-slogan-brand,
|
|
.splash-slogan-english {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: Arial, sans-serif;
|
|
font-size: 23px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
color: #fff;
|
|
}
|
|
.splash-slogan-brand { top: -4px; font-size: 28px; }
|
|
.splash-slogan-english { top: 26.736111px; }
|
|
|
|
/* ─── H5 .splash-bottom(ui-20261012 L25) ─── */
|
|
.splash-bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: max(5.882353%, env(safe-area-inset-bottom));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14.583334rpx; /* calc(7.291667 * var(--u)) */
|
|
padding-bottom: 0;
|
|
}
|
|
/* H5 .brand-row(ui-20261012 L26) */
|
|
.brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
margin-bottom: 20.833334rpx; /* calc(10.416667 * var(--u)) */
|
|
}
|
|
.brand-lockup {
|
|
width: 179.513889px;
|
|
height: 20.486111px;
|
|
}
|
|
|
|
/* ─── H5 #s-splash .btn-primary(ui-20261012 L28) ─── */
|
|
.splash .btn-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 362.5rpx; /* calc(181.25 * var(--u)) */
|
|
height: 77.777778rpx; /* calc(38.888889 * var(--u)) */
|
|
line-height: 77.777778rpx;
|
|
border-radius: 13.888888rpx; /* calc(6.944444 * var(--u)) */
|
|
background: #F5F078;
|
|
color: #282828;
|
|
font-size: 14.5px;
|
|
font-weight: 500;
|
|
letter-spacing: 1rpx;
|
|
padding: 0;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
transition: transform .12s ease;
|
|
}
|
|
.splash .btn-primary::after { border: none; }
|
|
.btn-press { transform: scale(.96); }
|
|
/* H5 .btn-history{background:#fff} */
|
|
.splash .btn-history { background: #fff; }
|
|
/* H5 .splash-button-label(ui-20261012 L29-30) */
|
|
.splash-button-label {
|
|
width: 55.902778px;
|
|
height: 13.888889px;
|
|
}
|
|
.splash .btn-history .splash-button-label,
|
|
.splash-button-label.btn-history-label {
|
|
width: 56.597222px;
|
|
height: 13.541667px;
|
|
}
|
|
.btn-busy { opacity: .6; }
|
|
|
|
/* ─── 弹层基类(H5 .overlay) ─── */
|
|
.splash .overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
/* ═══ 隐私授权弹窗 H5 #p-privacy ═══ */
|
|
/* H5 #p-privacy{background:linear-gradient(#0008,#0008),url(bg-splash-h5) center/cover} */
|
|
.overlay-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
.overlay-dim {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, .533);
|
|
}
|
|
/* H5 #p-privacy .popup(ui-20261012 L34-38) */
|
|
.splash .popup {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 307.986111px;
|
|
height: 313.194444px;
|
|
min-height: 313.194444px;
|
|
top: -42.881944px;
|
|
padding: 0;
|
|
background: #fff;
|
|
border-radius: 8.680556px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
/* H5 .popup-close / #p-privacy .popup-close(L65-66) */
|
|
.splash .popup-close {
|
|
position: absolute;
|
|
top: 10.055556px;
|
|
right: 10.055556px;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.splash .popup-close::after { border: none; }
|
|
.popup-close-img {
|
|
width: 17.708333px;
|
|
height: 17.361111px;
|
|
}
|
|
/* H5 .popup-title(L39-44) */
|
|
.splash .popup-title {
|
|
position: absolute;
|
|
left: 31.944444px;
|
|
top: 35px;
|
|
margin: 0;
|
|
font-size: 23.148148px;
|
|
line-height: 28.935185px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
color: #282828;
|
|
white-space: nowrap;
|
|
text-align: left; /* 覆盖 app.acss .popup-title{text-align:center} */
|
|
}
|
|
/* H5 .popup-body(L45-49) */
|
|
.splash .popup-body {
|
|
position: absolute;
|
|
left: 31.944444px;
|
|
top: 109.027778px;
|
|
width: 243.75px;
|
|
margin: 0;
|
|
font-size: 11.574074px;
|
|
line-height: 17.361111px;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
color: #282828;
|
|
}
|
|
/* H5 .privacy-row / .checkbox / .privacy-text / .privacy-link(L53-56) */
|
|
.splash .privacy-row {
|
|
position: absolute;
|
|
left: 29.861111px;
|
|
top: 184.375px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10.069444px;
|
|
}
|
|
.splash .checkbox {
|
|
width: 11.805556px;
|
|
height: 12.152778px;
|
|
border-radius: 50%;
|
|
border: 1px solid #282828;
|
|
background: #fff;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.splash .checkbox.checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 2px;
|
|
border-radius: 50%;
|
|
background: #2C2C2C;
|
|
}
|
|
.splash .privacy-text {
|
|
font-size: 10.127315px;
|
|
line-height: 18.807870px;
|
|
color: #757575;
|
|
white-space: nowrap;
|
|
}
|
|
.splash .privacy-link {
|
|
color: #282828;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
/* H5 #p-privacy .popup-btn(L57-63) —— 必须排在 .btn-primary 之后才能覆盖宽高 */
|
|
.splash .popup-btn {
|
|
position: absolute;
|
|
left: 63.194444px;
|
|
top: 239.930556px;
|
|
margin: 0;
|
|
width: 181.25px;
|
|
height: 38.888889px;
|
|
line-height: 38.888889px;
|
|
font-size: 14.467593px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
border-radius: 6.944444px;
|
|
}
|
|
@media (max-height: 440px) {
|
|
.splash .popup { top: 0; }
|
|
}
|
|
|
|
/* ═══ 隐私政策全文 H5 #p-policy ═══ */
|
|
.splash .overlay-policy { background: #F5F5F5; z-index: 60; }
|
|
.policy-page {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
}
|
|
/* H5 .policy-float-back + .nav-back */
|
|
.splash .policy-float-back {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
z-index: 2;
|
|
width: 27px;
|
|
height: 27px;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
|
|
box-sizing: border-box;
|
|
}
|
|
.splash .policy-float-back::after { border: none; }
|
|
/* H5 .policy-body + #p-policy .policy-body{padding-top:52px} */
|
|
.policy-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
box-sizing: border-box;
|
|
padding: 52px 20px 48px;
|
|
background: #fff;
|
|
}
|
|
.policy-title {
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
color: #282828;
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
}
|
|
.policy-h2 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #282828;
|
|
margin: 26px 0 10px;
|
|
padding-left: 9px;
|
|
border-left: 4px solid #F5F078;
|
|
line-height: 1.3;
|
|
}
|
|
.policy-p {
|
|
font-size: 12.5px;
|
|
color: #4A4A4A;
|
|
line-height: 1.9;
|
|
margin-bottom: 10px;
|
|
text-align: justify;
|
|
}
|
|
.policy-end {
|
|
font-size: 12.5px;
|
|
color: #868686;
|
|
line-height: 1.9;
|
|
text-align: center;
|
|
margin: 28px 0 10px;
|
|
}
|
|
|
|
/* ─── H5 .toast ─── */
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 15%;
|
|
transform: translateX(-50%) translateY(8px);
|
|
max-width: 86%;
|
|
background: rgba(20, 20, 20, .85);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
padding: 9px 18px;
|
|
border-radius: 18px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: all .25s ease;
|
|
z-index: 99;
|
|
box-sizing: border-box;
|
|
}
|
|
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
|
|
/* ═══ 开发版入口(H5 无;保持低调) ═══ */
|
|
.dev-entries {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
left: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.dev-entry {
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
color: rgba(255, 255, 255, .42);
|
|
}
|
|
.diag-panel {
|
|
position: absolute;
|
|
z-index: 20;
|
|
left: 32rpx;
|
|
right: 32rpx;
|
|
top: 240rpx;
|
|
bottom: 160rpx;
|
|
background: rgba(6, 16, 26, .96);
|
|
border: 1rpx solid rgba(120, 200, 255, .35);
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
.diag-scroll { flex: 1; min-height: 0; }
|
|
.diag-text {
|
|
color: #9fd0ff;
|
|
font-size: 22rpx;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.diag-close {
|
|
margin-top: 16rpx;
|
|
text-align: center;
|
|
color: #0b1622;
|
|
background: #ffd94d;
|
|
border-radius: 12rpx;
|
|
padding: 16rpx 0;
|
|
font-size: 26rpx;
|
|
}
|