R524809
80 lines
2.6 KiB
Plaintext
80 lines
2.6 KiB
Plaintext
/**
|
||
* v3.0 主题令牌（Less 变量）
|
||
*
|
||
* 使用：在页面/组件 less 顶部 @import '../../style/theme.less'，再用 @brand、@page-padding-x、@fs-nav-title 等
|
||
*
|
||
* 色谱速览：主题 #FFD709 · 页背景 #FEF6E7 · Header #F8F0E0
|
||
* · 主标题 #322E25 · 选中/强调字 #6C5A00
|
||
*/
|
||
|
||
// ========== 品牌 / 主题色 ==========
|
||
@brand: #ffd709;
|
||
@brand-dark: #e5c200; // 按下、加深态
|
||
@brand-light: #fff4c4; // 浅底、高亮背景
|
||
|
||
// 与 theme.less 对齐的别名
|
||
@primary-color: @brand;
|
||
@select-color: @brand;
|
||
|
||
// ========== 页面结构背景 ==========
|
||
@bg-page: #fef6e7;
|
||
@bg-header: #f8f0e0;
|
||
@bg-default: @bg-page;
|
||
@bg-white: #ffffff;
|
||
@bg-gray: #f5edd8;
|
||
@bg-muted: #f5f5f5; // 分龄 Tab 未选中等弱对比底（Stitch）
|
||
@bg-week-head: #fafafa; // 分龄周卡头部（Stitch stone-50）
|
||
@bg-card: #f0e7d6;
|
||
|
||
// ========== 文本色 ==========
|
||
@text-title: #322e25;
|
||
@text-primary: @text-title;
|
||
@text-default: @text-title;
|
||
@text-selected-btn: #6c5a00; // 黄底按钮上的字、强调整示
|
||
@text-secondary: #605b50;
|
||
@text-light: rgba(50, 46, 37, 0.45);
|
||
@text-gray: #8a8478;
|
||
@text-white: #ffffff;
|
||
@text-disable: rgba(50, 46, 37, 0.35);
|
||
|
||
// ========== 链接与外链 ==========
|
||
@link-color: #2794f4;
|
||
@wechat-color: #1fe000;
|
||
|
||
// ========== 边框 ==========
|
||
@border: 1rpx solid rgba(50, 46, 37, 0.08);
|
||
@border-color: rgba(255, 215, 9, 0.35);
|
||
|
||
// ========== 页面水平内边距 ==========
|
||
// 主内容区与屏幕左右对齐；卡片内略小，避免双重视觉边距
|
||
@page-padding-x: 40rpx;
|
||
@page-padding-inner-x: 26rpx;
|
||
|
||
// ========== 区块纵向间距 ==========
|
||
@section-gap: 60rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
|
||
@section-gap-lg: 48rpx; // 主区块之间（按年龄挑选 ↔ 热门推荐 等）
|
||
@section-gap-sm: 32rpx; // 区块内：标题与下方列表 / 横向列表顶距
|
||
@section-gap-stack: 28rpx; // 同级卡片堆叠（周卡、热门列表卡片等）
|
||
@section-gap-xs: 24rpx; // 更小块间（搜索区顶、Tab 区等）
|
||
|
||
|
||
// ========== 圆角 ==========
|
||
@radius-sm: 16rpx;
|
||
@radius: 24rpx;
|
||
@radius-lg: 32rpx;
|
||
@radius-xl: 48rpx; // 大卡片（如个人中心主卡，对齐 Stitch 1.5rem）
|
||
|
||
// ========== 阴影 ==========
|
||
@shadow: 0 4rpx 16rpx rgba(50, 46, 37, 0.06);
|
||
@shadow-lg: 0 8rpx 32rpx rgba(50, 46, 37, 0.1);
|
||
|
||
// ========== 字号 ==========
|
||
@font-size-icon: 40rpx;
|
||
@fs-section-head-title: 36rpx; // 板块主标题（如首页区块头、分龄路径头等）
|
||
|
||
// ========== 顶栏（Tab 页固定导航标题）==========
|
||
@nav-inner-height: 44px;
|
||
@fs-nav-title: 34rpx;
|
||
@fw-nav-title: 700;
|
||
@color-nav-title: @text-title;
|
||
@ls-nav-title: -0.02em; |