@primary-color: #1990ff !; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #67c23a; // 成功色
@warning-color: #FD6400; // 警告色
@error-color: #f56c6c; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影
@fff: #fff;
@gray: #f4f4f4;
@mainColor: #63a9f1;
@highColor: #255bb4;
// 上下空隙
@container-tb-gap: 20px;
// 左右空隙
@container-lr-gap: 20px;
@container-gap: @container-tb-gap @container-lr-gap;
@border-radius: 15px;
@box-shadow: 0 2px 4px 0 @gray;
@chart-height: 400px;
.for-loop-p(@index) when (@index >0) {
.fs-@{index} {
font-size: (@index * 0.01rem) !important;
}
.fw-@{index} {
font-weight: (@index * 100) !important;
}
.w-@{index}-p {
width:~'@{index}%';
}
.h-@{index}-p {
height:~'@{index}%';
}
// 一定需要注意xu格式操作符中间要有空格，否则会失效 @index -1 => @index - 1
.for-loop-p(@index - 1);
}
.for-loop-p(100);
.for-loop-px(@index) when (@index >0) {
.w-@{index}px {
width: (@index * 1px) !important;
}
.h-@{index}px {
height: (@index * 1px) !important;
}
.mr-@{index}px {
margin-right: (@index * 1px) !important;
}
.ml-@{index}px {
margin-left: (@index * 1px) !important;
}
.mt-@{index}px {
margin-top: (@index * 1px) !important;
}
.mb-@{index}px {
margin-bottom: (@index * 1px) !important;
}
.pr-@{index}px {
padding-right: (@index * 1px) !important;
}
.pl-@{index}px {
padding-left: (@index * 1px) !important;
}
.pt-@{index}px {
padding-top: (@index * 1px) !important;
}
.pb-@{index}px {
padding-bottom: (@index * 1px) !important;
}
// 一定需要注意xu格式操作符中间要有空格，否则会失效 @index -1 => @index - 1
.for-loop-px(@index - 1);
}
.for-loop-px(200);
.primary-color {
color: @primary-color;
}
.error-color {
color: @error-color;
}
.success-color {
color: @success-color;
}
