# 主题
框架主题颜色均由主色进行计算生成，编写时请注意参考：
# 主题色
// 品牌色
$brand-color:var(--brand-color, #166bff);
// 衍生色-加深
$brand-color-dark-1:var(--brand-color-dark-1, #166bff);
$brand-color-dark-2:var(--brand-color-dark-2, #166bff);
$brand-color-dark-3:var(--brand-color-dark-3, #166bff);
$brand-color-dark-4:var(--brand-color-dark-4, #166bff);
$brand-color-dark-5:var(--brand-color-dark-5, #166bff);
// 衍生色-减弱
$brand-color-light-1:var(--brand-color-light-1, #166bff);
$brand-color-light-2:var(--brand-color-light-2, #166bff);
$brand-color-light-3:var(--brand-color-light-3, #166bff);
$brand-color-light-4:var(--brand-color-light-4, #166bff);
$brand-color-light-5:var(--brand-color-light-5, #166bff);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 信息色
// 信息色
$color-text-primary: #1e2228;
// 主要文字颜色
$color-text-regular: #4e5769;
// 常规文字颜色
$color-text-secondary: #828b9b;
// 次要文字颜色
$color-text-placeholder: #cad0db;
// 占位文字颜色
$border-color-base: #cad0db;
// 一级边框色
$border-color-1: #e4e7ed;
// 二级边框色
$border-color-2: #f7f9fc;
// 基础背景色
$background-color-base: #f2f4f7;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 使用
主应用框架已集成，可直接使用,使用示例：
<style lang="scss" scoped>
.layout-header {
width: 100%;
height: 48px;
background-color: $brand-color-dark-2;
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7