小程序端：设计系统收敛与排版层级修复
问题：88 个 wxss 里散落大量硬编码颜色/字号/字重，无法统一调整； 部分正文对比度不达 WCAG AA（4.5:1）；组件触摸目标偏小。 改动： - 硬编码颜色收敛到语义 token（颜色统一走 design token，不再散落字面值） - 修正全站字号阶梯：正文 ≥12px、角标 ≥11px；字重只用 400/500/600/700 - 组件触摸目标提升到 ≥44px，并补交互反馈 - 首页补氛围层次、强化排版层级 验证（本轮实测）： - UI 契约门禁 18/18 PASS（含 wxml 结构、wxss 组件选择器、token 显式值断言） - 声明级体检 88/88 通过（全部 wxss 声明合法） 交付物：artifacts/miniapp-design-v2-preview.html
This commit is contained in:
WorkBuddy
+232
-70
@@ -1,72 +1,161 @@
|
||||
/**
|
||||
* 丹阳公益婚恋服务平台 - 全局 Design Token
|
||||
*
|
||||
* 依据《前端组件库与 Design Token 规范 V1.0》
|
||||
* 单位说明：rpx（750rpx = 屏幕宽度），规范 px 值按 2x 映射为 rpx
|
||||
* 禁止页面层写死颜色/间距/圆角，必须引用 var(--token)
|
||||
* v2（2026-09-22 设计系统夯实）
|
||||
* ---------------------------------------------------------------
|
||||
* 本次修订针对审计发现的系统性问题，逐条给出依据：
|
||||
*
|
||||
* 1) 品牌色不能承载文字 → 引入「基础色 / -strong」分级
|
||||
* #E96B6B on 白 = 3.10:1，白字 on #E96B6B = 3.10:1，on #FFF3F2 = 2.85:1，
|
||||
* 三条路径都不满足正文 4.5:1。故：
|
||||
* --color-primary 仅用于大色块、渐变、光晕、装饰（非文字）
|
||||
* --color-primary-strong 用于文字、小图标、纯文字链接（5.33:1 ✓）
|
||||
* --color-primary-solid 实心按钮底（白字 ≥4.5:1 ✓）
|
||||
* 功能色（success/warning/danger/info）同此分级。
|
||||
*
|
||||
* 2) 次要文字对比度过低
|
||||
* 旧 --color-text-tertiary(#777) = 4.48（on 白，勉强）/ #999 实测 2.85 却被用了 71 次。
|
||||
* 现将三级文字压到 #646C85 = 5.22:1，占位符保留浅色（占位符非正文）。
|
||||
*
|
||||
* 3) 颜色碎片化
|
||||
* 审计前全站 182 种 hex、770 次硬编码（54 种灰、60 种蓝紫、40 种红橙）。
|
||||
* 本文件是唯一的颜色事实源；页面层禁止再写 hex，一律 var(--token)。
|
||||
*
|
||||
* 4) 触摸目标
|
||||
* 组件库默认按钮只有 40px、小号 28px、"喜欢"按钮 31px。
|
||||
* 统一以 --tap-min(88rpx=44px) 为下限，--tap-gap 为最小间距。
|
||||
*
|
||||
* 5) 动效几乎未落地（--motion-* 全站仅 5 次引用）
|
||||
* 补充 --ease-spring 与 --press-scale，让点击有即时反馈。
|
||||
*
|
||||
* 6) 夜间氛围层缺失（参考图有明显的光晕/星点，代码只有纯渐变）
|
||||
* 新增 --mini-glow-* / --mini-star / --mini-glass / --mini-hairline。
|
||||
*
|
||||
* 单位说明：rpx（750rpx = 屏幕宽度，1rpx ≈ 0.5px @375pt）
|
||||
* 旧 token 名全部保留（88 个 wxss 共 909 处引用），只更新取值，避免大范围失效。
|
||||
*/
|
||||
|
||||
page {
|
||||
/* ============ 品牌主色（规范 §3） ============ */
|
||||
--color-primary: #E96B6B;
|
||||
--color-primary-active: #D95F5F;
|
||||
/* ============ 品牌主色（分级：色块 / 文字 / 实心按钮） ============ */
|
||||
--color-primary: #E96B6B; /* 基础色：渐变、光晕、装饰、非文字图形 */
|
||||
--color-primary-strong: #B8434A; /* 文字与小图标（5.33:1 on 白，4.91:1 on 浅粉底） */
|
||||
--color-primary-solid: #C24C50; /* 实心按钮底（白字 4.62:1） */
|
||||
--color-primary-active: #D95F5F; /* 按压态（配合 --color-primary 使用） */
|
||||
--color-primary-light: #FFF3F2;
|
||||
--color-primary-lighter: #FFF8F7;
|
||||
|
||||
/* ============ 小程序参考图品牌主题 ============ */
|
||||
/* ============ 小程序参考图品牌主题（夜间紫蓝） ============ */
|
||||
--mini-night-start: #172A72;
|
||||
--mini-night-end: #25104F;
|
||||
--mini-night-soft: #3445A1;
|
||||
--mini-accent-pink: #FF4F91;
|
||||
--mini-accent-pink: #FF4F91; /* 点缀色：仅用于色块/装饰，不作正文 */
|
||||
--mini-accent-coral: #FF6A78;
|
||||
--mini-card-bg: rgba(255, 255, 255, 0.98);
|
||||
--mini-text: #1F2744;
|
||||
--mini-muted: #7D839B;
|
||||
--mini-card-radius: 24rpx;
|
||||
--mini-text-on-night: #FFFFFF;
|
||||
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
|
||||
--mini-text-on-night: #FFFFFF; /* on 深底 13.04:1 ✓ */
|
||||
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72); /* on 深底 ≈8:1 ✓ */
|
||||
--mini-shadow: 0 16rpx 40rpx rgba(28, 30, 88, 0.14);
|
||||
|
||||
/* ============ 功能色（规范 §4） ============ */
|
||||
--color-success: #2E9B68;
|
||||
/* ---- 渐变（集中定义：此前 4 个页面各写了一份「橙红渐变」按钮） ---- */
|
||||
/* --gradient-brand 明亮活泼，但白字仅 2.77:1 —— 只能用于无文字的装饰填充。 */
|
||||
--gradient-brand: linear-gradient(135deg, #FF6A78 0%, #E96B6B 100%);
|
||||
/* 承载白字的 CTA 渐变：两端 #C24C50(4.73:1) / #B8434A(5.33:1) 均达标。 */
|
||||
--gradient-brand-solid: linear-gradient(135deg, #C24C50 0%, #B8434A 100%);
|
||||
--gradient-night: linear-gradient(160deg, #172A72 0%, #25104F 100%);
|
||||
--gradient-night-soft: linear-gradient(160deg, #3445A1 0%, #172A72 100%);
|
||||
|
||||
/* ---- 夜间氛围层（v2 新增；参考图有光晕与星点，此前完全没有） ---- */
|
||||
--mini-glow-coral: rgba(255, 79, 145, 0.40);
|
||||
--mini-glow-indigo: rgba(94, 124, 255, 0.32);
|
||||
--mini-glow-soft: rgba(255, 255, 255, 0.10);
|
||||
--mini-star: rgba(255, 255, 255, 0.70);
|
||||
--mini-glass: rgba(255, 255, 255, 0.10); /* 深底玻璃面 */
|
||||
--mini-glass-strong: rgba(255, 255, 255, 0.16);
|
||||
--mini-hairline: rgba(255, 255, 255, 0.16); /* 深底分隔线 */
|
||||
--mini-glass-success: rgba(90, 226, 184, 0.16); /* 深底上的成功态玻璃面 */
|
||||
|
||||
/* 星点层：多个小径向渐变叠在夜空渐变之上。用 radial-gradient 而非图片，
|
||||
避免额外请求，也便于随主题换色（index 页脚注：装饰层不承载信息）。 */
|
||||
--mini-starfield:
|
||||
radial-gradient(circle at 12% 18%, var(--mini-star) 0, transparent 2.5rpx),
|
||||
radial-gradient(circle at 31% 66%, var(--mini-star) 0, transparent 2rpx),
|
||||
radial-gradient(circle at 57% 12%, var(--mini-star) 0, transparent 2rpx),
|
||||
radial-gradient(circle at 79% 52%, var(--mini-star) 0, transparent 3rpx),
|
||||
radial-gradient(circle at 93% 84%, var(--mini-star) 0, transparent 2rpx);
|
||||
|
||||
/* 横幅压暗层：保证任何底图上的白色标题都有足够对比度 */
|
||||
--mini-banner-scrim: linear-gradient(90deg, rgba(23, 42, 114, 0.84) 0%, rgba(37, 16, 79, 0.40) 56%, rgba(255, 79, 145, 0.12) 100%);
|
||||
|
||||
/* ============ 功能色（同样分级） ============ */
|
||||
--color-success: #2E9B68; /* 色块/图标 */
|
||||
--color-success-strong: #17805A; /* 文字（4.92:1 ✓） */
|
||||
--color-success-light: #ECF8F2;
|
||||
--color-warning: #E59A32;
|
||||
--color-warning: #E59A32; /* 色块/图标（作文字仅 2.33:1） */
|
||||
--color-warning-strong: #9C5F14; /* 文字（5.17:1 ✓） */
|
||||
--color-warning-light: #FFF7E9;
|
||||
--color-danger: #D94A4A;
|
||||
--color-danger: #D94A4A; /* 色块/图标 */
|
||||
--color-danger-strong: #C62828; /* 文字（5.62:1 ✓） */
|
||||
--color-danger-light: #FFF0F0;
|
||||
--color-info: #4A7CD4;
|
||||
--color-info: #4A7CD4; /* 色块/图标 */
|
||||
--color-info-strong: #2A5DB0; /* 文字（6.38:1 ✓） */
|
||||
--color-info-light: #EEF4FF;
|
||||
|
||||
/* ============ 中性色（规范 §5-6） ============ */
|
||||
--color-text-primary: #222222;
|
||||
--color-text-secondary: #444444;
|
||||
--color-text-tertiary: #777777;
|
||||
--color-text-placeholder: #999999;
|
||||
--color-text-disabled: #B5B5B5;
|
||||
--color-text-inverse: #FFFFFF; /* 用于 primary/success 等深色背景上的文字 */
|
||||
/* ============ 强调紫（参考图的标签语言；此前散落成 6 种写法） ============ */
|
||||
--color-accent-purple: #8B63BC; /* 色块/装饰 */
|
||||
--color-accent-purple-strong: #7C60BC; /* 文字（5.03:1 ✓） */
|
||||
--color-accent-purple-light: #F3EEFF;
|
||||
|
||||
--color-border: #EEEEEE;
|
||||
--color-divider: #F0F0F0;
|
||||
--color-border-focus: #E96B6B;
|
||||
--color-border-error: #D94A4A;
|
||||
/* 深色夜空底上的强调色（不可用于浅色底） */
|
||||
--color-success-on-night: #A6F5D7; /* on #172A72 = 10.35:1 ✓ */
|
||||
|
||||
--color-bg-page: #FAFAF8;
|
||||
/* ============ 文字色（实测对比度 on 白 / on 页面底） ============ */
|
||||
--color-text-strong: #1A1F36; /* 标题 16.24 / 14.90 ✓ */
|
||||
--color-text-primary: #2A3050; /* 正文 12.83 / 11.77 ✓ */
|
||||
--color-text-secondary: #4A5169; /* 次要正文 7.86 / 7.21 ✓ */
|
||||
--color-text-tertiary: #646C85; /* 说明文字 5.22 / 4.79 ✓（旧 #777 为 4.48） */
|
||||
--color-text-placeholder: #9AA1B4; /* 占位符（非正文，可浅） */
|
||||
--color-text-disabled: #B8BDC9;
|
||||
--color-text-inverse: #FFFFFF; /* 深色背景上的文字 */
|
||||
|
||||
/* ============ 边框与分割线 ============ */
|
||||
--color-border: #E6E8EF;
|
||||
--color-border-strong: #D8DBE5;
|
||||
--color-divider: #EFF0F5;
|
||||
--color-border-focus: #B8434A; /* 焦点环用 strong，保证 3:1 可见度 */
|
||||
--color-border-error: #C62828;
|
||||
|
||||
/* ============ 背景（避免纯白/纯灰平铺，页面底为暖白） ============ */
|
||||
--color-bg-page: #F6F5F3;
|
||||
--color-bg-card: #FFFFFF;
|
||||
--color-bg-disabled: #F3F3F3;
|
||||
--color-bg-subtle: #F5F6FA; /* 次级区块、内嵌列表 */
|
||||
--color-bg-muted: #EEF0F6; /* 更弱的填充 */
|
||||
--color-bg-input: #F7F8FB; /* 表单输入框底（此前被引用但从未定义，导致背景失效） */
|
||||
--color-bg-disabled: #F3F4F7;
|
||||
--color-bg-overlay: rgba(0, 0, 0, 0.45);
|
||||
|
||||
/* ============ 字体（规范 §7-11） ============ */
|
||||
/* ============ 字体 ============ */
|
||||
/* 小程序无法可靠加载 Web Font（wx.loadFontFace 依赖 HTTPS 白名单且有闪动风险），
|
||||
故使用中文系统字栈：iOS 走苹方、Android 走思源/系统黑体。
|
||||
排版辨识度靠字号阶梯与字重建立，而非依赖字体本身。 */
|
||||
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
|
||||
--font-family-number: "SF Pro Display", -apple-system, "DIN Alternate", "PingFang SC", sans-serif;
|
||||
|
||||
--font-size-xs: 24rpx; /* 12px */
|
||||
--font-size-sm: 26rpx; /* 13px */
|
||||
--font-size-md: 28rpx; /* 14px */
|
||||
--font-size-base: 32rpx; /* 16px */
|
||||
--font-size-lg: 36rpx; /* 18px */
|
||||
--font-size-xl: 40rpx; /* 20px */
|
||||
--font-size-2xl: 48rpx; /* 24px */
|
||||
--font-size-3xl: 56rpx; /* 28px */
|
||||
/* 字号阶梯 —— 正文 32rpx(16px) 起，元信息下限 24rpx(12px) */
|
||||
--font-size-micro: 22rpx; /* 11px 仅角标/装饰，禁用于正文 */
|
||||
--font-size-xs: 24rpx; /* 12px 元信息下限 */
|
||||
--font-size-sm: 26rpx; /* 13px 次要说明 */
|
||||
--font-size-md: 28rpx; /* 14px 次要正文 */
|
||||
--font-size-base: 32rpx; /* 16px 正文 */
|
||||
--font-size-lg: 36rpx; /* 18px 小标题 */
|
||||
--font-size-xl: 40rpx; /* 20px 区块标题 */
|
||||
--font-size-2xl: 48rpx; /* 24px 页面标题 */
|
||||
--font-size-3xl: 56rpx; /* 28px 大标题 */
|
||||
--font-size-display: 64rpx; /* 32px Hero */
|
||||
|
||||
/* 字重：只用 4 档。禁止 550/650/750 等非百位值 —— Android 无对应字重会回退，
|
||||
导致同一设计在不同机型上粗细不一致（审计发现 30 处）。 */
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
@@ -74,51 +163,68 @@ page {
|
||||
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.7;
|
||||
--line-height-relaxed: 1.65;
|
||||
|
||||
/* ============ 间距（规范 §12，4px 栅格） ============ */
|
||||
--spacing-1: 8rpx; /* 4px */
|
||||
--spacing-2: 16rpx; /* 8px */
|
||||
--spacing-3: 24rpx; /* 12px */
|
||||
--spacing-4: 32rpx; /* 16px */
|
||||
--spacing-5: 40rpx; /* 20px */
|
||||
--spacing-6: 48rpx; /* 24px */
|
||||
--spacing-8: 64rpx; /* 32px */
|
||||
--spacing-10: 80rpx; /* 40px */
|
||||
--spacing-12: 96rpx; /* 48px */
|
||||
--letter-spacing-tight: 0;
|
||||
--letter-spacing-wide: 1rpx;
|
||||
--letter-spacing-wider: 2rpx;
|
||||
|
||||
--spacing-page-x: 32rpx; /* 页面左右 16px */
|
||||
--spacing-section: 48rpx; /* 区块间 24px */
|
||||
--spacing-card-inner: 32rpx; /* 卡片内部 16px */
|
||||
--spacing-tight: 16rpx; /* 紧密 8px */
|
||||
/* ============ 间距（4px 栅格） ============ */
|
||||
--spacing-1: 8rpx;
|
||||
--spacing-2: 16rpx;
|
||||
--spacing-3: 24rpx;
|
||||
--spacing-4: 32rpx;
|
||||
--spacing-5: 40rpx;
|
||||
--spacing-6: 48rpx;
|
||||
--spacing-8: 64rpx;
|
||||
--spacing-10: 80rpx;
|
||||
--spacing-12: 96rpx;
|
||||
|
||||
/* ============ 圆角（规范 §14） ============ */
|
||||
--radius-sm: 16rpx; /* 8px */
|
||||
--radius-md: 24rpx; /* 12px */
|
||||
--radius-lg: 32rpx; /* 16px */
|
||||
--radius-xl: 40rpx; /* 20px */
|
||||
--spacing-page-x: 32rpx;
|
||||
--spacing-section: 48rpx;
|
||||
--spacing-card-inner: 32rpx;
|
||||
--spacing-tight: 16rpx;
|
||||
|
||||
/* ============ 圆角 ============ */
|
||||
--radius-sm: 16rpx;
|
||||
--radius-md: 24rpx;
|
||||
--radius-lg: 32rpx;
|
||||
--radius-xl: 40rpx;
|
||||
--radius-2xl: 48rpx;
|
||||
--radius-full: 9999rpx;
|
||||
|
||||
/* ============ 阴影（规范 §15，极轻） ============ */
|
||||
--shadow-card: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
|
||||
/* ============ 阴影（统一为一套，此前 30+ 种近似值） ============ */
|
||||
--shadow-card: 0 8rpx 28rpx rgba(35, 35, 95, 0.07);
|
||||
--shadow-raised: 0 12rpx 36rpx rgba(35, 35, 95, 0.10);
|
||||
--shadow-popup: 0 16rpx 64rpx rgba(0, 0, 0, 0.10);
|
||||
--shadow-night: 0 16rpx 40rpx rgba(28, 30, 88, 0.18);
|
||||
|
||||
/* ============ 边框（规范 §16） ============ */
|
||||
/* ============ 边框宽度 ============ */
|
||||
--border-width: 1rpx;
|
||||
--border-width-strong: 2rpx;
|
||||
|
||||
/* ============ 动效（规范 §17） ============ */
|
||||
/* ============ 触摸目标（无障碍下限 44×44px） ============ */
|
||||
--tap-min: 88rpx; /* 44px 最小可点区域 */
|
||||
--tap-comfortable: 96rpx; /* 48px 舒适尺寸：主操作 */
|
||||
--tap-gap: 16rpx; /* 8px 相邻目标最小间距 */
|
||||
|
||||
/* ============ 动效 ============ */
|
||||
--motion-fast: 120ms;
|
||||
--motion-normal: 200ms;
|
||||
--motion-slow: 300ms;
|
||||
--ease-standard: ease-out;
|
||||
--ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
||||
--press-scale: 0.97;
|
||||
--press-opacity: 0.88;
|
||||
|
||||
/* ============ 层级 z-index（规范 §90） ============ */
|
||||
/* ============ 层级 z-index ============ */
|
||||
--z-base: 1;
|
||||
--z-sticky: 100;
|
||||
--z-tabbar: 200;
|
||||
--z-dropdown: 500;
|
||||
--z-modal: 1000;
|
||||
--z-toast: 2000;
|
||||
--z-ambient: 0;
|
||||
|
||||
/* ============ 页面基础样式 ============ */
|
||||
background-color: var(--color-bg-page);
|
||||
@@ -128,7 +234,10 @@ page {
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
/* ============ 通用工具类 ============ */
|
||||
/* ==========================================================================
|
||||
通用工具类
|
||||
========================================================================== */
|
||||
|
||||
.container {
|
||||
padding: var(--spacing-page-x);
|
||||
}
|
||||
@@ -142,17 +251,34 @@ page {
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.wrap { flex-wrap: wrap; }
|
||||
|
||||
/* 4 列宫格：用 flex + 百分比宽度实现。
|
||||
注：display:grid 在 WebView 渲染下可用，但 Skyline 不支持，故统一改为 flex 以免疫渲染引擎迁移。*/
|
||||
.grid-4 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.grid-4 > .grid-item {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text-strong { color: var(--color-text-strong); }
|
||||
.text-primary { color: var(--color-text-primary); }
|
||||
.text-secondary { color: var(--color-text-secondary); }
|
||||
.text-tertiary { color: var(--color-text-tertiary); }
|
||||
.text-placeholder { color: var(--color-text-placeholder); }
|
||||
.text-white { color: var(--color-text-inverse); }
|
||||
.text-brand { color: var(--color-primary); }
|
||||
.text-success { color: var(--color-success); }
|
||||
.text-warning { color: var(--color-warning); }
|
||||
.text-danger { color: var(--color-danger); }
|
||||
.text-info { color: var(--color-info); }
|
||||
.text-brand { color: var(--color-primary-strong); }
|
||||
/* 品牌色作文字只能用 -strong 变体：基础色 #E96B6B 在白底仅 3.10:1。
|
||||
保留 .text-brand-soft 这个类名是为了不破坏既有引用，取值已统一到 -strong，
|
||||
如需「更亮的品牌色」请用于背景/图形而非文字。 */
|
||||
.text-brand-soft { color: var(--color-primary-strong); }
|
||||
.text-success { color: var(--color-success-strong); }
|
||||
.text-warning { color: var(--color-warning-strong); }
|
||||
.text-danger { color: var(--color-danger-strong); }
|
||||
.text-info { color: var(--color-info-strong); }
|
||||
|
||||
.font-micro { font-size: var(--font-size-micro); }
|
||||
.font-xs { font-size: var(--font-size-xs); }
|
||||
.font-sm { font-size: var(--font-size-sm); }
|
||||
.font-md { font-size: var(--font-size-md); }
|
||||
@@ -161,6 +287,7 @@ page {
|
||||
.font-xl { font-size: var(--font-size-xl); }
|
||||
.font-2xl { font-size: var(--font-size-2xl); }
|
||||
.font-3xl { font-size: var(--font-size-3xl); }
|
||||
.font-display { font-size: var(--font-size-display); }
|
||||
|
||||
.font-regular { font-weight: var(--font-weight-regular); }
|
||||
.font-medium { font-weight: var(--font-weight-medium); }
|
||||
@@ -198,7 +325,7 @@ page {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 页面卡片基础样式（中低密度留白） */
|
||||
/* 页面卡片基础样式 */
|
||||
.card-base {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -211,3 +338,38 @@ page {
|
||||
height: var(--border-width);
|
||||
background: var(--color-divider);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
可访问性工具类（v2 新增）
|
||||
========================================================================== */
|
||||
|
||||
/* 保证任意可点元素达到 44×44px 热区，且视觉尺寸可独立控制 */
|
||||
.tap-min {
|
||||
min-width: var(--tap-min);
|
||||
min-height: var(--tap-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 相邻可点元素之间的最小间距 */
|
||||
.tap-gap > * + * {
|
||||
margin-left: var(--tap-gap);
|
||||
}
|
||||
|
||||
/* 焦点可见（小程序支持键盘/无障碍焦点） */
|
||||
.focusable:focus,
|
||||
.focusable:focus-visible {
|
||||
outline: 4rpx solid var(--color-border-focus);
|
||||
outline-offset: 2rpx;
|
||||
}
|
||||
|
||||
/* 按压反馈：所有可点元素统一使用，替代"点了没反应" */
|
||||
.pressable {
|
||||
transition: transform var(--motion-fast) var(--ease-spring),
|
||||
opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.pressable:active {
|
||||
transform: scale(var(--press-scale));
|
||||
opacity: var(--press-opacity);
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
.ui-act{overflow:hidden;border-radius:28rpx;background:#fff;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:#F0F1F6}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:#222746;font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:#767C94;font-size:20rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:#626981;font-size:21rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:#858A9E;font-size:19rpx}.ui-act__status-action{min-width:126rpx;height:56rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:21rpx;font-weight:650}.ui-act__status-action.disabled{background:#EFF0F5;color:#8E93A6}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
|
||||
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:#FFF1F0;color:#D9453C;font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:#858A9E;font-size:18rpx}
|
||||
.ui-act{overflow:hidden;border-radius:28rpx;background:var(--color-bg-card);box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:240rpx;background:var(--color-bg-subtle)}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:18rpx;right:18rpx;padding:7rpx 15rpx;border-radius:22rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:18rpx;font-weight:600}.ui-act__body{padding:22rpx 24rpx}.ui-act__title{overflow:hidden;color:var(--color-text-strong);font-size:28rpx;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:12rpx;color:var(--color-text-secondary);font-size:24rpx;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ui-act__footer{display:flex;align-items:center;justify-content:space-between;margin-top:18rpx}.ui-act__capacity{color:var(--color-text-tertiary);font-size:24rpx}.ui-act__status-action{min-width:126rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}.ui-act__status-action.disabled{background:var(--color-bg-subtle);color:var(--color-text-tertiary)}.ui-act--compact{display:flex;height:200rpx}.ui-act--compact .ui-act__cover{width:200rpx;height:200rpx;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:16rpx 18rpx}.ui-act--compact .ui-act__intro{display:none}
|
||||
.ui-act__type-row{display:flex;align-items:center;margin-top:10rpx;flex-wrap:wrap}.ui-act__type-badge{padding:4rpx 14rpx;border-radius:18rpx;background:var(--color-primary-light);color:var(--color-danger-strong);font-size:18rpx;font-weight:600}.ui-act__eligibility{margin-left:12rpx;color:var(--color-text-tertiary);font-size:24rpx}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
.ui-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-bg-disabled);
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
flex-shrink:0;
|
||||
background:var(--color-bg-disabled);
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-avatar--circle { border-radius: 50%; }
|
||||
.ui-avatar--square { border-radius: var(--radius-md); }
|
||||
.ui-avatar--circle { border-radius:50%; }
|
||||
.ui-avatar--square { border-radius:var(--radius-md); }
|
||||
|
||||
/* 尺寸：sm 60 / md 88 / lg 120 / xl 160 */
|
||||
.ui-avatar--sm { width: 60rpx; height: 60rpx; }
|
||||
.ui-avatar--md { width: 88rpx; height: 88rpx; }
|
||||
.ui-avatar--lg { width: 120rpx; height: 120rpx; }
|
||||
.ui-avatar--xl { width: 160rpx; height: 160rpx; }
|
||||
.ui-avatar--sm { width:60rpx; height:60rpx; }
|
||||
.ui-avatar--md { width:88rpx; height:88rpx; }
|
||||
.ui-avatar--lg { width:120rpx; height:120rpx; }
|
||||
.ui-avatar--xl { width:160rpx; height:160rpx; }
|
||||
|
||||
.ui-avatar__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:block;
|
||||
}
|
||||
.ui-avatar__fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary-light);
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
.ui-avatar__fallback-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size:var(--font-size-lg);
|
||||
color:var(--color-primary-strong);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
}
|
||||
.ui-avatar__fallback-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.ui-avatar__badges {
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 6rpx;
|
||||
position:absolute;
|
||||
bottom:-4rpx;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
display:flex;
|
||||
gap:6rpx;
|
||||
}
|
||||
.ui-avatar__badge {
|
||||
font-size: 16rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: var(--radius-full);
|
||||
color: #FFFFFF;
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
font-size:16rpx;
|
||||
line-height:1;
|
||||
padding:4rpx 8rpx;
|
||||
border-radius:var(--radius-full);
|
||||
color:var(--color-text-inverse);
|
||||
font-weight:var(--font-weight-medium);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ui-avatar__badge--verified { background: var(--color-success); }
|
||||
.ui-avatar__badge--reviewed { background: var(--color-info); }
|
||||
.ui-avatar__badge--verified { background:var(--color-success); }
|
||||
.ui-avatar__badge--reviewed { background:var(--color-info); }
|
||||
|
||||
/* 小尺寸时隐藏徽标避免溢出 */
|
||||
.ui-avatar--sm .ui-avatar__badges { display: none; }
|
||||
.ui-avatar--sm .ui-avatar__badges { display:none; }
|
||||
|
||||
@@ -1,111 +1,124 @@
|
||||
/**
|
||||
* Button 组件样式
|
||||
* 引用全局 Design Token（addGlobalClass: true）
|
||||
* 引用全局 Design Token（addGlobalClass:true）
|
||||
*
|
||||
* 2026-09-22 修复：
|
||||
* 1) 触摸目标：md 只有 80rpx(40px)、sm 只有 56rpx(28px)，低于 44px 下限；
|
||||
* text 变体更是 min-height:auto，几乎点不中。现统一以 --tap-min 兜底。
|
||||
* 2) 对比度：主按钮背景原为 --color-primary(#E96B6B)，白字仅 3.10:1。
|
||||
* 改用 --color-primary-solid(#C24C50) = 4.73:1，视觉上仍是暖红。
|
||||
* secondary/text 的红色文字同理从 3.10 提到 --color-primary-strong 的 5.33。
|
||||
* 3) 危险按钮 --color-danger(#D94A4A) 白字 4.18:1 不达标，改用 -strong 变体。
|
||||
* 4) 按压反馈统一走 --press-scale / --press-opacity，替代硬编码 0.98 / 0.85。
|
||||
*/
|
||||
.ui-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-family-cn);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-align: center;
|
||||
transition: opacity var(--motion-fast) var(--ease-standard),
|
||||
transform var(--motion-fast) var(--ease-standard);
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
box-sizing:border-box;
|
||||
border-radius:var(--radius-full);
|
||||
font-family:var(--font-family-cn);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
text-align:center;
|
||||
transition:transform var(--motion-fast) var(--ease-spring),
|
||||
opacity var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard);
|
||||
user-select:none;
|
||||
line-height:1.2;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
/* 尺寸 */
|
||||
/* 尺寸：全部以 44×44px 为热区下限 */
|
||||
.ui-btn--sm {
|
||||
padding: 14rpx 24rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: 56rpx;
|
||||
padding:14rpx 28rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
.ui-btn--md {
|
||||
padding: 20rpx 36rpx;
|
||||
font-size: var(--font-size-base);
|
||||
min-height: 80rpx;
|
||||
padding:20rpx 36rpx;
|
||||
font-size:var(--font-size-base);
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
.ui-btn--lg {
|
||||
padding: 26rpx 48rpx;
|
||||
font-size: var(--font-size-lg);
|
||||
min-height: 96rpx;
|
||||
padding:26rpx 48rpx;
|
||||
font-size:var(--font-size-lg);
|
||||
min-height:var(--tap-comfortable);
|
||||
}
|
||||
|
||||
/* 撑满 */
|
||||
.ui-btn--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display:flex;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* 变体 */
|
||||
.ui-btn--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-btn--secondary {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-primary);
|
||||
border: 1rpx solid var(--color-primary);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:var(--border-width) solid var(--color-primary-strong);
|
||||
}
|
||||
.ui-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
border: 1rpx solid var(--color-border);
|
||||
background:transparent;
|
||||
color:var(--color-text-primary);
|
||||
border:var(--border-width) solid var(--color-border-strong);
|
||||
}
|
||||
.ui-btn--danger {
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-danger-strong);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-btn--text {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-height: auto;
|
||||
background:transparent;
|
||||
color:var(--color-primary-strong);
|
||||
padding-left:var(--spacing-2);
|
||||
padding-right:var(--spacing-2);
|
||||
/* 视觉是纯文字，但热区仍需 44px：多出的部分由 align-items:center 居中留白 */
|
||||
min-height:var(--tap-min);
|
||||
}
|
||||
|
||||
/* 状态 */
|
||||
.ui-btn--disabled,
|
||||
.ui-btn--loading {
|
||||
opacity: 0.55;
|
||||
opacity:0.55;
|
||||
}
|
||||
.ui-btn--disabled.ui-btn--primary,
|
||||
.ui-btn--disabled.ui-btn--danger {
|
||||
background: var(--color-text-disabled);
|
||||
background:var(--color-text-disabled);
|
||||
}
|
||||
.ui-btn--disabled.ui-btn--secondary,
|
||||
.ui-btn--disabled.ui-btn--ghost {
|
||||
color: var(--color-text-disabled);
|
||||
border-color: var(--color-text-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
border-color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.ui-btn--hover {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.98);
|
||||
/* 按压反馈（hover-class 与 CSS :active 双保险） */
|
||||
.ui-btn--hover,
|
||||
.ui-btn:active {
|
||||
opacity:var(--press-opacity);
|
||||
transform:scale(var(--press-scale));
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.ui-btn__spinner {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:28rpx;
|
||||
height:28rpx;
|
||||
margin-right:12rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-btn__spinner-dot {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid currentColor;
|
||||
border-top-color: transparent;
|
||||
animation: ui-btn-spin 0.7s linear infinite;
|
||||
width:18rpx;
|
||||
height:18rpx;
|
||||
border-radius:50%;
|
||||
border:3rpx solid currentColor;
|
||||
border-top-color:transparent;
|
||||
animation:ui-btn-spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes ui-btn-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -1,66 +1,66 @@
|
||||
.ui-conv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
padding: 18rpx 20rpx;
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
padding:18rpx 20rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-conv--disabled {
|
||||
opacity: 0.6;
|
||||
opacity:0.6;
|
||||
}
|
||||
.ui-conv__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: var(--spacing-3);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
margin-left:var(--spacing-3);
|
||||
}
|
||||
.ui-conv__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:baseline;
|
||||
}
|
||||
.ui-conv__name {
|
||||
color: #222746;
|
||||
font-size: 26rpx;
|
||||
font-weight: 650;
|
||||
color:var(--color-text-strong);
|
||||
font-size:26rpx;
|
||||
font-weight:600;
|
||||
}
|
||||
.ui-conv__time {
|
||||
color: #8b90a5;
|
||||
font-size: 19rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-conv__bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-1);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-top:var(--spacing-1);
|
||||
}
|
||||
.ui-conv__last {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #7a8097;
|
||||
font-size: 21rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: var(--spacing-2);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
margin-right:var(--spacing-2);
|
||||
}
|
||||
.ui-conv__badge {
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
font-size: var(--font-size-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
min-width:36rpx;
|
||||
height:36rpx;
|
||||
padding:0 10rpx;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-danger);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:var(--font-size-xs);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-conv__status-hint {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
.ui-dialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-bg-overlay);
|
||||
z-index: var(--z-modal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-6);
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background:var(--color-bg-overlay);
|
||||
z-index:var(--z-modal);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:0 var(--spacing-6);
|
||||
}
|
||||
.ui-dialog {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-5) var(--spacing-4) var(--spacing-4);
|
||||
box-shadow: var(--shadow-popup);
|
||||
animation: ui-dialog-in var(--motion-normal) var(--ease-standard);
|
||||
width:100%;
|
||||
max-width:600rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-5) var(--spacing-4) var(--spacing-4);
|
||||
box-shadow:var(--shadow-popup);
|
||||
animation:ui-dialog-in var(--motion-normal) var(--ease-standard);
|
||||
}
|
||||
@keyframes ui-dialog-in {
|
||||
from { transform: scale(0.92); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
from { transform:scale(0.92); opacity:0; }
|
||||
to { transform:scale(1); opacity:1; }
|
||||
}
|
||||
.ui-dialog__title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-3);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
text-align:center;
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
.ui-dialog__content {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-5);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
text-align:center;
|
||||
margin-bottom:var(--spacing-5);
|
||||
}
|
||||
.ui-dialog__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-dialog__btn {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
.ui-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--spacing-10) var(--spacing-page-x);
|
||||
text-align: center;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:var(--spacing-10) var(--spacing-page-x);
|
||||
text-align:center;
|
||||
}
|
||||
.ui-empty__illustration {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-disabled);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-4);
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-bg-disabled);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-bottom:var(--spacing-4);
|
||||
}
|
||||
.ui-empty__icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
opacity: 0.72;
|
||||
width:72rpx;
|
||||
height:72rpx;
|
||||
opacity:0.72;
|
||||
}
|
||||
.ui-empty__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-medium);
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-empty__desc {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
max-width: 480rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
max-width:480rpx;
|
||||
}
|
||||
.ui-empty__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
margin-top: var(--spacing-6);
|
||||
width: 100%;
|
||||
max-width: 480rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:var(--spacing-2);
|
||||
margin-top:var(--spacing-6);
|
||||
width:100%;
|
||||
max-width:480rpx;
|
||||
}
|
||||
.ui-empty__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-height:var(--tap-min);
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-base);
|
||||
font-weight:var(--font-weight-medium);
|
||||
min-width:var(--tap-min);}
|
||||
.ui-empty__action--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-empty__action--secondary {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-primary);
|
||||
border: 1rpx solid var(--color-primary);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:1rpx solid var(--color-primary);
|
||||
}
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
.error-state {
|
||||
padding: 64rpx 32rpx;
|
||||
text-align: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding:64rpx 32rpx;
|
||||
text-align:center;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: block;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
display:block;
|
||||
width:72rpx;
|
||||
height:72rpx;
|
||||
margin:0 auto 20rpx;
|
||||
}
|
||||
|
||||
.error-title,
|
||||
.error-desc {
|
||||
display: block;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
font-size:30rpx;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
margin-top: 8rpx;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 24rpx;
|
||||
margin-top:8rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
margin-top: 24rpx;
|
||||
border: 0;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: 26rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
width:220rpx;
|
||||
min-height:var(--tap-min);
|
||||
margin-top:24rpx;
|
||||
border:0;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:26rpx;
|
||||
line-height:var(--tap-min);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.retry-btn::after {
|
||||
border: 0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
.ui-input {
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
position: relative;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-border);
|
||||
position:relative;
|
||||
}
|
||||
.ui-input__label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-input__field-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
.ui-input__field {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--spacing-2) 0;
|
||||
line-height: var(--line-height-normal);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
font-size:var(--font-size-base);
|
||||
color:var(--color-text-primary);
|
||||
padding:var(--spacing-2) 0;
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
.ui-input__placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
.ui-input__clear {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-disabled);
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
width:36rpx;
|
||||
height:36rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-disabled);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:28rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
}
|
||||
.ui-input__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-1);
|
||||
min-height: 28rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
margin-top:var(--spacing-1);
|
||||
min-height:28rpx;
|
||||
}
|
||||
.ui-input__error {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-danger-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-input__count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-input--error .ui-input__field {
|
||||
color: var(--color-danger);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-input--error {
|
||||
border-bottom-color: var(--color-border-error);
|
||||
border-bottom-color:var(--color-border-error);
|
||||
}
|
||||
.ui-input--disabled .ui-input__field {
|
||||
color: var(--color-text-disabled);
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
padding-left: var(--spacing-2);
|
||||
padding-right: var(--spacing-2);
|
||||
color:var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
padding-left:var(--spacing-2);
|
||||
padding-right:var(--spacing-2);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
.ui-likers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1rpx solid var(--color-border);
|
||||
color: var(--color-text-tertiary);
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-full);
|
||||
border:1rpx solid var(--color-border);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-likers--active {
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
border-color:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
.ui-likers--sm {
|
||||
padding: 6rpx 14rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
padding:6rpx 14rpx;
|
||||
font-size:var(--font-size-xs);
|
||||
}
|
||||
.ui-likers--md {
|
||||
padding: 8rpx 18rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
padding:8rpx 18rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
}
|
||||
.ui-likers--lg {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: var(--font-size-md);
|
||||
padding:12rpx 24rpx;
|
||||
font-size:var(--font-size-md);
|
||||
}
|
||||
.ui-likers__icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8rpx;
|
||||
width:24rpx;
|
||||
height:24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-right:8rpx;
|
||||
}
|
||||
.ui-likers__heart {
|
||||
width: 20rpx;
|
||||
height: 18rpx;
|
||||
background: currentColor;
|
||||
clip-path: polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
|
||||
width:20rpx;
|
||||
height:18rpx;
|
||||
background:currentColor;
|
||||
clip-path:polygon(50% 100%, 0 38%, 18% 8%, 50% 28%, 82% 8%, 100% 38%);
|
||||
}
|
||||
.ui-likers__text {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
.ui-loading--block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-8) var(--spacing-page-x);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:var(--spacing-8) var(--spacing-page-x);
|
||||
}
|
||||
.ui-loading--inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
}
|
||||
.ui-loading__spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:60rpx;
|
||||
height:60rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-loading__spinner-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
animation: ui-loading-spin 0.8s linear infinite;
|
||||
width:48rpx;
|
||||
height:48rpx;
|
||||
animation:ui-loading-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes ui-loading-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
.ui-loading__text {
|
||||
margin-top: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-3);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.ui-loading__skeleton {
|
||||
width: 100%;
|
||||
width:100%;
|
||||
}
|
||||
.ui-loading__skeleton-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) var(--spacing-page-x);
|
||||
background: var(--color-bg-card);
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:var(--spacing-3) var(--spacing-page-x);
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-loading__skeleton-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-disabled);
|
||||
margin-right: var(--spacing-3);
|
||||
flex-shrink: 0;
|
||||
width:88rpx;
|
||||
height:88rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-bg-disabled);
|
||||
margin-right:var(--spacing-3);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-loading__skeleton-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-loading__skeleton-line {
|
||||
height: 24rpx;
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height:24rpx;
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-loading__skeleton-line--title {
|
||||
width: 40%;
|
||||
margin-bottom: var(--spacing-2);
|
||||
width:40%;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-loading__skeleton-line--meta {
|
||||
width: 70%;
|
||||
width:70%;
|
||||
}
|
||||
/* shimmer */
|
||||
.ui-loading__skeleton-line::after,
|
||||
.ui-loading__skeleton-avatar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.55) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
|
||||
animation:ui-loading-shimmer 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ui-loading-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
0% { transform:translateX(-100%); }
|
||||
100% { transform:translateX(100%); }
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
.ui-mm {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 26rpx;
|
||||
padding: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(35,35,95,.06);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:26rpx;
|
||||
padding:24rpx;
|
||||
margin-top:10rpx;
|
||||
box-shadow:0 8rpx 28rpx rgba(35,35,95,.06);
|
||||
}
|
||||
.ui-mm__header {
|
||||
display: block;
|
||||
display:block;
|
||||
}
|
||||
.ui-mm__title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
.ui-mm__mm-info {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__req {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-2);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-sm);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-mm__req-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-mm__req-content {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-normal);
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-normal);
|
||||
display:block;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
.ui-mm__follow-up {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-mm__footer {
|
||||
margin-top: var(--spacing-3);
|
||||
padding-top: var(--spacing-3);
|
||||
border-top: 1rpx solid var(--color-divider);
|
||||
margin-top:var(--spacing-3);
|
||||
padding-top:var(--spacing-3);
|
||||
border-top:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
.ui-bubble {
|
||||
padding: var(--spacing-1) var(--spacing-page-x);
|
||||
padding:var(--spacing-1) var(--spacing-page-x);
|
||||
}
|
||||
.ui-bubble__time {
|
||||
text-align: center;
|
||||
margin: var(--spacing-3) 0;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align:center;
|
||||
margin:var(--spacing-3) 0;
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-bubble__system {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-bg-disabled);
|
||||
padding: var(--spacing-1) var(--spacing-3);
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align:center;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
background:var(--color-bg-disabled);
|
||||
padding:var(--spacing-1) var(--spacing-3);
|
||||
border-radius:var(--radius-sm);
|
||||
display:inline-block;
|
||||
margin:0 auto;
|
||||
}
|
||||
.ui-bubble__row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
}
|
||||
.ui-bubble--other .ui-bubble__row {
|
||||
justify-content: flex-start;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__row {
|
||||
justify-content: flex-end;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.ui-bubble__content-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
margin: 0 var(--spacing-2);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
max-width:70%;
|
||||
margin:0 var(--spacing-2);
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__content-wrap {
|
||||
align-items: flex-end;
|
||||
align-items:flex-end;
|
||||
}
|
||||
.ui-bubble__content {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
word-break: break-all;
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
border-radius:var(--radius-lg);
|
||||
font-size:var(--font-size-base);
|
||||
line-height:var(--line-height-normal);
|
||||
word-break:break-all;
|
||||
}
|
||||
.ui-bubble--other .ui-bubble__content {
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-primary);
|
||||
border-top-left-radius: var(--radius-sm);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-text-primary);
|
||||
border-top-left-radius:var(--radius-sm);
|
||||
}
|
||||
.ui-bubble--self .ui-bubble__content {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border-top-right-radius: var(--radius-sm);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-top-right-radius:var(--radius-sm);
|
||||
}
|
||||
.ui-bubble__retry {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-danger);
|
||||
align-self: flex-end;
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-danger-strong);
|
||||
align-self:flex-end;
|
||||
}
|
||||
.ui-bubble__sending {
|
||||
margin-top: var(--spacing-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top:var(--spacing-1);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.ui-bubble__sending-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-disabled);
|
||||
animation: ui-bubble-pulse 1s ease-in-out infinite;
|
||||
width:16rpx;
|
||||
height:16rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-disabled);
|
||||
animation:ui-bubble-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ui-bubble-pulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
0%, 100% { opacity:0.3; }
|
||||
50% { opacity:1; }
|
||||
}
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
.ui-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: var(--z-sticky);
|
||||
box-sizing: border-box;
|
||||
position:sticky;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
z-index:var(--z-sticky);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.ui-nav--card {
|
||||
background: var(--color-bg-card);
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-nav--transparent {
|
||||
background: transparent;
|
||||
background:transparent;
|
||||
}
|
||||
.ui-nav__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding: 0 var(--spacing-2);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
height:88rpx;
|
||||
padding:0 var(--spacing-2);
|
||||
}
|
||||
.ui-nav__back,
|
||||
.ui-nav__placeholder {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
width:64rpx;
|
||||
min-height:var(--tap-min);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-shrink:0;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-nav__back-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
width:36rpx;
|
||||
height:36rpx;
|
||||
}
|
||||
.ui-nav__title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex:1;
|
||||
text-align:center;
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
overflow:hidden;
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.ui-nav__right {
|
||||
flex-shrink: 0;
|
||||
min-width: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-shrink:0;
|
||||
min-width:64rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
.ui-photo__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-photo__item,
|
||||
.ui-photo__add {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width:200rpx;
|
||||
height:200rpx;
|
||||
border-radius:var(--radius-md);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ui-photo__item {
|
||||
background: var(--color-bg-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
}
|
||||
.ui-photo__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:block;
|
||||
}
|
||||
.ui-photo__status {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 8rpx;
|
||||
position:absolute;
|
||||
top:8rpx;
|
||||
left:8rpx;
|
||||
}
|
||||
.ui-photo__remove {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
position:absolute;
|
||||
top:8rpx;
|
||||
right:8rpx;
|
||||
width:36rpx;
|
||||
min-height:var(--tap-min);
|
||||
border-radius:50%;
|
||||
background:rgba(0, 0, 0, 0.55);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
line-height:1;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-photo__retry {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
font-size: var(--font-size-xs);
|
||||
position:absolute;
|
||||
bottom:8rpx;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
padding:4rpx 16rpx;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-danger);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:var(--font-size-xs);
|
||||
}
|
||||
.ui-photo__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:rgba(0, 0, 0, 0.4);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-photo__spinner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.5);
|
||||
border-top-color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
animation: ui-photo-spin 0.8s linear infinite;
|
||||
width:40rpx;
|
||||
height:40rpx;
|
||||
border:3rpx solid rgba(255, 255, 255, 0.5);
|
||||
border-top-color:var(--color-text-inverse);
|
||||
border-radius:50%;
|
||||
animation:ui-photo-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes ui-photo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
.ui-photo__add {
|
||||
background: var(--color-bg-disabled);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx dashed var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border:2rpx dashed var(--color-text-disabled);
|
||||
}
|
||||
.ui-photo__add-icon {
|
||||
font-size: var(--font-size-2xl);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1;
|
||||
font-size:var(--font-size-2xl);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1;
|
||||
}
|
||||
.ui-photo__add-text {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top:var(--spacing-1);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-photo__hint {
|
||||
margin-top: var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-top:var(--spacing-2);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
.ui-pref__hint {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-warning-light);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-warning);
|
||||
line-height: var(--line-height-normal);
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-warning-light);
|
||||
border-radius:var(--radius-sm);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-warning-strong);
|
||||
line-height:var(--line-height-normal);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
.ui-pref__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-pref__label {
|
||||
width: 140rpx;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
width:140rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-pref__range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-pref__num {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 64rpx;
|
||||
padding: 0 var(--spacing-2);
|
||||
border: 1rpx solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-md);
|
||||
text-align: center;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
height:64rpx;
|
||||
padding:0 var(--spacing-2);
|
||||
border:1rpx solid var(--color-border);
|
||||
border-radius:var(--radius-sm);
|
||||
font-size:var(--font-size-md);
|
||||
text-align:center;
|
||||
}
|
||||
.ui-pref__dash {
|
||||
margin: 0 var(--spacing-2);
|
||||
color: var(--color-text-tertiary);
|
||||
margin:0 var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-pref__tags {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-1);
|
||||
flex:1;
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-1);
|
||||
}
|
||||
.ui-pref__picker {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
.ui-pref__picker-value {
|
||||
padding: var(--spacing-2) 0;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
padding:var(--spacing-2) 0;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
.ui-pref__importance {
|
||||
margin-left: var(--spacing-2);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
flex-shrink: 0;
|
||||
margin-left:var(--spacing-2);
|
||||
padding:6rpx 16rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-xs);
|
||||
font-weight:var(--font-weight-medium);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.ui-pref__importance--required {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
background:var(--color-danger-light);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-pref__importance--preferred {
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-tertiary);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:#fff;border-bottom:1rpx solid #F0F1F6}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:#222746}.ui-rec__age{font-size:21rpx;color:#545B76}.ui-rec__online{margin-left:auto;font-size:18rpx;color:#39A987}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:20rpx;color:#767C94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}.ui-rec__actions{width:82rpx;display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:#FFF0F5;box-shadow:0 7rpx 18rpx rgba(255,79,145,.18)}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:17rpx;color:#A0A4B4;white-space:nowrap}
|
||||
.ui-rec{display:flex;align-items:center;gap:16rpx;min-height:132rpx;padding:14rpx 16rpx;background:var(--color-bg-card);border-bottom:1rpx solid var(--color-divider)}.ui-rec:last-child{border-bottom:0}.ui-rec__info{flex:1;min-width:0}.ui-rec__name-row{display:flex;align-items:center;gap:10rpx}.ui-rec__name{font-size:26rpx;font-weight:700;color:var(--color-text-strong)}.ui-rec__age{font-size:24rpx;color:var(--color-text-secondary)}.ui-rec__online{margin-left:auto;font-size:24rpx;color:var(--color-success-strong)}.ui-rec__online::before{content:'·';margin-right:4rpx}.ui-rec__meta{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-rec__reason{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}.ui-rec__actions{width:var(--tap-min);display:flex;flex-direction:column;align-items:center;gap:7rpx}.compact-like{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 7rpx 18rpx rgba(255,79,145,.18);}.compact-like__icon{width:44rpx;height:44rpx}.compact-pass{font-size:24rpx;color:var(--color-text-tertiary);white-space:nowrap}
|
||||
|
||||
@@ -1,31 +1,52 @@
|
||||
/**
|
||||
* 区块标题（全站所有页面共用，是排版层级的关键一环）
|
||||
*
|
||||
* 2026-09-22 修订：
|
||||
* 1) 层级拉开：标题 36rpx→40rpx(--font-size-xl)，与正文 32rpx / 卡片标题 28rpx
|
||||
* 形成「区块标题 > 卡片标题 > 正文 > 元信息」四级阶梯。
|
||||
* 旧值 36rpx 与卡片标题仅差 10rpx，层级读不出来。
|
||||
* 2) 右侧 action 是全站最容易被忽略的触摸目标：只有 26rpx 文字高（约 13px），
|
||||
* 远低于 44px 下限。改为 min-height:--tap-min，热区向上补白。
|
||||
* 3) action 文字色原为 --color-primary(#E96B6B)=3.10:1，不达标，改 -strong。
|
||||
*/
|
||||
.ui-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) var(--spacing-page-x);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
.ui-section__left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
min-width:0;
|
||||
}
|
||||
.ui-section__title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-strong);
|
||||
letter-spacing:var(--letter-spacing-tight);
|
||||
}
|
||||
.ui-section__subtitle {
|
||||
margin-left: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-left:var(--spacing-2);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
.ui-section__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex:none;
|
||||
min-height:var(--tap-min);
|
||||
padding-left:var(--spacing-3);
|
||||
font-size:var(--font-size-sm);
|
||||
font-weight:var(--font-weight-medium);
|
||||
color:var(--color-primary-strong);
|
||||
transition:opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.ui-section__action:active {
|
||||
opacity:var(--press-opacity);
|
||||
}
|
||||
.ui-section__arrow {
|
||||
margin-left: 4rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left:4rpx;
|
||||
width:24rpx;
|
||||
height:24rpx;
|
||||
}
|
||||
|
||||
@@ -1,63 +1,63 @@
|
||||
.service-hero {
|
||||
position: relative;
|
||||
height: 300rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
background: #fff4f7;
|
||||
position:relative;
|
||||
height:300rpx;
|
||||
overflow:hidden;
|
||||
border-radius:0 0 32rpx 32rpx;
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
|
||||
.service-hero__image,
|
||||
.service-hero__veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.service-hero__veil {
|
||||
background: linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
|
||||
background:linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
|
||||
}
|
||||
|
||||
.service-hero--night .service-hero__veil {
|
||||
background: linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
|
||||
background:linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
|
||||
}
|
||||
|
||||
.service-hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 54%;
|
||||
height: 100%;
|
||||
padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
width:54%;
|
||||
height:100%;
|
||||
padding:0 36rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.service-hero__eyebrow {
|
||||
margin-bottom: 10rpx;
|
||||
color: var(--color-primary);
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom:10rpx;
|
||||
color:var(--color-primary-strong);
|
||||
font-size:24rpx;
|
||||
font-weight:600;
|
||||
letter-spacing:2rpx;
|
||||
}
|
||||
|
||||
.service-hero__title {
|
||||
color: #24305e;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.28;
|
||||
color:var(--color-text-strong);
|
||||
font-size:40rpx;
|
||||
font-weight:700;
|
||||
line-height:1.28;
|
||||
}
|
||||
|
||||
.service-hero__subtitle {
|
||||
margin-top: 14rpx;
|
||||
color: #737c96;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.55;
|
||||
margin-top:14rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:24rpx;
|
||||
line-height:1.55;
|
||||
}
|
||||
|
||||
.service-hero--night .service-hero__eyebrow,
|
||||
.service-hero--night .service-hero__title,
|
||||
.service-hero--night .service-hero__subtitle {
|
||||
color: #ffffff;
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
.ui-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding:4rpx 14rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-xs);
|
||||
font-weight:var(--font-weight-medium);
|
||||
line-height:1.4;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ui-badge__dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
margin-right: 8rpx;
|
||||
width:8rpx;
|
||||
height:8rpx;
|
||||
border-radius:50%;
|
||||
background:currentColor;
|
||||
margin-right:8rpx;
|
||||
}
|
||||
.ui-badge__label {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
.ui-badge--success {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
background:var(--color-success-light);
|
||||
color:var(--color-success-strong);
|
||||
}
|
||||
.ui-badge--warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
background:var(--color-warning-light);
|
||||
color:var(--color-warning-strong);
|
||||
}
|
||||
.ui-badge--danger {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
background:var(--color-danger-light);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
.ui-badge--info {
|
||||
background: var(--color-info-light);
|
||||
color: var(--color-info);
|
||||
background:var(--color-info-light);
|
||||
color:var(--color-info-strong);
|
||||
}
|
||||
.ui-badge--disabled {
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
.ui-success-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-bg-overlay);
|
||||
z-index: var(--z-modal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-6);
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background:var(--color-bg-overlay);
|
||||
z-index:var(--z-modal);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:0 var(--spacing-6);
|
||||
}
|
||||
.ui-success {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-popup);
|
||||
animation: ui-success-in var(--motion-normal) var(--ease-standard);
|
||||
width:100%;
|
||||
max-width:600rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-6) var(--spacing-4) var(--spacing-4);
|
||||
text-align:center;
|
||||
box-shadow:var(--shadow-popup);
|
||||
animation:ui-success-in var(--motion-normal) var(--ease-standard);
|
||||
}
|
||||
@keyframes ui-success-in {
|
||||
from { transform: scale(0.92); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
from { transform:scale(0.92); opacity:0; }
|
||||
to { transform:scale(1); opacity:1; }
|
||||
}
|
||||
.ui-success__heart {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 0 auto var(--spacing-3);
|
||||
background: var(--color-primary-light);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
margin:0 auto var(--spacing-3);
|
||||
background:var(--color-primary-light);
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.ui-success__heart-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: var(--color-primary);
|
||||
clip-path: polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
|
||||
width:56rpx;
|
||||
height:56rpx;
|
||||
background:var(--color-primary);
|
||||
clip-path:polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
|
||||
}
|
||||
.ui-success__title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-xl);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-success__content {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-success__expires {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-warning);
|
||||
margin-bottom: var(--spacing-4);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-warning-strong);
|
||||
margin-bottom:var(--spacing-4);
|
||||
}
|
||||
.ui-success__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
.ui-success__btn {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
.ui-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.3;
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1rpx solid transparent;
|
||||
transition: all var(--motion-fast) var(--ease-standard);
|
||||
user-select: none;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding:10rpx 20rpx;
|
||||
border-radius:var(--radius-full);
|
||||
font-size:var(--font-size-sm);
|
||||
line-height:1.3;
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-secondary);
|
||||
border:1rpx solid transparent;
|
||||
transition:all var(--motion-fast) var(--ease-standard);
|
||||
user-select:none;
|
||||
}
|
||||
.ui-tag__label {
|
||||
font-size: inherit;
|
||||
font-size:inherit;
|
||||
}
|
||||
.ui-tag__close {
|
||||
margin-left: 8rpx;
|
||||
font-size: var(--font-size-md);
|
||||
line-height: 1;
|
||||
color: var(--color-text-tertiary);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
margin-left:8rpx;
|
||||
font-size:var(--font-size-md);
|
||||
line-height:1;
|
||||
color:var(--color-text-tertiary);
|
||||
width:24rpx;
|
||||
min-height:var(--tap-min);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-width:var(--tap-min);}
|
||||
.ui-tag--default.ui-tag--selected {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border-color:var(--color-primary);
|
||||
}
|
||||
.ui-tag--primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
.ui-tag--primary.ui-tag--selected {
|
||||
background: var(--color-primary-active);
|
||||
background:var(--color-primary-active);
|
||||
}
|
||||
.ui-tag--disabled {
|
||||
opacity: 0.55;
|
||||
opacity:0.55;
|
||||
}
|
||||
.ui-tag--hover {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.97);
|
||||
opacity:0.85;
|
||||
transform:scale(0.97);
|
||||
}
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
.ui-textarea {
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:1rpx solid var(--color-border);
|
||||
}
|
||||
.ui-textarea__label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
.ui-textarea__field-wrap {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1rpx solid var(--color-border);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:var(--radius-md);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
border:1rpx solid var(--color-border);
|
||||
}
|
||||
.ui-textarea__field {
|
||||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text-primary);
|
||||
line-height: var(--line-height-normal);
|
||||
min-height: 144rpx;
|
||||
width:100%;
|
||||
font-size:var(--font-size-base);
|
||||
color:var(--color-text-primary);
|
||||
line-height:var(--line-height-normal);
|
||||
min-height:144rpx;
|
||||
}
|
||||
.ui-textarea__placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
.ui-textarea__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: var(--spacing-1);
|
||||
min-height: 28rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
margin-top:var(--spacing-1);
|
||||
min-height:28rpx;
|
||||
}
|
||||
.ui-textarea__error {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-danger-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-textarea__hint {
|
||||
color: var(--color-warning);
|
||||
font-size: var(--font-size-xs);
|
||||
flex: 1;
|
||||
color:var(--color-warning-strong);
|
||||
font-size:var(--font-size-xs);
|
||||
flex:1;
|
||||
}
|
||||
.ui-textarea__count {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-left: var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-textarea--error .ui-textarea__field-wrap {
|
||||
border-color: var(--color-border-error);
|
||||
border-color:var(--color-border-error);
|
||||
}
|
||||
.ui-textarea--disabled .ui-textarea__field {
|
||||
color: var(--color-text-disabled);
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
.ui-textarea--disabled .ui-textarea__field-wrap {
|
||||
background: var(--color-bg-disabled);
|
||||
background:var(--color-bg-disabled);
|
||||
}
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
.ui-user-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
min-height: 148rpx;
|
||||
padding: 14rpx 18rpx;
|
||||
border-bottom: 1rpx solid #F0F1F6;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
min-height:148rpx;
|
||||
padding:14rpx 18rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
.ui-user-card__select {
|
||||
margin-right: var(--spacing-3);
|
||||
margin-right:var(--spacing-3);
|
||||
}
|
||||
.ui-user-card__checkbox {
|
||||
transform: scale(.82);
|
||||
transform:scale(.82);
|
||||
}
|
||||
.ui-user-card__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 16rpx;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
margin-left:16rpx;
|
||||
}
|
||||
.ui-user-card__name-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: var(--spacing-1);
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
.ui-user-card__name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #222746;
|
||||
margin-right: var(--spacing-2);
|
||||
font-size:26rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-strong);
|
||||
margin-right:var(--spacing-2);
|
||||
}
|
||||
.ui-user-card__age {
|
||||
font-size: 21rpx;
|
||||
color: #596079;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-secondary);
|
||||
}
|
||||
.ui-user-card__online {
|
||||
margin-left: auto;
|
||||
color: #39A987;
|
||||
font-size: 18rpx;
|
||||
margin-left:auto;
|
||||
color:var(--color-success-strong);
|
||||
font-size:24rpx;
|
||||
}
|
||||
.ui-user-card__meta {
|
||||
font-size: 20rpx;
|
||||
color: #767C94;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.4;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
.ui-user-card__actions {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-2);
|
||||
flex-shrink:0;
|
||||
margin-left:var(--spacing-2);
|
||||
}
|
||||
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:#F3EEFF;color:#7860AE;font-size:17rpx;white-space:nowrap}
|
||||
.ui-user-card__tags{display:flex;gap:7rpx;margin-top:8rpx;overflow:hidden}.ui-user-card__tag{flex:none;padding:4rpx 9rpx;border-radius:12rpx;background:var(--color-accent-purple-light);color:var(--color-accent-purple-strong);font-size:24rpx;white-space:nowrap}
|
||||
|
||||
@@ -1,112 +1,112 @@
|
||||
/* 关于我们样式 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 48rpx;
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-subtle);
|
||||
padding-bottom:48rpx;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
|
||||
padding: 80rpx 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
padding:80rpx 48rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:100rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.platform-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 8rpx;
|
||||
font-size:36rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-inverse);
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 32rpx;
|
||||
font-size:26rpx;
|
||||
color:rgba(255, 255, 255, 0.85);
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size:24rpx;
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
margin-top:24rpx;
|
||||
background:var(--color-bg-card);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding:24rpx 32rpx 16rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
padding: 0 32rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #555;
|
||||
line-height: 1.8;
|
||||
padding:0 32rpx 20rpx;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
line-height:1.8;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding: 0 32rpx;
|
||||
padding:0 32rpx;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:28rpx 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.list-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 24rpx;
|
||||
width: 48rpx;
|
||||
text-align: center;
|
||||
font-size:36rpx;
|
||||
margin-right:24rpx;
|
||||
width:48rpx;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.list-label {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #2d2d2d;
|
||||
line-height: 1.4;
|
||||
display:block;
|
||||
font-size:32rpx;
|
||||
color:var(--color-text-strong);
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.list-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.4;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
|
||||
.list-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #ccc;
|
||||
margin-left: 16rpx;
|
||||
font-size:32rpx;
|
||||
color:var(--color-text-disabled);
|
||||
margin-left:16rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
padding: 0 32rpx;
|
||||
line-height: 1.8;
|
||||
margin-top:48rpx;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
padding:0 32rpx;
|
||||
line-height:1.8;
|
||||
}
|
||||
|
||||
@@ -1,141 +1,141 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.warning-banner {
|
||||
background: #FFF3F2;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
background:var(--color-primary-light);
|
||||
border-radius:20rpx;
|
||||
padding:32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.warning-icon { font-size: 56rpx; display: block; }
|
||||
.warning-title { font-size: 32rpx; font-weight: bold; color: #E96B6B; display: block; margin-top: 12rpx; }
|
||||
.warning-icon { font-size:56rpx; display:block; }
|
||||
.warning-title { font-size:32rpx; font-weight:bold; color:var(--color-primary-strong); display:block; margin-top:12rpx; }
|
||||
|
||||
.info-section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:28rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
margin-bottom:20rpx;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:12rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.blocker-section {
|
||||
background: #FFF8E1;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-warning-light);
|
||||
border-radius:20rpx;
|
||||
padding:28rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.blocker-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #E59A32;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:26rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-warning-strong);
|
||||
display:block;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.blocker-item {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.reason-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.reason-chip {
|
||||
padding: 12rpx 24rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
border: 2rpx solid transparent;
|
||||
padding:12rpx 24rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:32rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-secondary);
|
||||
border:2rpx solid transparent;
|
||||
}
|
||||
|
||||
.reason-chip.active {
|
||||
background: #FFF3F2;
|
||||
border-color: #E96B6B;
|
||||
color: #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
border-color:var(--color-primary);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.other-reason {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
font-size: 26rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
min-height:120rpx;
|
||||
font-size:26rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:16rpx;
|
||||
padding:20rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
margin-top: 32rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
margin-top:32rpx;
|
||||
}
|
||||
|
||||
.btn-confirm[disabled] { background: #CCC; }
|
||||
.btn-confirm[disabled] { background:var(--color-bg-muted); }
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 16rpx;
|
||||
line-height: 1.5;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-top:16rpx;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
/* 成功状态 */
|
||||
.submitted {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:120rpx 32rpx;
|
||||
}
|
||||
|
||||
.success-icon { font-size: 80rpx; color: #E96B6B; margin-bottom: 24rpx; }
|
||||
.success-title { font-size: 36rpx; font-weight: bold; color: #1A1A1A; margin-bottom: 16rpx; }
|
||||
.success-hint { font-size: 28rpx; color: #666; text-align: center; line-height: 1.6; margin-bottom: 48rpx; }
|
||||
.success-icon { font-size:80rpx; color:var(--color-primary-strong); margin-bottom:24rpx; }
|
||||
.success-title { font-size:36rpx; font-weight:bold; color:var(--color-text-strong); margin-bottom:16rpx; }
|
||||
.success-hint { font-size:28rpx; color:var(--color-text-secondary); text-align:center; line-height:1.6; margin-bottom:48rpx; }
|
||||
.btn-back {
|
||||
width: 60%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
width:60%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
.page { padding: 32rpx; background: #FFF8F7; min-height: 100vh; }
|
||||
.page { padding:32rpx; background:var(--color-primary-lighter); min-height:100vh; }
|
||||
|
||||
.status-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:48rpx 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.status-card.paused {
|
||||
background: #F9F9F9;
|
||||
background:var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
.status-icon { font-size: 72rpx; display: block; margin-bottom: 16rpx; }
|
||||
.status-title { font-size: 32rpx; font-weight: bold; color: #1A1A1A; display: block; }
|
||||
.status-hint { font-size: 24rpx; color: #999; display: block; margin-top: 12rpx; line-height: 1.5; }
|
||||
.status-icon { font-size:72rpx; display:block; margin-bottom:16rpx; }
|
||||
.status-title { font-size:32rpx; font-weight:bold; color:var(--color-text-strong); display:block; }
|
||||
.status-hint { font-size:24rpx; color:var(--color-text-tertiary); display:block; margin-top:12rpx; line-height:1.5; }
|
||||
|
||||
.btn-withdraw, .btn-resume {
|
||||
width: 80%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
width:80%;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
border-radius:36rpx;
|
||||
font-size:28rpx;
|
||||
margin-top:32rpx;
|
||||
border:none;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.btn-withdraw {
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.btn-resume {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:32rpx 28rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item.danger .menu-text { color: #E96B6B; }
|
||||
.menu-item:last-child { border-bottom:none; }
|
||||
.menu-item.danger .menu-text { color:var(--color-primary-strong); }
|
||||
|
||||
.menu-icon { font-size: 36rpx; margin-right: 20rpx; }
|
||||
.menu-text { flex: 1; font-size: 28rpx; color: #1A1A1A; }
|
||||
.menu-hint { font-size: 22rpx; color: #999; margin-right: 12rpx; }
|
||||
.menu-arrow { font-size: 32rpx; color: #CCC; }
|
||||
.menu-icon { font-size:36rpx; margin-right:20rpx; }
|
||||
.menu-text { flex:1; font-size:28rpx; color:var(--color-text-strong); }
|
||||
.menu-hint { font-size:24rpx; color:var(--color-text-tertiary); margin-right:12rpx; }
|
||||
.menu-arrow { font-size:32rpx; color:var(--color-text-disabled); }
|
||||
|
||||
@@ -1,156 +1,156 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.status-banner {
|
||||
background: linear-gradient(135deg, #E96B6B 0%, #C44545 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-danger) 100%);
|
||||
border-radius:24rpx;
|
||||
padding:48rpx 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.banner-icon {
|
||||
font-size: 72rpx;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:72rpx;
|
||||
display:block;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-inverse);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.banner-status {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255,255,255,0.85);
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size:26rpx;
|
||||
color:rgba(255,255,255,0.85);
|
||||
display:block;
|
||||
margin-top:12rpx;
|
||||
}
|
||||
|
||||
.normal-state {
|
||||
text-align: center;
|
||||
padding: 80rpx 32rpx;
|
||||
text-align:center;
|
||||
padding:80rpx 32rpx;
|
||||
}
|
||||
|
||||
.normal-icon {
|
||||
font-size: 80rpx;
|
||||
color: #67C23A;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:80rpx;
|
||||
color:var(--color-success-strong);
|
||||
display:block;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.normal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:32rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.normal-hint {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
display:block;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.actions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:20rpx;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:28rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.action-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.action-type {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #E96B6B;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.action-time {
|
||||
font-size: 22rpx;
|
||||
color: #BBB;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.action-reason {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.5;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
display:block;
|
||||
margin-bottom:12rpx;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.action-expiry {
|
||||
font-size: 24rpx;
|
||||
color: #E59A32;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-warning-strong);
|
||||
display:block;
|
||||
margin-bottom:20rpx;
|
||||
}
|
||||
|
||||
.btn-appeal {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #E96B6B;
|
||||
}
|
||||
width:100%;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border-radius:36rpx;
|
||||
font-size:28rpx;
|
||||
border:1rpx solid var(--color-primary);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.appeal-hint {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin-top: 16rpx;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
text-align:center;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.appeal-disabled {
|
||||
text-align: center;
|
||||
padding: 60rpx 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
text-align:center;
|
||||
padding:60rpx 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
}
|
||||
|
||||
.disabled-hint {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.btn-contact {
|
||||
width: 60%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 36rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
width:60%;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:36rpx;
|
||||
font-size:28rpx;
|
||||
border:none;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.loading-page {
|
||||
text-align: center;
|
||||
padding: 100rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:100rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import "../../styles/service-page.wxss";.activity-hero{height:360rpx;padding:48rpx 32rpx;box-sizing:border-box;background:linear-gradient(140deg,#F1D4C7,#F9ECE4);position:relative;overflow:hidden}.activity-hero:after{content:'相遇';position:absolute;right:28rpx;bottom:12rpx;font-size:90rpx;color:rgba(125,76,63,.15);font-weight:700}.activity-badge{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.75);color:#9A5B4E;font-size:21rpx}.activity-title{display:block;margin-top:28rpx;width:82%;font-size:40rpx;line-height:1.4;font-weight:700;color:#5E3730}.activity-slogan{display:block;margin-top:16rpx;font-size:23rpx;color:#8A5F57}.body-text{font-size:27rpx;color:var(--color-text-secondary);line-height:1.8}.rule-row{display:flex;gap:18rpx;align-items:flex-start;padding:16rpx 0;font-size:26rpx}.rule-row>text:first-child{width:42rpx;height:42rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);font-size:21rpx}.rule-row>text:last-child{padding-top:4rpx;line-height:1.55}
|
||||
@import "../../styles/service-page.wxss";.activity-hero{height:360rpx;padding:48rpx 32rpx;box-sizing:border-box;background:linear-gradient(140deg,var(--color-warning-light),var(--color-warning-light));position:relative;overflow:hidden}.activity-hero:after{content:'相遇';position:absolute;right:28rpx;bottom:12rpx;font-size:90rpx;color:rgba(125,76,63,.15);font-weight:700}.activity-badge{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.75);color:var(--color-warning-strong);font-size:21rpx}.activity-title{display:block;margin-top:28rpx;width:82%;font-size:40rpx;line-height:1.4;font-weight:700;color:var(--color-warning-strong)}.activity-slogan{display:block;margin-top:16rpx;font-size:24rpx;color:var(--color-warning-strong)}.body-text{font-size:27rpx;color:var(--color-text-secondary);line-height:1.8}.rule-row{display:flex;gap:18rpx;align-items:flex-start;padding:16rpx 0;font-size:26rpx}.rule-row>text:first-child{width:42rpx;height:42rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:24rpx}.rule-row>text:last-child{padding-top:4rpx;line-height:1.55}
|
||||
@@ -1,170 +1,170 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.activity-name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:32rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
margin-bottom:20rpx;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
padding: 24rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
padding:24rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:16rpx;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
border:2rpx solid transparent;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.radio-item.active {
|
||||
background: #FFF3F2;
|
||||
border-color: #E96B6B;
|
||||
color: #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
border-color:var(--color-primary);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.participant-list {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
margin-top:24rpx;
|
||||
padding-top:24rpx;
|
||||
border-top:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.list-hint {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.participant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:16rpx 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.participant-item:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
background: #EEE;
|
||||
width:64rpx;
|
||||
height:64rpx;
|
||||
border-radius:32rpx;
|
||||
margin-right:16rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex:1;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
color: #E96B6B;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color:var(--color-primary-strong);
|
||||
font-size:32rpx;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
margin-top: 24rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
margin-top:24rpx;
|
||||
}
|
||||
|
||||
.btn-submit[disabled] {
|
||||
background: #CCC;
|
||||
background:var(--color-bg-muted);
|
||||
}
|
||||
|
||||
.btn-skip {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border-radius: 44rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1rpx solid #DDD;
|
||||
margin-top: 16rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:transparent;
|
||||
color:var(--color-text-tertiary);
|
||||
border-radius:44rpx;
|
||||
font-size:28rpx;
|
||||
border:1rpx solid var(--color-border-strong);
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
/* 已提交状态 */
|
||||
.submitted {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:120rpx 32rpx;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 80rpx;
|
||||
color: #E96B6B;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:80rpx;
|
||||
color:var(--color-primary-strong);
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.success-hint {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 48rpx;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:48rpx;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
width: 80%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
width:80%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
}
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.activity-name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 100rpx 32rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:100rpx 32rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
color: #E96B6B;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:80rpx;
|
||||
color:var(--color-primary-strong);
|
||||
display:block;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 24rpx;
|
||||
color: #BBB;
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
display:block;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.match-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:20rpx;
|
||||
}
|
||||
|
||||
.match-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.match-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #F0F0F0;
|
||||
flex-shrink: 0;
|
||||
width:100rpx;
|
||||
height:100rpx;
|
||||
border-radius:50rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.match-info {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
flex:1;
|
||||
margin-left:24rpx;
|
||||
}
|
||||
|
||||
.match-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
font-size:30rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.match-meta {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.btn-chat {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
border: none;
|
||||
line-height: 1.4;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:24rpx;
|
||||
padding:12rpx 28rpx;
|
||||
border-radius:24rpx;
|
||||
border:none;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.btn-refresh {
|
||||
margin-top: 32rpx;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border: 1rpx solid #DDD;
|
||||
border-radius: 44rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
margin-top:32rpx;
|
||||
background:transparent;
|
||||
color:var(--color-text-tertiary);
|
||||
border:1rpx solid var(--color-border-strong);
|
||||
border-radius:44rpx;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
font-size:26rpx;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
.container { padding: 24rpx; min-height: 100vh; background: #f5f5f5; }
|
||||
.loading { text-align: center; padding: 80rpx; color: #999; }
|
||||
.empty { text-align: center; padding: 80rpx 0; }
|
||||
.empty-icon { font-size: 80rpx; display: block; margin-bottom: 20rpx; }
|
||||
.empty-text { font-size: 32rpx; color: #666; display: block; }
|
||||
.empty-hint { font-size: 26rpx; color: #999; display: block; margin-top: 12rpx; }
|
||||
.result-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
|
||||
.card-header { display: flex; align-items: center; margin-bottom: 16rpx; }
|
||||
.avatar { width: 80rpx; height: 80rpx; border-radius: 50rpx; background: #eee; }
|
||||
.info { flex: 1; margin-left: 20rpx; }
|
||||
.name { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
|
||||
.status-badge { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 12rpx; margin-top: 8rpx; display: inline-block; }
|
||||
.badge-confirmed { background: #e8f5e9; color: #2e7d32; }
|
||||
.badge-waiting { background: #fff3e0; color: #e65100; }
|
||||
.card-body { margin-bottom: 16rpx; }
|
||||
.activity-name { font-size: 24rpx; color: #999; }
|
||||
.card-actions { display: flex; justify-content: flex-end; }
|
||||
.btn-waiting { background: #f5f5f5; color: #999; font-size: 26rpx; padding: 12rpx 32rpx; border-radius: 24rpx; border: none; }
|
||||
.btn-chat { background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; font-size: 26rpx; padding: 12rpx 32rpx; border-radius: 24rpx; border: none; }
|
||||
.container { padding:24rpx; min-height:100vh; background:var(--color-bg-subtle); }
|
||||
.loading { text-align:center; padding:80rpx; color:var(--color-text-tertiary); }
|
||||
.empty { text-align:center; padding:80rpx 0; }
|
||||
.empty-icon { font-size:80rpx; display:block; margin-bottom:20rpx; }
|
||||
.empty-text { font-size:32rpx; color:var(--color-text-secondary); display:block; }
|
||||
.empty-hint { font-size:26rpx; color:var(--color-text-tertiary); display:block; margin-top:12rpx; }
|
||||
.result-card { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; margin-bottom:20rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,0.05); }
|
||||
.card-header { display:flex; align-items:center; margin-bottom:16rpx; }
|
||||
.avatar { width:80rpx; height:80rpx; border-radius:50rpx; background:var(--color-bg-subtle); }
|
||||
.info { flex:1; margin-left:20rpx; }
|
||||
.name { font-size:30rpx; font-weight:bold; color:var(--color-text-primary); display:block; }
|
||||
.status-badge { font-size:22rpx; padding:4rpx 12rpx; border-radius:12rpx; margin-top:8rpx; display:inline-block; }
|
||||
.badge-confirmed { background:var(--color-success-light); color:var(--color-success-strong); }
|
||||
.badge-waiting { background:var(--color-warning-light); color:var(--color-warning-strong); }
|
||||
.card-body { margin-bottom:16rpx; }
|
||||
.activity-name { font-size:24rpx; color:var(--color-text-tertiary); }
|
||||
.card-actions { display:flex; justify-content:flex-end; }
|
||||
.btn-waiting { background:var(--color-bg-subtle); color:var(--color-text-tertiary); font-size:26rpx; padding:12rpx 32rpx; border-radius:24rpx; border:none; }
|
||||
.btn-chat { background:var(--gradient-brand-solid); color:var(--color-text-inverse); font-size:26rpx; padding:12rpx 32rpx; border-radius:24rpx; border:none; }
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.container { padding: 40rpx 24rpx; min-height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; align-items: center; }
|
||||
.header { text-align: center; margin-bottom: 40rpx; }
|
||||
.avatar { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: #eee; }
|
||||
.partner-name { font-size: 36rpx; font-weight: bold; color: #333; display: block; margin-top: 16rpx; }
|
||||
.status-section { background: #fff; border-radius: 20rpx; padding: 48rpx 40rpx; width: 100%; text-align: center; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
||||
.success-icon, .waiting-icon, .pending-icon { font-size: 72rpx; margin-bottom: 20rpx; }
|
||||
.success-title, .waiting-title, .pending-title { font-size: 34rpx; font-weight: bold; color: #333; display: block; margin-bottom: 12rpx; }
|
||||
.success-hint, .waiting-hint, .pending-hint { font-size: 26rpx; color: #888; display: block; margin-bottom: 32rpx; }
|
||||
.chat-btn, .confirm-btn { background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 30rpx; padding: 16rpx 60rpx; }
|
||||
.decline-btn { background: #f5f5f5; color: #999; border: none; border-radius: 44rpx; font-size: 28rpx; padding: 16rpx 60rpx; margin-top: 20rpx; }
|
||||
.container { padding:40rpx 24rpx; min-height:100vh; background:var(--color-bg-subtle); display:flex; flex-direction:column; align-items:center; }
|
||||
.header { text-align:center; margin-bottom:40rpx; }
|
||||
.avatar { width:120rpx; height:120rpx; border-radius:60rpx; background:var(--color-bg-subtle); }
|
||||
.partner-name { font-size:36rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-top:16rpx; }
|
||||
.status-section { background:var(--color-bg-card); border-radius:20rpx; padding:48rpx 40rpx; width:100%; text-align:center; box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06); }
|
||||
.success-icon, .waiting-icon, .pending-icon { font-size:72rpx; margin-bottom:20rpx; }
|
||||
.success-title, .waiting-title, .pending-title { font-size:34rpx; font-weight:bold; color:var(--color-text-primary); display:block; margin-bottom:12rpx; }
|
||||
.success-hint, .waiting-hint, .pending-hint { font-size:26rpx; color:var(--color-text-tertiary); display:block; margin-bottom:32rpx; }
|
||||
.chat-btn, .confirm-btn { background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:30rpx; padding:16rpx 60rpx; }
|
||||
.decline-btn { background:var(--color-bg-subtle); color:var(--color-text-tertiary); border:none; border-radius:44rpx; font-size:28rpx; padding:16rpx 60rpx; margin-top:20rpx; }
|
||||
|
||||
@@ -1 +1 @@
|
||||
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;color:#999;padding-top:200rpx;}
|
||||
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;color:var(--color-text-tertiary);padding-top:200rpx;}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.act-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:#fff;font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}.activity-category.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:#252A49;font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:#8A8FA4;font-size:20rpx}.my-activity-link{color:var(--mini-accent-pink);font-size:21rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:#9A9EB0;font-size:20rpx}.act-empty{padding-top:70rpx}
|
||||
.act-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}.activity-category.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:var(--color-text-strong);font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.my-activity-link{color:var(--color-primary-strong);font-size:24rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:var(--color-text-tertiary);font-size:24rpx}.act-empty{padding-top:70rpx}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
@import "../../styles/service-page.wxss";
|
||||
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.risk-card{display:flex;min-height:174rpx;flex-direction:column;padding:20rpx;border:1rpx solid #F7DCE2;border-radius:24rpx;background:#FFF9FA}.risk-card image{width:42rpx;height:42rpx}.risk-title{margin-top:10rpx;color:#9E4054;font-size:23rpx;font-weight:650}.risk-desc{margin-top:7rpx;color:#846F78;font-size:18rpx;line-height:1.5}.safety-steps{overflow:hidden;margin-top:18rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:16rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.safety-step:last-child{border-bottom:0}.safety-step>image{width:48rpx;height:48rpx;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:#303654;font-size:23rpx;font-weight:650}.safety-step view text:last-child{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}
|
||||
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.risk-card{display:flex;min-height:174rpx;flex-direction:column;padding:20rpx;border:1rpx solid var(--color-primary-light);border-radius:24rpx;background:var(--color-bg-page)}.risk-card image{width:42rpx;height:42rpx}.risk-title{margin-top:10rpx;color:var(--color-primary-strong);font-size:24rpx;font-weight:600}.risk-desc{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.5}.safety-steps{overflow:hidden;margin-top:18rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:16rpx 20rpx;border-bottom:1rpx solid var(--color-divider)}.safety-step:last-child{border-bottom:0}.safety-step>image{width:48rpx;height:48rpx;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.safety-step view text:last-child{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}
|
||||
|
||||
+126
-126
@@ -1,209 +1,209 @@
|
||||
/* 申诉提交页 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding:24rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* 介绍卡片 */
|
||||
.intro-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border-left: 8rpx solid #E96B6B;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:32rpx;
|
||||
margin-bottom:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border-left:8rpx solid var(--color-primary);
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 12rpx;
|
||||
display:block;
|
||||
font-size:34rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
display:block;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx 32rpx;
|
||||
margin-bottom:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 证据 */
|
||||
.evidence-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.evidence-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:12rpx;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.evidence-item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
position:absolute;
|
||||
top:4rpx;
|
||||
right:4rpx;
|
||||
width:36rpx;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
text-align:center;
|
||||
background:rgba(0, 0, 0, 0.5);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:50%;
|
||||
font-size:24rpx;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.evidence-add {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F7F8FA;
|
||||
border: 2rpx dashed #D0D0D0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:12rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border:2rpx dashed var(--color-border-strong);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 48rpx;
|
||||
color: #B0B0B0;
|
||||
line-height: 1;
|
||||
font-size:48rpx;
|
||||
color:var(--color-text-disabled);
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
/* 联系方式输入 */
|
||||
.contact-input {
|
||||
margin-top: 16rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
margin-top:16rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:12rpx;
|
||||
padding:24rpx;
|
||||
font-size:28rpx;
|
||||
min-height:var(--tap-min);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
/* 提交按钮 */
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin-top: 8rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
border-radius:44rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
border:none;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.btn-submit::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-submit[disabled] {
|
||||
opacity: 0.5;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 80%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin-top: 48rpx;
|
||||
width:80%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
border-radius:44rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
border:none;
|
||||
margin-top:48rpx;
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #B0B0B0;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
margin-top:20rpx;
|
||||
padding:0 24rpx;
|
||||
}
|
||||
|
||||
/* 成功态 */
|
||||
.success-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 48rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:120rpx 48rpx;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #E8F5E9;
|
||||
color: #1A6B3E;
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 32rpx;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
line-height:120rpx;
|
||||
text-align:center;
|
||||
border-radius:50%;
|
||||
background:var(--color-success-light);
|
||||
color:var(--color-success-strong);
|
||||
font-size:64rpx;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.success-hint {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
text-align:center;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
/* 公益免费标识 */
|
||||
.free-badge {
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
text-align:center;
|
||||
padding:24rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.free-badge text {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
color: #1A6B3E;
|
||||
background: #E8F5E9;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
display:inline-block;
|
||||
font-size:22rpx;
|
||||
color:var(--color-success-strong);
|
||||
background:var(--color-success-light);
|
||||
padding:8rpx 24rpx;
|
||||
border-radius:24rpx;
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;padding-top:200rpx;color:#999;}
|
||||
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;padding-top:200rpx;color:var(--color-text-tertiary);}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
/* 黑名单管理页 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding:24rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx;
|
||||
gap:20rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 6rpx;
|
||||
display:block;
|
||||
font-size:30rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:6rpx;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 4rpx;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:4rpx;
|
||||
}
|
||||
|
||||
.reason {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #B0B0B0;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.btn-unblock {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #fff;
|
||||
color: #E96B6B;
|
||||
border: 2rpx solid #E96B6B;
|
||||
}
|
||||
flex-shrink:0;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
padding:0 28rpx;
|
||||
border-radius:32rpx;
|
||||
font-size:24rpx;
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:2rpx solid var(--color-primary);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.btn-unblock::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-unblock.disabled {
|
||||
opacity: 0.5;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
@@ -2,77 +2,77 @@
|
||||
* 聊天详情页样式（重构后大幅简化，气泡主体样式封装在 ui-message-bubble 内）
|
||||
*/
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
box-sizing: border-box;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* 右上角更多按钮 */
|
||||
.more-btn {
|
||||
font-size: 40rpx;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 0 var(--spacing-2);
|
||||
line-height: 1;
|
||||
font-size:40rpx;
|
||||
color:var(--color-text-secondary);
|
||||
padding:0 var(--spacing-2);
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
/* 安全提示 */
|
||||
.safety-tip {
|
||||
background: var(--color-warning-light);
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-warning);
|
||||
text-align: center;
|
||||
line-height: var(--line-height-normal);
|
||||
background:var(--color-warning-light);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-warning-strong);
|
||||
text-align:center;
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.msg-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: var(--spacing-2) 0;
|
||||
flex:1;
|
||||
min-height:0;
|
||||
box-sizing:border-box;
|
||||
padding:var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.load-more-hint {
|
||||
text-align: center;
|
||||
padding: var(--spacing-2);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-xs);
|
||||
text-align:center;
|
||||
padding:var(--spacing-2);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* 输入栏 */
|
||||
.input-bar {
|
||||
background: var(--color-bg-card);
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
border-top: var(--border-width) solid var(--color-border);
|
||||
background:var(--color-bg-card);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
border-top:var(--border-width) solid var(--color-border);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: var(--color-bg-page);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--spacing-3);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex:1;
|
||||
height:72rpx;
|
||||
background:var(--color-bg-page);
|
||||
border-radius:var(--radius-full);
|
||||
padding:0 var(--spacing-3);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* 会话已停用 */
|
||||
.blocked-tip {
|
||||
background: var(--color-bg-card);
|
||||
text-align: center;
|
||||
padding: var(--spacing-5) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-5) + env(safe-area-inset-bottom));
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--font-size-sm);
|
||||
border-top: var(--border-width) solid var(--color-border);
|
||||
background:var(--color-bg-card);
|
||||
text-align:center;
|
||||
padding:var(--spacing-5) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-5) + env(safe-area-inset-bottom));
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:var(--font-size-sm);
|
||||
border-top:var(--border-width) solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -1,140 +1,140 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.loading-state, .error-state {
|
||||
text-align: center;
|
||||
padding: 80rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:80rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.checkin-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:40rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.activity-info {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 8rpx;
|
||||
display:block;
|
||||
font-size:32rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.activity-location {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display:block;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
text-align: center;
|
||||
padding: 32rpx 0;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
padding:32rpx 0;
|
||||
border-top:1rpx solid var(--color-divider);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:300rpx;
|
||||
height:300rpx;
|
||||
margin:0 auto 20rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:16rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.qr-icon {
|
||||
font-size: 120rpx;
|
||||
color: #CCC;
|
||||
font-size:120rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.qr-hint {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.token-section {
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.token-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
display:block;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.token-value {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
background: #F5F5F5;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16rpx;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-primary);
|
||||
background:var(--color-bg-subtle);
|
||||
padding:20rpx;
|
||||
border-radius:12rpx;
|
||||
word-break:break-all;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border-radius: 36rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
}
|
||||
width:100%;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border-radius:36rpx;
|
||||
font-size:26rpx;
|
||||
border:none;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.expire-info {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #E59A32;
|
||||
padding: 16rpx;
|
||||
background: #FFF8E1;
|
||||
border-radius: 12rpx;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-warning-strong);
|
||||
padding:16rpx;
|
||||
background:var(--color-warning-light);
|
||||
border-radius:12rpx;
|
||||
}
|
||||
|
||||
.btn-refresh-page {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
margin-top: 24rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
font-size:30rpx;
|
||||
margin-top:24rpx;
|
||||
}
|
||||
|
||||
.btn-refresh {
|
||||
margin-top: 24rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
margin-top:24rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
font-size:28rpx;
|
||||
border:none;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
@import "../../styles/service-page.wxss";
|
||||
.content-page{min-height:100vh;padding-bottom:40rpx;background:#F4F5FA}.content-categories{padding:24rpx 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:12rpx;padding:0 24rpx}.content-category{padding:11rpx 22rpx;border-radius:24rpx;background:#fff;color:#767D96;font-size:21rpx;box-shadow:0 6rpx 18rpx rgba(35,35,95,.05)}.content-category.active{background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-weight:650}.content-list{padding:0 24rpx}.content-card{display:flex;align-items:center;overflow:hidden;min-height:150rpx;margin-bottom:16rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.content-cover{width:176rpx;height:150rpx;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:16rpx}.content-card__category{align-self:flex-start;padding:4rpx 10rpx;border-radius:12rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:17rpx}.content-card__title{overflow:hidden;margin-top:8rpx;color:#283056;font-size:24rpx;font-weight:650;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:5rpx;color:#83899F;font-size:18rpx;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:18rpx;margin-top:9rpx;color:#9A9EB0;font-size:17rpx}.content-card__arrow{width:24rpx;height:24rpx;margin-right:16rpx;flex:none}
|
||||
.content-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.content-categories{padding:24rpx 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:12rpx;padding:0 24rpx}.content-category{padding:11rpx 22rpx;border-radius:24rpx;background:var(--color-bg-card);color:var(--color-text-tertiary);font-size:24rpx;box-shadow:0 6rpx 18rpx rgba(35,35,95,.05)}.content-category.active{background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-weight:600}.content-list{padding:0 24rpx}.content-card{display:flex;align-items:center;overflow:hidden;min-height:150rpx;margin-bottom:16rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.content-cover{width:176rpx;height:150rpx;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:16rpx}.content-card__category{align-self:flex-start;padding:4rpx 10rpx;border-radius:12rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:24rpx}.content-card__title{overflow:hidden;margin-top:8rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:18rpx;margin-top:9rpx;color:var(--color-text-tertiary);font-size:24rpx}.content-card__arrow{width:24rpx;height:24rpx;margin-right:16rpx;flex:none}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.container { padding: 24rpx; }
|
||||
.form-section { background: #fff; border-radius: 16rpx; padding: 24rpx; }
|
||||
.form-group { padding: 20rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
||||
.form-group:last-child { border-bottom: none; }
|
||||
.label { font-size: 28rpx; color: #666; display: block; margin-bottom: 12rpx; }
|
||||
.value { font-size: 30rpx; color: #333; }
|
||||
.picker-value { font-size: 30rpx; color: #333; }
|
||||
.input { font-size: 30rpx; color: #333; }
|
||||
.textarea { font-size: 30rpx; color: #333; width: 100%; height: 160rpx; }
|
||||
.submit-btn { margin-top: 40rpx; background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 32rpx; }
|
||||
.tip { display: block; text-align: center; font-size: 24rpx; color: #999; margin-top: 20rpx; }
|
||||
.container { padding:24rpx; }
|
||||
.form-section { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; }
|
||||
.form-group { padding:20rpx 0; border-bottom:1rpx solid var(--color-divider); }
|
||||
.form-group:last-child { border-bottom:none; }
|
||||
.label { font-size:28rpx; color:var(--color-text-secondary); display:block; margin-bottom:12rpx; }
|
||||
.value { font-size:30rpx; color:var(--color-text-primary); }
|
||||
.picker-value { font-size:30rpx; color:var(--color-text-primary); }
|
||||
.input { font-size:30rpx; color:var(--color-text-primary); }
|
||||
.textarea { font-size:30rpx; color:var(--color-text-primary); width:100%; height:160rpx; }
|
||||
.submit-btn { margin-top:40rpx; background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:32rpx; }
|
||||
.tip { display:block; text-align:center; font-size:24rpx; color:var(--color-text-tertiary); margin-top:20rpx; }
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
.page{min-height:100vh;background:#F4F5FA}
|
||||
.page{min-height:100vh;background:var(--color-bg-page)}
|
||||
.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow);position:relative;z-index:1}
|
||||
.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
|
||||
.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:var(--color-text-inverse)}
|
||||
.nav-title{font-size:31rpx;font-weight:700}
|
||||
.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}
|
||||
.nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
|
||||
.search-bar{display:flex;align-items:center}
|
||||
.search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}
|
||||
.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:20rpx;color:#fff}
|
||||
.search-field{flex:1;font-size:23rpx;color:#fff}
|
||||
.search-placeholder{font-size:23rpx;color:rgba(255,255,255,.52)}
|
||||
.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:24rpx;color:var(--color-text-inverse)}
|
||||
.search-field{flex:1;font-size:24rpx;color:var(--color-text-inverse)}
|
||||
.search-placeholder{font-size:24rpx;color:rgba(255,255,255,.52)}
|
||||
.filter-scroll{margin-top:16rpx;white-space:nowrap}
|
||||
.filter-chips{display:inline-flex;gap:12rpx}
|
||||
.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:20rpx}
|
||||
.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
|
||||
.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}
|
||||
.filter-chip.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}
|
||||
|
||||
/* 遮罩层 + 底部抽屉样式 */
|
||||
.filter-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10}
|
||||
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:#fff;border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
|
||||
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:var(--color-bg-card);border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
|
||||
.filter-scroll-wrap{flex:1;max-height:calc(78vh - 140rpx);padding:8rpx 0 0}
|
||||
.filter-section{margin-bottom:28rpx;padding:16rpx 20rpx;border-radius:16rpx;transition:background .2s,box-shadow .2s}
|
||||
.filter-section.hl{background:#FFF5F8;box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
|
||||
.filter-section.hl{background:var(--color-primary-light);box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
|
||||
.filter-heading{display:flex;justify-content:space-between}
|
||||
.filter-label{display:block;font-size:24rpx;font-weight:650;color:#282D4E}
|
||||
.filter-value{font-size:21rpx;color:#777E99}
|
||||
.filter-label{display:block;font-size:24rpx;font-weight:600;color:var(--color-text-strong)}
|
||||
.filter-value{font-size:24rpx;color:var(--color-text-tertiary)}
|
||||
.range-slider{margin:8rpx 0}
|
||||
.tag-group{display:flex;flex-wrap:wrap;gap:14rpx;margin-top:16rpx}
|
||||
.tag{padding:10rpx 22rpx;border-radius:22rpx;background:#F1F2F7;color:#626981;font-size:21rpx}
|
||||
.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}
|
||||
.tag{padding:10rpx 22rpx;border-radius:22rpx;background:var(--color-bg-subtle);color:var(--color-text-secondary);font-size:24rpx}
|
||||
.tag.selected{background:var(--color-primary-light);color:var(--color-primary-strong)}
|
||||
.filter-actions{display:flex;gap:18rpx;margin-top:8rpx}
|
||||
|
||||
.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}
|
||||
.result-head>view{display:flex;flex-direction:column}
|
||||
.result-title{font-size:30rpx;font-weight:700;color:#252A49}
|
||||
.result-subtitle{margin-top:5rpx;font-size:20rpx;color:#8A8FA4}
|
||||
.result-count{font-size:20rpx;color:#8A8FA4}
|
||||
.user-list{margin:0 24rpx;padding:4rpx 0;background:#fff;border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
||||
.result-title{font-size:30rpx;font-weight:700;color:var(--color-text-strong)}
|
||||
.result-subtitle{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary)}
|
||||
.result-count{font-size:20rpx;color:var(--color-text-tertiary)}
|
||||
.user-list{margin:0 24rpx;padding:4rpx 0;background:var(--color-bg-card);border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
||||
.card-action{display:flex;align-items:center}
|
||||
.like-button{width:62rpx;height:62rpx;display:flex;align-items:center;justify-content:center;border-radius:31rpx;background:#FFF0F5;box-shadow:0 6rpx 18rpx rgba(255,79,145,.16)}
|
||||
.like-button{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 6rpx 18rpx rgba(255,79,145,.16);}
|
||||
.like-button image{width:42rpx;height:42rpx}
|
||||
.like-button.loading{opacity:.45}
|
||||
.list-end-hint{text-align:center;padding:24rpx;font-size:20rpx;color:#9A9EB0}
|
||||
.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
||||
.list-end-hint{text-align:center;padding:24rpx;font-size:24rpx;color:var(--color-text-tertiary)}
|
||||
.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:var(--color-bg-card);border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
||||
.discover-empty image{width:112rpx;height:112rpx}
|
||||
.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:650;color:#252A49}
|
||||
.empty-desc{margin-top:10rpx;text-align:center;font-size:21rpx;line-height:1.55;color:#858A9E}
|
||||
.empty-action{margin-top:24rpx;min-width:180rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:23rpx;font-weight:650}
|
||||
.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:600;color:var(--color-text-strong)}
|
||||
.empty-desc{margin-top:10rpx;text-align:center;font-size:24rpx;line-height:1.55;color:var(--color-text-tertiary)}
|
||||
.empty-action{margin-top:24rpx;min-width:180rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}
|
||||
|
||||
@@ -1,119 +1,119 @@
|
||||
/* 我的缘分页 U22 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
/* Tab 切换栏（粘性吸附在自定义导航栏下方） */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
display:flex;
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
position:sticky;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 28rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
flex:1;
|
||||
text-align:center;
|
||||
padding:28rpx 0;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
position:relative;
|
||||
transition:color 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #E96B6B;
|
||||
font-weight: bold;
|
||||
color:var(--color-primary-strong);
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #E96B6B;
|
||||
border-radius: 2rpx;
|
||||
content:'';
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
width:48rpx;
|
||||
height:4rpx;
|
||||
background:var(--color-primary);
|
||||
border-radius:2rpx;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
display: inline-block;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 8rpx;
|
||||
vertical-align: middle;
|
||||
display:inline-block;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:20rpx;
|
||||
padding:2rpx 10rpx;
|
||||
border-radius:20rpx;
|
||||
margin-left:8rpx;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-wrap {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding:24rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.btn-primary {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
flex-shrink:0;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
padding:0 28rpx;
|
||||
border-radius:32rpx;
|
||||
font-size:24rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border:none;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-like-back {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border: 2rpx solid #E96B6B;
|
||||
}
|
||||
flex-shrink:0;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
padding:0 28rpx;
|
||||
border-radius:32rpx;
|
||||
font-size:24rpx;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border:2rpx solid var(--color-primary);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.btn-like-back::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-like-back.disabled {
|
||||
opacity: 0.5;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
/* 等待回应状态 */
|
||||
.status-waiting {
|
||||
flex-shrink: 0;
|
||||
font-size: 22rpx;
|
||||
color: #E96B6B;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFF3F2;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
flex-shrink:0;
|
||||
font-size:24rpx;
|
||||
color:var(--color-primary-strong);
|
||||
padding:8rpx 16rpx;
|
||||
background:var(--color-primary-light);
|
||||
border-radius:8rpx;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
/* 帮助中心样式 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-subtle);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.category-bar {
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
padding: 0 24rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
white-space:nowrap;
|
||||
background:var(--color-bg-card);
|
||||
padding:0 24rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: inline-block;
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
display:inline-block;
|
||||
padding:24rpx 32rpx;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-secondary);
|
||||
border-bottom:4rpx solid transparent;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
color: #E96B6B;
|
||||
border-bottom-color: #E96B6B;
|
||||
font-weight: 600;
|
||||
color:var(--color-primary-strong);
|
||||
border-bottom-color:var(--color-primary);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
flex: 1;
|
||||
padding: 24rpx 32rpx;
|
||||
flex:1;
|
||||
padding:24rpx 32rpx;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:16rpx;
|
||||
margin-bottom:24rpx;
|
||||
padding:28rpx 32rpx;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
font-weight: 500;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
font-size:30rpx;
|
||||
color:var(--color-text-strong);
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.faq-arrow {
|
||||
font-size: 20rpx;
|
||||
color: #ccc;
|
||||
transition: transform 0.2s;
|
||||
font-size:20rpx;
|
||||
color:var(--color-text-disabled);
|
||||
transition:transform 0.2s;
|
||||
}
|
||||
|
||||
.faq-arrow.up {
|
||||
transform: rotate(180deg);
|
||||
color: #E96B6B;
|
||||
transform:rotate(180deg);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.7;
|
||||
margin-top:20rpx;
|
||||
padding-top:20rpx;
|
||||
border-top:1rpx solid var(--color-divider);
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.7;
|
||||
}
|
||||
|
||||
+696
-10
@@ -1,10 +1,696 @@
|
||||
.page{min-height:100vh;background:#F4F5FA;padding-bottom:40rpx}.night-shell{padding:0 24rpx 28rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 42rpx 42rpx;box-shadow:var(--mini-shadow)}
|
||||
.brand-bar{height:112rpx;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;color:var(--mini-text-on-night)}.brand-lockup{display:flex;align-items:center}.brand-logo{width:66rpx;height:66rpx}.brand-copy{display:flex;flex-direction:column;margin-left:12rpx}.brand-name{font-size:34rpx;font-weight:700;letter-spacing:2rpx}.brand-slogan{font-size:18rpx;letter-spacing:4rpx;color:var(--mini-text-on-night-muted)}.brand-actions{position:relative;min-width:76rpx;height:72rpx;display:flex;align-items:center;justify-content:center}.message-label{font-size:23rpx}.badge{position:absolute;right:0;top:4rpx;min-width:28rpx;height:28rpx;padding:0 4rpx;line-height:28rpx;text-align:center;font-size:18rpx;color:#fff;background:var(--mini-accent-pink);border-radius:20rpx}
|
||||
.status-strip{margin:4rpx 0 16rpx;padding:18rpx 20rpx;border:1rpx solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:20rpx;color:#fff}.status-main{display:flex;align-items:center;gap:16rpx}.status-copy{flex:1;min-width:0;display:flex;flex-direction:column}.status-title{font-size:25rpx;font-weight:650}.status-desc{margin-top:5rpx;font-size:20rpx;color:var(--mini-text-on-night-muted);line-height:1.4}.status-action{flex:none;min-width:108rpx;min-height:56rpx;padding:0 18rpx;display:flex;align-items:center;justify-content:center;border-radius:28rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));font-size:22rpx;font-weight:650}.status-checks{display:flex;gap:10rpx;overflow:hidden}.status-check{padding:8rpx 12rpx;border-radius:20rpx;background:rgba(255,255,255,.08);font-size:19rpx;color:var(--mini-text-on-night-muted);white-space:nowrap}.status-check.done{background:rgba(90,226,184,.16);color:#A6F5D7}
|
||||
.banner-section{width:100%}.banner-swiper,.banner-card{height:272rpx;border-radius:26rpx;overflow:hidden}.banner-card{position:relative}.banner-img{width:100%;height:100%;display:block}.banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,86,.78) 0%,rgba(43,22,101,.25) 58%,rgba(255,79,145,.08) 100%)}.banner-copy{position:absolute;left:26rpx;bottom:26rpx;width:68%;display:flex;flex-direction:column;color:#fff}.banner-kicker{font-size:18rpx;letter-spacing:3rpx;color:rgba(255,255,255,.78)}.banner-title{margin-top:9rpx;font-size:35rpx;line-height:1.2;font-weight:750;text-shadow:0 3rpx 10rpx rgba(0,0,0,.2)}.banner-subtitle{margin-top:8rpx;font-size:22rpx;color:rgba(255,255,255,.84)}
|
||||
.entries-card{position:relative;z-index:2;margin:-14rpx 24rpx 0;padding:22rpx 10rpx 18rpx;background:var(--mini-card-bg);border-radius:30rpx;box-shadow:var(--mini-shadow)}.entries-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:18rpx}.entry-item{min-height:104rpx;display:flex;flex-direction:column;align-items:center;justify-content:center}.entry-item.disabled{opacity:.4}.entry-icon{width:66rpx;height:66rpx;display:flex;align-items:center;justify-content:center;border-radius:20rpx;overflow:hidden}.entry-icon-image{width:45rpx;height:45rpx}.entry-label{margin-top:8rpx;font-size:21rpx;color:#283056;font-weight:550}.tone-rose{background:#FFF0F5}.tone-purple{background:#F0EAFE}.tone-blue{background:#EAF3FF}.tone-pink{background:#FFF0F7}.tone-amber{background:#FFF3E5}.tone-indigo{background:#ECEEFF}.tone-red{background:#FFEDEF}.tone-green{background:#EAF8F2}
|
||||
.preview-note{margin:16rpx 24rpx 0;text-align:center;color:#8B63BC;font-size:20rpx}.section{margin-top:34rpx;padding:0 24rpx}.recommendation-section{margin-top:30rpx}.recommend-list{margin-top:16rpx;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.recommend-empty{margin-top:16rpx;padding:22rpx;display:flex;align-items:center;gap:18rpx;background:#fff;border-radius:26rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.empty-logo{width:76rpx;height:76rpx;flex:none}.empty-copy{flex:1;min-width:0;display:flex;flex-direction:column}.empty-title{font-size:25rpx;font-weight:650;color:#222746}.empty-desc{margin-top:6rpx;font-size:20rpx;line-height:1.4;color:#7A7F98}.empty-actions{display:flex;flex-direction:column;gap:8rpx}.empty-btn{min-width:112rpx;height:48rpx;padding:0 12rpx;display:flex;align-items:center;justify-content:center;border-radius:24rpx;font-size:20rpx}.empty-btn.secondary{color:#7C60BC;background:#F1EEFB}.empty-btn.primary{color:#fff;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink))}
|
||||
.service-card{display:flex;align-items:stretch;margin-top:16rpx;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-cover{width:210rpx;min-height:156rpx}.service-copy{flex:1;padding:20rpx;display:flex;flex-direction:column}.service-title{font-size:25rpx;font-weight:650;color:#222746}.service-desc{margin-top:7rpx;font-size:21rpx;color:#757B91;line-height:1.45}.text-link{margin-top:auto;padding-top:10rpx;font-size:21rpx;color:var(--mini-accent-pink);font-weight:650}
|
||||
.activity-scroll{white-space:nowrap;margin-top:16rpx}.activity-card{display:inline-flex;width:550rpx;margin-right:18rpx;background:#fff;border-radius:24rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07);white-space:normal}.activity-cover{width:210rpx;height:168rpx}.activity-info{flex:1;padding:18rpx;display:flex;flex-direction:column}.activity-tag{align-self:flex-start;padding:5rpx 12rpx;border-radius:18rpx;background:#FFF0F5;color:var(--mini-accent-pink);font-size:18rpx}.activity-title{margin-top:10rpx;font-size:25rpx;font-weight:650;color:#222746;line-height:1.35}.activity-meta{margin-top:auto;font-size:20rpx;color:#81869B}
|
||||
.station-card,.article-row,.safety-card{display:flex;align-items:center;background:#fff;border-radius:26rpx;overflow:hidden;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.station-cover{width:190rpx;height:170rpx}.station-info{flex:1;min-width:0;padding:18rpx}.station-name{display:block;font-size:26rpx;font-weight:650;color:#222746}.station-desc{display:block;margin:7rpx 0 12rpx;font-size:20rpx;color:#7A7F98}.mini-tag{display:inline-block;margin:4rpx 7rpx 0 0;padding:4rpx 9rpx;border-radius:14rpx;background:#F0EEFB;color:#6857A2;font-size:17rpx}.arrow-icon{width:28rpx;height:28rpx;margin:16rpx;flex:none}.article-list{margin-top:16rpx;display:flex;flex-direction:column;gap:12rpx}.article-row{min-height:112rpx}.article-cover{width:146rpx;height:112rpx}.article-info,.safety-info{flex:1;min-width:0;padding:16rpx}.article-title{display:block;font-size:24rpx;font-weight:600;color:#222746;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-meta{display:block;margin-top:6rpx;font-size:19rpx;color:#85899C}.section-empty{margin-top:16rpx;padding:30rpx 24rpx;text-align:center;color:#8A90A6;font-size:22rpx;background:#fff;border-radius:24rpx;box-shadow:0 8rpx 28rpx rgba(35,35,95,.05)}.safety-card{padding:0}.safety-cover{width:180rpx;align-self:stretch}.safety-title{display:block;font-size:25rpx;font-weight:650;color:#222746}.safety-body{display:block;margin-top:7rpx;font-size:20rpx;line-height:1.45;color:#74798E}.safety-link{display:block;margin-top:9rpx;font-size:20rpx;color:var(--mini-accent-pink);font-weight:650}
|
||||
@media (max-width:340px){.entry-label{font-size:19rpx}.entry-icon{width:60rpx;height:60rpx}.banner-title{font-size:31rpx}.status-checks{overflow-x:auto}.empty-actions{display:none}}
|
||||
/**
|
||||
* 首页 —— 全站设计系统样板页
|
||||
*
|
||||
* 2026-09-22 重做。这一版要证明 app.wxss v2 的底座是"能用"的：
|
||||
*
|
||||
* 1) 氛围层（参考图的关键差异项）
|
||||
* 旧版只有一条线性渐变，参考图里有明显的暖粉光晕、星点与玻璃质感。
|
||||
* 现用三层叠加：--mini-starfield（星点）+ --gradient-night（夜空）
|
||||
* + 两个定位光晕伪元素（左上粉 / 左下靛蓝），零图片、零额外请求。
|
||||
*
|
||||
* 2) 排版层级
|
||||
* 旧版 hero 标题 35rpx、区块标题 36rpx、卡片标题 25rpx、正文 24rpx ——
|
||||
* hero 与区块标题几乎同号，层级读不出来。现为：
|
||||
* hero 48rpx/700 > 区块标题 40rpx/600 > 卡片标题 28rpx/600 >
|
||||
* 正文 26rpx > 元信息 24rpx
|
||||
*
|
||||
* 3) 触摸目标
|
||||
* 所有可点元素以 --tap-min(88rpx=44px) 为下限；旧版 .empty-btn 只有 24px。
|
||||
* 并且删掉了 @media(max-width:340px) 里的 .empty-actions{display:none} ——
|
||||
* 那等于在小屏上把「调整条件 / 公益红娘」两个入口整块砍掉。
|
||||
*
|
||||
* 4) 交互反馈
|
||||
* 旧版全站 --motion-* 只被引用 5 次，点了没反应。现统一走 --ease-spring
|
||||
* + --press-scale，并给区块卡片加上按压缩放。
|
||||
*
|
||||
* 5) 对比度
|
||||
* 旧版 .text-link/.activity-tag/.safety-link 用 --mini-accent-pink(#FF4F91)
|
||||
* 作文字 = 3.10:1，不达标；CTA 白字压在珊瑚粉渐变上也只有 2.77:1。
|
||||
* 现分别改用 --color-primary-strong(5.33:1) 与 --gradient-brand-solid(≥4.7:1)。
|
||||
*
|
||||
* 单位：rpx（750rpx = 屏幕宽度，1rpx ≈ 0.5px）
|
||||
*/
|
||||
|
||||
/* ============================== 页面骨架 ============================== */
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
/* ============================== 夜空头部 ============================== */
|
||||
|
||||
.night-shell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--spacing-3) var(--spacing-4);
|
||||
background: var(--mini-starfield), var(--gradient-night);
|
||||
border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
|
||||
box-shadow: var(--shadow-night);
|
||||
}
|
||||
|
||||
/* 两个光晕：伪元素承担，避免为了装饰再嵌一层 view */
|
||||
.night-shell::before,
|
||||
.night-shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-ambient);
|
||||
}
|
||||
.night-shell::before {
|
||||
top: -200rpx;
|
||||
right: -140rpx;
|
||||
width: 560rpx;
|
||||
height: 560rpx;
|
||||
background: radial-gradient(circle, var(--mini-glow-coral) 0%, transparent 68%);
|
||||
}
|
||||
.night-shell::after {
|
||||
bottom: -220rpx;
|
||||
left: -160rpx;
|
||||
width: 620rpx;
|
||||
height: 620rpx;
|
||||
background: radial-gradient(circle, var(--mini-glow-indigo) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
/* 伪元素是定位元素，会盖住静态流内容；正文需要显式抬一层 */
|
||||
.night-shell > view {
|
||||
position: relative;
|
||||
z-index: var(--z-base);
|
||||
}
|
||||
|
||||
/* ============================== 品牌栏 ============================== */
|
||||
|
||||
.brand-bar {
|
||||
min-height: 112rpx;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--mini-text-on-night);
|
||||
}
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.brand-logo {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
flex: none;
|
||||
}
|
||||
.brand-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: var(--spacing-2);
|
||||
}
|
||||
.brand-name {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-wider);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
.brand-slogan {
|
||||
margin-top: 2rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
letter-spacing: 3rpx;
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.brand-actions {
|
||||
position: relative;
|
||||
flex: none;
|
||||
min-width: var(--tap-min);
|
||||
min-height: var(--tap-min);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.message-label {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4rpx;
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
padding: 0 5rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-micro);
|
||||
color: var(--color-text-inverse);
|
||||
/* 白字需 4.5:1：--mini-accent-pink 仅 3.10，改用 solid 变体 */
|
||||
background: var(--color-primary-solid);
|
||||
border-radius: var(--radius-full);
|
||||
/* 描一圈夜空底色，避免角标压在光晕上时边缘糊掉 */
|
||||
box-shadow: 0 0 0 3rpx var(--mini-night-start);
|
||||
}
|
||||
|
||||
/* ============================== 状态条 ============================== */
|
||||
|
||||
.status-strip {
|
||||
margin: var(--spacing-1) 0 var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
border: var(--border-width) solid var(--mini-hairline);
|
||||
background: var(--mini-glass);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
.status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
.status-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
.status-desc {
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.status-action {
|
||||
flex: none;
|
||||
min-width: 116rpx;
|
||||
min-height: var(--tap-min);
|
||||
padding: 0 var(--spacing-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--gradient-brand-solid);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
.status-checks {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.status-check {
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--mini-glass);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-check.done {
|
||||
background: var(--mini-glass-success);
|
||||
color: var(--color-success-on-night);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
/* ============================== 主视觉横幅 ============================== */
|
||||
|
||||
.banner-section {
|
||||
width: 100%;
|
||||
}
|
||||
.banner-swiper,
|
||||
.banner-card {
|
||||
height: 300rpx;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-card {
|
||||
position: relative;
|
||||
}
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--mini-banner-scrim);
|
||||
}
|
||||
.banner-copy {
|
||||
position: absolute;
|
||||
left: var(--spacing-3);
|
||||
bottom: var(--spacing-5);
|
||||
width: 68%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
.banner-kicker {
|
||||
font-size: var(--font-size-xs);
|
||||
letter-spacing: 3rpx;
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
.banner-title {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-wide);
|
||||
text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
.banner-subtitle {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--mini-text-on-night-muted);
|
||||
}
|
||||
|
||||
/* ============================== 快捷入口 ============================== */
|
||||
|
||||
.entries-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: -18rpx var(--spacing-3) 0;
|
||||
padding: var(--spacing-3) var(--spacing-1) var(--spacing-2);
|
||||
background: var(--mini-card-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
/* 4 列宫格用 flex + 25% 宽实现。display:grid 在 Skyline 渲染引擎下不支持，
|
||||
统一避开以免将来切渲染引擎时整体错版。 */
|
||||
.entries-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--spacing-2);
|
||||
}
|
||||
.entry-item {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
min-height: 116rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.entry-item.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.entry-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
.entry-icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.entry-label {
|
||||
margin-top: var(--spacing-1);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.tone-rose { background: var(--color-primary-light); }
|
||||
.tone-purple { background: var(--color-accent-purple-light); }
|
||||
.tone-blue { background: var(--color-info-light); }
|
||||
.tone-pink { background: var(--color-primary-light); }
|
||||
.tone-amber { background: var(--color-warning-light); }
|
||||
.tone-indigo { background: var(--color-info-light); }
|
||||
.tone-red { background: var(--color-danger-light); }
|
||||
.tone-green { background: var(--color-success-light); }
|
||||
|
||||
/* ============================== 区块容器 ============================== */
|
||||
|
||||
.preview-note {
|
||||
margin: var(--spacing-2) var(--spacing-3) 0;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-accent-purple-strong);
|
||||
}
|
||||
.section {
|
||||
margin-top: var(--spacing-5);
|
||||
padding: 0 var(--spacing-3);
|
||||
}
|
||||
.recommendation-section {
|
||||
margin-top: var(--spacing-5);
|
||||
}
|
||||
/* 标题与卡片左边缘必须对齐：.section 已提供 24rpx 内边距，
|
||||
而 ui-section 自带 --spacing-page-x(32rpx)，叠加会让标题比卡片多缩进 32rpx。 */
|
||||
.section .ui-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* ============================== 今日推荐 ============================== */
|
||||
|
||||
.recommend-list {
|
||||
margin-top: var(--spacing-2);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.recommend-empty {
|
||||
margin-top: var(--spacing-2);
|
||||
padding: var(--spacing-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.empty-logo {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
flex: none;
|
||||
}
|
||||
.empty-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.empty-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.empty-desc {
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.empty-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
.empty-btn {
|
||||
min-width: 120rpx;
|
||||
min-height: var(--tap-min);
|
||||
padding: 0 var(--spacing-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.empty-btn.secondary {
|
||||
color: var(--color-accent-purple-strong);
|
||||
background: var(--color-accent-purple-light);
|
||||
}
|
||||
.empty-btn.primary {
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--gradient-brand-solid);
|
||||
}
|
||||
|
||||
/* ============================== 公益服务 ============================== */
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-top: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.service-cover {
|
||||
width: 210rpx;
|
||||
min-height: 160rpx;
|
||||
flex: none;
|
||||
}
|
||||
.service-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.service-title {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.service-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.text-link {
|
||||
margin-top: auto;
|
||||
padding-top: var(--spacing-1);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* ============================== 近期活动 ============================== */
|
||||
|
||||
.activity-scroll {
|
||||
white-space: nowrap;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
.activity-card {
|
||||
display: inline-flex;
|
||||
width: 550rpx;
|
||||
margin-right: var(--spacing-2);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
white-space: normal;
|
||||
}
|
||||
.activity-cover {
|
||||
width: 210rpx;
|
||||
height: 172rpx;
|
||||
flex: none;
|
||||
}
|
||||
.activity-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.activity-tag {
|
||||
align-self: flex-start;
|
||||
padding: 5rpx 14rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary-strong);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.activity-title {
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.activity-meta {
|
||||
margin-top: auto;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============================== 服务站 / 婚恋课堂 ============================== */
|
||||
|
||||
.station-card,
|
||||
.article-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.station-cover {
|
||||
width: 190rpx;
|
||||
height: 172rpx;
|
||||
flex: none;
|
||||
}
|
||||
.station-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.station-name {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.station-desc {
|
||||
display: block;
|
||||
margin: 8rpx 0 12rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.mini-tag {
|
||||
display: inline-block;
|
||||
margin: 4rpx 8rpx 0 0;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-accent-purple-light);
|
||||
color: var(--color-accent-purple-strong);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.arrow-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: var(--spacing-2);
|
||||
flex: none;
|
||||
}
|
||||
.article-list {
|
||||
margin-top: var(--spacing-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.article-row {
|
||||
min-height: 116rpx;
|
||||
}
|
||||
.article-cover {
|
||||
width: 146rpx;
|
||||
height: 116rpx;
|
||||
flex: none;
|
||||
}
|
||||
.article-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.article-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.article-meta {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.section-empty {
|
||||
margin-top: var(--spacing-2);
|
||||
padding: var(--spacing-4) var(--spacing-3);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* ============================== 安全提醒 ============================== */
|
||||
|
||||
/* 注意：旧版这里写了 padding:0，把 .section 的左右 24rpx 内边距覆盖掉了，
|
||||
于是这张卡比其它区块宽出 48rpx、直接贴到屏幕边缘。现已移除。 */
|
||||
.safety-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.safety-cover {
|
||||
width: 180rpx;
|
||||
align-self: stretch;
|
||||
flex: none;
|
||||
}
|
||||
.safety-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
.safety-title {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
.safety-body {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.safety-link {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* ============================== 按压反馈 ==============================
|
||||
全站约定：可点元素必须有即时反馈（旧版 --motion-* 全站只被引用 5 次）。
|
||||
统一走 --ease-spring 的轻微回弹 + --press-scale，避免"点了没反应"。 */
|
||||
|
||||
.entry-item,
|
||||
.status-action,
|
||||
.empty-btn,
|
||||
.brand-actions,
|
||||
.service-card,
|
||||
.activity-card,
|
||||
.station-card,
|
||||
.article-row,
|
||||
.safety-card,
|
||||
.section-empty,
|
||||
.banner-card {
|
||||
transition: transform var(--motion-fast) var(--ease-spring),
|
||||
opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.entry-item:active,
|
||||
.status-action:active,
|
||||
.empty-btn:active,
|
||||
.brand-actions:active,
|
||||
.service-card:active,
|
||||
.activity-card:active,
|
||||
.station-card:active,
|
||||
.article-row:active,
|
||||
.safety-card:active,
|
||||
.section-empty:active,
|
||||
.banner-card:active {
|
||||
transform: scale(var(--press-scale));
|
||||
opacity: var(--press-opacity);
|
||||
}
|
||||
|
||||
/* ============================== 小屏适配 ==============================
|
||||
旧版在这里写了 .empty-actions{display:none}：小于 340px 的机型上
|
||||
「调整条件 / 公益红娘」两个入口会整块消失，属于功能级缺陷，已删除。
|
||||
收紧的是尺寸，不是功能。 */
|
||||
|
||||
@media (max-width: 340px) {
|
||||
.entry-label {
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
.entry-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.banner-title {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
.status-checks {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.empty-btn {
|
||||
min-width: 108rpx;
|
||||
padding: 0 var(--spacing-1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,200 +1,200 @@
|
||||
/* U63 本地资格补充核验页 */
|
||||
.page {
|
||||
padding: 24rpx;
|
||||
background: #FAFAF8;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
padding:24rpx;
|
||||
background:var(--color-bg-page);
|
||||
min-height:100vh;
|
||||
padding-bottom:120rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:16rpx;
|
||||
padding:32rpx 24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12rpx;
|
||||
display:block;
|
||||
font-size:32rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
background: #E8F5E9;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-success-light);
|
||||
border-radius:8rpx;
|
||||
padding:16rpx 20rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.type-tag text {
|
||||
font-size: 24rpx;
|
||||
color: #2E7D32;
|
||||
font-size:24rpx;
|
||||
color:var(--color-success-strong);
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:16rpx;
|
||||
padding:24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-size:28rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:20rpx;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.evidence-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:12rpx;
|
||||
}
|
||||
|
||||
.evidence-card {
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid #eee;
|
||||
padding:24rpx;
|
||||
border-radius:12rpx;
|
||||
border:2rpx solid var(--color-border);
|
||||
}
|
||||
|
||||
.evidence-card.active {
|
||||
border-color: #E96B6B;
|
||||
background: #FFF5F5;
|
||||
border-color:var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
|
||||
.evidence-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
font-weight:500;
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:4rpx;
|
||||
}
|
||||
|
||||
.evidence-desc {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
border:2rpx dashed var(--color-border-strong);
|
||||
border-radius:12rpx;
|
||||
padding:24rpx;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
text-align: center;
|
||||
margin-bottom: 16rpx;
|
||||
text-align:center;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
position:relative;
|
||||
border-radius:8rpx;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
.image-remove {
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
position:absolute;
|
||||
top:4rpx;
|
||||
right:4rpx;
|
||||
width:36rpx;
|
||||
height:36rpx;
|
||||
background:rgba(0,0,0,0.5);
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color:var(--color-text-inverse);
|
||||
font-size:24rpx;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: 2rpx dashed #ccc;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border:2rpx dashed var(--color-border-strong);
|
||||
border-radius:8rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48rpx;
|
||||
color: #ccc;
|
||||
font-size:48rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.privacy-note {
|
||||
background: #F0F7FF;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-info-light);
|
||||
border-radius:8rpx;
|
||||
padding:16rpx 20rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
font-size: 24rpx;
|
||||
color: #1976D2;
|
||||
font-size:24rpx;
|
||||
color:var(--color-info-strong);
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.05);
|
||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:16rpx 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
box-shadow:0 -2rpx 12rpx rgba(0,0,0,0.05);
|
||||
padding-bottom:calc(16rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:12rpx;
|
||||
font-size:30rpx;
|
||||
font-weight:500;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #ccc;
|
||||
background:var(--color-bg-muted);
|
||||
}
|
||||
|
||||
@@ -1,105 +1,105 @@
|
||||
/* U62 本地资格说明页 */
|
||||
.page {
|
||||
padding: 24rpx;
|
||||
background: #FAFAF8;
|
||||
min-height: 100vh;
|
||||
padding:24rpx;
|
||||
background:var(--color-bg-page);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:16rpx;
|
||||
padding:32rpx 24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 16rpx;
|
||||
display:block;
|
||||
font-size:32rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:16rpx;
|
||||
padding:24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-size:28rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:20rpx;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.type-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.type-card {
|
||||
width: calc(50% - 8rpx);
|
||||
background: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
padding: 28rpx 16rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid transparent;
|
||||
width:calc(50% - 8rpx);
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:12rpx;
|
||||
padding:28rpx 16rpx;
|
||||
text-align:center;
|
||||
border:2rpx solid transparent;
|
||||
}
|
||||
|
||||
.type-card:active {
|
||||
border-color: #E96B6B;
|
||||
background: #FFF5F5;
|
||||
border-color:var(--color-primary);
|
||||
background:var(--color-primary-light);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
font-size: 40rpx;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
font-size:40rpx;
|
||||
display:block;
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.type-label {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-primary);
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background: #FFF9E6;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-warning-light);
|
||||
border-radius:12rpx;
|
||||
padding:20rpx 24rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 24rpx;
|
||||
color: #8B6914;
|
||||
line-height: 1.5;
|
||||
font-size:24rpx;
|
||||
color:var(--color-warning-strong);
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 48rpx;
|
||||
margin-top:32rpx;
|
||||
padding-bottom:48rpx;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #fff;
|
||||
color: #E96B6B;
|
||||
border: 2rpx solid #E96B6B;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-primary-strong);
|
||||
border:2rpx solid var(--color-primary);
|
||||
border-radius:12rpx;
|
||||
font-size:28rpx;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
@@ -1,75 +1,75 @@
|
||||
/* 登录页样式 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 60%);
|
||||
padding: 0 48rpx;
|
||||
min-height:100vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
background:linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg-card) 60%);
|
||||
padding:0 48rpx;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 160rpx;
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding-top:160rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:120rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #2D2D2D;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:44rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding-bottom: 80rpx;
|
||||
padding-bottom:80rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 48rpx;
|
||||
border: none;
|
||||
width:100%;
|
||||
height:96rpx;
|
||||
line-height:96rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
font-weight:600;
|
||||
border-radius:48rpx;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.login-btn.loading {
|
||||
opacity: 0.7;
|
||||
opacity:0.7;
|
||||
}
|
||||
|
||||
.login-hint {
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
margin-top:24rpx;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 26rpx;
|
||||
color: #e74c3c;
|
||||
font-size:26rpx;
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
|
||||
.login-agreement {
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
margin-top:48rpx;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.login-agreement .link {
|
||||
color: #E96B6B;
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
@@ -1,82 +1,82 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
font-size:30rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:24rpx;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16rpx;
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.type-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 28rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F8F8F8;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:28rpx 16rpx;
|
||||
border-radius:16rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border:2rpx solid transparent;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.type-item.selected {
|
||||
background: #FFF3F2;
|
||||
border-color: #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
border-color:var(--color-primary);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:48rpx;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-primary);
|
||||
text-align:center;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
height:200rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:16rpx;
|
||||
padding:20rpx;
|
||||
font-size:28rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
display:block;
|
||||
text-align:right;
|
||||
font-size:22rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
margin-top: 40rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
font-size:32rpx;
|
||||
margin-top:40rpx;
|
||||
}
|
||||
|
||||
@@ -1,115 +1,115 @@
|
||||
/* 红娘工作台登录页样式 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 48rpx;
|
||||
min-height:100vh;
|
||||
background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
padding:0 48rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:120rpx 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:120rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:40rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-inverse);
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size:28rpx;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
background:rgba(255, 255, 255, 0.2);
|
||||
padding:8rpx 32rpx;
|
||||
border-radius:20rpx;
|
||||
}
|
||||
|
||||
.form {
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 64rpx 48rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:32rpx 32rpx 0 0;
|
||||
padding:64rpx 48rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom:40rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:16rpx;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
border:2rpx solid var(--color-border-strong);
|
||||
border-radius:16rpx;
|
||||
padding:0 24rpx;
|
||||
font-size:32rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #E96B6B;
|
||||
border-color:var(--color-primary);
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
background: #fff2f0;
|
||||
border: 1rpx solid #ffccc7;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
background:var(--color-primary-light);
|
||||
border:1rpx solid var(--color-primary-light);
|
||||
border-radius:8rpx;
|
||||
padding:16rpx 24rpx;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.error-tip text {
|
||||
color: #ff4d4f;
|
||||
font-size: 26rpx;
|
||||
color:var(--color-danger-strong);
|
||||
font-size:26rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 48rpx;
|
||||
border: none;
|
||||
width:100%;
|
||||
height:96rpx;
|
||||
line-height:96rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
font-weight:600;
|
||||
border-radius:48rpx;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.login-btn[disabled] {
|
||||
opacity: 0.6;
|
||||
opacity:0.6;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
text-align: center;
|
||||
margin-top: 32rpx;
|
||||
text-align:center;
|
||||
margin-top:32rpx;
|
||||
}
|
||||
|
||||
.footer-link text {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:26rpx;
|
||||
}
|
||||
|
||||
.hint {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 24rpx;
|
||||
text-align:center;
|
||||
padding:40rpx;
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
@@ -1,142 +1,142 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:16rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
width:20rpx;
|
||||
height:20rpx;
|
||||
border-radius:50%;
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:32rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:16rpx 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
max-width: 55%;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-primary);
|
||||
text-align:right;
|
||||
max-width:55%;
|
||||
}
|
||||
|
||||
.info-value.desc {
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
text-align:right;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:24rpx;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
gap:8rpx;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: #EEE;
|
||||
color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
width:48rpx;
|
||||
height:48rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-bg-subtle);
|
||||
color:var(--color-text-tertiary);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.step.active .step-num, .step.done .step-num {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.step.active .step-text, .step.done .step-text {
|
||||
color: #333;
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align:center;
|
||||
padding:120rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 16rpx 0 40rpx;
|
||||
display:block;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin:16rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.btn-apply {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
font-size:30rpx;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 120rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:120rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1,266 +1,266 @@
|
||||
/* 页面容器 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
/* 欢迎区 */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #E96B6B 0%, #ff9a9a 100%);
|
||||
padding: 48rpx 32rpx 60rpx;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
padding:48rpx 32rpx 60rpx;
|
||||
color:var(--color-text-inverse);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:24rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: rgba(255,255,255,0.25);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
width:88rpx;
|
||||
height:88rpx;
|
||||
background:rgba(255,255,255,0.25);
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:44rpx;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6rpx;
|
||||
font-size:38rpx;
|
||||
font-weight:700;
|
||||
margin-bottom:6rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.85;
|
||||
font-size:24rpx;
|
||||
opacity:0.85;
|
||||
}
|
||||
|
||||
.header-badge {
|
||||
margin: 12rpx 0 0 112rpx;
|
||||
background: rgba(255,255,255,0.25);
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 22rpx;
|
||||
margin:12rpx 0 0 112rpx;
|
||||
background:rgba(255,255,255,0.25);
|
||||
padding:6rpx 20rpx;
|
||||
border-radius:20rpx;
|
||||
font-size:22rpx;
|
||||
color:var(--color-text-inverse);
|
||||
display:inline-block;
|
||||
background:rgba(255,255,255,0.2);
|
||||
padding:8rpx 24rpx;
|
||||
border-radius:24rpx;
|
||||
font-size:22rpx;
|
||||
}
|
||||
|
||||
/* 数据概览 - 2x2 网格 */
|
||||
.stats-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
padding:0 24rpx;
|
||||
margin-top:24rpx;
|
||||
position:relative;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
width: calc(50% - 16rpx);
|
||||
margin: 0 8rpx 24rpx 8rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
|
||||
box-sizing: border-box;
|
||||
width:calc(50% - 16rpx);
|
||||
margin:0 8rpx 24rpx 8rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:40rpx 20rpx;
|
||||
text-align:center;
|
||||
box-shadow:0 8rpx 32rpx rgba(0,0,0,0.1);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:48rpx;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 8rpx;
|
||||
font-size:56rpx;
|
||||
font-weight:700;
|
||||
color:var(--color-text-strong);
|
||||
line-height:1.2;
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* 列表区块 */
|
||||
.section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
margin:0 24rpx 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12rpx;
|
||||
}
|
||||
|
||||
.section-dot {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(180deg, #E96B6B 0%, #ff9a9a 100%);
|
||||
border-radius: 3rpx;
|
||||
width:6rpx;
|
||||
height:28rpx;
|
||||
background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
border-radius:3rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
font-size:30rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.section-count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size:22rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
background:var(--color-bg-subtle);
|
||||
padding:4rpx 14rpx;
|
||||
border-radius:12rpx;
|
||||
}
|
||||
|
||||
/* 服务列表 */
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
background: #fafafa;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:24rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border-radius:16rpx;
|
||||
border:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.service-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 20rpx;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
margin-right:20rpx;
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #E96B6B;
|
||||
background: rgba(233, 107, 107, 0.08);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size:24rpx;
|
||||
font-weight:600;
|
||||
color:var(--color-primary-strong);
|
||||
background:rgba(233, 107, 107, 0.08);
|
||||
padding:4rpx 12rpx;
|
||||
border-radius:6rpx;
|
||||
}
|
||||
|
||||
.service-time {
|
||||
font-size: 20rpx;
|
||||
color: #bbb;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-primary);
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.btn-claim {
|
||||
background: linear-gradient(135deg, #E96B6B 0%, #ff8a80 100%);
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 24rpx;
|
||||
border: none;
|
||||
box-shadow: 0 4rpx 12rpx rgba(233, 107, 107, 0.25);
|
||||
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:24rpx;
|
||||
font-weight:600;
|
||||
padding:12rpx 32rpx;
|
||||
border-radius:24rpx;
|
||||
border:none;
|
||||
box-shadow:0 4rpx 12rpx rgba(233, 107, 107, 0.25);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80rpx 40rpx;
|
||||
text-align:center;
|
||||
padding:80rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
font-size: 88rpx;
|
||||
margin-bottom: 16rpx;
|
||||
opacity: 0.5;
|
||||
font-size:88rpx;
|
||||
margin-bottom:16rpx;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 6rpx;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:6rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
}
|
||||
|
||||
/* 加载中 */
|
||||
.loading-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
gap: 20rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:120rpx 0;
|
||||
gap:20rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 4rpx solid #f0f0f0;
|
||||
border-top-color: #E96B6B;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
width:44rpx;
|
||||
height:44rpx;
|
||||
border:4rpx solid var(--color-divider);
|
||||
border-top-color:var(--color-primary);
|
||||
border-radius:50%;
|
||||
animation:spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* 底部退出 */
|
||||
.footer {
|
||||
padding: 40rpx 32rpx 20rpx;
|
||||
padding:40rpx 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background: #fff;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
border-radius: 42rpx;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
}
|
||||
width:100%;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:28rpx;
|
||||
border-radius:42rpx;
|
||||
border:2rpx solid var(--color-border);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.mm-page{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:#F4F5FA}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-22rpx 24rpx 0;padding:22rpx 8rpx;border-radius:28rpx;background:#fff;box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 8rpx;text-align:center;color:#8A8FA4;font-size:17rpx;line-height:1.35}.mm-promise image{width:46rpx;height:46rpx;margin-bottom:8rpx}.mm-promise__title{margin-bottom:4rpx;color:#303654;font-size:21rpx;font-weight:650}.mm-loading{padding:30rpx 24rpx}.mm-body{padding-top:8rpx}.mm-section{padding:8rpx 24rpx}.mm-no-service{display:flex;align-items:center;gap:18rpx;margin-top:10rpx;padding:24rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.mm-no-service image{width:68rpx;height:68rpx}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:#283056;font-size:25rpx;font-weight:650}.mm-no-service__desc{margin-top:7rpx;color:#858A9E;font-size:20rpx;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:10rpx}.mm-capability{display:flex;align-items:center;gap:12rpx;min-height:88rpx;padding:16rpx;border-radius:22rpx;background:#fff;color:#555D79;font-size:20rpx;line-height:1.4;box-shadow:0 8rpx 24rpx rgba(35,35,95,.05)}.mm-capability image{width:36rpx;height:36rpx;flex:none}.mm-history{overflow:hidden;margin-top:10rpx;border-radius:24rpx;background:#fff}.mm-history__item{display:flex;align-items:center;min-height:92rpx;padding:0 20rpx;border-bottom:1rpx solid #EFF0F5}.mm-history__item:last-child{border-bottom:0}.mm-history__item>view{display:flex;flex:1;flex-direction:column}.mm-history__title{color:#303654;font-size:23rpx;font-weight:600}.mm-history__meta{margin-top:5rpx;color:#8A8FA4;font-size:18rpx}.mm-history__status{margin-right:8rpx;color:#8A6F91;font-size:19rpx}.mm-history__item>image{width:24rpx;height:24rpx}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));border-top:1rpx solid #EFF0F5;background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:88rpx;border-radius:44rpx;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:28rpx;font-weight:650;box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}
|
||||
.mm-page{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:var(--color-bg-page)}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-22rpx 24rpx 0;padding:22rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 8rpx;text-align:center;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.35}.mm-promise image{width:46rpx;height:46rpx;margin-bottom:8rpx}.mm-promise__title{margin-bottom:4rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600}.mm-loading{padding:30rpx 24rpx}.mm-body{padding-top:8rpx}.mm-section{padding:8rpx 24rpx}.mm-no-service{display:flex;align-items:center;gap:18rpx;margin-top:10rpx;padding:24rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.mm-no-service image{width:68rpx;height:68rpx}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:var(--color-text-strong);font-size:25rpx;font-weight:600}.mm-no-service__desc{margin-top:7rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:10rpx}.mm-capability{display:flex;align-items:center;gap:12rpx;min-height:88rpx;padding:16rpx;border-radius:22rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;line-height:1.4;box-shadow:0 8rpx 24rpx rgba(35,35,95,.05)}.mm-capability image{width:36rpx;height:36rpx;flex:none}.mm-history{overflow:hidden;margin-top:10rpx;border-radius:24rpx;background:var(--color-bg-card)}.mm-history__item{display:flex;align-items:center;min-height:92rpx;padding:0 20rpx;border-bottom:1rpx solid var(--color-divider)}.mm-history__item:last-child{border-bottom:0}.mm-history__item>view{display:flex;flex:1;flex-direction:column}.mm-history__title{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.mm-history__meta{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.mm-history__status{margin-right:8rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.mm-history__item>image{width:24rpx;height:24rpx}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));border-top:1rpx solid var(--color-divider);background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:88rpx;border-radius:44rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:28rpx;font-weight:600;box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f4f5fa;
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
}
|
||||
|
||||
.messages-hero {
|
||||
padding: env(safe-area-inset-top) 24rpx 34rpx;
|
||||
border-radius: 0 0 36rpx 36rpx;
|
||||
background: linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
|
||||
box-shadow: var(--mini-shadow);
|
||||
padding:env(safe-area-inset-top) 24rpx 34rpx;
|
||||
border-radius:0 0 36rpx 36rpx;
|
||||
background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
|
||||
box-shadow:var(--mini-shadow);
|
||||
}
|
||||
|
||||
.messages-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 88rpx;
|
||||
position:relative;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
height:88rpx;
|
||||
}
|
||||
|
||||
.messages-title {
|
||||
color: #fff;
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
color:var(--color-text-inverse);
|
||||
font-size:31rpx;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.messages-search {
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
position:absolute;
|
||||
right:14rpx;
|
||||
width:34rpx;
|
||||
height:34rpx;
|
||||
}
|
||||
|
||||
.message-shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 22rpx 8rpx 4rpx;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4, 1fr);
|
||||
padding:22rpx 8rpx 4rpx;
|
||||
}
|
||||
|
||||
.message-shortcut {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, .88);
|
||||
font-size: 20rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
color:rgba(255, 255, 255, .88);
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.shortcut-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin-bottom: 12rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, .2);
|
||||
border-radius: 26rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width:72rpx;
|
||||
height:72rpx;
|
||||
margin-bottom:12rpx;
|
||||
border:1rpx solid rgba(255, 255, 255, .2);
|
||||
border-radius:26rpx;
|
||||
}
|
||||
|
||||
.shortcut-icon image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
width:45rpx;
|
||||
height:45rpx;
|
||||
}
|
||||
|
||||
.shortcut-icon--blue { background: rgba(79, 139, 255, .28); }
|
||||
.shortcut-icon--pink { background: rgba(255, 92, 130, .28); }
|
||||
.shortcut-icon--purple { background: rgba(154, 107, 255, .28); }
|
||||
.shortcut-icon--coral { background: rgba(240, 106, 100, .28); }
|
||||
.shortcut-icon--blue { background:rgba(79, 139, 255, .28); }
|
||||
.shortcut-icon--pink { background:rgba(255, 92, 130, .28); }
|
||||
.shortcut-icon--purple { background:rgba(154, 107, 255, .28); }
|
||||
.shortcut-icon--coral { background:rgba(240, 106, 100, .28); }
|
||||
|
||||
.messages-content {
|
||||
padding: 16rpx 24rpx 40rpx;
|
||||
padding:16rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
overflow: hidden;
|
||||
margin-top: 8rpx;
|
||||
border-radius: 28rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 10rpx 32rpx rgba(34, 35, 91, .08);
|
||||
overflow:hidden;
|
||||
margin-top:8rpx;
|
||||
border-radius:28rpx;
|
||||
background:var(--color-bg-card);
|
||||
box-shadow:0 10rpx 32rpx rgba(34, 35, 91, .08);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.page{min-height:100vh;padding-bottom:48rpx;background:#F4F5FA}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,#F4F5FA 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 70rpx) 0 80rpx;color:#fff}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:20rpx;font-weight:400;letter-spacing:4rpx}.profile-hero{padding:env(safe-area-inset-top) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx;color:#fff;font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:12rpx;width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:#fff}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:17rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:20rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,#FF8C9C,#FF5C82)}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:19rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:#fff;box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid #EFF0F5}.profile-stat:last-child{border-right:0}.stat-value{color:#283056;font-size:29rpx;font-weight:700}.stat-value--text{font-size:22rpx}.stat-label{margin-top:5rpx;color:#8A8FA4;font-size:18rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,#FFF0F5,#F7EEFF);box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:#F14D79;font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:#8A6F91;font-size:19rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:#343957;font-size:20rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:#FFF0F5}.service-icon.blue{background:#EAF3FF}.service-icon.amber{background:#FFF3E5}.service-icon.green{background:#EAF8F2}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid #EFF0F5}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:#2B304E;font-size:23rpx}.list-value{margin-right:12rpx;color:#8A8FA4;font-size:19rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:#D95561;font-size:23rpx;background:#fff;border-radius:26rpx}
|
||||
.page{min-height:100vh;padding-bottom:48rpx;background:var(--color-bg-page)}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,var(--color-bg-page) 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 70rpx) 0 80rpx;color:var(--color-text-inverse)}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:24rpx;font-weight:400;letter-spacing:4rpx}.profile-hero{padding:env(safe-area-inset-top) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx;color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:12rpx;width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:var(--color-text-inverse)}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:24rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:24rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,var(--color-primary-light),var(--color-primary-light))}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:24rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid var(--color-divider)}.profile-stat:last-child{border-right:0}.stat-value{color:var(--color-text-strong);font-size:29rpx;font-weight:700}.stat-value--text{font-size:24rpx}.stat-label{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-purple-light));box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:var(--color-primary-strong);font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:var(--color-text-strong);font-size:24rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:var(--color-primary-light)}.service-icon.blue{background:var(--color-info-light)}.service-icon.amber{background:var(--color-warning-light)}.service-icon.green{background:var(--color-success-light)}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid var(--color-divider)}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:var(--color-text-strong);font-size:24rpx}.list-value{margin-right:12rpx;color:var(--color-text-tertiary);font-size:24rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:var(--color-danger-strong);font-size:24rpx;background:var(--color-bg-card);border-radius:26rpx}
|
||||
|
||||
@@ -1 +1 @@
|
||||
.page{padding:32rpx;background:#FFF8F7;min-height:100vh;text-align:center;color:#999;padding-top:200rpx;}
|
||||
.page{padding:32rpx;background:var(--color-primary-lighter);min-height:100vh;text-align:center;color:var(--color-text-tertiary);padding-top:200rpx;}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
.container { padding: 24rpx; }
|
||||
.empty { text-align: center; padding: 80rpx 0; color: #999; }
|
||||
.go-btn { margin-top: 24rpx; background: #FF6B6B; color: #fff; border-radius: 44rpx; font-size: 28rpx; }
|
||||
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
|
||||
.card-title { font-size: 32rpx; font-weight: bold; color: #333; }
|
||||
.card-status { font-size: 24rpx; padding: 4rpx 16rpx; border-radius: 20rpx; }
|
||||
.status-pending { background: #fff3e0; color: #e65100; }
|
||||
.status-assigned { background: #e3f2fd; color: #1565c0; }
|
||||
.status-scheduled { background: #e8f5e9; color: #2e7d32; }
|
||||
.status-in_progress { background: #fce4ec; color: #c62828; }
|
||||
.status-completed { background: #f3e5f5; color: #6a1b9a; }
|
||||
.status-cancelled { background: #f5f5f5; color: #999; }
|
||||
.card-body { margin-bottom: 12rpx; }
|
||||
.card-summary { font-size: 26rpx; color: #666; display: block; }
|
||||
.card-time { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; }
|
||||
.card-footer { display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-date { font-size: 24rpx; color: #bbb; }
|
||||
.arrow { font-size: 28rpx; color: #ccc; }
|
||||
.container { padding:24rpx; }
|
||||
.empty { text-align:center; padding:80rpx 0; color:var(--color-text-tertiary); }
|
||||
.go-btn { margin-top:24rpx; background:var(--color-primary-solid); color:var(--color-text-inverse); border-radius:44rpx; font-size:28rpx; }
|
||||
.card { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; margin-bottom:20rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,0.05); }
|
||||
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12rpx; }
|
||||
.card-title { font-size:32rpx; font-weight:bold; color:var(--color-text-primary); }
|
||||
.card-status { font-size:24rpx; padding:4rpx 16rpx; border-radius:20rpx; }
|
||||
.status-pending { background:var(--color-warning-light); color:var(--color-warning-strong); }
|
||||
.status-assigned { background:var(--color-info-light); color:var(--color-info-strong); }
|
||||
.status-scheduled { background:var(--color-success-light); color:var(--color-success-strong); }
|
||||
.status-in_progress { background:var(--color-primary-light); color:var(--color-danger-strong); }
|
||||
.status-completed { background:var(--color-accent-purple-light); color:var(--color-accent-purple-strong); }
|
||||
.status-cancelled { background:var(--color-bg-subtle); color:var(--color-text-tertiary); }
|
||||
.card-body { margin-bottom:12rpx; }
|
||||
.card-summary { font-size:26rpx; color:var(--color-text-secondary); display:block; }
|
||||
.card-time { font-size:24rpx; color:var(--color-text-tertiary); margin-top:8rpx; display:block; }
|
||||
.card-footer { display:flex; justify-content:space-between; align-items:center; }
|
||||
.card-date { font-size:24rpx; color:var(--color-text-disabled); }
|
||||
.arrow { font-size:28rpx; color:var(--color-text-disabled); }
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 100rpx 32rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:100rpx 32rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-size:80rpx;
|
||||
display:block;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.report-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:20rpx;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.reason {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
font-size:24rpx;
|
||||
padding:4rpx 16rpx;
|
||||
border-radius:12rpx;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.5;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
display:block;
|
||||
margin-bottom:12rpx;
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
color: #BBB;
|
||||
display: block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.result {
|
||||
font-size: 24rpx;
|
||||
color: #E59A32;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-warning-strong);
|
||||
display:block;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.btn-refresh {
|
||||
margin-top: 32rpx;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border: 1rpx solid #DDD;
|
||||
border-radius: 44rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
margin-top:32rpx;
|
||||
background:transparent;
|
||||
color:var(--color-text-tertiary);
|
||||
border:1rpx solid var(--color-border-strong);
|
||||
border-radius:44rpx;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
font-size:26rpx;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
@@ -1,127 +1,127 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
font-size: 24rpx;
|
||||
color: #E96B6B;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFF3F2;
|
||||
border-radius: 20rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-primary-strong);
|
||||
padding:8rpx 16rpx;
|
||||
background:var(--color-primary-light);
|
||||
border-radius:20rpx;
|
||||
}
|
||||
|
||||
.unread-badge.empty {
|
||||
color: #999;
|
||||
background: #f5f5f5;
|
||||
color:var(--color-text-tertiary);
|
||||
background:var(--color-bg-subtle);
|
||||
}
|
||||
|
||||
.list {
|
||||
height: calc(100vh - 120rpx);
|
||||
height:calc(100vh - 120rpx);
|
||||
}
|
||||
|
||||
.notif-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
padding:28rpx 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.notif-item.unread {
|
||||
background: #FFFAF9;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.notif-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #E96B6B;
|
||||
flex-shrink: 0;
|
||||
margin-top: 12rpx;
|
||||
width:12rpx;
|
||||
height:12rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-primary);
|
||||
flex-shrink:0;
|
||||
margin-top:12rpx;
|
||||
}
|
||||
|
||||
.notif-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.notif-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:8rpx;
|
||||
}
|
||||
|
||||
.notif-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.notif-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.notif-body {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.6;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
|
||||
.notif-type-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F5F5F5;
|
||||
color: #999;
|
||||
display:inline-block;
|
||||
font-size:24rpx;
|
||||
padding:4rpx 12rpx;
|
||||
border-radius:12rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.notif-type-tag.match { background: #E8F5E9; color: #2E7D32; }
|
||||
.notif-type-tag.review { background: #E3F2FD; color: #1565C0; }
|
||||
.notif-type-tag.activity { background: #FFF3E0; color: #E65100; }
|
||||
.notif-type-tag.risk { background: #FFEBEE; color: #C62828; }
|
||||
.notif-type-tag.account { background: #F3E5F5; color: #6A1B9A; }
|
||||
.notif-type-tag.match { background:var(--color-success-light); color:var(--color-success-strong); }
|
||||
.notif-type-tag.review { background:var(--color-info-light); color:var(--color-info-strong); }
|
||||
.notif-type-tag.activity { background:var(--color-warning-light); color:var(--color-warning-strong); }
|
||||
.notif-type-tag.risk { background:var(--color-primary-light); color:var(--color-danger-strong); }
|
||||
.notif-type-tag.account { background:var(--color-accent-purple-light); color:var(--color-accent-purple-strong); }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
text-align:center;
|
||||
padding:120rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 24rpx;
|
||||
opacity: 0.5;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
margin-bottom:24rpx;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
text-align:center;
|
||||
padding:40rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.container { padding: 24rpx; }
|
||||
.form-section { background: #fff; border-radius: 16rpx; padding: 24rpx; }
|
||||
.form-group { padding: 20rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
||||
.form-group:last-child { border-bottom: none; }
|
||||
.label { font-size: 28rpx; color: #666; display: block; margin-bottom: 12rpx; }
|
||||
.input { font-size: 30rpx; color: #333; }
|
||||
.textarea { font-size: 30rpx; color: #333; width: 100%; height: 120rpx; }
|
||||
.switch-hint { font-size: 24rpx; color: #FF6B6B; margin-left: 12rpx; }
|
||||
.submit-btn { margin-top: 40rpx; background: linear-gradient(135deg, #FF6B6B, #EE5A24); color: #fff; border: none; border-radius: 44rpx; font-size: 32rpx; }
|
||||
.tip { display: block; text-align: center; font-size: 24rpx; color: #999; margin-top: 20rpx; }
|
||||
.container { padding:24rpx; }
|
||||
.form-section { background:var(--color-bg-card); border-radius:16rpx; padding:24rpx; }
|
||||
.form-group { padding:20rpx 0; border-bottom:1rpx solid var(--color-divider); }
|
||||
.form-group:last-child { border-bottom:none; }
|
||||
.label { font-size:28rpx; color:var(--color-text-secondary); display:block; margin-bottom:12rpx; }
|
||||
.input { font-size:30rpx; color:var(--color-text-primary); }
|
||||
.textarea { font-size:30rpx; color:var(--color-text-primary); width:100%; height:120rpx; }
|
||||
.switch-hint { font-size:24rpx; color:var(--color-primary-strong); margin-left:12rpx; }
|
||||
.submit-btn { margin-top:40rpx; background:var(--gradient-brand-solid); color:var(--color-text-inverse); border:none; border-radius:44rpx; font-size:32rpx; }
|
||||
.tip { display:block; text-align:center; font-size:24rpx; color:var(--color-text-tertiary); margin-top:20rpx; }
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
background: #FFF8F7;
|
||||
min-height: 100vh;
|
||||
padding:32rpx;
|
||||
background:var(--color-primary-lighter);
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
text-align:center;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
overflow:hidden;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:32rpx 28rpx;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.setting-item:last-child { border-bottom: none; }
|
||||
.setting-item:last-child { border-bottom:none; }
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
flex:1;
|
||||
margin-right:20rpx;
|
||||
}
|
||||
|
||||
.setting-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
display:block;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
display:block;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
}
|
||||
|
||||
@@ -3,99 +3,99 @@
|
||||
*/
|
||||
|
||||
.pb-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pb-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pb-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ============ 只读区 ============ */
|
||||
.pb-readonly {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pb-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
|
||||
.pb-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.pb-row__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.pb-row__value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* ============ 表单 ============ */
|
||||
.pb-form {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pb-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
min-height: 88rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
min-height:88rpx;
|
||||
}
|
||||
|
||||
.pb-field:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.pb-field__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex-shrink: 0;
|
||||
width: 180rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
flex-shrink:0;
|
||||
width:180rpx;
|
||||
}
|
||||
|
||||
.pb-field__value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex:1;
|
||||
text-align:right;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pb-field__value--placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.pb-field__input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex:1;
|
||||
text-align:right;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ============ 底部 ============ */
|
||||
.pb-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,170 +3,170 @@
|
||||
*/
|
||||
|
||||
.pcfm-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pcfm-loading,
|
||||
.pcfm-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-height:60vh;
|
||||
}
|
||||
|
||||
.pcfm-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
/* 卡片基类继承全局 .card-base（仅补充外边距） */
|
||||
.pcfm-section,
|
||||
.pcfm-status {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ============ 审核状态条 ============ */
|
||||
.pcfm-status__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-2);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pcfm-status__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.pcfm-status__comment {
|
||||
margin-top: var(--spacing-2);
|
||||
padding-top: var(--spacing-2);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
margin-top:var(--spacing-2);
|
||||
padding-top:var(--spacing-2);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
|
||||
.pcfm-status__comment-title {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-secondary);
|
||||
display:block;
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
|
||||
.pcfm-status__comment-text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-primary);
|
||||
line-height:1.6;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* ============ 资料完整度 ============ */
|
||||
.pcfm-progress {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pcfm-progress__track {
|
||||
height: 12rpx;
|
||||
background: var(--color-bg-disabled);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
height:12rpx;
|
||||
background:var(--color-bg-disabled);
|
||||
border-radius:var(--radius-full);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pcfm-progress__fill {
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
transition: width 0.3s ease;
|
||||
height:100%;
|
||||
background:var(--color-primary);
|
||||
border-radius:var(--radius-full);
|
||||
transition:width 0.3s ease;
|
||||
}
|
||||
|
||||
.pcfm-progress__hint {
|
||||
display: block;
|
||||
margin-top: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: right;
|
||||
display:block;
|
||||
margin-top:var(--spacing-2);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
/* ============ 资料概览 ============ */
|
||||
.pcfm-summary {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pcfm-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
min-height: 88rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--spacing-3);
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
min-height:88rpx;
|
||||
}
|
||||
|
||||
.pcfm-info:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.pcfm-info__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.pcfm-info__value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
text-align:right;
|
||||
word-break:break-all;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
/* ============ 自我介绍 ============ */
|
||||
.pcfm-intro {
|
||||
margin-top: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-bg-page);
|
||||
border-radius: var(--radius-md);
|
||||
margin-top:var(--spacing-2);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-bg-page);
|
||||
border-radius:var(--radius-md);
|
||||
}
|
||||
|
||||
.pcfm-intro__text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.7;
|
||||
display: block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-primary);
|
||||
line-height:1.7;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* ============ 择偶条件摘要 ============ */
|
||||
.pcfm-pref {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ============ 提交须知 ============ */
|
||||
.pcfm-notice {
|
||||
background: var(--color-primary-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
background:var(--color-primary-light);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
.pcfm-notice__list {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pcfm-notice__item {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 2;
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:2;
|
||||
}
|
||||
|
||||
/* ============ 底部按钮 ============ */
|
||||
.pcfm-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -4,136 +4,136 @@
|
||||
*/
|
||||
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ============ 加载/空状态 ============ */
|
||||
.profile-loading,
|
||||
.profile-empty {
|
||||
padding-top: 200rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top:200rpx;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
/* ============ 顶部信息 ============ */
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-5) var(--spacing-page-x);
|
||||
background: var(--color-bg-card);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:var(--spacing-4);
|
||||
padding:var(--spacing-5) var(--spacing-page-x);
|
||||
background:var(--color-bg-card);
|
||||
}
|
||||
|
||||
.profile-header__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.profile-header__name-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-1);
|
||||
display:flex;
|
||||
align-items:baseline;
|
||||
gap:var(--spacing-2);
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
|
||||
.profile-header__name {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-lg);
|
||||
font-weight:var(--font-weight-bold);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.profile-header__age {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.profile-header__meta {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-normal);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-normal);
|
||||
}
|
||||
|
||||
.profile-header__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-1);
|
||||
margin-top: var(--spacing-2);
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-1);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ============ 内容区块 ============ */
|
||||
.profile-body {
|
||||
padding-top: var(--spacing-2);
|
||||
padding-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
background: var(--color-bg-card);
|
||||
margin: var(--spacing-2) var(--spacing-page-x);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-card-inner);
|
||||
background:var(--color-bg-card);
|
||||
margin:var(--spacing-2) var(--spacing-page-x);
|
||||
border-radius:var(--radius-lg);
|
||||
padding:var(--spacing-card-inner);
|
||||
}
|
||||
|
||||
.profile-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-3);
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:var(--spacing-3);
|
||||
}
|
||||
|
||||
.profile-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
min-width: 0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:var(--spacing-1);
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.profile-info-item--full {
|
||||
grid-column: span 2;
|
||||
grid-column:span 2;
|
||||
}
|
||||
|
||||
.profile-info-item__label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-placeholder);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.profile-info-item__value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
word-break: break-all;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
word-break:break-all;
|
||||
}
|
||||
|
||||
.profile-intro-text {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* ============ 底部操作栏 ============ */
|
||||
.profile-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
align-items: center;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
display:flex;
|
||||
gap:var(--spacing-2);
|
||||
align-items:center;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
.profile-actions__btn {
|
||||
flex: 1;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.profile-actions__btn--block,
|
||||
.profile-actions__btn--report {
|
||||
flex: 0 0 auto;
|
||||
min-width: 140rpx;
|
||||
flex:0 0 auto;
|
||||
min-width:140rpx;
|
||||
}
|
||||
|
||||
.profile-actions__btn--report {
|
||||
color: var(--color-warning);
|
||||
color:var(--color-warning-strong);
|
||||
}
|
||||
|
||||
@@ -3,80 +3,80 @@
|
||||
*/
|
||||
|
||||
.pt-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pt-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pt-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
.pt-form {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pt-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
min-height: 88rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
min-height:88rpx;
|
||||
}
|
||||
|
||||
.pt-field:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.pt-field--column {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-direction:column;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
.pt-field__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex-shrink: 0;
|
||||
width: 280rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
flex-shrink:0;
|
||||
width:280rpx;
|
||||
}
|
||||
|
||||
.pt-field--column .pt-field__label {
|
||||
width: auto;
|
||||
margin-bottom: var(--spacing-2);
|
||||
width:auto;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pt-field__value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex:1;
|
||||
text-align:right;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pt-field__value--placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.pt-field__textarea {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
width:100%;
|
||||
min-height:120rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.pt-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,51 +3,51 @@
|
||||
*/
|
||||
|
||||
.pi-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pi-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pi-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ============ 标签 ============ */
|
||||
.pi-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-2);
|
||||
margin-top: var(--spacing-3);
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-2);
|
||||
margin-top:var(--spacing-3);
|
||||
}
|
||||
|
||||
.pi-tag {
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: all var(--button-press-feedback) ease;
|
||||
padding:var(--spacing-2) var(--spacing-4);
|
||||
border-radius:var(--radius-lg);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-secondary);
|
||||
font-size:var(--font-size-sm);
|
||||
transition:all var(--motion-normal) var(--ease-standard);
|
||||
}
|
||||
|
||||
.pi-tag--selected {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-weight: var(--font-weight-medium);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* ============ 底部 ============ */
|
||||
.pi-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,91 +3,91 @@
|
||||
*/
|
||||
|
||||
.pri-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pri-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pri-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ============ 文本框 ============ */
|
||||
.pri-textarea-wrap {
|
||||
margin-top: var(--spacing-2);
|
||||
position: relative;
|
||||
margin-top:var(--spacing-2);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.pri-textarea {
|
||||
width: 100%;
|
||||
min-height: 320rpx;
|
||||
padding: var(--spacing-3);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
background: var(--color-bg-input);
|
||||
border-radius: var(--radius-md);
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
min-height:320rpx;
|
||||
padding:var(--spacing-3);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
background:var(--color-bg-input);
|
||||
border-radius:var(--radius-md);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.pri-textarea__placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
font-size: var(--font-size-sm);
|
||||
color:var(--color-text-placeholder);
|
||||
font-size:var(--font-size-sm);
|
||||
}
|
||||
|
||||
.pri-counter {
|
||||
position: absolute;
|
||||
right: var(--spacing-2);
|
||||
bottom: var(--spacing-2);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-placeholder);
|
||||
position:absolute;
|
||||
right:var(--spacing-2);
|
||||
bottom:var(--spacing-2);
|
||||
font-size:var(--font-size-xs);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.pri-counter--over {
|
||||
color: var(--color-danger);
|
||||
color:var(--color-danger-strong);
|
||||
}
|
||||
|
||||
/* ============ 须知 ============ */
|
||||
.pri-guidelines {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pri-guideline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-1) 0;
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
gap:var(--spacing-2);
|
||||
padding:var(--spacing-1) 0;
|
||||
}
|
||||
|
||||
.pri-guideline__dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin-top: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-placeholder);
|
||||
flex-shrink: 0;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
margin-top:14rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-placeholder);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.pri-guideline__text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
flex:1;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* ============ 底部 ============ */
|
||||
.pri-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,62 +3,62 @@
|
||||
*/
|
||||
|
||||
.pl-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pl-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pl-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
.pl-form {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pl-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
min-height: 88rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
min-height:88rpx;
|
||||
}
|
||||
|
||||
.pl-field:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.pl-field__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex-shrink: 0;
|
||||
width: 280rpx;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
flex-shrink:0;
|
||||
width:280rpx;
|
||||
}
|
||||
|
||||
.pl-field__value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
flex:1;
|
||||
text-align:right;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pl-field__value--placeholder {
|
||||
color: var(--color-text-placeholder);
|
||||
color:var(--color-text-placeholder);
|
||||
}
|
||||
|
||||
.pl-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,66 +3,66 @@
|
||||
*/
|
||||
|
||||
.pp-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.pp-loading {
|
||||
padding-top: 200rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top:200rpx;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.pp-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.pp-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
.pp-uploader {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ============ 上传须知 ============ */
|
||||
.pp-guidelines {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.pp-guideline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-1) 0;
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
gap:var(--spacing-2);
|
||||
padding:var(--spacing-1) 0;
|
||||
}
|
||||
|
||||
.pp-guideline__dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin-top: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-placeholder);
|
||||
flex-shrink: 0;
|
||||
width:10rpx;
|
||||
height:10rpx;
|
||||
margin-top:14rpx;
|
||||
border-radius:50%;
|
||||
background:var(--color-text-placeholder);
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
.pp-guideline__text {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
flex:1;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* ============ 底部 ============ */
|
||||
.pp-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -3,89 +3,89 @@
|
||||
*/
|
||||
|
||||
.ppref-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.ppref-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
.ppref-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
margin-bottom:var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ============ 标签 ============ */
|
||||
.ppref-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-2);
|
||||
margin-top: var(--spacing-3);
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:var(--spacing-2);
|
||||
margin-top:var(--spacing-3);
|
||||
}
|
||||
|
||||
.ppref-tag {
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
padding:var(--spacing-2) var(--spacing-4);
|
||||
border-radius:var(--radius-lg);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-secondary);
|
||||
font-size:var(--font-size-sm);
|
||||
}
|
||||
|
||||
.ppref-tag--selected {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-weight: var(--font-weight-medium);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* ============ picker ============ */
|
||||
.ppref-picker {
|
||||
padding: var(--spacing-3) 0;
|
||||
margin-top: var(--spacing-2);
|
||||
padding:var(--spacing-3) 0;
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.ppref-picker__value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ============ 表单 ============ */
|
||||
.ppref-form {
|
||||
margin-top: var(--spacing-2);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.ppref-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
min-height: 88rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
min-height:88rpx;
|
||||
}
|
||||
|
||||
.ppref-field:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.ppref-field__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
.ppref-field__value {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============ 底部 ============ */
|
||||
.ppref-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background: var(--color-bg-card);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
z-index: var(--z-sticky);
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
padding-bottom:calc(var(--spacing-2) + env(safe-area-inset-bottom));
|
||||
background:var(--color-bg-card);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
z-index:var(--z-sticky);
|
||||
}
|
||||
|
||||
@@ -1,152 +1,152 @@
|
||||
/* 婚恋状态页 U25 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding:24rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* 状态卡片 */
|
||||
.status-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border-left: 8rpx solid #E96B6B;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:32rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border-left:8rpx solid var(--color-primary);
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.status-card--warning { border-left-color: #F5A623; }
|
||||
.status-card--info { border-left-color: #4A90D9; }
|
||||
.status-card--disabled { border-left-color: #B0B0B0; }
|
||||
.status-card--warning { border-left-color:var(--color-warning-strong); }
|
||||
.status-card--info { border-left-color:var(--color-info-strong); }
|
||||
.status-card--disabled { border-left-color:var(--color-border-strong); }
|
||||
|
||||
.status-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.status-card__label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.status-card__desc {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
/* 正在了解对象卡片 */
|
||||
.partner-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx 32rpx;
|
||||
margin-bottom:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.partner-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
gap: 16rpx;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
margin-top:16rpx;
|
||||
gap:16rpx;
|
||||
}
|
||||
|
||||
.partner-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.partner-name {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 6rpx;
|
||||
display:block;
|
||||
font-size:30rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:6rpx;
|
||||
}
|
||||
|
||||
.partner-hint {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* 操作区 */
|
||||
.actions {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 32rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx 32rpx 32rpx;
|
||||
margin-bottom:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.actions button {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
margin-top:20rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
border-radius:44rpx;
|
||||
font-size:30rpx;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.actions button::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border: 2rpx solid #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border:2rpx solid var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-danger-outline {
|
||||
flex-shrink: 0;
|
||||
height: 64rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #fff;
|
||||
color: #E04C4C;
|
||||
border: 2rpx solid #E04C4C;
|
||||
}
|
||||
flex-shrink:0;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
padding:0 28rpx;
|
||||
border-radius:32rpx;
|
||||
font-size:24rpx;
|
||||
background:var(--color-bg-card);
|
||||
color:var(--color-danger-strong);
|
||||
border:2rpx solid var(--color-danger-strong);
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.btn-danger-outline::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.actions-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #B0B0B0;
|
||||
font-size: 26rpx;
|
||||
text-align:center;
|
||||
padding:40rpx 0;
|
||||
color:var(--color-text-disabled);
|
||||
font-size:26rpx;
|
||||
}
|
||||
|
||||
/* 公益免费标识 */
|
||||
.free-badge {
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
text-align:center;
|
||||
padding:24rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.free-badge text {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
color: #1A6B3E;
|
||||
background: #E8F5E9;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
display:inline-block;
|
||||
font-size:22rpx;
|
||||
color:var(--color-success-strong);
|
||||
background:var(--color-success-light);
|
||||
padding:8rpx 24rpx;
|
||||
border-radius:24rpx;
|
||||
}
|
||||
|
||||
+128
-128
@@ -1,212 +1,212 @@
|
||||
/* 举报页 U26 — Design Tokens */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding:24rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
/* 被举报人提示条 */
|
||||
.target-bar {
|
||||
background: #FFF3F2;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #E96B6B;
|
||||
background:var(--color-primary-light);
|
||||
border-radius:12rpx;
|
||||
padding:20rpx 24rpx;
|
||||
margin-bottom:24rpx;
|
||||
font-size:26rpx;
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background:var(--color-bg-card);
|
||||
border-radius:20rpx;
|
||||
padding:24rpx 32rpx;
|
||||
margin-bottom:24rpx;
|
||||
box-shadow:0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 举报原因网格 */
|
||||
.reason-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
flex: 0 0 calc(33.333% - 12rpx);
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 12rpx;
|
||||
background: #F7F8FA;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
flex:0 0 calc(33.333% - 12rpx);
|
||||
box-sizing:border-box;
|
||||
text-align:center;
|
||||
padding:20rpx 0;
|
||||
border-radius:12rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-secondary);
|
||||
border:2rpx solid transparent;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.reason-item.active {
|
||||
background: #FFF3F2;
|
||||
color: #E96B6B;
|
||||
border-color: #E96B6B;
|
||||
font-weight: bold;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
border-color:var(--color-primary);
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
/* 证据截图 */
|
||||
.evidence-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:16rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.evidence-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:12rpx;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.evidence-item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
position:absolute;
|
||||
top:4rpx;
|
||||
right:4rpx;
|
||||
width:36rpx;
|
||||
min-height:var(--tap-min);
|
||||
line-height:var(--tap-min);
|
||||
text-align:center;
|
||||
background:rgba(0, 0, 0, 0.5);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:50%;
|
||||
font-size:24rpx;
|
||||
min-width:var(--tap-min);}
|
||||
|
||||
.evidence-add {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F7F8FA;
|
||||
border: 2rpx dashed #D0D0D0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
width:160rpx;
|
||||
height:160rpx;
|
||||
border-radius:12rpx;
|
||||
background:var(--color-bg-subtle);
|
||||
border:2rpx dashed var(--color-border-strong);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 48rpx;
|
||||
color: #B0B0B0;
|
||||
line-height: 1;
|
||||
font-size:48rpx;
|
||||
color:var(--color-text-disabled);
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size:24rpx;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
/* 提交按钮 */
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin-top: 8rpx;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
border-radius:44rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
border:none;
|
||||
margin-top:8rpx;
|
||||
}
|
||||
|
||||
.btn-submit::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.btn-submit[disabled] {
|
||||
opacity: 0.5;
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 80%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin-top: 48rpx;
|
||||
width:80%;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
border-radius:44rpx;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
font-size:32rpx;
|
||||
border:none;
|
||||
margin-top:48rpx;
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
border: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #B0B0B0;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-disabled);
|
||||
margin-top:20rpx;
|
||||
padding:0 24rpx;
|
||||
}
|
||||
|
||||
/* 成功态 */
|
||||
.success-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 48rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
padding:120rpx 48rpx;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #E8F5E9;
|
||||
color: #1A6B3E;
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 32rpx;
|
||||
width:120rpx;
|
||||
height:120rpx;
|
||||
line-height:120rpx;
|
||||
text-align:center;
|
||||
border-radius:50%;
|
||||
background:var(--color-success-light);
|
||||
color:var(--color-success-strong);
|
||||
font-size:64rpx;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 16rpx;
|
||||
font-size:36rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.success-hint {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
font-size:26rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
text-align:center;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
/* 公益免费标识 */
|
||||
.free-badge {
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
text-align:center;
|
||||
padding:24rpx;
|
||||
margin-top:16rpx;
|
||||
}
|
||||
|
||||
.free-badge text {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
color: #1A6B3E;
|
||||
background: #E8F5E9;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
display:inline-block;
|
||||
font-size:22rpx;
|
||||
color:var(--color-success-strong);
|
||||
background:var(--color-success-light);
|
||||
padding:8rpx 24rpx;
|
||||
border-radius:24rpx;
|
||||
}
|
||||
|
||||
@@ -3,184 +3,184 @@
|
||||
*/
|
||||
|
||||
.rp-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(var(--spacing-page-x) + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(var(--spacing-page-x) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.rp-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-height:60vh;
|
||||
}
|
||||
|
||||
.rp-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
/* ============ 顶部状态卡 ============ */
|
||||
.rp-hero {
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding: var(--spacing-5) var(--spacing-4);
|
||||
text-align: center;
|
||||
margin-bottom:var(--spacing-3);
|
||||
padding:var(--spacing-5) var(--spacing-4);
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.rp-hero__icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin: 0 auto var(--spacing-3);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
font-size: 56rpx;
|
||||
line-height: 96rpx;
|
||||
font-weight: var(--font-weight-bold);
|
||||
width:96rpx;
|
||||
height:96rpx;
|
||||
margin:0 auto var(--spacing-3);
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-primary-strong);
|
||||
font-size:56rpx;
|
||||
line-height:96rpx;
|
||||
font-weight:var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.rp-hero__title {
|
||||
display: block;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:block;
|
||||
font-size:var(--font-size-xl);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rp-hero__desc {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:block;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.7;
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rp-hero__hint {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
/* ============ 通用 section ============ */
|
||||
.rp-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
margin-bottom:var(--spacing-3);
|
||||
padding:var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
/* ============ 双状态展示 ============ */
|
||||
.rp-status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--spacing-3);
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
|
||||
.rp-status-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.rp-status-row__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.rp-status-meta {
|
||||
padding-top: var(--spacing-2);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
margin-top: var(--spacing-2);
|
||||
padding-top:var(--spacing-2);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
margin-top:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rp-status-meta__text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* ============ 审核步骤 ============ */
|
||||
.rp-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-2) 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.rp-step {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
position: relative;
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
gap:var(--spacing-2);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.rp-step:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 28rpx;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: var(--color-divider);
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:28rpx;
|
||||
right:-50%;
|
||||
width:100%;
|
||||
height:2rpx;
|
||||
background:var(--color-divider);
|
||||
}
|
||||
|
||||
.rp-step--active:not(:last-child)::after {
|
||||
background: var(--color-primary);
|
||||
background:var(--color-primary);
|
||||
}
|
||||
|
||||
.rp-step__icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-bg-disabled);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 32rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
font-weight: var(--font-weight-medium);
|
||||
width:56rpx;
|
||||
height:56rpx;
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-bg-disabled);
|
||||
color:var(--color-text-tertiary);
|
||||
font-size:32rpx;
|
||||
line-height:56rpx;
|
||||
text-align:center;
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.rp-step--active .rp-step__icon {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.rp-step__label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.rp-step--active .rp-step__label {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* ============ 操作按钮 ============ */
|
||||
.rp-actions {
|
||||
margin: var(--spacing-4) 0;
|
||||
margin:var(--spacing-4) 0;
|
||||
}
|
||||
|
||||
.rp-actions__gap {
|
||||
height: var(--spacing-2);
|
||||
height:var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ============ 帮助提示 ============ */
|
||||
.rp-help {
|
||||
text-align: center;
|
||||
padding: var(--spacing-3) 0;
|
||||
text-align:center;
|
||||
padding:var(--spacing-3) 0;
|
||||
}
|
||||
|
||||
.rp-help__text {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
margin-bottom: var(--spacing-1);
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
|
||||
.rp-help__link {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
display:inline-block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-primary-strong);
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
@@ -3,174 +3,174 @@
|
||||
*/
|
||||
|
||||
.rr-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-page);
|
||||
padding-bottom:calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.rr-loading,
|
||||
.rr-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: var(--spacing-4);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
min-height:60vh;
|
||||
gap:var(--spacing-4);
|
||||
}
|
||||
|
||||
.rr-body {
|
||||
padding: var(--spacing-2) var(--spacing-page-x);
|
||||
padding:var(--spacing-2) var(--spacing-page-x);
|
||||
}
|
||||
|
||||
/* ============ 顶部提示卡 ============ */
|
||||
.rr-hero {
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding: var(--spacing-5) var(--spacing-4);
|
||||
text-align: center;
|
||||
margin-bottom:var(--spacing-3);
|
||||
padding:var(--spacing-5) var(--spacing-4);
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.rr-hero__icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin: 0 auto var(--spacing-3);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
font-size: 56rpx;
|
||||
line-height: 96rpx;
|
||||
font-weight: var(--font-weight-bold);
|
||||
width:96rpx;
|
||||
height:96rpx;
|
||||
margin:0 auto var(--spacing-3);
|
||||
border-radius:var(--radius-full);
|
||||
background:var(--color-warning-light);
|
||||
color:var(--color-warning-strong);
|
||||
font-size:56rpx;
|
||||
line-height:96rpx;
|
||||
font-weight:var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.rr-hero__title {
|
||||
display: block;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:block;
|
||||
font-size:var(--font-size-xl);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-semibold);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rr-hero__desc {
|
||||
display: block;
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
display:block;
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
line-height:1.7;
|
||||
}
|
||||
|
||||
/* ============ 通用 section ============ */
|
||||
.rr-section {
|
||||
margin-bottom: var(--spacing-3);
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
margin-bottom:var(--spacing-3);
|
||||
padding:var(--spacing-3) var(--spacing-4);
|
||||
}
|
||||
|
||||
/* ============ 需修改项列表 ============ */
|
||||
.rr-issue {
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: var(--border-width) solid var(--color-divider);
|
||||
padding:var(--spacing-3) 0;
|
||||
border-bottom:var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
|
||||
.rr-issue:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.rr-issue__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
margin-bottom: var(--spacing-2);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--spacing-3);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rr-issue__title {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
font-weight:var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.rr-issue__reason {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
background: var(--color-warning-light);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--spacing-2);
|
||||
padding:var(--spacing-2) var(--spacing-3);
|
||||
background:var(--color-warning-light);
|
||||
border-radius:var(--radius-md);
|
||||
margin-bottom:var(--spacing-2);
|
||||
}
|
||||
|
||||
.rr-issue__reason-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-warning);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--spacing-1);
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-warning-strong);
|
||||
font-weight:var(--font-weight-medium);
|
||||
margin-bottom:var(--spacing-1);
|
||||
}
|
||||
|
||||
.rr-issue__reason-text {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.7;
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-primary);
|
||||
line-height:1.7;
|
||||
}
|
||||
|
||||
.rr-issue__action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.rr-issue__edit-link {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-primary-strong);
|
||||
font-weight:var(--font-weight-medium);
|
||||
padding:var(--spacing-1) var(--spacing-2);
|
||||
}
|
||||
|
||||
/* ============ 其他审核结果 ============ */
|
||||
.rr-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-2) 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.rr-toggle__text {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.rr-toggle__arrow {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.rr-other-list {
|
||||
margin-top: var(--spacing-2);
|
||||
padding-top: var(--spacing-2);
|
||||
border-top: var(--border-width) solid var(--color-divider);
|
||||
margin-top:var(--spacing-2);
|
||||
padding-top:var(--spacing-2);
|
||||
border-top:var(--border-width) solid var(--color-divider);
|
||||
}
|
||||
|
||||
.rr-other-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-2) 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:var(--spacing-3);
|
||||
padding:var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.rr-other-row__label {
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-primary);
|
||||
font-size:var(--font-size-md);
|
||||
color:var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ============ 操作按钮 ============ */
|
||||
.rr-actions {
|
||||
margin: var(--spacing-4) 0;
|
||||
margin:var(--spacing-4) 0;
|
||||
}
|
||||
|
||||
/* ============ 帮助提示 ============ */
|
||||
.rr-help {
|
||||
text-align: center;
|
||||
padding: var(--spacing-3) 0;
|
||||
text-align:center;
|
||||
padding:var(--spacing-3) 0;
|
||||
}
|
||||
|
||||
.rr-help__text {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:var(--font-size-sm);
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import "../../styles/service-page.wxss";
|
||||
.station-name-card{display:flex;align-items:center;gap:18rpx;margin-top:24rpx;padding:24rpx;border-radius:26rpx;background:linear-gradient(135deg,#F1FFFA,#FFF7F9);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-name-card>image{width:66rpx;height:66rpx}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:#283056;font-size:27rpx;font-weight:700}.station-short-name{margin-top:6rpx;color:#7E859B;font-size:19rpx}.station-info-card{overflow:hidden;margin-top:18rpx;border-radius:26rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:14rpx 20rpx;border-bottom:1rpx solid #EFF0F5}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:42rpx;height:42rpx;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:#303654;font-size:22rpx;font-weight:650}.station-info-value{margin-top:5rpx;color:#858A9E;font-size:19rpx;line-height:1.45}.station-info-row .station-arrow{width:24rpx;height:24rpx}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:18rpx}.station-service{display:flex;align-items:center;gap:12rpx;min-height:74rpx;padding:12rpx 16rpx;border-radius:20rpx;background:#fff;color:#505874;font-size:20rpx;box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}.station-service image{width:34rpx;height:34rpx}.map-button{display:flex;align-items:center;justify-content:center;gap:10rpx;height:78rpx;margin-top:20rpx;border:1rpx solid #E5E7F0;border-radius:39rpx;background:#fff;color:#53607F;font-size:22rpx}.map-button image{width:34rpx;height:34rpx}
|
||||
.station-name-card{display:flex;align-items:center;gap:18rpx;margin-top:24rpx;padding:24rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-success-light),var(--color-primary-light));box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-name-card>image{width:66rpx;height:66rpx}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:var(--color-text-strong);font-size:27rpx;font-weight:700}.station-short-name{margin-top:6rpx;color:var(--color-text-tertiary);font-size:24rpx}.station-info-card{overflow:hidden;margin-top:18rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:16rpx;min-height:104rpx;padding:14rpx 20rpx;border-bottom:1rpx solid var(--color-divider)}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:42rpx;height:42rpx;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:var(--color-text-strong);font-size:24rpx;font-weight:600}.station-info-value{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.station-info-row .station-arrow{width:24rpx;height:24rpx}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14rpx;margin-top:18rpx}.station-service{display:flex;align-items:center;gap:12rpx;min-height:74rpx;padding:12rpx 16rpx;border-radius:20rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}.station-service image{width:34rpx;height:34rpx}.map-button{display:flex;align-items:center;justify-content:center;gap:10rpx;min-height:var(--tap-min);margin-top:20rpx;border:1rpx solid var(--color-border);border-radius:39rpx;background:var(--color-bg-card);color:var(--color-text-secondary);font-size:24rpx;min-width:var(--tap-min);}.map-button image{width:34rpx;height:34rpx}
|
||||
/* 临时公告：仅当服务端返回「已发布且未过期」公告时渲染 */
|
||||
.station-announcements{display:flex;flex-direction:column;gap:14rpx;margin-top:18rpx}
|
||||
.station-announcement{padding:18rpx 20rpx;border-radius:20rpx;background:linear-gradient(135deg,#FFF7EC,#FFF7F9);box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}
|
||||
.station-announcement{padding:18rpx 20rpx;border-radius:20rpx;background:linear-gradient(135deg,var(--color-warning-light),var(--color-primary-light));box-shadow:0 6rpx 20rpx rgba(35,35,95,.05)}
|
||||
.station-announcement-head{display:flex;align-items:center;gap:10rpx}
|
||||
.station-announcement-dot{width:12rpx;height:12rpx;flex:none;border-radius:50%;background:#E8A33D}
|
||||
.station-announcement-title{color:#5A4520;font-size:22rpx;font-weight:700}
|
||||
.station-announcement-body{display:block;margin-top:8rpx;color:#8A7C63;font-size:19rpx;line-height:1.5}
|
||||
.station-announcement-dot{width:12rpx;height:12rpx;flex:none;border-radius:50%;background:var(--color-warning)}
|
||||
.station-announcement-title{color:var(--color-warning-strong);font-size:24rpx;font-weight:700}
|
||||
.station-announcement-body{display:block;margin-top:8rpx;color:var(--color-warning-strong);font-size:24rpx;line-height:1.5}
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
/* 设置页样式 */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 48rpx;
|
||||
min-height:100vh;
|
||||
background:var(--color-bg-subtle);
|
||||
padding-bottom:48rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
margin-top:24rpx;
|
||||
background:var(--color-bg-card);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding:24rpx 32rpx 16rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding: 0 32rpx;
|
||||
padding:0 32rpx;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
padding:28rpx 0;
|
||||
border-bottom:1rpx solid var(--color-divider);
|
||||
}
|
||||
|
||||
.list-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
width: 48rpx;
|
||||
text-align: center;
|
||||
font-size:40rpx;
|
||||
margin-right:24rpx;
|
||||
width:48rpx;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.list-label {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #2d2d2d;
|
||||
line-height: 1.4;
|
||||
display:block;
|
||||
font-size:32rpx;
|
||||
color:var(--color-text-strong);
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
.list-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
margin-top: 4rpx;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.4;
|
||||
margin-top:4rpx;
|
||||
}
|
||||
|
||||
.list-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #ccc;
|
||||
margin-left: 16rpx;
|
||||
font-size:32rpx;
|
||||
color:var(--color-text-disabled);
|
||||
margin-left:16rpx;
|
||||
}
|
||||
|
||||
@@ -1,114 +1,114 @@
|
||||
.page {
|
||||
padding: 40rpx;
|
||||
min-height: 100vh;
|
||||
background: #FFF8F7;
|
||||
padding:40rpx;
|
||||
min-height:100vh;
|
||||
background:var(--color-primary-lighter);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 48rpx;
|
||||
margin-bottom:48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 16rpx;
|
||||
display:block;
|
||||
font-size:44rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-strong);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.form {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:40rpx;
|
||||
margin-bottom:40rpx;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom:32rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:16rpx;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border: 2rpx solid #EEE;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
border:2rpx solid var(--color-border);
|
||||
border-radius:16rpx;
|
||||
padding:0 24rpx;
|
||||
font-size:32rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
margin-bottom:32rpx;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
margin-left: 12rpx;
|
||||
line-height: 1.6;
|
||||
margin-left:12rpx;
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #E96B6B;
|
||||
color:var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #FFF3F2;
|
||||
color: #DC3545;
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background:var(--color-primary-light);
|
||||
color:var(--color-danger-strong);
|
||||
padding:20rpx 24rpx;
|
||||
border-radius:12rpx;
|
||||
font-size:26rpx;
|
||||
margin-bottom:24rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: #E96B6B;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
background:var(--color-primary-solid);
|
||||
color:var(--color-text-inverse);
|
||||
border-radius:44rpx;
|
||||
height:88rpx;
|
||||
line-height:88rpx;
|
||||
font-size:32rpx;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background: #CCC;
|
||||
background:var(--color-bg-muted);
|
||||
}
|
||||
|
||||
.tips {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
background:var(--color-bg-card);
|
||||
border-radius:24rpx;
|
||||
padding:32rpx;
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
display:block;
|
||||
font-size:28rpx;
|
||||
font-weight:bold;
|
||||
color:var(--color-text-primary);
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 2;
|
||||
display:block;
|
||||
font-size:24rpx;
|
||||
color:var(--color-text-tertiary);
|
||||
line-height:2;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(140rpx + env(safe-area-inset-bottom))}.hero{padding:44rpx 32rpx 54rpx;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:21rpx}.hero-title{display:block;margin-top:18rpx;font-size:40rpx;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:14rpx;font-size:25rpx;color:var(--color-text-secondary);line-height:1.7}.content{padding:0 var(--spacing-page-x)}.block{margin-top:var(--spacing-section)}.block-title{display:block;font-size:31rpx;font-weight:650}.block-subtitle{display:block;margin-top:8rpx;font-size:23rpx;color:var(--color-text-tertiary)}.card{margin-top:18rpx;padding:28rpx;background:var(--color-bg-card);border:1rpx solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.feature-row,.menu-row,.record-row{display:flex;align-items:center;gap:20rpx;min-height:112rpx;padding:18rpx 0;border-bottom:1rpx solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:72rpx;height:72rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:22rpx;background:var(--color-primary-light);color:var(--color-primary);font-weight:700}.feature-copy{flex:1;min-width:0}.feature-title{display:block;font-size:28rpx;font-weight:600}.feature-desc,.meta{display:block;margin-top:7rpx;font-size:23rpx;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:40rpx;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:10rpx;margin-top:10rpx;padding:6rpx 13rpx;border-radius:999rpx;background:var(--color-success-light);color:var(--color-success);font-size:20rpx}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:88rpx;display:flex;align-items:center;justify-content:center;border-radius:44rpx;font-size:28rpx;font-weight:600}.primary-btn{background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:var(--color-text-inverse);box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}.primary-btn.disabled{background:#E6E8EF;color:#989DAF;box-shadow:none}.secondary-btn{background:var(--color-primary-light);color:var(--color-primary)}.fixed-action{position:fixed;left:0;right:0;bottom:0;padding:18rpx var(--spacing-page-x) calc(18rpx + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1rpx solid var(--color-divider);z-index:100}.field{margin-top:26rpx}.label{display:block;margin-bottom:12rpx;font-size:25rpx;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:1rpx solid var(--color-border);border-radius:var(--radius-md);font-size:26rpx}.input,.select-box{height:88rpx;padding:0 24rpx;display:flex;align-items:center}.textarea{min-height:180rpx;padding:22rpx}.notice{margin-top:20rpx;padding:22rpx;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:23rpx;line-height:1.65}.select-box.is-readonly{background:#F4F2F0;color:var(--color-text-secondary)}.empty-panel{text-align:center;padding:70rpx 30rpx}.empty-symbol{width:96rpx;height:96rpx;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:30rpx;background:var(--color-primary-light);color:var(--color-primary);font-size:36rpx;font-weight:700}.empty-title{display:block;margin-top:22rpx;font-size:30rpx;font-weight:600}.article-card{margin-top:18rpx;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:220rpx;padding:24rpx;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:42rpx;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:24rpx}.article-title{display:block;font-size:29rpx;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:10rpx;font-size:22rpx;color:var(--color-text-tertiary)}.article-content{padding:32rpx;background:var(--color-bg-card);font-size:28rpx;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:31rpx;color:var(--color-text-primary);font-weight:600;margin-bottom:24rpx}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:36rpx}.hero-desc{width:92%}}
|
||||
page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(140rpx + env(safe-area-inset-bottom))}.hero{padding:44rpx 32rpx 54rpx;background:linear-gradient(140deg,var(--color-primary-lighter),var(--color-warning-light));position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:7rpx 14rpx;border-radius:999rpx;background:rgba(255,255,255,.72);color:var(--color-primary-strong);font-size:24rpx}.hero-title{display:block;margin-top:18rpx;font-size:40rpx;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:14rpx;font-size:25rpx;color:var(--color-text-secondary);line-height:1.7}.content{padding:0 var(--spacing-page-x)}.block{margin-top:var(--spacing-section)}.block-title{display:block;font-size:31rpx;font-weight:600}.block-subtitle{display:block;margin-top:8rpx;font-size:24rpx;color:var(--color-text-tertiary)}.card{margin-top:18rpx;padding:28rpx;background:var(--color-bg-card);border:1rpx solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.feature-row,.menu-row,.record-row{display:flex;align-items:center;gap:20rpx;min-height:112rpx;padding:18rpx 0;border-bottom:1rpx solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:72rpx;height:72rpx;display:flex;align-items:center;justify-content:center;flex:none;border-radius:22rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-weight:700}.feature-copy{flex:1;min-width:0}.feature-title{display:block;font-size:28rpx;font-weight:600}.feature-desc,.meta{display:block;margin-top:7rpx;font-size:24rpx;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:40rpx;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:10rpx;margin-top:10rpx;padding:6rpx 13rpx;border-radius:999rpx;background:var(--color-success-light);color:var(--color-success-strong);font-size:24rpx}.tag.warning{background:var(--color-warning-light);color:var(--color-warning-strong)}.primary-btn,.secondary-btn{height:88rpx;display:flex;align-items:center;justify-content:center;border-radius:44rpx;font-size:28rpx;font-weight:600}.primary-btn{background:var(--gradient-brand-solid);color:var(--color-text-inverse);box-shadow:0 10rpx 24rpx rgba(255,92,130,.22)}.primary-btn.disabled{background:var(--color-bg-muted);color:var(--color-text-tertiary);box-shadow:none}.secondary-btn{background:var(--color-primary-light);color:var(--color-primary-strong)}.fixed-action{position:fixed;left:0;right:0;bottom:0;padding:18rpx var(--spacing-page-x) calc(18rpx + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1rpx solid var(--color-divider);z-index:100}.field{margin-top:26rpx}.label{display:block;margin-bottom:12rpx;font-size:25rpx;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:var(--color-bg-page);border:1rpx solid var(--color-border);border-radius:var(--radius-md);font-size:26rpx}.input,.select-box{height:88rpx;padding:0 24rpx;display:flex;align-items:center}.textarea{min-height:180rpx;padding:22rpx}.notice{margin-top:20rpx;padding:22rpx;border-radius:var(--radius-md);background:var(--color-info-light);color:var(--color-text-secondary);font-size:24rpx;line-height:1.65}.select-box.is-readonly{background:var(--color-bg-subtle);color:var(--color-text-secondary)}.empty-panel{text-align:center;padding:70rpx 30rpx}.empty-symbol{width:96rpx;height:96rpx;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:30rpx;background:var(--color-primary-light);color:var(--color-primary-strong);font-size:36rpx;font-weight:700}.empty-title{display:block;margin-top:22rpx;font-size:30rpx;font-weight:600}.article-card{margin-top:18rpx;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:220rpx;padding:24rpx;background:linear-gradient(135deg,var(--color-warning-light),var(--color-warning-light));display:flex;align-items:flex-end}.article-cover text{font-size:42rpx;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:24rpx}.article-title{display:block;font-size:29rpx;font-weight:600;line-height:1.45}.article-meta{display:block;margin-top:10rpx;font-size:24rpx;color:var(--color-text-tertiary)}.article-content{padding:32rpx;background:var(--color-bg-card);font-size:28rpx;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:31rpx;color:var(--color-text-primary);font-weight:600;margin-bottom:24rpx}.danger-card{background:var(--color-primary-lighter);border-color:var(--color-primary-light)}.danger-card .feature-icon{background:var(--color-warning-light);color:var(--color-warning-strong)}@media(max-width:340px){.hero-title{font-size:36rpx}.hero-desc{width:92%}}
|
||||
|
||||
.service-shell{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:#F4F5FA}.service-content{padding:8rpx 24rpx 36rpx}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:24rpx;padding:20rpx 24rpx;border-radius:22rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:21rpx}.service-status__value{padding:6rpx 14rpx;border-radius:18rpx;background:#EAF8F2;color:#329472;font-size:19rpx;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.service-topic{min-height:148rpx;padding:20rpx;border-radius:24rpx;background:#fff;box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:54rpx;height:54rpx;border-radius:17rpx;background:#FFF0F5}.service-topic__icon image{width:34rpx;height:34rpx}.service-topic__title{display:block;margin-top:13rpx;color:#283056;font-size:24rpx;font-weight:650}.service-topic__desc{display:block;margin-top:6rpx;color:#858A9E;font-size:19rpx;line-height:1.45}.service-actions{display:flex;gap:14rpx}.service-actions .secondary-btn{width:190rpx;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:14rpx;margin-top:22rpx;padding:20rpx;border-radius:22rpx;background:#F1F4FF;color:#69718E;font-size:20rpx;line-height:1.55}.privacy-note image{width:34rpx;height:34rpx;flex:none}
|
||||
.service-shell{min-height:100vh;padding-bottom:calc(136rpx + env(safe-area-inset-bottom));background:var(--color-bg-page)}.service-content{padding:8rpx 24rpx 36rpx}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:24rpx;padding:20rpx 24rpx;border-radius:22rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-status__label{color:var(--color-text-tertiary);font-size:24rpx}.service-status__value{padding:6rpx 14rpx;border-radius:18rpx;background:var(--color-success-light);color:var(--color-success-strong);font-size:24rpx;font-weight:600}.service-status__value.disabled{background:var(--color-danger-light);color:var(--color-danger-strong)}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16rpx;margin-top:18rpx}.service-topic{min-height:148rpx;padding:20rpx;border-radius:24rpx;background:var(--color-bg-card);box-shadow:0 8rpx 26rpx rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:54rpx;height:54rpx;border-radius:17rpx;background:var(--color-primary-light)}.service-topic__icon image{width:34rpx;height:34rpx}.service-topic__title{display:block;margin-top:13rpx;color:var(--color-text-strong);font-size:24rpx;font-weight:600}.service-topic__desc{display:block;margin-top:6rpx;color:var(--color-text-tertiary);font-size:24rpx;line-height:1.45}.service-actions{display:flex;gap:14rpx}.service-actions .secondary-btn{width:190rpx;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:14rpx;margin-top:22rpx;padding:20rpx;border-radius:22rpx;background:var(--color-info-light);color:var(--color-text-tertiary);font-size:24rpx;line-height:1.55}.privacy-note image{width:34rpx;height:34rpx;flex:none}
|
||||
|
||||
Reference in New Issue
Block a user