# 全局配置
FirstUI部分组件props属性以及样式全局变量配置，用于替换组件内默认变量值。
特别说明
- 配置变量相当于组件内默认值，优先级小于props传值。
- 配置内容会随着组件增加而增加，注意更新。
# 配置文件内容
First UI 组件配置的 SCSS 变量 写在 组件目录 / fui-theme/ 目录下的 fui-variables.scss 文件中。
/*
FirstUI部分组件props属性以及样式全局变量配置，用于替换组件内默认变量值【注意：需要全局中引入才有效】，主题色结合fui-theme.scss调整
优先级：props变量（如果有传值）> scss配置变量值
注意：建议在 uni.scss 中引入，App.uvue中引入可能无法替换组件内!default变量值
*/
/* fui-text 文本组件 */
/* 文本字体大小 (szie + unit属性) */
$fui-text-size: 32rpx;
/* fui-number 数字组件 */
/* 数字字体大小 (szie + unit属性) */
$fui-number-size: 32rpx;
/* fui-icon 字体图标组件 */
/* 字体图标大小 (szie + unit属性) */
$fui-icon-size: 64rpx;
/* fui-button 按钮组件 */
/* 按钮高度 （height 属性） */
$fui-button-height: 96rpx;
/* 按钮字体大小 （size 属性） */
$fui-button-size: 32rpx;
/* 按钮圆角大小 （radius 属性） */
$fui-button-radius: 16rpx;
/* fui-list-cell 列表组件 */
/* padding值 */
$fui-list-cell-padding:32rpx;
/* 箭头颜色 */
$fui-list-cell-arrowcolor:#B2B2B2;
/* 下边框left值*/
$fui-list-cell-bottomleft:32rpx;
/* 边框宽度（适用于 fui-list 与 fui-list-cell组件） */
$fui-list-cell-borderwidth:0.5px;
/* fui-section 标题栏组件 */
/* 标题字体大小 (size 属性) */
$fui-section-title-size: 32rpx;
/* 标题字体颜色 （color 属性）*/
$fui-section-title-color: #181818;
/* 标题字重，可选值：400、700、normal、bold 。（fontWeight 属性）*/
$fui-section-title-weight: 700;
/* 描述字体大小 (descrSize 属性)*/
$fui-section-descr-size: 28rpx;
/* 描述字体颜色 (descrColor 属性)*/
$fui-section-descr-color: #B2B2B2;
/* 描述距离标题padding-top值 （descrTop 属性）*/
$fui-section-descr-top: 12rpx;
/* fui-grid 宫格组件 */
/* 边框宽度 */
$fui-grid-border-width:0.5px;
/* fui-card 卡片组件 */
/* 边框宽度 */
$fui-card-border-width:0.5px;
/* fui-input 输入框组件 */
/* 边框宽度 */
$fui-input-border-width:0.5px;
/* 标题字体大小 */
$fui-input-label-size: 32rpx;
/* 输入框字体大小 */
$fui-input-size: 32rpx;
/* fui-checkbox 复选框组件 */
/* 未选中时边框颜色 */
$fui-checkbox-border-color: #CCCCCC;
/* 未选中时背景颜色 */
$fui-checkbox-background: #FFFFFF;
/* 对号颜色 */
$fui-checkbox-mark-color: #FFFFFF;
/* fui-radio 单选框组件 */
/* 未选中时边框颜色 */
$fui-radio-border-color: #CCCCCC;
/* 未选中时背景颜色 */
$fui-radio-background: #FFFFFF;
/* 对号颜色 */
$fui-radio-mark-color: #FFFFFF;
/* fui-switch 开关组件 */
/* 未选中时背景颜色 */
$fui-switch-background: #FFFFFF ;
/* switch关闭时过渡背景颜色 type=switch有效 */
$fui-switch-normal-transition: #dfdfdf;
/* 未选中时边框颜色 */
$fui-switch-border-color: #CCCCCC;
/* switch圆形按钮阴影 */
$fui-switch-circle-shadow: 0 0 3px rgba(0, 0, 0, .4);
/* switch圆形按钮的背景色 */
$fui-switch-circle-background: #FFFFFF;
/* switch中对号颜色，type=checkbox时有效 */
$fui-switch-mark-color: #FFFFFF;
/* fui-textarea 多行输入框 */
/* 边框宽度 */
$fui-textarea-border-width: 0.5px;
/* 标题字体大小 */
$fui-textarea-label-size: 32rpx;
/* 输入框字体大小 */
$fui-textarea-size: 32rpx;
/* fui-actionsheet 上拉菜单组件 */
/* 浅色模式背景色 */
$fui-actionsheet-bg-light: #F8F8F8;
/* 深色模式背景色 */
$fui-actionsheet-bg-dark: #111111;
/* 浅色模式按钮背景色 */
$fui-actionsheet-btnbg-light: #FFFFFF;
/* 深色模式按钮背景色 */
$fui-actionsheet-btnbg-dark: #222222;
/* 浅色模式字体颜色 */
$fui-actionsheet-color-light: #181818;
/* 深色模式字体颜色 */
$fui-actionsheet-color-dark: #D1D1D1;
/* 提示文本字体颜色 */
$fui-actionsheet-tip-color: #7F7F7F;
/* 顶部左右圆角值，radius为true时有效 */
$fui-actionsheet-radius: 24rpx;
/* 分割线宽度 */
$fui-actionsheet-border-width: 0.5px;
/* 分割线浅色模式颜色 */
$fui-actionsheet-bcolor-light: #EEEEEE;
/* 分割线深色模式颜色 */
$fui-actionsheet-bcolor-dark: #333333;
/* fui-dialog 对话框组件 */
/* 按钮默认字体颜色 */
$fui-dialog-bn-color: #333333 ;
/* fui-segmented-control 分段器组件 */
/* 线条宽度，type=button有效 */
$fui-segmentedcontrol-border-width:1px;
/* fui-tag 标签组件 */
/* 边框宽度 */
$fui-tag-border-width: 0.5px;
/* fui-collapse 折叠面板组件 */
/* 边框宽度 */
$fui-collapse-border-width: 0.5px;
/* fui-divider 分割线组件 */
/* 线条宽度 */
$fui-divider-line-width: 0.5px;
/* 线条颜色 */
$fui-divider-line-color: #CCCCCC;
/* 显示文本字体颜色 */
$fui-divider-text-color: #B2B2B2;
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
# 配置文件引入
全局引入
新建scss文件或者在项目根目录 uni.scss 文件中写入对应变量以及值。
/**
* 如果是自定scss文件，需要在 uni.scss 中引入。注意：App.uvue中引入可能不生效！
* 特别说明：以下config.scss中内容就是上方变量内容，避免直接修改 fui-variables.scss文件，不利于迭代！
*/
@import "@/自定义路径/.../config.scss";
1
2
3
4
5
2
3
4
5