240 lines
6.5 KiB
Plaintext
240 lines
6.5 KiB
Plaintext
/**
|
|
* 软市 AI — 全局设计令牌 & TDesign 主题定制
|
|
* 品牌主色：#FF5F15（活力橙，契合软件市场定位）
|
|
* 所有页面/组件统一引用此处的 CSS 变量
|
|
*/
|
|
|
|
page {
|
|
/* ============ 品牌色板 ============ */
|
|
--brand: #ff5f15;
|
|
--brand-hover: #ff7a3d;
|
|
--brand-active: #e5540f;
|
|
--brand-light: #fff3eb;
|
|
--brand-light-2: #ffe4d3;
|
|
--brand-gradient: linear-gradient(96deg, #ff8a3d 0%, #ff5f15 100%);
|
|
--brand-gradient-v: linear-gradient(180deg, #ff8a3d 0%, #ff5f15 100%);
|
|
|
|
/* ============ 功能色 ============ */
|
|
--success: #00b578;
|
|
--success-light: #e8f8f1;
|
|
--warning: #ff9f0a;
|
|
--warning-light: #fff5e6;
|
|
--error: #e34d59;
|
|
--error-light: #fdecee;
|
|
--info: #308eff;
|
|
--info-light: #ecf3ff;
|
|
|
|
/* ============ 文本色（4 级层级） ============ */
|
|
--text-primary: #1d2129;
|
|
--text-secondary: #4e5969;
|
|
--text-tertiary: #86909c;
|
|
--text-placeholder: #a9aeb8;
|
|
--text-disabled: #c9cdd4;
|
|
--text-inverse: #ffffff;
|
|
|
|
/* ============ 背景与边框 ============ */
|
|
--bg-page: #f5f6f8;
|
|
--bg-card: #ffffff;
|
|
--bg-grey: #f2f3f5;
|
|
--border-level-1: #f2f3f5;
|
|
--border-level-2: #e5e6eb;
|
|
|
|
/* ============ 圆角 ============ */
|
|
--radius-sm: 8rpx;
|
|
--radius-md: 16rpx;
|
|
--radius-lg: 24rpx;
|
|
--radius-round: 999rpx;
|
|
|
|
/* ============ 阴影 ============ */
|
|
--shadow-card: 0 4rpx 20rpx rgba(29, 33, 41, 0.05);
|
|
--shadow-raised: 0 8rpx 32rpx rgba(29, 33, 41, 0.08);
|
|
--shadow-brand: 0 8rpx 24rpx rgba(255, 95, 21, 0.28);
|
|
|
|
/* ============ 间距 ============ */
|
|
--spacing-xs: 8rpx;
|
|
--spacing-sm: 16rpx;
|
|
--spacing-md: 24rpx;
|
|
--spacing-lg: 32rpx;
|
|
--spacing-xl: 48rpx;
|
|
|
|
/* ============ 字体层级 ============ */
|
|
--font-title: 34rpx;
|
|
--font-subtitle: 30rpx;
|
|
--font-body: 28rpx;
|
|
--font-assist: 24rpx;
|
|
--font-mini: 22rpx;
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-page);
|
|
}
|
|
|
|
/* ================= TDesign 组件主题 ================= */
|
|
|
|
/* ---- Button：默认态渲染品牌色 ---- */
|
|
.t-button {
|
|
--td-button-default-color: var(--brand);
|
|
--td-button-default-bg-color: var(--brand-light);
|
|
--td-button-default-border-color: var(--brand-light);
|
|
--td-button-default-active-bg-color: var(--brand-light-2);
|
|
--td-button-default-active-border-color: var(--brand-light-2);
|
|
--td-button-default-disabled-bg: var(--bg-grey);
|
|
--td-button-default-disabled-border-color: var(--bg-grey);
|
|
--td-button-default-disabled-color: var(--text-disabled);
|
|
--td-button-medium-font: 30rpx;
|
|
--td-button-large-font: 32rpx;
|
|
--td-button-border-radius: var(--radius-round);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---- Cell 单元格 ---- */
|
|
.t-cell {
|
|
--td-cell-bg-color: var(--bg-card);
|
|
--td-cell-title-color: var(--text-primary);
|
|
--td-cell-description-color: var(--text-tertiary);
|
|
--td-cell-note-color: var(--text-tertiary);
|
|
--td-cell-border-color: var(--border-level-1);
|
|
--td-cell-vertical-padding: 28rpx;
|
|
--td-cell-horizontal-padding: 32rpx;
|
|
}
|
|
|
|
/* ---- Tabs 选项卡 ---- */
|
|
.t-tabs {
|
|
--td-tabs-nav-bg-color: var(--bg-card);
|
|
--td-tabs-border-color: var(--border-level-1);
|
|
--td-tab-item-color: var(--text-tertiary);
|
|
--td-tab-item-active-color: var(--brand);
|
|
--td-tab-track-color: var(--brand);
|
|
--td-tab-track-height: 6rpx;
|
|
--td-tab-track-radius: var(--radius-round);
|
|
}
|
|
|
|
/* ---- Search 搜索 ---- */
|
|
.t-search {
|
|
--td-search-bg-color: var(--bg-card);
|
|
--td-search-text-color: var(--text-primary);
|
|
--td-search-placeholder-color: var(--text-placeholder);
|
|
}
|
|
|
|
/* ---- Input 输入框 ---- */
|
|
.t-input {
|
|
--td-input-bg-color: var(--bg-grey);
|
|
--td-input-default-text-color: var(--text-primary);
|
|
--td-input-placeholder-text-color: var(--text-placeholder);
|
|
--td-input-border-color: transparent;
|
|
--td-input-vertical-padding: 20rpx;
|
|
}
|
|
|
|
/* ---- Textarea ---- */
|
|
.t-textarea {
|
|
--td-textarea-placeholder-color: var(--text-placeholder);
|
|
--td-textarea-background-color: var(--bg-card);
|
|
}
|
|
|
|
/* ---- Checkbox / Radio ---- */
|
|
.t-checkbox {
|
|
--td-checkbox-icon-checked-color: var(--brand);
|
|
--td-checkbox-checked-color: var(--brand);
|
|
--td-checkbox-title-checked-color: var(--text-primary);
|
|
}
|
|
.t-radio {
|
|
--td-radio-icon-checked-color: var(--brand);
|
|
}
|
|
|
|
/* ---- Switch ---- */
|
|
.t-switch {
|
|
--td-switch-checked-color: var(--brand);
|
|
}
|
|
|
|
/* ---- TabBar 底部导航 ---- */
|
|
.t-tab-bar {
|
|
--td-tab-bar-color: var(--text-tertiary);
|
|
--td-tab-bar-active-color: var(--brand);
|
|
--td-tab-bar-bg-color: var(--bg-card);
|
|
--td-tab-bar-border-color: var(--border-level-1);
|
|
--td-tab-bar-active-bg-color: transparent;
|
|
--td-tab-bar-item-height: 108rpx;
|
|
}
|
|
|
|
/* ---- Grid 宫格 ---- */
|
|
.t-grid {
|
|
--td-grid-item-text-color: var(--text-secondary);
|
|
--td-grid-item-text-font-size: var(--font-mini);
|
|
--td-grid-item-bg-color: var(--bg-card);
|
|
}
|
|
|
|
/* ---- Dialog 对话框 ---- */
|
|
.t-dialog {
|
|
--td-dialog-title-color: var(--text-primary);
|
|
--td-dialog-content-color: var(--text-secondary);
|
|
--td-dialog-confirm-color: var(--brand);
|
|
--td-dialog-border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* ---- Popup / Toast / ActionSheet ---- */
|
|
.t-popup {
|
|
--td-popup-border-radius: var(--radius-lg);
|
|
}
|
|
.t-toast {
|
|
--td-toast-bg-color: rgba(29, 33, 41, 0.88);
|
|
}
|
|
.t-action-sheet {
|
|
--td-action-sheet-border-radius: var(--radius-lg);
|
|
--td-action-sheet-item-color: var(--text-primary);
|
|
--td-action-sheet-active-color: var(--brand);
|
|
}
|
|
|
|
/* ---- Cascader 级联选择 ---- */
|
|
.t-cascader {
|
|
--td-cascader-active-color: var(--brand);
|
|
}
|
|
|
|
/* ---- Steps 步骤条 ---- */
|
|
.t-steps {
|
|
--td-step-active-color: var(--brand);
|
|
--td-step-default-color: var(--text-placeholder);
|
|
--td-step-dot-active-bg-color: var(--brand);
|
|
--td-step-process-icon-color: var(--brand);
|
|
}
|
|
|
|
/* ---- Tag 标签 ---- */
|
|
.t-tag {
|
|
--td-tag-border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---- Swiper 轮播 ---- */
|
|
.t-swiper {
|
|
--td-swiper-border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ---- Empty 空状态 ---- */
|
|
.t-empty {
|
|
--td-empty-description-text-color: var(--text-tertiary);
|
|
}
|
|
|
|
/* ---- Loading / Divider ---- */
|
|
.t-loading {
|
|
--td-loading-color: var(--brand);
|
|
--td-loading-text-color: var(--text-tertiary);
|
|
}
|
|
.t-divider {
|
|
--td-divider-color: var(--border-level-2);
|
|
}
|
|
|
|
/* ---- Stepper 步进器 ---- */
|
|
.t-stepper {
|
|
--td-stepper-border-color: var(--border-level-2);
|
|
}
|
|
|
|
/* ---- NoticeBar 公告栏 ---- */
|
|
.t-notice-bar {
|
|
--td-notice-bar-border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ---- Picker 选择器 ---- */
|
|
.t-picker {
|
|
--td-picker-confirm-color: var(--brand);
|
|
}
|