506 lines
13 KiB
Plaintext
506 lines
13 KiB
Plaintext
/* ═════ 03 档案填写 —— 逐条对照 H5:
|
|
style.css #s-profile(L105-205) .profile-bg/.profile-body/.page-title/.field/.field-label/
|
|
.form-row.two/.pick/.pick-value/.pick .chev/.skin-card/.skin-axis/.axis-item/.chip/
|
|
.skin-stage/.skin-arrow/.skin-carousel/.skin-track/.skin-item/.skin-name/.skin-desc/
|
|
.skin-dots/.btn-submit/.ms-mobile-select(滚轮外观)/.overlay/.popup/.privacy 类
|
|
ui-20261009.css L31-32,L89-92
|
|
ui-20261012.css L34-69(.popup 与 #p-photoguide 定位), L169-198(#s-profile 的 --profile-space 收缩规则)
|
|
换算:calc(N * var(--u)) → 2N rpx;字号/行高/圆角固定 px 原样保留。
|
|
注:H5 的 --profile-space = min(var(--u), max(.3px, calc((100vh - 420px)/306))),
|
|
这里写成同构的 min(2rpx, max(.6rpx, ...)),并用 var(--profile-space, 2rpx) 兜底。 ═════ */
|
|
|
|
page { background: #0e0f18; }
|
|
|
|
/* H5 #s-profile(style.css L105 + ui-20261012 L172-175) */
|
|
.profile {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
background: #0e0f18;
|
|
--profile-space: min(2rpx, max(0.6rpx, calc((100vh - var(--brand-header-height, 64px) - 420px) / 306)));
|
|
}
|
|
|
|
/* H5 .profile-bg(ui-20261009 L31:bg-profile-h5,cover) */
|
|
.profile-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* H5 .profile-body(style.css L113-117 + ui-20261012 L179-184) */
|
|
.profile-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding: 68rpx 128rpx 80rpx; /* calc(34*u) calc(64*u) calc(40*u) */
|
|
padding-top: max(env(safe-area-inset-top), calc(34 * var(--profile-space, 2rpx)));
|
|
padding-bottom: max(env(safe-area-inset-bottom), calc(40 * var(--profile-space, 2rpx)));
|
|
}
|
|
|
|
/* H5 .page-title(style.css L118-122 + ui-20261009 L92 + ui-20261012 L185)
|
|
注:#s-profile 根节点自身不接收 padding-top(safe-area),与 H5 一致 */
|
|
.profile .page-title {
|
|
color: #fff;
|
|
font-size: 21.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 2rpx; /* calc(1 * var(--u)) */
|
|
text-align: center;
|
|
margin-bottom: calc(22 * var(--profile-space, 2rpx));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* H5 .field / .field-label(ui-20261012 L186-187) */
|
|
.profile .field {
|
|
margin-bottom: calc(19 * var(--profile-space, 2rpx));
|
|
flex-shrink: 0;
|
|
}
|
|
.profile .field-label {
|
|
display: block;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 14.5px;
|
|
font-weight: 400;
|
|
margin-bottom: calc(9 * var(--profile-space, 2rpx));
|
|
letter-spacing: 1rpx; /* calc(.5 * var(--u)) */
|
|
}
|
|
|
|
/* H5 .form-row.two */
|
|
.profile .form-row.two {
|
|
display: flex;
|
|
gap: 46rpx; /* calc(23 * var(--u)) */
|
|
flex-shrink: 0;
|
|
}
|
|
.profile .form-row.two .field { flex: 1; min-width: 0; }
|
|
|
|
/* H5 .pick(style.css L133-142) —— 三个选择控件同一套外观 */
|
|
.profile .pick {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
width: 100%;
|
|
height: 74rpx; /* calc(37 * var(--u)) */
|
|
padding: 0 26rpx 0 24rpx; /* 0 calc(13*u) 0 calc(12*u) */
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 10rpx; /* calc(5 * var(--u)) */
|
|
font-size: 13.5px;
|
|
color: #282828;
|
|
text-align: left;
|
|
}
|
|
.profile .pick:active { background: #F7F7F7; }
|
|
.profile .pick-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.profile .pick .chev {
|
|
flex: none;
|
|
width: 16rpx; /* calc(8 * var(--u)) */
|
|
height: 16rpx;
|
|
margin-top: -8rpx; /* calc(-4 * var(--u)) */
|
|
border-width: 0 1.5px 1.5px 0;
|
|
}
|
|
|
|
/* ─── H5 .skin-card(style.css L144-148 + ui-20261012 L189) ─── */
|
|
.profile .skin-card {
|
|
background: #fff;
|
|
border-radius: 10rpx; /* calc(5 * var(--u)) */
|
|
padding-top: calc(21 * var(--profile-space, 2rpx));
|
|
padding-bottom: calc(24 * var(--profile-space, 2rpx));
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
/* H5 .skin-axis / .axis-item / .chip */
|
|
.profile .skin-axis {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24rpx; /* calc(12 * var(--u)) */
|
|
margin-bottom: calc(18 * var(--profile-space, 2rpx));
|
|
flex-shrink: 0;
|
|
}
|
|
.profile .axis-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10rpx; /* calc(5 * var(--u)) */
|
|
font-size: 9px;
|
|
color: #282828;
|
|
}
|
|
.profile .chip {
|
|
width: 16rpx; /* calc(8 * var(--u)) */
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
.chip-dry { background: #EAE6E1; }
|
|
.chip-oily { background: #F5F078; }
|
|
.chip-balance { background: #DBF6D6; }
|
|
|
|
/* H5 .skin-stage / .skin-arrow(ui-20261012 L191) */
|
|
.profile .skin-stage {
|
|
position: relative;
|
|
padding: 0 56rpx; /* 0 calc(28 * var(--u)) */
|
|
box-sizing: border-box;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
.profile .skin-arrow {
|
|
position: absolute;
|
|
top: 84rpx; /* calc(42 * var(--u)) */
|
|
z-index: 1;
|
|
width: 52rpx; /* calc(26 * var(--u)) */
|
|
height: 52rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.profile .skin-arrow.prev { left: 10rpx; } /* calc(5 * var(--u)) */
|
|
.profile .skin-arrow.next { right: 10rpx; }
|
|
.profile .skin-arrow .chev {
|
|
width: 18rpx; /* calc(9 * var(--u)) */
|
|
height: 18rpx;
|
|
border-width: 0 1.5px 1.5px 0;
|
|
}
|
|
.profile .skin-arrow.disabled { opacity: .2; }
|
|
|
|
/* H5 .skin-carousel / .skin-track(ui-20261012 L192-193) */
|
|
.profile .skin-carousel {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
touch-action: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
.profile .skin-track {
|
|
display: flex;
|
|
flex: 0 0 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
transition: transform .32s cubic-bezier(.22, .61, .36, 1);
|
|
}
|
|
.profile .skin-track.dragging { transition: none; }
|
|
/* H5 .skin-item / .skin-item img / .skin-name / .skin-desc */
|
|
.profile .skin-item {
|
|
flex: 0 0 100%;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.profile .skin-img {
|
|
width: 218rpx; /* calc(109 * var(--u)) */
|
|
height: 218rpx;
|
|
flex-shrink: 1;
|
|
min-height: 0;
|
|
}
|
|
.profile .skin-name {
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
margin-top: calc(16 * var(--profile-space, 2rpx));
|
|
flex-shrink: 0;
|
|
}
|
|
.profile .skin-desc {
|
|
font-size: 11.5px; /* ui-20261009 L32 */
|
|
color: #282828;
|
|
line-height: 1.55;
|
|
text-align: center;
|
|
margin-top: 10rpx; /* calc(5 * var(--u)) */
|
|
width: 300rpx; /* calc(150 * var(--u)) */
|
|
max-width: 300rpx;
|
|
min-height: 35.65px; /* calc(2 * 1.55 * 11.5px) */
|
|
flex-shrink: 0;
|
|
}
|
|
/* H5 第一条描述含 <br>:用两个块级行还原硬换行 */
|
|
.profile .skin-desc-line { display: block; }
|
|
|
|
/* H5 .skin-dots / .skin-dots i */
|
|
.profile .skin-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10rpx; /* calc(5 * var(--u)) */
|
|
margin-top: calc(22 * var(--profile-space, 2rpx));
|
|
flex-shrink: 0;
|
|
}
|
|
.profile .skin-dots .dot {
|
|
width: 16rpx; /* calc(8 * var(--u)) */
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background: #D6D6D6;
|
|
transition: background .25s;
|
|
}
|
|
.profile .skin-dots .dot.on { background: #000; }
|
|
|
|
/* H5 .btn-submit */
|
|
.profile .btn-submit {
|
|
margin: calc(25 * var(--profile-space, 2rpx)) auto 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.btn-press { transform: scale(.96); }
|
|
|
|
/* ═══ 滚轮弹层:H5 vendor/mobile-select 外观(style.css L191-205) ═══ */
|
|
.profile .overlay-sheet {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
background: rgba(0, 0, 0, .55);
|
|
}
|
|
.picker-sheet {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 12px 12px 0 0;
|
|
overflow: hidden;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: border-box;
|
|
}
|
|
.picker-btn-bar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 15px;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
box-sizing: border-box;
|
|
}
|
|
.picker-cancel,
|
|
.picker-ensure {
|
|
width: 64px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
.picker-cancel { color: #757575; }
|
|
.picker-ensure { color: #282828; font-weight: 600; }
|
|
.picker-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #282828;
|
|
}
|
|
.native-picker {
|
|
width: 100%;
|
|
height: 220px;
|
|
font-size: 16px;
|
|
color: #282828;
|
|
}
|
|
.picker-cell {
|
|
font-size: 16px;
|
|
color: #282828;
|
|
text-align: center;
|
|
line-height: 44px;
|
|
}
|
|
/* H5 mobile-select: single wheel, 90% inner width and 44px yellow selection. */
|
|
.gender-sheet { animation: gender-sheet-in .4s ease; }
|
|
.gender-sheet .picker-btn-bar { padding: 0 5%; }
|
|
.gender-picker { width: 90%; margin: 0 auto; }
|
|
.gender-picker .picker-cell { height: 44px; }
|
|
@keyframes gender-sheet-in {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
/* ═══ 拍照引导弹窗 H5 #p-photoguide(L311-327) ═══ */
|
|
.profile .overlay-guide {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #101823;
|
|
}
|
|
.profile .guide-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.profile .guide-bg-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.profile .guide-dim {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
/* H5 .splash-slogan.splash-slogan-updated(ui-20261012 L9-20) */
|
|
.profile .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;
|
|
}
|
|
.profile .splash-slogan-copy-clip {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 51.236111px;
|
|
height: 24.111111px;
|
|
overflow: hidden;
|
|
}
|
|
.profile .splash-slogan-copy {
|
|
position: absolute;
|
|
left: 0;
|
|
top: -51.236111px;
|
|
width: 100%;
|
|
height: 75.347222px;
|
|
}
|
|
.profile .splash-slogan-brand,
|
|
.profile .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;
|
|
}
|
|
.profile .splash-slogan-brand { top: -4px; font-size: 28px; }
|
|
.profile .splash-slogan-english { top: 26.736111px; }
|
|
|
|
/* H5 #p-photoguide .popup(ui-20261012 L34-38) */
|
|
.profile .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;
|
|
}
|
|
.profile .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;
|
|
}
|
|
.profile .popup-close::after { border: none; }
|
|
.popup-close-img {
|
|
width: 17.708333px;
|
|
height: 17.361111px;
|
|
}
|
|
/* H5 #p-photoguide .popup-title(L44) */
|
|
.profile .popup-title {
|
|
position: absolute;
|
|
left: 37.5px;
|
|
top: 61.388889px;
|
|
margin: 0;
|
|
font-size: 23.148148px;
|
|
line-height: 28.935185px;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
color: #282828;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
/* H5 .guide-description(L45-52) */
|
|
.profile .guide-description {
|
|
position: absolute;
|
|
left: 37.847222px;
|
|
top: 135.069444px;
|
|
width: 237px;
|
|
margin: 0;
|
|
font-size: 11.574074px;
|
|
line-height: 17.361111px;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
}
|
|
.profile .guide-line { white-space: nowrap; }
|
|
/* H5 #p-photoguide .popup-btn(L57-64) */
|
|
.profile .popup-btn {
|
|
position: absolute;
|
|
left: 63.194444px;
|
|
top: 219.791667px;
|
|
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) {
|
|
.profile .popup { top: 0; }
|
|
}
|
|
|
|
/* ─── 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); }
|
|
.session-guard { position: relative; z-index: 10; padding: 120rpx 40rpx; text-align: center; font-size: 13px; line-height: 1.8; color: #707070; }
|
|
.session-guard .btn-primary { margin: 32rpx auto 0; }
|