200 lines
6.4 KiB
Plaintext
200 lines
6.4 KiB
Plaintext
/**
|
||
* 丹阳公益婚恋服务平台 - 全局 Design Token
|
||
*
|
||
* 依据《前端组件库与 Design Token 规范 V1.0》
|
||
* 单位说明：rpx（750rpx = 屏幕宽度），规范 px 值按 2x 映射为 rpx
|
||
* 禁止页面层写死颜色/间距/圆角，必须引用 var(--token)
|
||
*/
|
||
|
||
page {
|
||
/* ============ 品牌主色（规范 §3） ============ */
|
||
--color-primary: #E96B6B;
|
||
--color-primary-active: #D95F5F;
|
||
--color-primary-light: #FFF3F2;
|
||
--color-primary-lighter: #FFF8F7;
|
||
|
||
/* ============ 功能色（规范 §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: 24rpx; /* 12px */
|
||
--font-size-sm: 26rpx; /* 13px */
|
||
--font-size-md: 28rpx; /* 14px */
|
||
--font-size-base: 32rpx; /* 16px */
|
||
--font-size-lg: 36rpx; /* 18px */
|
||
--font-size-xl: 40rpx; /* 20px */
|
||
--font-size-2xl: 48rpx; /* 24px */
|
||
--font-size-3xl: 56rpx; /* 28px */
|
||
|
||
--font-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: 8rpx; /* 4px */
|
||
--spacing-2: 16rpx; /* 8px */
|
||
--spacing-3: 24rpx; /* 12px */
|
||
--spacing-4: 32rpx; /* 16px */
|
||
--spacing-5: 40rpx; /* 20px */
|
||
--spacing-6: 48rpx; /* 24px */
|
||
--spacing-8: 64rpx; /* 32px */
|
||
--spacing-10: 80rpx; /* 40px */
|
||
--spacing-12: 96rpx; /* 48px */
|
||
|
||
--spacing-page-x: 32rpx; /* 页面左右 16px */
|
||
--spacing-section: 48rpx; /* 区块间 24px */
|
||
--spacing-card-inner: 32rpx; /* 卡片内部 16px */
|
||
--spacing-tight: 16rpx; /* 紧密 8px */
|
||
|
||
/* ============ 圆角（规范 §14） ============ */
|
||
--radius-sm: 16rpx; /* 8px */
|
||
--radius-md: 24rpx; /* 12px */
|
||
--radius-lg: 32rpx; /* 16px */
|
||
--radius-xl: 40rpx; /* 20px */
|
||
--radius-full: 9999rpx;
|
||
|
||
/* ============ 阴影（规范 §15，极轻） ============ */
|
||
--shadow-card: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
|
||
--shadow-popup: 0 16rpx 64rpx rgba(0, 0, 0, 0.10);
|
||
|
||
/* ============ 边框（规范 §16） ============ */
|
||
--border-width: 1rpx;
|
||
|
||
/* ============ 动效（规范 §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: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
/* 页面卡片基础样式（中低密度留白） */
|
||
.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);
|
||
}
|