Files
danyang-match/artifacts/ui-redesign/miniapp/preview.html
T
Codex ce172ffd4f feat(ui): activity 页迁 TS + 修复过期契约 + 新增 11 页静态预览器
## 背景
2026-09-13 UI 重设计方案的 13 个契约门禁中 3 个为红,逐一查明性质后分类处理。

## 1. activity 页迁移 TypeScript(11/11 页现已全 TS)
- activity.js → activity.ts(139 行),业务逻辑零改动,仅补类型
- 此前 STATUS.md 记「9/11 TS-only、3 页待迁」,但 messages/matchmaker
  已在 4f91be0 迁完,实际只剩 activity 一页,本提交后清零

## 2. miniapp-reference-contracts 契约自身过期(非代码问题)
- 契约引用 messages.js / matchmaker.js / activity.js,但页面已 TS 化,
  readFileSync 抛裸 ENOENT 栈,看不出「契约引用了陈旧文件名」这一真实原因
- 改为统一走 readPageLogic(page):断言 .ts 存在 + .js 不存在(锁单一运行源),
  找不到文件时给出可读断言而非崩溃
- 核心 11 页循环内统一加 TS-only 校验,防止 JS 回流

## 3. phase07-home-contracts 契约断言架构写反(非代码问题)
- 契约要求 HomeApplicationService 字面出现 userIdentityMapper.findByUserId,
  但实际是 capabilityService.isIdentityVerified(userId)(HomeApplicationService:116)
- 这符合 AGENTS.md #26「前端入口可见性由服务端 CapabilityService 返回决定」,
  让首页穿透 Capability 直接持有 mapper 反而是架构重复
- 且契约自身另一条已断言 CapabilityService 必须有 isIdentityVerified,
  两条要求互相矛盾
- 改为:查库断言落在 caps 侧;首页断言必须委托 capabilityService.isIdentityVerified;
  新增 doesNotMatch(home, /userIdentityMapper/) 禁止首页绕过 Capability
- 保留原有 doesNotMatch(home, /setVerified\(true\)/) 防硬编码断言

## 4. 新增 11 页静态预览器(本机无微信开发者工具)
- scripts/preview-miniapp.mjs:把 WXML + WXSS 转成可浏览器打开的静态 HTML
- 能力:wx:if/wx:elif/wx:else 链、wx:for 列表、嵌套三元、比较/取反运算、
  自定义组件按属性展开、slot 替换、rpx→px 换算、组件样式收集
- mock 数据严格对齐 types/index.d.ts 与各页 WXML 实际读取字段
  (如 regionName/heightCm/educationCode、status: registration_open),
  不用想象字段,避免误导验收判断
- 产出 artifacts/ui-redesign/miniapp/preview.html(11 页可切换,284K)
- 明确边界:非真机渲染、不执行页面 JS、不连后端,
  只用于视觉走查,不得作为功能验收证据

## 验证
- 契约门禁 12/13 通过(唯一红的 ui-document-baseline-contracts 涉及
  STATUS.md 验收口径,待用户看真机效果后裁决,本轮不动)
- 11 页渲染体量:116/70/47/56/94/68/39/39/41/37/38 个类名元素,
  零残留 {{}} 插值、零残留原始组件标签
- 小程序 tsc --noEmit 通过
2026-09-16 12:33:48 +08:00

