vars.scss
2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// Font 文字
// 大标题 Medium 26pt 34H 500
$fontSizeTitleLarger: 52px;
// 标准标题 Medium 20pt 28H 500
$fontSizeTitleLarge: 40px;
// 标准标题 Medium 18pt 24H 500
$fontSizeTitle: 36rpx;
// 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400
$fontSizeNavLarge: 34px;
// 正文5 大部分正文文字+导航栏的文字 Regular 16pt 22H 400
$fontSizeNav: 32px;
// 正文4 信息较多且需要多呈现时的正文使用 Regular 15pt 21H 400
$fontSize: 30px;
// 正文3 信息较多且需要多呈现时的正文使用 Regular 14pt 21H 400
$fontSizeSmall: 28px;
// 正文2 对主题进行释意的文字+协议条款文字等 Regular 13pt 19H 400
$fontSizeRemark: 26px;
// 正文1 对主题进行释意的文字+协议条款文字等 Regular 12pt 16H 400
$fontSizeRemarkSmall: 24px;
// 标签栏辅助文字 Medium 10pt 14H 500
$fontSizeTag: 20px;
// 表单中数据文字 Regular 8pt 10H 400
$fontSizeData: 16px;
// Color 颜色 以下来自 有赞建议
$color: #323233; // 文字色,指主文字1
$colorText: #646566; // 文字色,指主文字2
$colorLight: #969799; // 文字色,指辅助、说明文字
$colorTips: #969799; // 文字色,指 disable、提示文字等
$colorBorder: #DCDEE0; // 边框、线色
$colorBorderLight: #EBEDF0; // 边框、线色
$colorBg: #F2F3F5; // 深色背景
$colorBgLight: #F7F8FA; // 浅色背景
$colorBlack: #000000; // 黑色
$colorWhite: #ffffff; // 白色
// 功能色
$colorLink:#576B95; // 文字链颜色
$colorSuccess: #07C160; // 成功色
$colorDanger: #EE0A24; // 报错色
$colorWarning: #ED6A0C; // 通知消息中的文本颜色
$colorWarning: #FFFBE8; // 通知消息中的背景颜色
$colorInfo: #FAAB0C; // 文字辅助颜色
// 业务色 以下颜色为自定义
$colorMain:#409EFF; // 主题颜色 根据业务定义 // #EE0A24有赞默认
$colorPrice: #ee0a24; // 价格颜色
// $fontGray:#9F9E9E; // 提示文字颜色
// BorderRadius 角边
$borderRaidus: 16px; // 默认卡片编辑 角边
$borderRaidusPopup: 40px; // 模态面板编辑 角边
$borderRaidusDialog: 32px; // 对话框 角边
// Space 间距 有赞建议为8的倍数(8点网格系统)
$marginLarge:32px; // 外边距 多用于主内容离屏幕边缘
$margin:24px; // 外边距 多用于主内容离屏幕边缘
$marginSmall: 16px; // 小外边距 多用于内容间上下距离
$marginSmaller: 8px; // 小外边距 多用列表item间上下左右距离
$paddinglarge:32px; // 内边距
$padding: 24px;
$paddingSmall: 16px;
$paddingSmaller: 8px;
// 页面样式
$pageBottom: 160px; // 页面底部
$contentWid: 690px; //内容宽度 (由间距为8的倍数所得)
$contentWidth: 710px; //内容宽度 (由间距为8的倍数所得)
$screenWidth: 750px; // 屏幕宽度