900 lines
27 KiB
Plaintext
900 lines
27 KiB
Plaintext
/** app.wxss —— v2 设计令牌与通用样式：零彩色灰阶 / 毛玻璃浮层 / 杂志大留白 **/
|
|
@import "styles/icons.wxss";
|
|
|
|
/* ============================================================================
|
|
§1 设计令牌（唯一颜色与度量来源，页面禁止硬编码彩色）
|
|
========================================================================== */
|
|
page {
|
|
/* 墨阶 */
|
|
--ink: #0A0A0A;
|
|
--ink-2: #6E6E73;
|
|
--ink-3: #AEAEB2;
|
|
--ink-4: #C9C9CE;
|
|
--art: #B9B9BE; /* 衣物线稿色 */
|
|
/* 纸面 */
|
|
--paper: #FFFFFF;
|
|
--paper-2: #F7F7F5;
|
|
--paper-3: #EFEFED;
|
|
/* 发丝线与填充 */
|
|
--hairline: rgba(0, 0, 0, .08);
|
|
--hairline-2: rgba(0, 0, 0, .14);
|
|
--fill: rgba(120, 120, 128, .07);
|
|
--fill-2: rgba(120, 120, 128, .13);
|
|
/* 深色块（全稿唯一视觉锚点：商城会员卡） */
|
|
--block: #1C1C1E;
|
|
--block-2: #2C2C2E;
|
|
/* 玻璃 */
|
|
--glass: rgba(255, 255, 255, .72);
|
|
--glass-2: rgba(255, 255, 255, .86);
|
|
--glass-dark: rgba(28, 28, 30, .82);
|
|
/* 字族 */
|
|
--serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
|
|
--sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
|
/* 缓动 */
|
|
--ease: cubic-bezier(.32, .72, 0, 1);
|
|
--ease-out: cubic-bezier(.22, 1, .36, 1);
|
|
/* 圆角：仅小控件与抽屉使用圆角，大块内容保持直角 */
|
|
--r-img: 8rpx;
|
|
--r-ctrl: 20rpx;
|
|
--r-sheet: 40rpx;
|
|
--r-pill: 999rpx;
|
|
/* 度量 */
|
|
--pad: 40rpx;
|
|
--nav-h: 88rpx;
|
|
--tab-h: 120rpx;
|
|
--safe-b: 28rpx;
|
|
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-size: 30rpx;
|
|
line-height: 1.62;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
view,
|
|
text,
|
|
image,
|
|
input,
|
|
textarea,
|
|
scroll-view,
|
|
swiper,
|
|
swiper-item {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ============================================================================
|
|
§2 排版 · 双字阶（衬线大标题 / 无衬线正文）
|
|
========================================================================== */
|
|
.eyebrow {
|
|
font-size: 20rpx;
|
|
font-weight: 600;
|
|
letter-spacing: .16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
line-height: 1;
|
|
}
|
|
.display {
|
|
font-family: var(--serif);
|
|
font-size: 68rpx;
|
|
font-weight: 500;
|
|
letter-spacing: -.012em;
|
|
line-height: 1.14;
|
|
}
|
|
.t-xl { font-family: var(--serif); font-size: 52rpx; font-weight: 500; letter-spacing: -.01em; line-height: 1.22; }
|
|
.t-lg { font-family: var(--serif); font-size: 40rpx; font-weight: 500; letter-spacing: -.005em; line-height: 1.32; }
|
|
.t-md { font-size: 34rpx; font-weight: 600; line-height: 1.38; }
|
|
.t-bd { font-size: 30rpx; line-height: 1.62; }
|
|
.t-sm { font-size: 26rpx; line-height: 1.55; color: var(--ink-2); }
|
|
.t-xs { font-size: 22rpx; line-height: 1.5; color: var(--ink-3); }
|
|
.t-quote { font-family: var(--serif); font-size: 32rpx; line-height: 1.85; letter-spacing: .005em; color: var(--ink); }
|
|
.num { font-variant-numeric: tabular-nums; }
|
|
.c-ink { color: var(--ink); }
|
|
.c-2 { color: var(--ink-2); }
|
|
.c-3 { color: var(--ink-3); }
|
|
.c-4 { color: var(--ink-4); }
|
|
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* ============================================================================
|
|
§3 布局 · 页面容器 / 页头 / 间距 / 发丝线
|
|
========================================================================== */
|
|
.page {
|
|
min-height: 100vh;
|
|
background: var(--paper);
|
|
}
|
|
/* 底部预留：悬浮标签栏 / 悬浮双按钮条 / 悬浮操作条遮挡避让 */
|
|
.pb-tab { padding-bottom: calc(var(--tab-h) + 60rpx + env(safe-area-inset-bottom)); }
|
|
.pb-float { padding-bottom: calc(var(--tab-h) + 220rpx + env(safe-area-inset-bottom)); }
|
|
.pb-dock { padding-bottom: calc(190rpx + env(safe-area-inset-bottom)); }
|
|
.pb-safe { padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); }
|
|
|
|
.head { padding: 24rpx var(--pad) 0; }
|
|
.head .eyebrow { margin-bottom: 20rpx; }
|
|
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28rpx; }
|
|
.head-meta {
|
|
font-size: 22rpx;
|
|
color: var(--ink-3);
|
|
letter-spacing: .02em;
|
|
padding-bottom: 12rpx;
|
|
text-align: right;
|
|
line-height: 1.6;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.pad { padding-left: var(--pad); padding-right: var(--pad); }
|
|
.spacer { flex: 1; }
|
|
.center { display: flex; align-items: center; justify-content: center; }
|
|
.stack { display: flex; flex-direction: column; }
|
|
.sec { margin-top: 64rpx; }
|
|
.hair { border-bottom: 1rpx solid var(--hairline); }
|
|
.hair-t { border-top: 1rpx solid var(--hairline); }
|
|
.gap-8 { height: 8rpx; }
|
|
.gap-16 { height: 16rpx; }
|
|
.gap-24 { height: 24rpx; }
|
|
.gap-32 { height: 32rpx; }
|
|
.gap-48 { height: 48rpx; }
|
|
.gap-64 { height: 64rpx; }
|
|
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
|
|
|
|
/* ============================================================================
|
|
§4 按钮 · 实心黑 / 描边 / 浅填充 / 玻璃 / 下划线文字
|
|
========================================================================== */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14rpx;
|
|
height: 100rpx;
|
|
padding: 0 44rpx;
|
|
border-radius: var(--r-pill);
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
letter-spacing: .01em;
|
|
white-space: nowrap;
|
|
transition: transform .18s var(--ease), opacity .18s var(--ease), background .2s var(--ease);
|
|
}
|
|
.btn:active { transform: scale(.972); opacity: .74; }
|
|
.btn--block { display: flex; width: 100%; }
|
|
.btn--sm { height: 72rpx; padding: 0 30rpx; font-size: 27rpx; }
|
|
.btn--ink { background: var(--ink); color: #fff; }
|
|
.btn--ink.is-off { background: var(--fill-2); color: var(--ink-3); pointer-events: none; }
|
|
.btn--ghost { box-shadow: inset 0 0 0 1rpx var(--hairline-2); color: var(--ink); }
|
|
.btn--plain { background: var(--fill); color: var(--ink); }
|
|
.btn--glass {
|
|
background: var(--glass-2);
|
|
-webkit-backdrop-filter: saturate(180%) blur(22px);
|
|
backdrop-filter: saturate(180%) blur(22px);
|
|
border: 1rpx solid rgba(255, 255, 255, .7);
|
|
box-shadow: 0 16rpx 48rpx -20rpx rgba(0, 0, 0, .18);
|
|
color: var(--ink);
|
|
}
|
|
.btn--text {
|
|
height: auto;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
text-underline-offset: 7rpx;
|
|
text-decoration-thickness: 1rpx;
|
|
text-decoration-color: var(--ink-4);
|
|
}
|
|
.btn--text:active { opacity: .5; transform: none; }
|
|
.btn .icon { width: 34rpx; height: 34rpx; }
|
|
|
|
/* ============================================================================
|
|
§5 胶囊标签 · 零彩色状态语义
|
|
进行中/强调 = pill--ink；中性 = pill；失效/只读 = pill--line + 降透明
|
|
========================================================================== */
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
height: 46rpx;
|
|
padding: 0 18rpx;
|
|
border-radius: var(--r-pill);
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
letter-spacing: .015em;
|
|
background: var(--fill);
|
|
color: var(--ink-2);
|
|
white-space: nowrap;
|
|
}
|
|
.pill--ink { background: var(--ink); color: #fff; }
|
|
.pill--line { background: transparent; box-shadow: inset 0 0 0 1rpx var(--hairline-2); color: var(--ink-2); }
|
|
.pill--plain { background: transparent; color: var(--ink-3); padding: 0 4rpx; }
|
|
.pill--dim { opacity: .45; }
|
|
.pill--dot::before {
|
|
content: '';
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
opacity: .55;
|
|
}
|
|
.pill .icon { width: 24rpx; height: 24rpx; }
|
|
|
|
/* ============================================================================
|
|
§6 列表 · 分组标题 / 行 / 规格表 / 数字条
|
|
========================================================================== */
|
|
.rows { background: var(--paper); }
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
min-height: 104rpx;
|
|
width: 100%;
|
|
padding: 0 var(--pad);
|
|
border-bottom: 1rpx solid var(--hairline);
|
|
transition: background .16s var(--ease);
|
|
}
|
|
.row:active { background: var(--fill); }
|
|
.row-lb { flex: 1; font-size: 30rpx; line-height: 1.4; }
|
|
.row-vl { font-size: 27rpx; color: var(--ink-3); font-variant-numeric: tabular-nums; }
|
|
.row-ch { width: 26rpx; height: 26rpx; color: var(--ink-4); flex-shrink: 0; }
|
|
.row-ic { width: 38rpx; height: 38rpx; color: var(--ink-2); flex-shrink: 0; }
|
|
.row-badge {
|
|
min-width: 34rpx;
|
|
height: 34rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 18rpx;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
font-weight: 600;
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.grp-hd { display: flex; align-items: baseline; gap: 18rpx; padding: 0 var(--pad) 22rpx; }
|
|
.grp-hd .gh-cn { font-size: 26rpx; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
|
|
.grp-hd .gh-en { font-size: 19rpx; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
|
|
.grp-line { height: 1rpx; background: var(--hairline); margin: 0 var(--pad) 8rpx; }
|
|
|
|
.spec {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 28rpx;
|
|
padding: 22rpx var(--pad);
|
|
border-bottom: 1rpx solid var(--hairline);
|
|
}
|
|
.spec-k { width: 160rpx; flex-shrink: 0; font-size: 26rpx; color: var(--ink-2); line-height: 1.5; }
|
|
.spec-v { flex: 1; font-size: 29rpx; line-height: 1.5; text-align: right; color: var(--ink); }
|
|
.spec-v .dot {
|
|
display: inline-block;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
vertical-align: -1rpx;
|
|
box-shadow: inset 0 0 0 1rpx rgba(0, 0, 0, .14);
|
|
}
|
|
|
|
.stats { display: flex; border-top: 1rpx solid var(--hairline); border-bottom: 1rpx solid var(--hairline); }
|
|
.stat { flex: 1; padding: 28rpx 0 30rpx; text-align: center; position: relative; }
|
|
.stat + .stat::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 28rpx;
|
|
bottom: 30rpx;
|
|
width: 1rpx;
|
|
background: var(--hairline);
|
|
}
|
|
.stat-n {
|
|
font-family: var(--serif);
|
|
font-size: 48rpx;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: -.01em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat-n .unit { font-size: 24rpx; color: var(--ink-3); margin-left: 4rpx; }
|
|
.stat-l {
|
|
margin-top: 12rpx;
|
|
font-size: 19rpx;
|
|
font-weight: 600;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
}
|
|
|
|
/* ============================================================================
|
|
§7 进度轨 / 评分点阵 / 刻度尺
|
|
========================================================================== */
|
|
.track { height: 3rpx; background: var(--hairline-2); position: relative; overflow: hidden; }
|
|
.track .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
|
|
.track.is-warn .bar { background: var(--ink-2); }
|
|
|
|
.dots { display: inline-flex; gap: 10rpx; vertical-align: middle; }
|
|
.dots .d { width: 16rpx; height: 16rpx; border-radius: 50%; box-shadow: inset 0 0 0 2rpx var(--ink-4); }
|
|
.dots .d.on { background: var(--ink); box-shadow: none; }
|
|
|
|
.scale { position: relative; height: 52rpx; }
|
|
.scale-line { position: absolute; left: 0; right: 0; top: 24rpx; height: 2rpx; background: var(--hairline-2); }
|
|
.scale-fill { position: absolute; left: 0; top: 24rpx; height: 2rpx; background: var(--ink); }
|
|
.scale-pip {
|
|
position: absolute;
|
|
top: 17rpx;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
transform: translateX(-50%);
|
|
}
|
|
.scale-ticks {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 20rpx;
|
|
height: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.scale-ticks .tk { width: 1rpx; height: 10rpx; background: var(--hairline-2); }
|
|
|
|
/* ============================================================================
|
|
§8 图片瓦片 · 拼图封面 · 勾选
|
|
========================================================================== */
|
|
.tile-img {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
background: var(--paper-2);
|
|
border-radius: var(--r-img);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.tile-img .ph { width: 56%; height: 56%; color: var(--art); }
|
|
.tile-img.is-empty .ph { width: 34%; height: 34%; color: var(--ink-4); }
|
|
.tile-img .pic { width: 100%; height: 100%; }
|
|
.tile-name {
|
|
margin-top: 18rpx;
|
|
font-family: var(--serif);
|
|
font-size: 28rpx;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.tile-sub {
|
|
margin-top: 4rpx;
|
|
font-size: 21rpx;
|
|
color: var(--ink-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.tile-flag {
|
|
position: absolute;
|
|
top: 14rpx;
|
|
left: 14rpx;
|
|
height: 38rpx;
|
|
padding: 0 14rpx;
|
|
border-radius: 20rpx;
|
|
background: var(--glass-2);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
font-size: 19rpx;
|
|
font-weight: 500;
|
|
line-height: 38rpx;
|
|
color: var(--ink-2);
|
|
}
|
|
.tile-flag.is-ink { background: var(--ink); color: #fff; }
|
|
.tile-check {
|
|
position: absolute;
|
|
right: 14rpx;
|
|
bottom: 14rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, .9), 0 0 0 1rpx rgba(0, 0, 0, .12);
|
|
background: rgba(255, 255, 255, .55);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
transition: background .18s var(--ease), color .18s var(--ease);
|
|
}
|
|
.tile-check .icon { width: 24rpx; height: 24rpx; opacity: 0; }
|
|
.is-picked .tile-check { background: var(--ink); }
|
|
.is-picked .tile-check .icon { opacity: 1; }
|
|
.is-picked .tile-img { box-shadow: inset 0 0 0 3rpx var(--ink); }
|
|
|
|
.collage {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 2rpx;
|
|
background: var(--paper);
|
|
border-radius: var(--r-img);
|
|
overflow: hidden;
|
|
aspect-ratio: 1 / 1;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.collage--1 { grid-template-columns: 1fr; aspect-ratio: 1 / 1; }
|
|
.collage--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 2 / 1; }
|
|
.collage--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
|
|
.collage--3 .cg:first-child { grid-row: span 2; }
|
|
.collage .cg {
|
|
position: relative;
|
|
background: var(--paper-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.collage .cg .ph { width: 44%; height: 44%; color: var(--art); }
|
|
.collage .cg .pic { width: 100%; height: 100%; }
|
|
.cg-more {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, .7);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--serif);
|
|
font-size: 34rpx;
|
|
color: var(--ink);
|
|
}
|
|
.cg-badge {
|
|
position: absolute;
|
|
right: 16rpx;
|
|
bottom: 16rpx;
|
|
height: 42rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 22rpx;
|
|
background: var(--glass-2);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
backdrop-filter: blur(12px);
|
|
font-size: 21rpx;
|
|
line-height: 42rpx;
|
|
color: var(--ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ============================================================================
|
|
§9 骨架屏 · 空态 · 页脚提示
|
|
========================================================================== */
|
|
.sk {
|
|
background: linear-gradient(90deg, #F2F2F0 25%, #E9E9E6 37%, #F2F2F0 63%);
|
|
background-size: 400% 100%;
|
|
animation: skLoad 1.5s ease infinite;
|
|
}
|
|
@keyframes skLoad {
|
|
0% { background-position: 100% 50%; }
|
|
100% { background-position: 0 50%; }
|
|
}
|
|
.sk-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-img); }
|
|
.sk-ln { height: 20rpx; border-radius: 10rpx; }
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 128rpx 88rpx 0;
|
|
}
|
|
.empty-ic { width: 104rpx; height: 104rpx; color: var(--ink-4); margin-bottom: 40rpx; }
|
|
.empty-t { font-family: var(--serif); font-size: 38rpx; font-weight: 500; letter-spacing: -.005em; }
|
|
.empty-d { margin-top: 16rpx; font-size: 26rpx; line-height: 1.7; color: var(--ink-2); max-width: 480rpx; }
|
|
.empty-b { margin-top: 48rpx; }
|
|
.foot-note { padding: 52rpx 0 16rpx; text-align: center; font-size: 22rpx; color: var(--ink-4); letter-spacing: .06em; }
|
|
|
|
/* ============================================================================
|
|
§10 分段条 / 分类条 · 下划线式极简
|
|
========================================================================== */
|
|
.seg { display: flex; gap: 36rpx; padding: 0 var(--pad); white-space: nowrap; }
|
|
.seg-item {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
padding: 22rpx 0 24rpx;
|
|
font-size: 29rpx;
|
|
color: var(--ink-3);
|
|
letter-spacing: .005em;
|
|
transition: color .2s var(--ease);
|
|
}
|
|
.seg-item.is-on { color: var(--ink); font-weight: 500; }
|
|
.seg-item.is-on::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 3rpx;
|
|
background: var(--ink);
|
|
border-radius: 2rpx;
|
|
}
|
|
.seg-scroll { white-space: nowrap; }
|
|
|
|
/* ============================================================================
|
|
§11 悬浮层 · 底部操作条 / 双按钮条 / FAB
|
|
========================================================================== */
|
|
.dock {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 45;
|
|
padding: 24rpx var(--pad) calc(28rpx + env(safe-area-inset-bottom));
|
|
background: var(--glass);
|
|
-webkit-backdrop-filter: saturate(180%) blur(22px);
|
|
backdrop-filter: saturate(180%) blur(22px);
|
|
border-top: 1rpx solid var(--hairline);
|
|
}
|
|
.dock-row { display: flex; align-items: center; gap: 24rpx; }
|
|
.dock-ic {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
font-size: 25rpx;
|
|
color: var(--ink-2);
|
|
font-variant-numeric: tabular-nums;
|
|
transition: color .18s var(--ease), transform .18s var(--ease);
|
|
}
|
|
.dock-ic .icon { width: 42rpx; height: 42rpx; }
|
|
.dock-ic.is-on { color: var(--ink); }
|
|
.dock-ic:active { transform: scale(.92); }
|
|
|
|
.float-duo {
|
|
position: fixed;
|
|
left: 32rpx;
|
|
right: 32rpx;
|
|
bottom: calc(var(--tab-h) + 48rpx + env(safe-area-inset-bottom));
|
|
z-index: 45;
|
|
display: flex;
|
|
gap: 18rpx;
|
|
}
|
|
.float-duo .btn { flex: 1; height: 92rpx; font-size: 28rpx; }
|
|
|
|
.fab {
|
|
position: fixed;
|
|
right: 40rpx;
|
|
bottom: calc(var(--tab-h) + 56rpx + env(safe-area-inset-bottom));
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 20rpx 44rpx -16rpx rgba(0, 0, 0, .45);
|
|
z-index: 46;
|
|
transition: transform .18s var(--ease), opacity .18s var(--ease);
|
|
}
|
|
.fab .icon { width: 44rpx; height: 44rpx; }
|
|
.fab:active { transform: scale(.94); opacity: .8; }
|
|
|
|
/* ============================================================================
|
|
§12 表单 · 输入框 / 文本域 / 选择行
|
|
========================================================================== */
|
|
.input {
|
|
height: 96rpx;
|
|
background: var(--fill);
|
|
border-radius: var(--r-ctrl);
|
|
padding: 0 28rpx;
|
|
font-size: 29rpx;
|
|
width: 100%;
|
|
}
|
|
.textarea {
|
|
background: var(--fill);
|
|
border-radius: var(--r-ctrl);
|
|
padding: 22rpx 28rpx;
|
|
font-size: 29rpx;
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
}
|
|
.input-ph { color: var(--ink-3); }
|
|
|
|
/* ============================================================================
|
|
§13 通用动效
|
|
========================================================================== */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(16rpx); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
.fade-up { animation: fadeUp .42s var(--ease) both; }
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: .35; transform: scale(.96); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
.pulse { animation: pulse 1.6s var(--ease) infinite; }
|
|
|
|
/* ============================================================================
|
|
§14 导航右侧操作（供 navigation-bar 的 right 插槽内容使用）
|
|
========================================================================== */
|
|
.nav-action {
|
|
font-size: 28rpx;
|
|
color: var(--ink-2);
|
|
letter-spacing: .01em;
|
|
white-space: nowrap;
|
|
padding: 12rpx 4rpx;
|
|
transition: color .16s var(--ease), opacity .16s var(--ease);
|
|
}
|
|
.nav-action:active { opacity: .5; }
|
|
.nav-action--ink { color: var(--ink); font-weight: 500; }
|
|
.nav-more {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ink);
|
|
}
|
|
.nav-more .icon { width: 40rpx; height: 40rpx; }
|
|
|
|
/* ============================================================================
|
|
§15 底部抽屉（页面级 Sheet，含抓手 / 标题行 / 滚动体 / 底部操作区）
|
|
========================================================================== */
|
|
/* 遮罩只压暗、不做全屏模糊：全屏 backdrop-filter 会让整页发虚 */
|
|
.scrim {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 70;
|
|
background: rgba(0, 0, 0, .28);
|
|
animation: fadeIn .28s var(--ease) both;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.sheet-wrap {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 71;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
.sheet {
|
|
width: 100%;
|
|
max-height: 86vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: var(--r-sheet) var(--r-sheet) 0 0;
|
|
overflow: hidden;
|
|
background: var(--glass-2);
|
|
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
|
backdrop-filter: saturate(180%) blur(30px);
|
|
border-top: 1rpx solid rgba(255, 255, 255, .7);
|
|
box-shadow: 0 -36rpx 100rpx -40rpx rgba(0, 0, 0, .28);
|
|
animation: sheetIn .46s var(--ease) both;
|
|
}
|
|
@keyframes sheetIn {
|
|
from { transform: translateY(101%); }
|
|
to { transform: none; }
|
|
}
|
|
.sheet-grab {
|
|
width: 72rpx;
|
|
height: 8rpx;
|
|
border-radius: 4rpx;
|
|
background: var(--ink-4);
|
|
margin: 16rpx auto 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.sheet-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
padding: 28rpx var(--pad) 24rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.sheet-hd .sheet-t { font-size: 32rpx; font-weight: 600; letter-spacing: -.005em; }
|
|
.sheet-hd .sheet-x { font-size: 28rpx; color: var(--ink-2); }
|
|
.sheet-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.sheet-foot {
|
|
padding: 24rpx var(--pad) calc(32rpx + env(safe-area-inset-bottom));
|
|
border-top: 1rpx solid var(--hairline);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================================================
|
|
§16 衣物处理过程（上传页处理中态 / 衣物详情处理中态共用）
|
|
========================================================================== */
|
|
.up-preview {
|
|
margin: 52rpx var(--pad) 0;
|
|
aspect-ratio: 4 / 5;
|
|
background: var(--paper-2);
|
|
border-radius: var(--r-img);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.up-preview .ph { width: 44%; height: 44%; color: var(--art); }
|
|
.up-preview .pic { width: 100%; height: 100%; }
|
|
|
|
.up-steps {
|
|
padding: 64rpx var(--pad) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.up-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28rpx;
|
|
position: relative;
|
|
padding-bottom: 48rpx;
|
|
}
|
|
.up-step:last-child { padding-bottom: 0; }
|
|
/* 竖向发丝线连接 */
|
|
.up-step::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 9rpx;
|
|
top: 26rpx;
|
|
bottom: 0;
|
|
width: 1rpx;
|
|
background: var(--hairline-2);
|
|
}
|
|
.up-step:last-child::before { display: none; }
|
|
.up-dot {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--paper);
|
|
box-shadow: inset 0 0 0 2rpx var(--ink-4);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.up-step.is-done .up-dot { background: var(--ink); box-shadow: none; }
|
|
.up-step.is-on .up-dot {
|
|
box-shadow: inset 0 0 0 2rpx var(--ink);
|
|
animation: dotPulse 1.8s var(--ease) infinite;
|
|
}
|
|
@keyframes dotPulse {
|
|
0%, 100% { box-shadow: inset 0 0 0 2rpx var(--ink), 0 0 0 0 rgba(10, 10, 10, .18); }
|
|
55% { box-shadow: inset 0 0 0 2rpx var(--ink), 0 0 0 12rpx rgba(10, 10, 10, 0); }
|
|
}
|
|
.up-lb { font-size: 27rpx; color: var(--ink-3); letter-spacing: .01em; }
|
|
.up-step.is-done .up-lb,
|
|
.up-step.is-on .up-lb { color: var(--ink); }
|
|
|
|
/* 失败态「！」 */
|
|
.up-bang {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 44rpx;
|
|
box-shadow: inset 0 0 0 1rpx var(--hairline-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--serif);
|
|
font-size: 46rpx;
|
|
line-height: 1;
|
|
}
|
|
.up-duo { display: flex; gap: 20rpx; padding: 56rpx var(--pad) 0; }
|
|
.up-duo .btn { flex: 1; }
|
|
|
|
/* ============================================================================
|
|
§17 居中玻璃弹窗卡（页面级自定义弹窗，如登录新手礼包）
|
|
========================================================================== */
|
|
.modal-wrap {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 72;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 68rpx;
|
|
}
|
|
.modal {
|
|
width: 100%;
|
|
max-width: 576rpx;
|
|
border-radius: var(--r-sheet);
|
|
overflow: hidden;
|
|
background: var(--glass-2);
|
|
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
|
backdrop-filter: saturate(180%) blur(30px);
|
|
border: 1rpx solid rgba(255, 255, 255, .7);
|
|
box-shadow: 0 48rpx 120rpx -36rpx rgba(0, 0, 0, .32);
|
|
animation: modalIn .42s var(--ease) both;
|
|
}
|
|
@keyframes modalIn {
|
|
from { opacity: 0; transform: scale(.94); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
.modal-body { padding: 44rpx 40rpx 36rpx; text-align: center; }
|
|
.modal-title {
|
|
font-family: var(--serif);
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
letter-spacing: -.005em;
|
|
}
|
|
.modal-text {
|
|
margin-top: 16rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.6;
|
|
color: var(--ink-2);
|
|
}
|
|
.modal-acts { display: flex; border-top: 1rpx solid var(--hairline); }
|
|
.modal-act {
|
|
flex: 1;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: var(--ink-2);
|
|
transition: background .16s var(--ease);
|
|
}
|
|
.modal-act:active { background: var(--fill); }
|
|
.modal-act + .modal-act { border-left: 1rpx solid var(--hairline); }
|
|
.modal-act--main { color: var(--ink); font-weight: 600; }
|
|
|
|
/* ============================================================================
|
|
§18 游客浏览态（未登录）
|
|
合规要求：打开小程序可先浏览体验功能，登录仅由用户主动选择。
|
|
样式只在既有版式内追加一层：细描边提示条 + 示例角标 + 低调登录引导。
|
|
========================================================================== */
|
|
.guest-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
margin: 26rpx var(--pad) 0;
|
|
padding: 20rpx 24rpx;
|
|
border: 1rpx solid var(--hairline-2);
|
|
border-radius: var(--r-ctrl);
|
|
background: var(--paper-2);
|
|
transition: background .18s var(--ease);
|
|
}
|
|
.guest-bar:active { background: var(--fill); }
|
|
.guest-bar .icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
color: var(--ink-3);
|
|
flex-shrink: 0;
|
|
}
|
|
.guest-bar .gb-t {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
line-height: 1.45;
|
|
color: var(--ink-2);
|
|
letter-spacing: .01em;
|
|
}
|
|
.guest-bar .gb-a {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
flex-shrink: 0;
|
|
}
|
|
/* 游客态底部一行登录引导 */
|
|
.guest-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
padding: 52rpx var(--pad) 0;
|
|
font-size: 23rpx;
|
|
color: var(--ink-3);
|
|
letter-spacing: .02em;
|
|
}
|
|
.guest-foot .gf-a {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
text-underline-offset: 7rpx;
|
|
text-decoration-thickness: 1rpx;
|
|
text-decoration-color: var(--ink-4);
|
|
}
|