6220 lines
282 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小程序 11 页静态预览 · 善缘丹阳</title>
<style>
:root { --ink:#1f2744; --muted:#7d839b; --line:#e6e9f2; --brand:#ff4f91; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
background:#f4f5fa; color:var(--ink); }
.banner { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line);
padding:14px 20px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.banner h1 { font-size:15px; margin:0 16px 0 0; font-weight:650; }
.banner .note { font-size:12px; color:var(--muted); margin-left:auto; }
.nav-btn { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:16px;
padding:5px 12px; font-size:12px; cursor:pointer; }
.nav-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.stage { padding:28px; display:flex; justify-content:center; }
.preview-panel { width:100%; max-width:420px; }
.panel-caption { font-size:12px; color:var(--muted); margin-bottom:10px; text-align:center; }
.phone { background:#fff; border-radius:36px; padding:12px; box-shadow:0 20px 60px rgba(28,30,88,.18); }
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
.wx-page { min-height:100%; }
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
/* ==== miniapp/components/recommend-card ==== */
.ui-rec{display:flex;align-items:center;gap:8.00px;min-height:66.00px;padding:7.00px 8.00px;background:#fff;border-bottom:0.50px 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:5.00px}.ui-rec__name{font-size:13.00px;font-weight:700;color:#222746}.ui-rec__age{font-size:10.50px;color:#545B76}.ui-rec__online{margin-left:auto;font-size:9.00px;color:#39A987}.ui-rec__online::before{content:'·';margin-right:2.00px}.ui-rec__meta{margin-top:2.50px;font-size:10.00px;color:#767C94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-rec__reasons{display:flex;gap:3.50px;margin-top:4.00px;overflow:hidden}.ui-rec__reason{flex:none;padding:2.00px 4.50px;border-radius:6.00px;background:#F3EEFF;color:#7860AE;font-size:8.50px;white-space:nowrap}.ui-rec__actions{width:41.00px;display:flex;flex-direction:column;align-items:center;gap:3.50px}.compact-like{width:32.00px;height:32.00px;display:flex;align-items:center;justify-content:center;border-radius:16.00px;background:#FFF0F5;box-shadow:0 3.50px 9.00px rgba(255,79,145,.18)}.compact-like image{width:22.00px;height:22.00px}.compact-pass{font-size:8.50px;color:#A0A4B4;white-space:nowrap}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/status-badge ==== */
.ui-badge {
display: inline-flex;
align-items: center;
padding: 2.00px 7.00px;
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: 4.00px;
height: 4.00px;
border-radius: 50%;
background: currentColor;
margin-right: 4.00px;
}
.ui-badge__label {
font-size: inherit;
}
.ui-badge--success {
background: var(--color-success-light);
color: var(--color-success);
}
.ui-badge--warning {
background: var(--color-warning-light);
color: var(--color-warning);
}
.ui-badge--danger {
background: var(--color-danger-light);
color: var(--color-danger);
}
.ui-badge--info {
background: var(--color-info-light);
color: var(--color-info);
}
.ui-badge--disabled {
background: var(--color-bg-disabled);
color: var(--color-text-disabled);
}
/* ==== miniapp/components/error-state ==== */
.error-state {
padding: 32.00px 16.00px;
text-align: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
}
.error-icon {
display: block;
width: 36.00px;
height: 36.00px;
margin: 0 auto 10.00px;
}
.error-title,
.error-desc {
display: block;
}
.error-title {
font-size: 15.00px;
font-weight: 600;
}
.error-desc {
margin-top: 4.00px;
color: var(--color-text-tertiary);
font-size: 12.00px;
}
.retry-btn {
width: 110.00px;
height: 40.00px;
margin-top: 12.00px;
border: 0;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 13.00px;
line-height: 40.00px;
}
.retry-btn::after {
border: 0;
}
.page{min-height:100vh;background:#F4F5FA;padding-bottom:20.00px}.night-shell{padding:0 12.00px 14.00px;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 21.00px 21.00px;box-shadow:var(--mini-shadow)}
.brand-bar{height:56.00px;padding-top:20px;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:33.00px;height:33.00px}.brand-copy{display:flex;flex-direction:column;margin-left:6.00px}.brand-name{font-size:17.00px;font-weight:700;letter-spacing:1.00px}.brand-slogan{font-size:9.00px;letter-spacing:2.00px;color:var(--mini-text-on-night-muted)}.brand-actions{position:relative;min-width:38.00px;height:36.00px;display:flex;align-items:center;justify-content:center}.message-label{font-size:11.50px}.badge{position:absolute;right:0;top:2.00px;min-width:14.00px;height:14.00px;padding:0 2.00px;line-height:14.00px;text-align:center;font-size:9.00px;color:#fff;background:var(--mini-accent-pink);border-radius:10.00px}
.status-strip{margin:2.00px 0 8.00px;padding:9.00px 10.00px;border:0.50px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:10.00px;color:#fff}.status-main{display:flex;align-items:center;gap:8.00px}.status-copy{flex:1;min-width:0;display:flex;flex-direction:column}.status-title{font-size:12.50px;font-weight:650}.status-desc{margin-top:2.50px;font-size:10.00px;color:var(--mini-text-on-night-muted);line-height:1.4}.status-action{flex:none;min-width:54.00px;min-height:28.00px;padding:0 9.00px;display:flex;align-items:center;justify-content:center;border-radius:14.00px;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));font-size:11.00px;font-weight:650}.status-checks{display:flex;gap:5.00px;overflow:hidden}.status-check{padding:4.00px 6.00px;border-radius:10.00px;background:rgba(255,255,255,.08);font-size:9.50px;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:136.00px;border-radius:13.00px;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:13.00px;bottom:13.00px;width:68%;display:flex;flex-direction:column;color:#fff}.banner-kicker{font-size:9.00px;letter-spacing:1.50px;color:rgba(255,255,255,.78)}.banner-title{margin-top:4.50px;font-size:17.50px;line-height:1.2;font-weight:750;text-shadow:0 1.50px 5.00px rgba(0,0,0,.2)}.banner-subtitle{margin-top:4.00px;font-size:11.00px;color:rgba(255,255,255,.84)}
.entries-card{position:relative;z-index:2;margin:-7.00px 12.00px 0;padding:11.00px 5.00px 9.00px;background:var(--mini-card-bg);border-radius:15.00px;box-shadow:var(--mini-shadow)}.entries-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:9.00px}.entry-item{min-height:52.00px;display:flex;flex-direction:column;align-items:center;justify-content:center}.entry-item.disabled{opacity:.4}.entry-icon{width:33.00px;height:33.00px;display:flex;align-items:center;justify-content:center;border-radius:10.00px;overflow:hidden}.entry-icon-image{width:22.50px;height:22.50px}.entry-label{margin-top:4.00px;font-size:10.50px;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:8.00px 12.00px 0;text-align:center;color:#8B63BC;font-size:10.00px}.section{margin-top:17.00px;padding:0 12.00px}.recommendation-section{margin-top:15.00px}.recommend-list{margin-top:8.00px;border-radius:13.00px;overflow:hidden;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07)}.recommend-empty{margin-top:8.00px;padding:11.00px;display:flex;align-items:center;gap:9.00px;background:#fff;border-radius:13.00px;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07)}.empty-logo{width:38.00px;height:38.00px;flex:none}.empty-copy{flex:1;min-width:0;display:flex;flex-direction:column}.empty-title{font-size:12.50px;font-weight:650;color:#222746}.empty-desc{margin-top:3.00px;font-size:10.00px;line-height:1.4;color:#7A7F98}.empty-actions{display:flex;flex-direction:column;gap:4.00px}.empty-btn{min-width:56.00px;height:24.00px;padding:0 6.00px;display:flex;align-items:center;justify-content:center;border-radius:12.00px;font-size:10.00px}.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:8.00px;background:#fff;border-radius:13.00px;overflow:hidden;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07)}.service-cover{width:105.00px;min-height:78.00px}.service-copy{flex:1;padding:10.00px;display:flex;flex-direction:column}.service-title{font-size:12.50px;font-weight:650;color:#222746}.service-desc{margin-top:3.50px;font-size:10.50px;color:#757B91;line-height:1.45}.text-link{margin-top:auto;padding-top:5.00px;font-size:10.50px;color:var(--mini-accent-pink);font-weight:650}
.activity-scroll{white-space:nowrap;margin-top:8.00px}.activity-card{display:inline-flex;width:275.00px;margin-right:9.00px;background:#fff;border-radius:12.00px;overflow:hidden;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07);white-space:normal}.activity-cover{width:105.00px;height:84.00px}.activity-info{flex:1;padding:9.00px;display:flex;flex-direction:column}.activity-tag{align-self:flex-start;padding:2.50px 6.00px;border-radius:9.00px;background:#FFF0F5;color:var(--mini-accent-pink);font-size:9.00px}.activity-title{margin-top:5.00px;font-size:12.50px;font-weight:650;color:#222746;line-height:1.35}.activity-meta{margin-top:auto;font-size:10.00px;color:#81869B}
.station-card,.article-row,.safety-card{display:flex;align-items:center;background:#fff;border-radius:13.00px;overflow:hidden;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07)}.station-cover{width:95.00px;height:85.00px}.station-info{flex:1;min-width:0;padding:9.00px}.station-name{display:block;font-size:13.00px;font-weight:650;color:#222746}.station-desc{display:block;margin:3.50px 0 6.00px;font-size:10.00px;color:#7A7F98}.mini-tag{display:inline-block;margin:2.00px 3.50px 0 0;padding:2.00px 4.50px;border-radius:7.00px;background:#F0EEFB;color:#6857A2;font-size:8.50px}.arrow-icon{width:14.00px;height:14.00px;margin:8.00px;flex:none}.article-list{margin-top:8.00px;display:flex;flex-direction:column;gap:6.00px}.article-row{min-height:56.00px}.article-cover{width:73.00px;height:56.00px}.article-info,.safety-info{flex:1;min-width:0;padding:8.00px}.article-title{display:block;font-size:12.00px;font-weight:600;color:#222746;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article-meta{display:block;margin-top:3.00px;font-size:9.50px;color:#85899C}.section-empty{margin-top:8.00px;padding:15.00px 12.00px;text-align:center;color:#8A90A6;font-size:11.00px;background:#fff;border-radius:12.00px;box-shadow:0 4.00px 14.00px rgba(35,35,95,.05)}.safety-card{padding:0}.safety-cover{width:90.00px;align-self:stretch}.safety-title{display:block;font-size:12.50px;font-weight:650;color:#222746}.safety-body{display:block;margin-top:3.50px;font-size:10.00px;line-height:1.45;color:#74798E}.safety-link{display:block;margin-top:4.50px;font-size:10.00px;color:var(--mini-accent-pink);font-weight:650}
@media (max-width:340px){.entry-label{font-size:9.50px}.entry-icon{width:30.00px;height:30.00px}.banner-title{font-size:15.50px}.status-checks{overflow-x:auto}.empty-actions{display:none}}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/user-card ==== */
.ui-user-card {
display: flex;
align-items: center;
background: var(--color-bg-card);
min-height: 74.00px;
padding: 7.00px 9.00px;
border-bottom: 0.50px solid #F0F1F6;
}
.ui-user-card__select {
margin-right: var(--spacing-3);
}
.ui-user-card__checkbox {
transform: scale(.82);
}
.ui-user-card__body {
flex: 1;
min-width: 0;
margin-left: 8.00px;
}
.ui-user-card__name-row {
display: flex;
align-items: baseline;
margin-bottom: var(--spacing-1);
}
.ui-user-card__name {
font-size: 13.00px;
font-weight: 700;
color: #222746;
margin-right: var(--spacing-2);
}
.ui-user-card__age {
font-size: 10.50px;
color: #596079;
}
.ui-user-card__online {
margin-left: auto;
color: #39A987;
font-size: 9.00px;
}
.ui-user-card__meta {
font-size: 10.00px;
color: #767C94;
line-height: 1.4;
margin-top: 2.00px;
}
.ui-user-card__actions {
flex-shrink: 0;
margin-left: var(--spacing-2);
}
.ui-user-card__tags{display:flex;gap:3.50px;margin-top:4.00px;overflow:hidden}.ui-user-card__tag{flex:none;padding:2.00px 4.50px;border-radius:6.00px;background:#F3EEFF;color:#7860AE;font-size:8.50px;white-space:nowrap}
/* ==== miniapp/components/button ==== */
/**
* Button 组件样式
* 引用全局 Design Token(addGlobalClass: true)
*/
.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;
}
/* 尺寸 */
.ui-btn--sm {
padding: 7.00px 12.00px;
font-size: var(--font-size-sm);
min-height: 28.00px;
}
.ui-btn--md {
padding: 10.00px 18.00px;
font-size: var(--font-size-base);
min-height: 40.00px;
}
.ui-btn--lg {
padding: 13.00px 24.00px;
font-size: var(--font-size-lg);
min-height: 48.00px;
}
/* 撑满 */
.ui-btn--block {
display: flex;
width: 100%;
}
/* 变体 */
.ui-btn--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-btn--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
.ui-btn--ghost {
background: transparent;
color: var(--color-text-primary);
border: 0.50px solid var(--color-border);
}
.ui-btn--danger {
background: var(--color-danger);
color: #FFFFFF;
}
.ui-btn--text {
background: transparent;
color: var(--color-primary);
padding-left: 0;
padding-right: 0;
min-height: auto;
}
/* 状态 */
.ui-btn--disabled,
.ui-btn--loading {
opacity: 0.55;
}
.ui-btn--disabled.ui-btn--primary,
.ui-btn--disabled.ui-btn--danger {
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);
}
.ui-btn--hover {
opacity: 0.85;
transform: scale(0.98);
}
/* Loading spinner */
.ui-btn__spinner {
width: 14.00px;
height: 14.00px;
margin-right: 6.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-btn__spinner-dot {
width: 9.00px;
height: 9.00px;
border-radius: 50%;
border: 1.50px 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); }
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
.page{min-height:100vh;background:#F4F5FA}
.discover-hero{padding:20px 12.00px 12.00px;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 17.00px 17.00px;box-shadow:var(--mini-shadow);position:relative;z-index:1}
.discover-nav{height:44.00px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.nav-title{font-size:15.50px;font-weight:700}
.nav-search{position:absolute;right:0;width:32.00px;height:32.00px;display:flex;align-items:center;justify-content:center;border:0.50px solid rgba(255,255,255,.18);border-radius:16.00px;background:rgba(255,255,255,.08)}
.nav-search image{width:19.00px;height:19.00px;filter:brightness(0) invert(1)}
.search-bar{display:flex;align-items:center}
.search-input{height:35.00px;flex:1;display:flex;align-items:center;padding:0 10.00px;border-radius:17.50px;background:rgba(255,255,255,.12);border:0.50px solid rgba(255,255,255,.14)}
.search-label{margin-right:7.00px;padding-right:7.00px;border-right:0.50px solid rgba(255,255,255,.2);font-size:10.00px;color:#fff}
.search-field{flex:1;font-size:11.50px;color:#fff}
.search-placeholder{font-size:11.50px;color:rgba(255,255,255,.52)}
.filter-scroll{margin-top:8.00px;white-space:nowrap}
.filter-chips{display:inline-flex;gap:6.00px}
.filter-chip{padding:5.50px 10.00px;border-radius:12.50px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:10.00px}
.filter-chip.active{background:#fff;color:var(--mini-accent-pink);font-weight:650}
/* 遮罩层 + 底部抽屉样式 */
.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:14.00px 14.00px 0 0;max-height:78vh;box-shadow:0 -5.00px 20.00px rgba(31,32,89,.15);display:flex;flex-direction:column;padding:12.00px 14.00px 14.00px}
.filter-scroll-wrap{flex:1;max-height:calc(78vh - 70.00px);padding:4.00px 0 0}
.filter-section{margin-bottom:14.00px;padding:8.00px 10.00px;border-radius:8.00px;transition:background .2s,box-shadow .2s}
.filter-section.hl{background:#FFF5F8;box-shadow:inset 0 0 0 1.00px var(--mini-accent-pink)}
.filter-heading{display:flex;justify-content:space-between}
.filter-label{display:block;font-size:12.00px;font-weight:650;color:#282D4E}
.filter-value{font-size:10.50px;color:#777E99}
.range-slider{margin:4.00px 0}
.tag-group{display:flex;flex-wrap:wrap;gap:7.00px;margin-top:8.00px}
.tag{padding:5.00px 11.00px;border-radius:11.00px;background:#F1F2F7;color:#626981;font-size:10.50px}
.tag.selected{background:#FCEBF3;color:var(--mini-accent-pink)}
.filter-actions{display:flex;gap:9.00px;margin-top:4.00px}
.result-head{padding:15.00px 13.00px 8.00px;display:flex;align-items:flex-end;justify-content:space-between}
.result-head>view{display:flex;flex-direction:column}
.result-title{font-size:15.00px;font-weight:700;color:#252A49}
.result-subtitle{margin-top:2.50px;font-size:10.00px;color:#8A8FA4}
.result-count{font-size:10.00px;color:#8A8FA4}
.user-list{margin:0 12.00px;padding:2.00px 0;background:#fff;border-radius:14.00px;overflow:hidden;box-shadow:0 5.00px 16.00px rgba(34,35,91,.08)}
.card-action{display:flex;align-items:center}
.like-button{width:31.00px;height:31.00px;display:flex;align-items:center;justify-content:center;border-radius:15.50px;background:#FFF0F5;box-shadow:0 3.00px 9.00px rgba(255,79,145,.16)}
.like-button image{width:21.00px;height:21.00px}
.like-button.loading{opacity:.45}
.list-end-hint{text-align:center;padding:12.00px;font-size:10.00px;color:#9A9EB0}
.discover-empty{margin:35.00px 20.00px 0;padding:17.00px;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:14.00px;box-shadow:0 5.00px 16.00px rgba(34,35,91,.08)}
.discover-empty image{width:56.00px;height:56.00px}
.empty-title{margin-top:6.00px;font-size:14.00px;font-weight:650;color:#252A49}
.empty-desc{margin-top:5.00px;text-align:center;font-size:10.50px;line-height:1.55;color:#858A9E}
.empty-action{margin-top:12.00px;min-width:90.00px;height:32.00px;display:flex;align-items:center;justify-content:center;border-radius:16.00px;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:11.50px;font-weight:650}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/conversation-item ==== */
.ui-conv {
display: flex;
align-items: center;
background: var(--color-bg-card);
padding: 9.00px 10.00px;
border-bottom: 0.50px solid var(--color-divider);
}
.ui-conv--disabled {
opacity: 0.6;
}
.ui-conv__body {
flex: 1;
min-width: 0;
margin-left: var(--spacing-3);
}
.ui-conv__top {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ui-conv__name {
color: #222746;
font-size: 13.00px;
font-weight: 650;
}
.ui-conv__time {
color: #8b90a5;
font-size: 9.50px;
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);
}
.ui-conv__last {
flex: 1;
min-width: 0;
color: #7a8097;
font-size: 10.50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: var(--spacing-2);
}
.ui-conv__badge {
min-width: 18.00px;
height: 18.00px;
padding: 0 5.00px;
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;
}
.ui-conv__status-hint {
margin-top: var(--spacing-1);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
.page {
min-height: 100vh;
background: #f4f5fa;
}
.messages-hero {
padding: 20px 12.00px 17.00px;
border-radius: 0 0 18.00px 18.00px;
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: 44.00px;
}
.messages-title {
color: #fff;
font-size: 15.50px;
font-weight: 700;
}
.messages-search {
position: absolute;
right: 7.00px;
width: 17.00px;
height: 17.00px;
}
.message-shortcuts {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 11.00px 4.00px 2.00px;
}
.message-shortcut {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, .88);
font-size: 10.00px;
}
.shortcut-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36.00px;
height: 36.00px;
margin-bottom: 6.00px;
border: 0.50px solid rgba(255, 255, 255, .2);
border-radius: 13.00px;
}
.shortcut-icon image {
width: 22.50px;
height: 22.50px;
}
.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: 8.00px 12.00px 20.00px;
}
.conversation-list {
overflow: hidden;
margin-top: 4.00px;
border-radius: 14.00px;
background: #fff;
box-shadow: 0 5.00px 16.00px rgba(34, 35, 91, .08);
}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
/* ==== miniapp/components/activity-card ==== */
.ui-act{overflow:hidden;border-radius:14.00px;background:#fff;box-shadow:0 5.00px 16.00px rgba(34,35,91,.08)}.ui-act__cover{position:relative;width:100%;height:120.00px;background:#F0F1F6}.ui-act__cover-img{display:block;width:100%;height:100%}.ui-act__fee-badge{position:absolute;top:9.00px;right:9.00px;padding:3.50px 7.50px;border-radius:11.00px;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:9.00px;font-weight:600}.ui-act__body{padding:11.00px 12.00px}.ui-act__title{overflow:hidden;color:#222746;font-size:14.00px;font-weight:700;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.ui-act__meta{margin-top:3.50px;color:#767C94;font-size:10.00px;line-height:1.45}.ui-act__intro{display:-webkit-box;overflow:hidden;margin-top:6.00px;color:#626981;font-size:10.50px;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:9.00px}.ui-act__capacity{color:#858A9E;font-size:9.50px}.ui-act__status-action{min-width:63.00px;height:28.00px;display:flex;align-items:center;justify-content:center;border-radius:14.00px;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:10.50px;font-weight:650}.ui-act__status-action.disabled{background:#EFF0F5;color:#8E93A6}.ui-act--compact{display:flex;height:100.00px}.ui-act--compact .ui-act__cover{width:100.00px;height:100.00px;flex-shrink:0}.ui-act--compact .ui-act__body{flex:1;min-width:0;padding:8.00px 9.00px}.ui-act--compact .ui-act__intro{display:none}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
.act-page{min-height:100vh;padding-bottom:20.00px;background:#F4F5FA}.activity-hero{padding:20px 12.00px 13.00px;border-radius:0 0 18.00px 18.00px;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:44.00px}.activity-title{color:#fff;font-size:15.50px;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:31.00px;height:31.00px;border:0.50px solid rgba(255,255,255,.18);border-radius:15.50px;background:rgba(255,255,255,.1)}.activity-calendar image{width:17.00px;height:17.00px;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:6.00px}.activity-category{padding:5.50px 11.00px;border-radius:12.50px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:10.00px}.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:16.00px 14.00px 8.00px}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:#252A49;font-size:15.00px;font-weight:700}.heading-subtitle{margin-top:2.50px;color:#8A8FA4;font-size:10.00px}.my-activity-link{color:var(--mini-accent-pink);font-size:10.50px}.act-loading{padding:6.00px 12.00px}.act-list{display:flex;flex-direction:column;gap:10.00px;padding:4.00px 12.00px 0}.act-list__more{display:flex;justify-content:center;padding:12.00px 0}.act-list__end{text-align:center;padding:12.00px 0;color:#9A9EB0;font-size:10.00px}.act-empty{padding-top:35.00px}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
/* ==== miniapp/components/avatar ==== */
.ui-avatar {
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); }
/* 尺寸:sm 60 / md 88 / lg 120 / xl 160 */
.ui-avatar--sm { width: 30.00px; height: 30.00px; }
.ui-avatar--md { width: 44.00px; height: 44.00px; }
.ui-avatar--lg { width: 60.00px; height: 60.00px; }
.ui-avatar--xl { width: 80.00px; height: 80.00px; }
.ui-avatar__img {
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);
}
.ui-avatar__fallback-text {
font-size: var(--font-size-lg);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.ui-avatar__fallback-icon {
width: 100%;
height: 100%;
}
.ui-avatar__badges {
position: absolute;
bottom: -2.00px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 3.00px;
}
.ui-avatar__badge {
font-size: 8.00px;
line-height: 1;
padding: 2.00px 4.00px;
border-radius: var(--radius-full);
color: #FFFFFF;
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--sm .ui-avatar__badges { display: none; }
/* ==== miniapp/components/status-badge ==== */
.ui-badge {
display: inline-flex;
align-items: center;
padding: 2.00px 7.00px;
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: 4.00px;
height: 4.00px;
border-radius: 50%;
background: currentColor;
margin-right: 4.00px;
}
.ui-badge__label {
font-size: inherit;
}
.ui-badge--success {
background: var(--color-success-light);
color: var(--color-success);
}
.ui-badge--warning {
background: var(--color-warning-light);
color: var(--color-warning);
}
.ui-badge--danger {
background: var(--color-danger-light);
color: var(--color-danger);
}
.ui-badge--info {
background: var(--color-info-light);
color: var(--color-info);
}
.ui-badge--disabled {
background: var(--color-bg-disabled);
color: var(--color-text-disabled);
}
/* ==== miniapp/components/button ==== */
/**
* Button 组件样式
* 引用全局 Design Token(addGlobalClass: true)
*/
.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;
}
/* 尺寸 */
.ui-btn--sm {
padding: 7.00px 12.00px;
font-size: var(--font-size-sm);
min-height: 28.00px;
}
.ui-btn--md {
padding: 10.00px 18.00px;
font-size: var(--font-size-base);
min-height: 40.00px;
}
.ui-btn--lg {
padding: 13.00px 24.00px;
font-size: var(--font-size-lg);
min-height: 48.00px;
}
/* 撑满 */
.ui-btn--block {
display: flex;
width: 100%;
}
/* 变体 */
.ui-btn--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-btn--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
.ui-btn--ghost {
background: transparent;
color: var(--color-text-primary);
border: 0.50px solid var(--color-border);
}
.ui-btn--danger {
background: var(--color-danger);
color: #FFFFFF;
}
.ui-btn--text {
background: transparent;
color: var(--color-primary);
padding-left: 0;
padding-right: 0;
min-height: auto;
}
/* 状态 */
.ui-btn--disabled,
.ui-btn--loading {
opacity: 0.55;
}
.ui-btn--disabled.ui-btn--primary,
.ui-btn--disabled.ui-btn--danger {
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);
}
.ui-btn--hover {
opacity: 0.85;
transform: scale(0.98);
}
/* Loading spinner */
.ui-btn__spinner {
width: 14.00px;
height: 14.00px;
margin-right: 6.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-btn__spinner-dot {
width: 9.00px;
height: 9.00px;
border-radius: 50%;
border: 1.50px 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); }
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/danger-action-dialog ==== */
.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);
}
.ui-dialog {
width: 100%;
max-width: 300.00px;
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; }
}
.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);
}
.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);
}
.ui-dialog__actions {
display: flex;
gap: var(--spacing-2);
}
.ui-dialog__btn {
flex: 1;
}
.page{min-height:100vh;padding-bottom:24.00px;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(20px + 35.00px) 0 40.00px;color:#fff}.guest-brand image{width:46.00px;height:46.00px}.guest-brand>text{margin-top:6.00px;font-size:17.00px;font-weight:700}.guest-brand .guest-subtitle{margin-top:2.50px;color:rgba(255,255,255,.72);font-size:10.00px;font-weight:400;letter-spacing:2.00px}.profile-hero{padding:20px 12.00px 27.00px;border-radius:0 0 21.00px 21.00px;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:44.00px;color:#fff;font-size:15.50px;font-weight:700}.mine-nav image{position:absolute;right:6.00px;width:18.00px;height:18.00px;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:10.00px;color:#fff}.profile-name-row{display:flex;align-items:center;gap:6.00px}.profile-name{font-size:15.50px;font-weight:700}.profile-status{padding:2.50px 5.00px;border-radius:7.50px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:8.50px}.profile-meta{display:block;margin-top:4.00px;color:rgba(255,255,255,.72);font-size:10.00px}.profile-progress{width:78%;height:3.50px;margin:5.00px 0 6.50px;overflow:hidden;border-radius:4.00px;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:4.00px;background:linear-gradient(90deg,#FF8C9C,#FF5C82)}.profile-badges{display:flex;gap:4.00px}.edit-profile{position:absolute;right:0;top:2.00px;color:rgba(255,255,255,.82);font-size:9.50px}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-12.00px 12.00px 0;padding:12.00px 4.00px;border-radius:14.00px;background:#fff;box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:0.50px solid #EFF0F5}.profile-stat:last-child{border-right:0}.stat-value{color:#283056;font-size:14.50px;font-weight:700}.stat-value--text{font-size:11.00px}.stat-label{margin-top:2.50px;color:#8A8FA4;font-size:9.00px}.public-identity-card{display:flex;align-items:center;margin:12.00px;padding:11.00px;border-radius:13.00px;background:linear-gradient(135deg,#FFF0F5,#F7EEFF);box-shadow:0 4.00px 13.00px rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:36.00px;height:36.00px}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:8.00px}.identity-title{color:#F14D79;font-size:13.00px;font-weight:700}.identity-desc{margin-top:2.50px;color:#8A6F91;font-size:9.50px}.public-identity-card .identity-arrow{width:13.00px;height:13.00px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 12.00px 14.00px;padding:12.00px 4.00px;border-radius:13.00px;background:#fff;box-shadow:0 4.00px 14.00px rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:#343957;font-size:10.00px}.service-icon{display:flex;align-items:center;justify-content:center;width:32.00px;height:32.00px;margin-bottom:5.00px;border-radius:10.00px}.service-icon image{width:21.00px;height:21.00px}.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 12.00px 11.00px;border-radius:13.00px;background:#fff;box-shadow:0 4.00px 14.00px rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:44.00px;padding:0 12.00px;border-bottom:0.50px solid #EFF0F5}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:#2B304E;font-size:11.50px}.list-value{margin-right:6.00px;color:#8A8FA4;font-size:9.50px}.list-arrow{width:12.00px;height:12.00px}.secondary-list{margin-top:0}.logout-row{margin:13.00px 12.00px 0;padding:12.00px;text-align:center;color:#D95561;font-size:11.50px;background:#fff;border-radius:13.00px}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/nav-bar ==== */
.ui-nav {
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: 0.50px solid var(--color-divider);
}
.ui-nav--transparent {
background: transparent;
}
.ui-nav__bar {
display: flex;
align-items: center;
height: 44.00px;
padding: 0 var(--spacing-2);
}
.ui-nav__back,
.ui-nav__placeholder {
width: 32.00px;
height: 32.00px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ui-nav__back-icon {
width: 18.00px;
height: 18.00px;
}
.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;
}
.ui-nav__right {
flex-shrink: 0;
min-width: 32.00px;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* ==== miniapp/components/section-header ==== */
.ui-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3) var(--spacing-page-x);
}
.ui-section__left {
display: flex;
align-items: baseline;
}
.ui-section__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.ui-section__subtitle {
margin-left: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.ui-section__action {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-primary);
}
.ui-section__arrow {
margin-left: 2.00px;
width: 12.00px;
height: 12.00px;
}
/* ==== miniapp/components/matchmaker-card ==== */
.ui-mm {
background: var(--color-bg-card);
border-radius: 13.00px;
padding: 12.00px;
margin-top: 5.00px;
box-shadow: 0 4.00px 14.00px rgba(35,35,95,.06);
}
.ui-mm__header {
display: block;
}
.ui-mm__title-row {
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);
}
.ui-mm__mm-info {
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);
}
.ui-mm__req-label {
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: 2.00px;
}
.ui-mm__follow-up {
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: 0.50px solid var(--color-divider);
}
/* ==== miniapp/components/button ==== */
/**
* Button 组件样式
* 引用全局 Design Token(addGlobalClass: true)
*/
.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;
}
/* 尺寸 */
.ui-btn--sm {
padding: 7.00px 12.00px;
font-size: var(--font-size-sm);
min-height: 28.00px;
}
.ui-btn--md {
padding: 10.00px 18.00px;
font-size: var(--font-size-base);
min-height: 40.00px;
}
.ui-btn--lg {
padding: 13.00px 24.00px;
font-size: var(--font-size-lg);
min-height: 48.00px;
}
/* 撑满 */
.ui-btn--block {
display: flex;
width: 100%;
}
/* 变体 */
.ui-btn--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-btn--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
.ui-btn--ghost {
background: transparent;
color: var(--color-text-primary);
border: 0.50px solid var(--color-border);
}
.ui-btn--danger {
background: var(--color-danger);
color: #FFFFFF;
}
.ui-btn--text {
background: transparent;
color: var(--color-primary);
padding-left: 0;
padding-right: 0;
min-height: auto;
}
/* 状态 */
.ui-btn--disabled,
.ui-btn--loading {
opacity: 0.55;
}
.ui-btn--disabled.ui-btn--primary,
.ui-btn--disabled.ui-btn--danger {
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);
}
.ui-btn--hover {
opacity: 0.85;
transform: scale(0.98);
}
/* Loading spinner */
.ui-btn__spinner {
width: 14.00px;
height: 14.00px;
margin-right: 6.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-btn__spinner-dot {
width: 9.00px;
height: 9.00px;
border-radius: 50%;
border: 1.50px 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); }
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
.mm-page{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.mm-promises{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin:-11.00px 12.00px 0;padding:11.00px 4.00px;border-radius:14.00px;background:#fff;box-shadow:var(--mini-shadow)}.mm-promise{display:flex;flex-direction:column;align-items:center;padding:0 4.00px;text-align:center;color:#8A8FA4;font-size:8.50px;line-height:1.35}.mm-promise image{width:23.00px;height:23.00px;margin-bottom:4.00px}.mm-promise__title{margin-bottom:2.00px;color:#303654;font-size:10.50px;font-weight:650}.mm-loading{padding:15.00px 12.00px}.mm-body{padding-top:4.00px}.mm-section{padding:4.00px 12.00px}.mm-no-service{display:flex;align-items:center;gap:9.00px;margin-top:5.00px;padding:12.00px;border-radius:13.00px;background:#fff;box-shadow:0 4.00px 14.00px rgba(35,35,95,.06)}.mm-no-service image{width:34.00px;height:34.00px}.mm-no-service>view{display:flex;flex:1;flex-direction:column}.mm-no-service__title{color:#283056;font-size:12.50px;font-weight:650}.mm-no-service__desc{margin-top:3.50px;color:#858A9E;font-size:10.00px;line-height:1.5}.mm-capability-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7.00px;margin-top:5.00px}.mm-capability{display:flex;align-items:center;gap:6.00px;min-height:44.00px;padding:8.00px;border-radius:11.00px;background:#fff;color:#555D79;font-size:10.00px;line-height:1.4;box-shadow:0 4.00px 12.00px rgba(35,35,95,.05)}.mm-capability image{width:18.00px;height:18.00px;flex:none}.mm-history{overflow:hidden;margin-top:5.00px;border-radius:12.00px;background:#fff}.mm-history__item{display:flex;align-items:center;min-height:46.00px;padding:0 10.00px;border-bottom:0.50px 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:11.50px;font-weight:600}.mm-history__meta{margin-top:2.50px;color:#8A8FA4;font-size:9.00px}.mm-history__status{margin-right:4.00px;color:#8A6F91;font-size:9.50px}.mm-history__item>image{width:12.00px;height:12.00px}.mm-fixed-action{position:fixed;z-index:100;right:0;bottom:0;left:0;padding:9.00px 12.00px calc(9.00px + 0px);border-top:0.50px solid #EFF0F5;background:rgba(255,255,255,.96)}.mm-apply{display:flex;align-items:center;justify-content:center;height:44.00px;border-radius:22.00px;background:linear-gradient(135deg,var(--mini-accent-coral),var(--mini-accent-pink));color:#fff;font-size:14.00px;font-weight:650;box-shadow:0 5.00px 12.00px rgba(255,92,130,.22)}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@import "../../styles/service-page.wxss";
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
@import "../../styles/service-page.wxss";
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/error-state ==== */
.error-state {
padding: 32.00px 16.00px;
text-align: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
}
.error-icon {
display: block;
width: 36.00px;
height: 36.00px;
margin: 0 auto 10.00px;
}
.error-title,
.error-desc {
display: block;
}
.error-title {
font-size: 15.00px;
font-weight: 600;
}
.error-desc {
margin-top: 4.00px;
color: var(--color-text-tertiary);
font-size: 12.00px;
}
.retry-btn {
width: 110.00px;
height: 40.00px;
margin-top: 12.00px;
border: 0;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 13.00px;
line-height: 40.00px;
}
.retry-btn::after {
border: 0;
}
@import "../../styles/service-page.wxss";
.content-page{min-height:100vh;padding-bottom:20.00px;background:#F4F5FA}.content-categories{padding:12.00px 0;white-space:nowrap}.content-category-row{display:inline-flex;gap:6.00px;padding:0 12.00px}.content-category{padding:5.50px 11.00px;border-radius:12.00px;background:#fff;color:#767D96;font-size:10.50px;box-shadow:0 3.00px 9.00px 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 12.00px}.content-card{display:flex;align-items:center;overflow:hidden;min-height:75.00px;margin-bottom:8.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.content-cover{width:88.00px;height:75.00px;flex:none}.content-card__body{display:flex;flex:1;min-width:0;flex-direction:column;padding:8.00px}.content-card__category{align-self:flex-start;padding:2.00px 5.00px;border-radius:6.00px;background:#FFF0F5;color:var(--mini-accent-pink);font-size:8.50px}.content-card__title{overflow:hidden;margin-top:4.00px;color:#283056;font-size:12.00px;font-weight:650;white-space:nowrap;text-overflow:ellipsis}.content-card__summary{overflow:hidden;margin-top:2.50px;color:#83899F;font-size:9.00px;white-space:nowrap;text-overflow:ellipsis}.content-card__meta{display:flex;gap:9.00px;margin-top:4.50px;color:#9A9EB0;font-size:8.50px}.content-card__arrow{width:12.00px;height:12.00px;margin-right:8.00px;flex:none}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
@import "../../styles/service-page.wxss";
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.risk-card{display:flex;min-height:87.00px;flex-direction:column;padding:10.00px;border:0.50px solid #F7DCE2;border-radius:12.00px;background:#FFF9FA}.risk-card image{width:21.00px;height:21.00px}.risk-title{margin-top:5.00px;color:#9E4054;font-size:11.50px;font-weight:650}.risk-desc{margin-top:3.50px;color:#846F78;font-size:9.00px;line-height:1.5}.safety-steps{overflow:hidden;margin-top:9.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.safety-step{display:flex;align-items:center;gap:8.00px;min-height:52.00px;padding:8.00px 10.00px;border-bottom:0.50px solid #EFF0F5}.safety-step:last-child{border-bottom:0}.safety-step>image{width:24.00px;height:24.00px;flex:none}.safety-step>view{display:flex;flex:1;flex-direction:column}.safety-step view text:first-child{color:#303654;font-size:11.50px;font-weight:650}.safety-step view text:last-child{margin-top:2.50px;color:#858A9E;font-size:9.50px;line-height:1.45}
/**
* 丹阳公益婚恋服务平台 - 全局 Design Token
*
* 依据《前端组件库与 Design Token 规范 V1.0》
* 单位说明:rpx(375.00px = 屏幕宽度),规范 px 值按 2x 映射为 rpx
* 禁止页面层写死颜色/间距/圆角,必须引用 var(--token)
*/
.wx-page {
/* ============ 品牌主色(规范 §3) ============ */
--color-primary: #E96B6B;
--color-primary-active: #D95F5F;
--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-coral: #FF6A78;
--mini-card-bg: rgba(255, 255, 255, 0.98);
--mini-text: #1F2744;
--mini-muted: #7D839B;
--mini-card-radius: 12.00px;
--mini-text-on-night: #FFFFFF;
--mini-text-on-night-muted: rgba(255, 255, 255, 0.72);
--mini-shadow: 0 8.00px 20.00px rgba(28, 30, 88, 0.14);
/* ============ 功能色(规范 §4) ============ */
--color-success: #2E9B68;
--color-success-light: #ECF8F2;
--color-warning: #E59A32;
--color-warning-light: #FFF7E9;
--color-danger: #D94A4A;
--color-danger-light: #FFF0F0;
--color-info: #4A7CD4;
--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 等深色背景上的文字 */
--color-border: #EEEEEE;
--color-divider: #F0F0F0;
--color-border-focus: #E96B6B;
--color-border-error: #D94A4A;
--color-bg-page: #FAFAF8;
--color-bg-card: #FFFFFF;
--color-bg-disabled: #F3F3F3;
--color-bg-overlay: rgba(0, 0, 0, 0.45);
/* ============ 字体(规范 §7-11) ============ */
--font-family-cn: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
--font-size-xs: 12.00px; /* 12px */
--font-size-sm: 13.00px; /* 13px */
--font-size-md: 14.00px; /* 14px */
--font-size-base: 16.00px; /* 16px */
--font-size-lg: 18.00px; /* 18px */
--font-size-xl: 20.00px; /* 20px */
--font-size-2xl: 24.00px; /* 24px */
--font-size-3xl: 28.00px; /* 28px */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ============ 间距(规范 §12,4px 栅格) ============ */
--spacing-1: 4.00px; /* 4px */
--spacing-2: 8.00px; /* 8px */
--spacing-3: 12.00px; /* 12px */
--spacing-4: 16.00px; /* 16px */
--spacing-5: 20.00px; /* 20px */
--spacing-6: 24.00px; /* 24px */
--spacing-8: 32.00px; /* 32px */
--spacing-10: 40.00px; /* 40px */
--spacing-12: 48.00px; /* 48px */
--spacing-page-x: 16.00px; /* 页面左右 16px */
--spacing-section: 24.00px; /* 区块间 24px */
--spacing-card-inner: 16.00px; /* 卡片内部 16px */
--spacing-tight: 8.00px; /* 紧密 8px */
/* ============ 圆角(规范 §14) ============ */
--radius-sm: 8.00px; /* 8px */
--radius-md: 12.00px; /* 12px */
--radius-lg: 16.00px; /* 16px */
--radius-xl: 20.00px; /* 20px */
--radius-full: 4999.50px;
/* ============ 阴影(规范 §15,极轻) ============ */
--shadow-card: 0 4.00px 16.00px rgba(0, 0, 0, 0.04);
--shadow-popup: 0 8.00px 32.00px rgba(0, 0, 0, 0.10);
/* ============ 边框(规范 §16) ============ */
--border-width: 0.50px;
/* ============ 动效(规范 §17) ============ */
--motion-fast: 120ms;
--motion-normal: 200ms;
--motion-slow: 300ms;
--ease-standard: ease-out;
/* ============ 层级 z-index(规范 §90) ============ */
--z-base: 1;
--z-sticky: 100;
--z-tabbar: 200;
--z-dropdown: 500;
--z-modal: 1000;
--z-toast: 2000;
/* ============ 页面基础样式 ============ */
background-color: var(--color-bg-page);
font-family: var(--font-family-cn);
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
/* ============ 通用工具类 ============ */
.container {
padding: var(--spacing-page-x);
}
.flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-1 { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.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); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.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-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
/* 文本省略 */
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 安全区底部留白(避开 Home Indicator) */
.safe-area-bottom {
padding-bottom: 0px;
}
/* 页面卡片基础样式(中低密度留白) */
.card-base {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
padding: var(--spacing-card-inner);
box-shadow: var(--shadow-card);
}
/* 分割线 */
.divider {
height: var(--border-width);
background: var(--color-divider);
}
.wx-page{background:var(--color-bg-page)}.service-page{min-height:100vh;padding-bottom:calc(70.00px + 0px)}.hero{padding:22.00px 16.00px 27.00px;background:linear-gradient(140deg,var(--color-primary-lighter),#FFF8EE);position:relative;overflow:hidden}.eyebrow{display:inline-flex;padding:3.50px 7.00px;border-radius:499.50px;background:rgba(255,255,255,.72);color:var(--color-primary);font-size:10.50px}.hero-title{display:block;margin-top:9.00px;font-size:20.00px;font-weight:700;line-height:1.35}.hero-desc{display:block;width:82%;margin-top:7.00px;font-size:12.50px;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:15.50px;font-weight:650}.block-subtitle{display:block;margin-top:4.00px;font-size:11.50px;color:var(--color-text-tertiary)}.card{margin-top:9.00px;padding:14.00px;background:var(--color-bg-card);border:0.50px 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:10.00px;min-height:56.00px;padding:9.00px 0;border-bottom:0.50px solid var(--color-divider)}.feature-row:last-child,.menu-row:last-child,.record-row:last-child{border-bottom:0}.feature-icon{width:36.00px;height:36.00px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:11.00px;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:14.00px;font-weight:600}.feature-desc,.meta{display:block;margin-top:3.50px;font-size:11.50px;color:var(--color-text-tertiary);line-height:1.55}.arrow{font-size:20.00px;color:var(--color-text-disabled)}.tag{display:inline-flex;margin-right:5.00px;margin-top:5.00px;padding:3.00px 6.50px;border-radius:499.50px;background:var(--color-success-light);color:var(--color-success);font-size:10.00px}.tag.warning{background:var(--color-warning-light);color:var(--color-warning)}.primary-btn,.secondary-btn{height:44.00px;display:flex;align-items:center;justify-content:center;border-radius:22.00px;font-size:14.00px;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 5.00px 12.00px 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:9.00px var(--spacing-page-x) calc(9.00px + 0px);background:rgba(255,255,255,.96);border-top:0.50px solid var(--color-divider);z-index:100}.field{margin-top:13.00px}.label{display:block;margin-bottom:6.00px;font-size:12.50px;font-weight:600}.input,.select-box,.textarea{width:100%;box-sizing:border-box;background:#FCFAF8;border:0.50px solid var(--color-border);border-radius:var(--radius-md);font-size:13.00px}.input,.select-box{height:44.00px;padding:0 12.00px;display:flex;align-items:center}.textarea{min-height:90.00px;padding:11.00px}.notice{margin-top:10.00px;padding:11.00px;border-radius:var(--radius-md);background:#F3F7FC;color:var(--color-text-secondary);font-size:11.50px;line-height:1.65}.empty-panel{text-align:center;padding:35.00px 15.00px}.empty-symbol{width:48.00px;height:48.00px;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:15.00px;background:var(--color-primary-light);color:var(--color-primary);font-size:18.00px;font-weight:700}.empty-title{display:block;margin-top:11.00px;font-size:15.00px;font-weight:600}.article-card{margin-top:9.00px;background:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.article-cover{height:110.00px;padding:12.00px;background:linear-gradient(135deg,#F5E5DE,#F9F1E8);display:flex;align-items:flex-end}.article-cover text{font-size:21.00px;color:rgba(125,76,63,.52);font-weight:700}.article-body{padding:12.00px}.article-title{display:block;font-size:14.50px;font-weight:650;line-height:1.45}.article-meta{display:block;margin-top:5.00px;font-size:11.00px;color:var(--color-text-tertiary)}.article-content{padding:16.00px;background:var(--color-bg-card);font-size:14.00px;line-height:1.9;color:var(--color-text-secondary)}.article-content .lead{display:block;font-size:15.50px;color:var(--color-text-primary);font-weight:600;margin-bottom:12.00px}.danger-card{background:#FFF8F4;border-color:#F5DED2}.danger-card .feature-icon{background:#FFF0EA;color:#C85D43}@media(max-width:340px){.hero-title{font-size:18.00px}.hero-desc{width:92%}}
.service-shell{min-height:100vh;padding-bottom:calc(68.00px + 0px);background:#F4F5FA}.service-content{padding:4.00px 12.00px 18.00px}.service-status{display:flex;align-items:center;justify-content:space-between;margin-top:12.00px;padding:10.00px 12.00px;border-radius:11.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-status__label{color:#7B8198;font-size:10.50px}.service-status__value{padding:3.00px 7.00px;border-radius:9.00px;background:#EAF8F2;color:#329472;font-size:9.50px;font-weight:650}.service-status__value.disabled{background:#FFF0F0;color:#D45A60}.service-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8.00px;margin-top:9.00px}.service-topic{min-height:74.00px;padding:10.00px;border-radius:12.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.service-topic__icon{display:flex;align-items:center;justify-content:center;width:27.00px;height:27.00px;border-radius:8.50px;background:#FFF0F5}.service-topic__icon image{width:17.00px;height:17.00px}.service-topic__title{display:block;margin-top:6.50px;color:#283056;font-size:12.00px;font-weight:650}.service-topic__desc{display:block;margin-top:3.00px;color:#858A9E;font-size:9.50px;line-height:1.45}.service-actions{display:flex;gap:7.00px}.service-actions .secondary-btn{width:95.00px;flex:none}.service-actions .primary-btn{flex:1}.privacy-note{display:flex;align-items:flex-start;gap:7.00px;margin-top:11.00px;padding:10.00px;border-radius:11.00px;background:#F1F4FF;color:#69718E;font-size:10.00px;line-height:1.55}.privacy-note image{width:17.00px;height:17.00px;flex:none}
/* ==== miniapp/components/service-hero ==== */
.service-hero {
position: relative;
height: 150.00px;
overflow: hidden;
border-radius: 0 0 16.00px 16.00px;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
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%);
}
.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%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 18.00px;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 5.00px;
color: var(--color-primary);
font-size: 11.00px;
font-weight: 600;
letter-spacing: 1.00px;
}
.service-hero__title {
color: #24305e;
font-size: 20.00px;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 7.00px;
color: #737c96;
font-size: 12.00px;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}
/* ==== miniapp/components/loading ==== */
.ui-loading--block {
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;
}
.ui-loading__spinner {
width: 30.00px;
height: 30.00px;
display: flex;
align-items: center;
justify-content: center;
}
.ui-loading__spinner-icon {
width: 24.00px;
height: 24.00px;
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
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);
}
/* Skeleton */
.ui-loading__skeleton {
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: 0.50px solid var(--color-divider);
}
.ui-loading__skeleton-avatar {
width: 44.00px;
height: 44.00px;
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;
}
.ui-loading__skeleton-line {
height: 12.00px;
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);
}
.ui-loading__skeleton-line--meta {
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(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 50%,
transparent 100%
);
animation: ui-loading-shimmer 1.4s ease-in-out infinite;
}
@keyframes ui-loading-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==== miniapp/components/empty ==== */
.ui-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-10) var(--spacing-page-x);
text-align: center;
}
.ui-empty__illustration {
width: 80.00px;
height: 80.00px;
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: 36.00px;
height: 36.00px;
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);
}
.ui-empty__desc {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
line-height: var(--line-height-relaxed);
max-width: 240.00px;
}
.ui-empty__actions {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
width: 100%;
max-width: 240.00px;
}
.ui-empty__action {
display: flex;
align-items: center;
justify-content: center;
height: 40.00px;
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
}
.ui-empty__action--primary {
background: var(--color-primary);
color: #FFFFFF;
}
.ui-empty__action--secondary {
background: var(--color-bg-card);
color: var(--color-primary);
border: 0.50px solid var(--color-primary);
}
/* ==== miniapp/components/error-state ==== */
.error-state {
padding: 32.00px 16.00px;
text-align: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
}
.error-icon {
display: block;
width: 36.00px;
height: 36.00px;
margin: 0 auto 10.00px;
}
.error-title,
.error-desc {
display: block;
}
.error-title {
font-size: 15.00px;
font-weight: 600;
}
.error-desc {
margin-top: 4.00px;
color: var(--color-text-tertiary);
font-size: 12.00px;
}
.retry-btn {
width: 110.00px;
height: 40.00px;
margin-top: 12.00px;
border: 0;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 13.00px;
line-height: 40.00px;
}
.retry-btn::after {
border: 0;
}
@import "../../styles/service-page.wxss";
.station-name-card{display:flex;align-items:center;gap:9.00px;margin-top:12.00px;padding:12.00px;border-radius:13.00px;background:linear-gradient(135deg,#F1FFFA,#FFF7F9);box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.station-name-card>image{width:33.00px;height:33.00px}.station-name-card>view{display:flex;flex:1;flex-direction:column}.station-name{color:#283056;font-size:13.50px;font-weight:700}.station-short-name{margin-top:3.00px;color:#7E859B;font-size:9.50px}.station-info-card{overflow:hidden;margin-top:9.00px;border-radius:13.00px;background:#fff;box-shadow:0 4.00px 13.00px rgba(35,35,95,.06)}.station-info-row{display:flex;align-items:center;gap:8.00px;min-height:52.00px;padding:7.00px 10.00px;border-bottom:0.50px solid #EFF0F5}.station-info-row:last-child{border-bottom:0}.station-info-row>image:first-child{width:21.00px;height:21.00px;flex:none}.station-info-row>view{display:flex;flex:1;flex-direction:column}.station-info-label{color:#303654;font-size:11.00px;font-weight:650}.station-info-value{margin-top:2.50px;color:#858A9E;font-size:9.50px;line-height:1.45}.station-info-row .station-arrow{width:12.00px;height:12.00px}.station-services{display:grid;grid-template-columns:repeat(2,1fr);gap:7.00px;margin-top:9.00px}.station-service{display:flex;align-items:center;gap:6.00px;min-height:37.00px;padding:6.00px 8.00px;border-radius:10.00px;background:#fff;color:#505874;font-size:10.00px;box-shadow:0 3.00px 10.00px rgba(35,35,95,.05)}.station-service image{width:17.00px;height:17.00px}.map-button{display:flex;align-items:center;justify-content:center;gap:5.00px;height:39.00px;margin-top:10.00px;border:0.50px solid #E5E7F0;border-radius:19.50px;background:#fff;color:#53607F;font-size:11.00px}.map-button image{width:17.00px;height:17.00px}
</style>
</head>
<body>
<div class="banner">
<h1>小程序 11 页 · 静态预览</h1>
<button class="nav-btn active" data-target="pg-index">index</button><button class="nav-btn" data-target="pg-discover">discover</button><button class="nav-btn" data-target="pg-messages">messages</button><button class="nav-btn" data-target="pg-activity">activity</button><button class="nav-btn" data-target="pg-mine">mine</button><button class="nav-btn" data-target="pg-matchmaker">matchmaker</button><button class="nav-btn" data-target="pg-counseling-intro">counseling-intro</button><button class="nav-btn" data-target="pg-premarital-intro">premarital-intro</button><button class="nav-btn" data-target="pg-content">content</button><button class="nav-btn" data-target="pg-anti-fraud">anti-fraud</button><button class="nav-btn" data-target="pg-service-station">service-station</button>
<span class="note">本预览为 WXML/WXSS 静态还原,非真机渲染,不含真实接口数据</span>
</div>
<div class="stage">
<section id="pg-index" class="preview-panel" style="display:block">
<div class="panel-caption">index.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="page app-page reference-page">
<div class="night-shell">
<div class="brand-bar">
<div class="brand-lockup">
<img class="brand-logo" src="/assets/brand/logo-mark.png" alt="" loading="lazy">
<div class="brand-copy">
<span class="brand-name">善缘丹阳</span>
<span class="brand-slogan">公益婚恋服务平台</span>
</div>
</div>
<div class="brand-actions">
<span class="message-label">消息</span>
<span class="badge">3</span></div>
</div>
<div class="status-strip">
<div class="status-checks">
<span class="status-check done">已完成 · 实名认证</span><span class="status-check done">已完成 · 资料审核</span><span class="status-check">待完成 · 本地资格</span>
</div>
</div>
<div class="banner-section">
<div class="banner-swiper">
<div >
<div class="banner-card">
<img class="banner-img" src="/assets/brand/home-hero-v2.jpg" alt="" loading="lazy">
<div class="banner-overlay"></div>
<div class="banner-copy"><span class="banner-kicker">公益 · 本地 · 真实 · 安全</span><span class="banner-title">在丹阳,遇见认真的彼此</span><span class="banner-subtitle">公益 · 本地 · 真实 · 安全</span></div>
</div>
</div>
</div></div>
</div>
<div class="entries-card">
<div class="entries-grid">
<div class="entry-item">
<div class="entry-icon tone-rose"><img class="entry-icon-image" src="/assets/icons/home/find-object.png" alt="" loading="lazy"></div>
<span class="entry-label">找对象</span>
</div><div class="entry-item">
<div class="entry-icon tone-purple"><img class="entry-icon-image" src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"></div>
<span class="entry-label">公益红娘</span>
</div><div class="entry-item">
<div class="entry-icon tone-blue"><img class="entry-icon-image" src="/assets/icons/home/activity.png" alt="" loading="lazy"></div>
<span class="entry-label">公益活动</span>
</div><div class="entry-item">
<div class="entry-icon tone-pink"><img class="entry-icon-image" src="/assets/icons/home/counseling.png" alt="" loading="lazy"></div>
<span class="entry-label">婚恋咨询</span>
</div><div class="entry-item">
<div class="entry-icon tone-amber"><img class="entry-icon-image" src="/assets/icons/home/classroom.png" alt="" loading="lazy"></div>
<span class="entry-label">婚恋课堂</span>
</div><div class="entry-item">
<div class="entry-icon tone-indigo"><img class="entry-icon-image" src="/assets/icons/home/premarital.png" alt="" loading="lazy"></div>
<span class="entry-label">婚前辅导</span>
</div><div class="entry-item">
<div class="entry-icon tone-red"><img class="entry-icon-image" src="/assets/icons/home/anti-fraud.png" alt="" loading="lazy"></div>
<span class="entry-label">婚恋反诈</span>
</div><div class="entry-item">
<div class="entry-icon tone-green"><img class="entry-icon-image" src="/assets/icons/home/service-station.png" alt="" loading="lazy"></div>
<span class="entry-label">善缘服务站</span>
</div>
</div>
</div>
<div class="section recommendation-section">
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">今日推荐</span>
<span class="ui-section__subtitle">根据双方条件,为你认真筛选</span></div>
<div class="ui-section__action">
<span >查看更多</span>
<img class="ui-section__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div></div>
</div>
<div class="recommend-list">
<div class="comp comp-ui-recommend-card"><div class="ui-rec">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--lg ui-avatar--">
<img class="ui-avatar__img" src="/assets/brand/default-avatar.png" alt="" loading="lazy"><div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="ui-rec__info">
<div class="ui-rec__name-row"><span class="ui-rec__name">王女士</span><span class="ui-rec__age">28岁</span></div>
<div class="ui-rec__meta"><span >丹阳</span><span > · 163cm</span><span > · 本科</span></div>
<div class="ui-rec__meta">教育</div><div class="ui-rec__reasons"><span class="ui-rec__reason">同城</span><span class="ui-rec__reason">年龄相近</span><span class="ui-rec__reason">兴趣重合</span></div></div>
</div></div><div class="comp comp-ui-recommend-card"><div class="ui-rec">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--lg ui-avatar--">
<img class="ui-avatar__img" src="/assets/brand/default-avatar.png" alt="" loading="lazy"><div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="ui-rec__info">
<div class="ui-rec__name-row"><span class="ui-rec__name">陈先生</span><span class="ui-rec__age">31岁</span></div>
<div class="ui-rec__meta"><span >丹阳</span><span > · 176cm</span><span > · 硕士</span></div>
<div class="ui-rec__meta">制造业</div><div class="ui-rec__reasons"><span class="ui-rec__reason">同城</span><span class="ui-rec__reason">择偶条件匹配</span></div></div>
</div></div></div>
</div>
<div class="section"><div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">善缘公益服务</span>
<span class="ui-section__subtitle">需要时,我们在这里陪伴你</span></div>
</div>
</div><div ><div class="service-card"><img class="service-cover" src="/assets/covers/counseling-default.jpg" alt="" loading="lazy"><div class="service-copy"><span class="service-title">公益红娘一对一</span><span class="service-desc">由公益红娘协助梳理择偶条件,推荐更合适的人选。</span><span class="text-link">了解服务</span></div></div><div class="service-card"><img class="service-cover" src="/assets/covers/counseling-default.jpg" alt="" loading="lazy"><div class="service-copy"><span class="service-title">婚恋咨询</span><span class="service-desc">面对关系困惑,可预约专业咨询师谈谈。</span><span class="text-link">预约咨询</span></div></div></div><div class="section-empty">暂无待推荐的公益服务</div></div>
<div class="section"><div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">近期公益活动</span>
</div>
<div class="ui-section__action">
<span >全部活动</span>
<img class="ui-section__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div></div>
</div><div class="activity-scroll"><div class="activity-card" data-id="a1"><img class="activity-cover" src="/assets/covers/activity-default.jpg" alt="" loading="lazy"><div class="activity-info"><span class="activity-tag">公益活动</span><span class="activity-title">丹阳青年公益联谊会</span><span class="activity-meta">丹阳市文化中心</span></div></div><div class="activity-card" data-id="a2"><img class="activity-cover" src="/assets/covers/activity-default.jpg" alt="" loading="lazy"><div class="activity-info"><span class="activity-tag">公益活动</span><span class="activity-title">婚恋反诈公益讲堂</span><span class="activity-meta">善缘服务站·云阳街道</span></div></div></div><div class="section-empty">近期暂无可报名活动</div></div>
<div class="section"><div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">善缘服务站</span>
<span class="ui-section__subtitle">就在身边的公益婚恋服务阵地</span></div>
</div>
</div><div class="station-card"><img class="station-cover" src="/assets/covers/station-default.jpg" alt="" loading="lazy"><div class="station-info"><span class="station-name">善缘服务站(云阳街道)</span><span class="station-desc">云阳街道服务站</span><div ><span class="mini-tag">资料核验</span><span class="mini-tag">红娘咨询</span><span class="mini-tag">活动报名</span></div></div><img class="arrow-icon" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div><div class="section-empty">查看线下公益服务阵地</div></div>
<div class="section"><div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">婚恋课堂</span>
<span class="ui-section__subtitle">学习成长,收获更好的自己</span></div>
<div class="ui-section__action">
<span >更多内容</span>
<img class="ui-section__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div></div>
</div><div class="article-list"><div class="article-row" data-id="c1"><img class="article-cover" src="/assets/covers/classroom-default.jpg" alt="" loading="lazy"><div class="article-info"><span class="article-title">第一次见面,聊些什么更自然</span><span class="article-meta">善缘课堂 · 公益内容</span></div><img class="arrow-icon" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div><div class="article-row" data-id="c2"><img class="article-cover" src="/assets/covers/classroom-default.jpg" alt="" loading="lazy"><div class="article-info"><span class="article-title">如何判断对方是否认真</span><span class="article-meta">善缘课堂 · 公益内容</span></div><img class="arrow-icon" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div></div><div class="section-empty">暂无新内容,稍后再来看看</div></div>
<div class="section safety-card"><img class="safety-cover" src="/assets/covers/anti-fraud-default.jpg" alt="" loading="lazy"><div class="safety-info"><span class="safety-title">善缘安全提醒</span><span class="safety-body">实名认证和人工审核可以提高信息真实性,交往过程中仍请谨慎涉及借款、投资和个人隐私。</span><span class="safety-link">查看婚恋反诈指南</span></div></div>
<div class="safe-area-bottom"></div>
</div>
</div></div></div>
</section>
<section id="pg-discover" class="preview-panel" style="display:none">
<div class="panel-caption">discover.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="page app-page reference-page">
<div class="discover-hero">
<div class="discover-nav">
<span class="nav-title">找对象</span>
<div class="nav-search">
<img src="/assets/icons/ui/search.png" alt="" loading="lazy">
</div>
</div>
<div class="search-bar">
<div class="search-input">
<span class="search-label">搜索</span>
<input class="search-field">
</div>
</div>
<div class="filter-scroll discover-filter-chips">
<div class="filter-chips">
<div class="filter-chip">推荐</div>
<div class="filter-chip">丹阳本地</div>
<div class="filter-chip active">年龄</div>
<div class="filter-chip true">学历</div>
<div class="filter-chip true">婚姻</div>
</div>
</div>
</div>
<div class="result-head">
<div >
<span class="result-title">为你推荐</span>
<span class="result-subtitle">已按当前条件筛选</span>
</div>
<span class="result-count">3 位</span>
</div><div class="user-list candidate-list">
<div class="comp comp-ui-user-card"><div class="ui-user-card">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--lg ui-avatar--">
<img class="ui-avatar__img" src="/assets/brand/default-avatar.png" alt="" loading="lazy"><div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="ui-user-card__body">
<div class="ui-user-card__name-row">
<span class="ui-user-card__name">王女士</span>
<span class="ui-user-card__age">28岁</span>
</div>
<div class="ui-user-card__meta">
<span >163cm · </span><span >丹阳</span>
<span > · 本科</span></div>
<div class="ui-user-card__meta">
教育
</div><div class="ui-user-card__tags">
<span class="ui-user-card__tag">同城</span><span class="ui-user-card__tag">年龄相近</span>
</div></div>
<div class="ui-user-card__actions">
<slot ></slot>
</div>
</div>
</div><div class="comp comp-ui-user-card"><div class="ui-user-card">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--lg ui-avatar--">
<img class="ui-avatar__img" src="/assets/brand/default-avatar.png" alt="" loading="lazy"><div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="ui-user-card__body">
<div class="ui-user-card__name-row">
<span class="ui-user-card__name">陈先生</span>
<span class="ui-user-card__age">31岁</span>
</div>
<div class="ui-user-card__meta">
<span >176cm · </span><span >丹阳</span>
<span > · 硕士</span></div>
<div class="ui-user-card__meta">
制造业
</div><div class="ui-user-card__tags">
<span class="ui-user-card__tag">同城</span>
</div></div>
<div class="ui-user-card__actions">
<slot ></slot>
</div>
</div>
</div><div class="comp comp-ui-user-card"><div class="ui-user-card">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--lg ui-avatar--">
<img class="ui-avatar__img" src="/assets/brand/default-avatar.png" alt="" loading="lazy"><div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="ui-user-card__body">
<div class="ui-user-card__name-row">
<span class="ui-user-card__name">李女士</span>
<span class="ui-user-card__age">26岁</span>
</div>
<div class="ui-user-card__meta">
<span >160cm · </span><span >丹阳</span>
<span > · 大专</span></div>
<div class="ui-user-card__meta">
财务
</div></div>
<div class="ui-user-card__actions">
<slot ></slot>
</div>
</div>
</div>
<div class="list-end-hint">真诚相遇,认真选择</div></div>
</div>
</div></div></div>
</section>
<section id="pg-messages" class="preview-panel" style="display:none">
<div class="panel-caption">messages.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page">
<div class="page app-page reference-page">
<div class="messages-hero">
<div class="messages-nav">
<span class="messages-title">消息</span>
<img class="messages-search" src="/assets/icons/ui/search.png" alt="" loading="lazy">
</div>
<div class="message-shortcuts">
<div class="message-shortcut">
<div class="shortcut-icon shortcut-icon--blue"><img src="/assets/icons/home/find-object.png" alt="" loading="lazy"></div>
<span >新朋友</span>
</div>
<div class="message-shortcut">
<div class="shortcut-icon shortcut-icon--pink"><img src="/assets/brand/logo-mark.png" alt="" loading="lazy"></div>
<span >互动喜欢</span>
</div>
<div class="message-shortcut">
<div class="shortcut-icon shortcut-icon--purple"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"></div>
<span >我的关注</span>
</div>
<div class="message-shortcut">
<div class="shortcut-icon shortcut-icon--coral"><img src="/assets/icons/ui/warning.png" alt="" loading="lazy"></div>
<span >系统通知</span>
</div>
</div>
</div>
<div class="messages-content">
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">最近联系</span>
</div>
</div>
</div>
<div class="conversation-list">
<div class="comp comp-ui-conversation-item"><div class="ui-conv">
<div class="ui-conv__body">
<div class="ui-conv__top">
<span class="ui-conv__name">王女士</span>
<span class="ui-conv__time">14:32</span>
</div>
<div class="ui-conv__bottom">
<span class="ui-conv__last">那我们周六下午见?</span>
<div class="ui-conv__badge">
</div></div>
</div>
</div>
</div><div class="comp comp-ui-conversation-item"><div class="ui-conv">
<div class="ui-conv__body">
<div class="ui-conv__top">
<span class="ui-conv__name">陈先生</span>
<span class="ui-conv__time">昨天</span>
</div>
<div class="ui-conv__bottom">
<span class="ui-conv__last">谢谢你的建议,我会认真考虑的。</span>
</div>
</div>
</div>
</div><div class="comp comp-ui-conversation-item"><div class="ui-conv true">
<div class="ui-conv__body">
<div class="ui-conv__top">
<span class="ui-conv__name">李女士</span>
<span class="ui-conv__time">3 天前</span>
</div>
<div class="ui-conv__bottom">
<span class="ui-conv__last">开始你们的对话吧</span>
</div>
<div class="ui-conv__status-hint">
</div></div>
</div>
</div></div>
</div>
</div>
</div></div></div>
</section>
<section id="pg-activity" class="preview-panel" style="display:none">
<div class="panel-caption">activity.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page">
<div class="act-page app-page reference-page">
<div class="activity-hero">
<div class="activity-nav">
<span class="activity-title">公益活动</span>
<div class="activity-calendar">
<img src="/assets/icons/home/activity.png" alt="" loading="lazy">
</div>
</div>
<div class="activity-categories">
<div class="activity-category-row">
<div class="activity-category">全部</div><div class="activity-category">公益联谊</div><div class="activity-category">婚恋课堂</div><div class="activity-category">反诈宣传</div>
</div>
</div>
</div>
<div class="activity-heading">
<div ><span class="heading-title">丹阳公益活动</span><span class="heading-subtitle">丰富活动,连接更多可能</span></div>
<span class="my-activity-link">我的活动</span>
</div>
<div class="act-list">
<div class="comp comp-ui-activity-card"><div class="ui-act">
<div class="ui-act__cover">
<img class="ui-act__cover-img" src="/assets/covers/activity-default.jpg" alt="" loading="lazy">
<div class="ui-act__fee-badge">公益活动</div>
</div>
<div class="ui-act__body">
<div class="ui-act__title">丹阳青年公益联谊会</div>
<div class="ui-act__meta"><span >09-20 14:00</span></div>
<div class="ui-act__meta"><span >丹阳市文化中心</span></div>
<div class="ui-act__intro">面向丹阳本地单身青年,公益免费,含破冰互动与自由交流环节。</div><div class="ui-act__footer">
<div class="ui-act__capacity">
<span >报名人数 true/60</span></div>
<div class="ui-act__status-action true"></div>
</div>
</div>
</div>
</div><div class="comp comp-ui-activity-card"><div class="ui-act">
<div class="ui-act__cover">
<img class="ui-act__cover-img" src="/assets/covers/activity-default.jpg" alt="" loading="lazy">
<div class="ui-act__fee-badge">公益活动</div>
</div>
<div class="ui-act__body">
<div class="ui-act__title">婚恋反诈公益讲堂</div>
<div class="ui-act__meta"><span >09-22 19:00</span></div>
<div class="ui-act__meta"><span >善缘服务站·云阳街道</span></div>
<div class="ui-act__intro">识别婚恋交往中的常见诈骗套路,公益讲师现场答疑。</div><div class="ui-act__footer">
<div class="ui-act__capacity">
<span >报名人数 true/40</span></div>
<div class="ui-act__status-action true"></div>
</div>
</div>
</div>
</div><div class="comp comp-ui-activity-card"><div class="ui-act">
<div class="ui-act__cover">
<img class="ui-act__cover-img" src="/assets/covers/activity-default.jpg" alt="" loading="lazy">
<div class="ui-act__fee-badge">公益活动</div>
</div>
<div class="ui-act__body">
<div class="ui-act__title">沟通与相处·婚恋课堂</div>
<div class="ui-act__meta"><span >09-25 15:00</span></div>
<div class="ui-act__meta"><span >丹阳市图书馆</span></div>
<div class="ui-act__intro">从沟通模式入手,学习如何与对方建立稳定的相处节奏。</div><div class="ui-act__footer">
<div class="ui-act__capacity">
<span >报名人数 true/30</span></div>
<div class="ui-act__status-action true"></div>
</div>
</div>
</div>
</div></div>
</div>
</div></div></div>
</section>
<section id="pg-mine" class="preview-panel" style="display:none">
<div class="panel-caption">mine.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="page app-page reference-page">
<div class="mine-guest">
<div class="guest-brand"><img src="/assets/brand/logo-mark.png" alt="" loading="lazy"><span >善缘丹阳</span><span class="guest-subtitle">公益婚恋服务平台</span></div>
<div class="comp comp-ui-empty"><div class="ui-empty">
<div class="ui-empty__illustration ui-empty__illustration--default">
<img class="ui-empty__icon" src="/assets/icons/ui/empty.png" alt="" loading="lazy">
</div>
<span class="ui-empty__title">登录后查看我的服务</span>
<span class="ui-empty__desc">管理资料、缘分与公益服务记录</span><div class="ui-empty__actions">
<div class="ui-empty__action ui-empty__action--primary">登录</div>
</div>
<slot ></slot>
</div>
</div>
</div>
<div class="profile-hero">
<div class="mine-nav"><span >我的</span><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"></div>
<div class="profile-main">
<div class="comp comp-ui-avatar"><div class="ui-avatar ui-avatar--xl ui-avatar--">
<div class="ui-avatar__fallback">
<img class="ui-avatar__fallback-icon" src="/assets/brand/default-avatar.png" alt="" loading="lazy">
</div>
</div>
</div>
<div class="profile-copy">
<div class="profile-name-row"><span class="profile-name">王女士</span><span class="profile-status">认真寻找中</span></div>
<span class="profile-meta">资料完整度 85%</span>
<div class="profile-progress"><div ></div></div>
<div class="profile-badges"><div class="comp comp-ui-status-badge"><div class="ui-badge ui-badge--success">
<span class="ui-badge__label">已实名</span>
</div>
</div><div class="comp comp-ui-status-badge"><div class="ui-badge ui-badge--success">
<span class="ui-badge__label">资料已审核</span>
</div>
</div></div>
</div>
<span class="edit-profile">编辑资料</span>
</div>
</div>
<div class="profile-stats">
<div class="profile-stat"><span class="stat-value">85%</span><span class="stat-label">资料完整</span></div>
<div class="profile-stat"><span class="stat-value">7</span><span class="stat-label">喜欢我的</span></div>
<div class="profile-stat"><span class="stat-value">2</span><span class="stat-label">当前缘分</span></div>
<div class="profile-stat"><span class="stat-value stat-value--text">资料已通过审核</span><span class="stat-label">资料状态</span></div>
</div>
<div class="public-identity-card">
<img src="/assets/brand/logo-mark.png" alt="" loading="lazy">
<div ><span class="identity-title">我在善缘丹阳</span><span class="identity-desc">用真诚遇见美好,让爱在丹阳绽放</span></div>
<img class="identity-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div>
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">我的公益服务</span>
<span class="ui-section__subtitle">服务进度与预约记录</span></div>
</div>
</div>
<div class="service-grid">
<div class="service-entry"><div class="service-icon rose"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"></div><span >我的红娘</span></div>
<div class="service-entry"><div class="service-icon blue"><img src="/assets/icons/home/counseling.png" alt="" loading="lazy"></div><span >我的咨询</span></div>
<div class="service-entry"><div class="service-icon amber"><img src="/assets/icons/home/activity.png" alt="" loading="lazy"></div><span >我的活动</span></div>
<div class="service-entry"><div class="service-icon green"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"></div><span >我的预约</span></div>
</div>
<div class="list-group">
<div class="list-row"><span class="list-label">我的资料</span><span class="list-value">资料已通过审核</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">择偶条件</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">我的缘分</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">公益服务记录</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">账号设置</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
</div>
<div class="list-group secondary-list">
<div class="list-row"><span class="list-label">隐私设置</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">举报与安全</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="list-row"><span class="list-label">婚恋反诈</span><img class="list-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
</div>
<div class="logout-row">退出登录</div>
<div class="comp comp-ui-danger-action-dialog"></div>
</div>
</div></div></div>
</section>
<section id="pg-matchmaker" class="preview-panel" style="display:none">
<div class="panel-caption">matchmaker.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="mm-page app-page reference-page">
<div class="comp comp-ui-nav-bar"><div class="ui-nav ui-nav--">
<div class="ui-nav__bar">
<div class="ui-nav__placeholder"></div>
<div class="ui-nav__title">公益红娘</div>
<div class="ui-nav__right">
<slot ></slot>
</div>
</div>
</div>
</div>
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">专业牵线 · 公益助力</span><span class="service-hero__title">公益红娘</span>
<span class="service-hero__subtitle">认真倾听你的期待,帮助你认识更合适的人</span></div>
</div>
</div>
<div class="mm-promises">
<div class="mm-promise"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><span class="mm-promise__title">公益免费</span><span >不收取服务费用</span></div>
<div class="mm-promise"><img src="/assets/icons/home/find-object.png" alt="" loading="lazy"><span class="mm-promise__title">真实匹配</span><span >基于审核资料推荐</span></div>
<div class="mm-promise"><img src="/assets/icons/home/anti-fraud.png" alt="" loading="lazy"><span class="mm-promise__title">隐私保护</span><span >由你本人决定意向</span></div>
</div>
<div class="mm-body">
<div class="mm-section">
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">申请状态</span>
<span class="ui-section__subtitle">红娘不会代替你表达喜欢</span></div>
</div>
</div>
<div class="comp comp-ui-matchmaker-card"><div class="ui-mm">
<div class="ui-mm__header">
<div class="ui-mm__title-row">
<span class="ui-mm__title">公益红娘服务</span>
<div class="comp comp-ui-status-badge"><div class="ui-badge ui-badge--">
<span class="ui-badge__label"></span>
</div>
</div>
</div>
<div class="ui-mm__mm-info">
<span >红娘:王老师</span>
</div><div class="ui-mm__req">
<span class="ui-mm__req-label">你的需求:</span>
<span class="ui-mm__req-content"></span>
</div>
</div>
<div class="ui-mm__footer">
<div class="comp comp-ui-button"><div class="ui-btn ui-btn--secondary ui-btn--md custom-class">
<slot ></slot>
</div>
</div>
</div></div></div><div class="mm-no-service"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><div ><span class="mm-no-service__title">暂未申请红娘服务</span><span class="mm-no-service__desc">提交需求后,工作人员会根据你的择偶条件提供公益协助</span></div></div>
</div>
<div class="mm-section">
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">红娘可以如何帮助</span>
<span class="ui-section__subtitle">陪伴沟通,尊重你的每次决定</span></div>
</div>
</div>
<div class="mm-capability-grid">
</div>
</div>
<div class="mm-section">
<div class="comp comp-ui-section-header"><div class="ui-section">
<div class="ui-section__left">
<span class="ui-section__title">历史服务</span>
<span class="ui-section__subtitle">共 1 条</span></div>
</div>
</div>
<div class="mm-history">
<div class="mm-history__item">
<div ><span class="mm-history__title">公益红娘服务</span><span class="mm-history__meta">红娘:李老师</span></div>
<span class="mm-history__status">已完成</span>
<img src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div>
</div>
</div></div>
<div class="mm-fixed-action"><div class="mm-apply">提交新的红娘需求</div></div>
</div>
</div></div></div>
</section>
<section id="pg-counseling-intro" class="preview-panel" style="display:none">
<div class="panel-caption">counseling-intro.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="service-shell app-page reference-page">
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">专业陪伴 · 严格保密</span><span class="service-hero__title">婚恋咨询</span>
<span class="service-hero__subtitle">倾听你的心声,陪你梳理关系与情绪困扰</span></div>
</div>
</div>
<div class="service-content">
<div class="service-status"><span class="service-status__label">服务状态</span><span class="service-status__value true">(serviceEnabled ? '可预约' : disabledReason)</span></div>
<div class="block"><span class="block-title">我们可以提供的帮助</span><span class="block-subtitle">选择最接近当前需要的方向</span>
<div class="service-topics">
<div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/counseling.png" alt="" loading="lazy"></div>
<span class="service-topic__title">一对一婚恋咨询</span><span class="service-topic__desc">面对关系困惑,与专业咨询师单独沟通。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/classroom.png" alt="" loading="lazy"></div>
<span class="service-topic__title">团体成长小组</span><span class="service-topic__desc">在小组中学习沟通与相处方式。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/premarital.png" alt="" loading="lazy"></div>
<span class="service-topic__title">婚前准备咨询</span><span class="service-topic__desc">为进入婚姻提前做好准备。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"></div>
<span class="service-topic__title">公益咨询热线</span><span class="service-topic__desc">需要时,可以随时联系我们。</span>
</div>
</div>
</div>
<div class="privacy-note"><img src="/assets/icons/home/anti-fraud.png" alt="" loading="lazy"><span >咨询内容按敏感信息保护。公益红娘不能查看咨询正文,咨询人员仅处理明确分配给自己的服务。</span></div>
</div>
<div class="fixed-action"><div class="service-actions"><div class="secondary-btn">我的咨询</div><div class="primary-btn true">预约咨询</div></div></div>
</div>
</div></div></div>
</section>
<section id="pg-premarital-intro" class="preview-panel" style="display:none">
<div class="panel-caption">premarital-intro.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="service-shell app-page reference-page">
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">共同成长 · 面向未来</span><span class="service-hero__title">婚前辅导</span>
<span class="service-hero__subtitle">在进入婚姻前,把重要的事认真谈清楚</span></div>
</div>
</div>
<div class="service-content">
<div class="service-status"><span class="service-status__label">服务状态</span><span class="service-status__value true">(serviceEnabled ? '可预约' : disabledReason)</span></div>
<div class="block"><span class="block-title">辅导内容</span><span class="block-subtitle">科学指导,走向更稳的幸福</span>
<div class="service-topics">
<div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/premarital.png" alt="" loading="lazy"></div>
<span class="service-topic__title">沟通与表达</span><span class="service-topic__desc">学习把真实想法说清楚,也听懂对方。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/counseling.png" alt="" loading="lazy"></div>
<span class="service-topic__title">家庭与边界</span><span class="service-topic__desc">提前讨论双方家庭的相处边界。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/classroom.png" alt="" loading="lazy"></div>
<span class="service-topic__title">财务与规划</span><span class="service-topic__desc">把未来的开销与计划谈在前面。</span>
</div><div class="service-topic">
<div class="service-topic__icon"><img src="/assets/icons/home/activity.png" alt="" loading="lazy"></div>
<span class="service-topic__title">冲突与修复</span><span class="service-topic__desc">建立遇到分歧时的处理方式。</span>
</div>
</div>
</div>
<div class="privacy-note"><img src="/assets/icons/home/premarital.png" alt="" loading="lazy"><span >双方共同参与效果更好,但必须基于自愿;不会因为一方申请而自动通知或要求另一方参加。</span></div>
</div>
<div class="fixed-action"><div class="service-actions"><div class="secondary-btn">服务记录</div><div class="primary-btn true">预约辅导</div></div></div>
</div>
</div></div></div>
</section>
<section id="pg-content" class="preview-panel" style="display:none">
<div class="panel-caption">content.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="content-page app-page reference-page">
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">学习成长 · 认真相遇</span><span class="service-hero__title">婚恋课堂</span>
<span class="service-hero__subtitle">学习成长,收获更好的自己</span></div>
</div>
</div>
<div class="content-categories">
<div class="content-category-row"><div class="content-category true" data-id="">推荐</div><div class="content-category" data-id="c1">相识沟通</div><div class="content-category" data-id="c2">关系经营</div><div class="content-category" data-id="c3">婚姻准备</div></div>
</div>
<div class="content-list">
<div >
<div class="content-card" data-id="a1">
<img class="content-cover" src="/assets/covers/classroom-default.jpg" alt="" loading="lazy">
<div class="content-card__body"><span class="content-card__category">相识沟通</span><span class="content-card__title">第一次见面,聊些什么更自然</span><span class="content-card__summary">从共同话题切入,让交流更轻松。</span><div class="content-card__meta"><span >浏览 1280</span><span >2026-09-10</span></div></div>
<img class="content-card__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div><div class="content-card" data-id="a2">
<img class="content-cover" src="/assets/covers/classroom-default.jpg" alt="" loading="lazy">
<div class="content-card__body"><span class="content-card__category">关系经营</span><span class="content-card__title">如何判断对方是否认真</span><span class="content-card__summary">观察行动而非承诺,是更可靠的判断方式。</span><div class="content-card__meta"><span >浏览 960</span><span >2026-09-08</span></div></div>
<img class="content-card__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div><div class="content-card" data-id="a3">
<img class="content-cover" src="/assets/covers/classroom-default.jpg" alt="" loading="lazy">
<div class="content-card__body"><span class="content-card__category">婚姻准备</span><span class="content-card__title">婚前需要沟通的五件事</span><span class="content-card__summary">把重要问题谈在前面,减少未来的分歧。</span><div class="content-card__meta"><span >浏览 1520</span><span >2026-09-05</span></div></div>
<img class="content-card__arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy">
</div>
</div>
</div>
</div>
</div></div></div>
</section>
<section id="pg-anti-fraud" class="preview-panel" style="display:none">
<div class="panel-caption">anti-fraud.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="service-shell fraud-page app-page reference-page">
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">提高警惕 · 守护真心</span><span class="service-hero__title">婚恋反诈</span>
<span class="service-hero__subtitle">识别风险信号,守护你的真心与财产安全</span></div>
</div>
</div>
<div class="service-content">
<div class="block"><span class="block-title">常见风险信号</span><span class="block-subtitle">出现以下情况,请先停止资金或隐私操作</span>
<div class="risk-grid">
<div class="risk-card"><img src="/assets/icons/ui/warning.png" alt="" loading="lazy"><span class="risk-title">编造身份</span><span class="risk-desc">伪造职业、收入或婚恋状况获取信任。</span></div><div class="risk-card"><img src="/assets/icons/ui/warning.png" alt="" loading="lazy"><span class="risk-title">诱导投资</span><span class="risk-desc">以内部渠道、稳赚不赔为由引导转账。</span></div><div class="risk-card"><img src="/assets/icons/ui/warning.png" alt="" loading="lazy"><span class="risk-title">借款周转</span><span class="risk-desc">以突发困难为由频繁借款并拖延归还。</span></div><div class="risk-card"><img src="/assets/icons/ui/warning.png" alt="" loading="lazy"><span class="risk-title">隐私勒索</span><span class="risk-desc">索取私密照片或信息后实施威胁。</span></div>
</div>
</div>
<div class="block"><span class="block-title">遇到可疑情况怎么办</span>
<div class="safety-steps">
<div class="safety-step"><img src="/assets/icons/home/anti-fraud.png" alt="" loading="lazy"><div ><span >立即停止资金操作</span><span >不要继续转账、充值或提供验证码</span></div></div>
<div class="safety-step"><img src="/assets/icons/home/classroom.png" alt="" loading="lazy"><div ><span >保存相关证据</span><span >保留聊天、付款和对方账号信息</span></div></div>
<div class="safety-step"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"><div ><span >及时举报或报警</span><span >平台举报不会通知被举报人,紧急情况请拨打 110</span></div></div>
</div>
</div>
</div>
<div class="fixed-action"><div class="service-actions"><div class="secondary-btn">安全求助</div><div class="primary-btn">举报可疑行为</div></div></div>
</div>
</div></div></div>
</section>
<section id="pg-service-station" class="preview-panel" style="display:none">
<div class="panel-caption">service-station.wxml</div>
<div class="phone"><div class="phone-screen"><div class="wx-page reference-page"><div class="service-shell station-page app-page reference-page">
<div class="comp comp-ui-service-hero"><div class="service-hero service-hero--rose">
<img class="service-hero__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23E8EAF2'/%3E%3Ctext x='100' y='105' font-size='16' fill='%238890A8' text-anchor='middle'%3EIMG%3C/text%3E%3C/svg%3E" alt="" loading="lazy">
<div class="service-hero__veil"></div>
<div class="service-hero__content">
<span class="service-hero__eyebrow">公益服务 · 就在身边</span><span class="service-hero__title">善缘服务站</span>
<span class="service-hero__subtitle">面对面提供可靠、温暖的本地婚恋服务</span></div>
</div>
</div>
<div class="service-content">
<div class="station-name-card"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"><div ><span class="station-name">善缘服务站(云阳街道)</span><span class="station-short-name">云阳街道服务站</span></div></div>
<div class="station-info-card">
<div class="station-info-row"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"><div ><span class="station-info-label">地址</span><span class="station-info-value">丹阳市云阳街道人民路 128 号</span></div></div>
<div class="station-info-row"><img src="/assets/icons/home/counseling.png" alt="" loading="lazy"><div ><span class="station-info-label">联系电话</span><span class="station-info-value">0511-88888888</span></div><img class="station-arrow" src="/assets/icons/ui/chevron-right.png" alt="" loading="lazy"></div>
<div class="station-info-row"><img src="/assets/icons/home/activity.png" alt="" loading="lazy"><div ><span class="station-info-label">开放时间</span><span class="station-info-value">周一至周六 09:00-17:30</span></div></div>
</div>
<div class="block"><span class="block-title">服务项目</span><div class="station-services"><div class="station-service"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><span >资料核验</span></div><div class="station-service"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><span >公益红娘咨询</span></div><div class="station-service"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><span >活动报名</span></div><div class="station-service"><img src="/assets/icons/home/matchmaker.png" alt="" loading="lazy"><span >服务预约</span></div></div></div>
<div class="privacy-note"><img src="/assets/icons/home/anti-fraud.png" alt="" loading="lazy"><span >服务站人员仅处理现场预约与指定服务,不会浏览无关用户资料。</span></div>
<div class="map-button"><img src="/assets/icons/home/service-station.png" alt="" loading="lazy"><span >地图定位</span></div>
</div>
<div class="fixed-action"><div class="service-actions"><div class="secondary-btn">联系服务站</div><div class="primary-btn">预约到站服务</div></div></div></div>
</div></div></div>
</section></div>
<script>
const btns = [...document.querySelectorAll('.nav-btn')]
const panels = [...document.querySelectorAll('.preview-panel')]
btns.forEach((b) => b.addEventListener('click', () => {
btns.forEach((x) => x.classList.toggle('active', x === b))
panels.forEach((p) => { p.style.display = p.id === 'pg-' + b.dataset.target.replace('pg-','') ? 'block' : 'none' })
}))
</script>
</body>
</html>