309 lines
7.8 KiB
Plaintext
309 lines
7.8 KiB
Plaintext
/* ── 全局设计令牌:Vital 风格(参考 vital_style_reference.md)──
|
|
单一紫色主色 + 黑白灰层级:强调动作用黑,品牌用紫,其余靠灰度撑层级 */
|
|
page {
|
|
/* 主色板 */
|
|
--purple: #8b7cf6;
|
|
--purple-light: #a99bf8;
|
|
--purple-deep: #7563e0;
|
|
--accent-dark: #2b2b30;
|
|
|
|
/* 兼容旧变量名:六彩体系全部收敛到 Vital 色板,
|
|
旧渐变 coral→tangerine 自动变为 紫→浅紫 */
|
|
--coral: var(--purple);
|
|
--tangerine: var(--purple-light);
|
|
--lemon: var(--purple-light);
|
|
--mint: #4bbe9a;
|
|
--sky: var(--purple);
|
|
--lilac: var(--purple);
|
|
|
|
--pink: var(--purple);
|
|
--pink-light: rgba(139, 124, 246, 0.12);
|
|
--orange: var(--purple-light);
|
|
--yellow: var(--purple-light);
|
|
--green: var(--mint);
|
|
--blue: var(--purple);
|
|
--violet: var(--purple);
|
|
--ink: #1b1b20;
|
|
|
|
--bg-primary: #f1f2f6;
|
|
--bg-page: #f1f2f6;
|
|
|
|
--text-primary: #1b1b20;
|
|
--text-secondary: #6e7280;
|
|
--text-tertiary: #b9bdc6;
|
|
|
|
/* 紫底上的半透明白(头部胶囊、次级卡片) */
|
|
--on-primary: rgba(255, 255, 255, 0.22);
|
|
--on-primary-strong: rgba(255, 255, 255, 0.32);
|
|
|
|
/* 旧玻璃变量 → 实底白卡 */
|
|
--glass: #ffffff;
|
|
--glass-strong: #ffffff;
|
|
--glass-edge: rgba(255, 255, 255, 0);
|
|
|
|
--border-card: rgba(255, 255, 255, 0);
|
|
--border-subtle: rgba(27, 27, 32, 0.06);
|
|
|
|
/* 中性阴影:大模糊、低不透明度,光源一致来自上方 */
|
|
--shadow-soft: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
|
|
--shadow-card: 0 16rpx 48rpx rgba(27, 27, 32, 0.06);
|
|
--shadow-pop: 0 12rpx 32rpx rgba(43, 43, 48, 0.22);
|
|
|
|
--radius-sm: 20rpx;
|
|
--radius-md: 32rpx;
|
|
--radius-lg: 48rpx;
|
|
--radius-full: 9999rpx;
|
|
|
|
--tab-h: 112rpx;
|
|
|
|
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg-page);
|
|
color: var(--text-primary);
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ── 重置 ── */
|
|
view, text, image, button, input, textarea {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
line-height: 1;
|
|
font-family: inherit;
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
/* ── 通用卡片:纯白实底、大圆角、柔和中性阴影 ── */
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-soft);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── 旧玻璃工具类 → 实底白卡(Vital 无毛玻璃,靠层叠和阴影做深度) ── */
|
|
.glass {
|
|
background: #ffffff;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: #ffffff;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
/* ── 标签:白色小胶囊,不再旋转 ── */
|
|
.sticker-tag {
|
|
position: absolute;
|
|
background: #ffffff;
|
|
color: var(--text-primary);
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
padding: 10rpx 22rpx;
|
|
border-radius: var(--radius-full);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.sticker-tag.tilt-r {
|
|
transform: none;
|
|
}
|
|
|
|
/* ── 主按钮:黑色胶囊(Vital 的 CTA 用强调黑,不用主题色) ── */
|
|
.btn-primary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--accent-dark);
|
|
color: #fff;
|
|
border-radius: var(--radius-full);
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
box-shadow: var(--shadow-pop);
|
|
transition: transform 0.15s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ── 数字分级排版:整数超大加粗 + 小数/单位缩小变灰 ── */
|
|
.num-xl {
|
|
font-size: 96rpx;
|
|
font-weight: 700;
|
|
letter-spacing: -2rpx;
|
|
line-height: 1;
|
|
color: var(--text-primary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.num-sub {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── 信息行:左数字、右说明 + chevron,中间渐隐细线 ── */
|
|
.row-line {
|
|
flex: 1;
|
|
height: 2rpx;
|
|
margin: 0 20rpx;
|
|
background: linear-gradient(90deg, rgba(27, 27, 32, 0.10), rgba(27, 27, 32, 0.02));
|
|
}
|
|
|
|
.chevron {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-top: 4rpx solid var(--text-tertiary);
|
|
border-right: 4rpx solid var(--text-tertiary);
|
|
transform: rotate(45deg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── 页面顶部状态栏占位 ── */
|
|
.status-placeholder {
|
|
height: env(safe-area-inset-top, 44rpx);
|
|
}
|
|
|
|
/* ── 紫色渐变淡出头部:从顶部主色向下融入页面背景,无分界线 ── */
|
|
.hero-fade {
|
|
background: linear-gradient(180deg, #9181f4 0%, #a99bf8 55%, rgba(169, 155, 248, 0) 100%);
|
|
}
|
|
|
|
/* ── 滚动区通用 ── */
|
|
.scroll-view {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── Hashtag 标签:主色淡紫底 ── */
|
|
.hashtag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
color: var(--purple-deep);
|
|
background: var(--pink-light);
|
|
border-radius: var(--radius-full);
|
|
padding: 6rpx 14rpx;
|
|
}
|
|
|
|
/* ── 在线绿点(语义色,保留但降饱和) ── */
|
|
.online-dot {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
border-radius: 50%;
|
|
background: var(--mint);
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 5rpx rgba(75, 190, 154, 0.16);
|
|
}
|
|
|
|
/* ── 骨架屏占位:中性冷灰 ── */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shine 1.4s infinite;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
@keyframes skeleton-shine {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* ── 固定顶栏:液态玻璃,置于图层顶层,高度固定(状态栏 + 导航栏) ──
|
|
下层内容滚动/下拉时始终钉在顶部 */
|
|
.glass-topbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background:
|
|
radial-gradient(120% 180% at 18% -50%, rgba(255, 255, 255, 0.42), transparent 60%),
|
|
rgba(255, 255, 255, 0.52);
|
|
backdrop-filter: blur(40rpx) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40rpx) saturate(180%);
|
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.55);
|
|
box-shadow:
|
|
0 8rpx 28rpx rgba(27, 27, 32, 0.05),
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* 顶栏上的标题:玻璃上用深色文字 */
|
|
.glass-topbar .topbar-logo,
|
|
.glass-topbar .navbar-title {
|
|
color: #1b1b20;
|
|
}
|
|
|
|
.glass-topbar .logo-accent {
|
|
color: var(--purple);
|
|
}
|
|
|
|
/* ── 顶栏图标按钮:线条化图标,右侧紧贴小程序胶囊按钮 ── */
|
|
.navbar-action {
|
|
margin-left: auto;
|
|
margin-right: 8rpx;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-action:active {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 线条图标:单色 alpha 蒙版 + background-color 上色 */
|
|
.icon-line {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
background-color: #1b1b20;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
}
|
|
|
|
/* 搜索:线条放大镜 */
|
|
.icon-search-line {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIyMSIgY3k9IjIxIiByPSIxMi41Ii8+PHBhdGggZD0iTTMwLjUgMzAuNUw0MSA0MSIvPjwvZz48L3N2Zz4=");
|
|
}
|
|
|
|
/* 通知:线条铃铛 */
|
|
.icon-bell-line {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjQgN2ExMyAxMyAwIDAgMC0xMyAxM3Y3LjVMNyAzNWgzNGwtNC03LjVWMjBBMTMgMTMgMCAwIDAgMjQgN1oiLz48cGF0aCBkPSJNMTkuNSAzOC41YTQuOCA0LjggMCAwIDAgOSAwIi8+PC9nPjwvc3ZnPg==");
|
|
}
|
|
|
|
/* 图标按钮上的未读红点 */
|
|
.navbar-action.has-badge::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 6rpx;
|
|
right: 6rpx;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
border-radius: 50%;
|
|
background: var(--purple);
|
|
border: 2rpx solid #fff;
|
|
}
|
|
|
|
/* ── 安全区 ── */
|
|
.safe-top {
|
|
background: transparent;
|
|
}
|
|
|
|
.safe-bottom {
|
|
height: env(safe-area-inset-bottom, 0rpx);
|
|
}
|