// 主色
|
@main-color: #1A6FB8;
|
|
// 主色拓展
|
@main-color-1: #E8F8FF;
|
@main-color-2: #B6DDF1;
|
@main-color-3: #89C2E3;
|
@main-color-4: #5FA6D4;
|
@main-color-5: #3A8AC6;
|
|
@input-placeholder-color: rgba(0, 0, 0, 0.5); // Input
|
@divider-color: rgba(0, 0, 0, 10%); // Divider
|
@primary-color: @main-color; // 全局主色
|
@link-color: @main-color; // 链接色
|
@success-color: #00B42A; // 成功色
|
@warning-color: #FA8C16; // 警告色
|
@warning-bg-color: #fdf6e0; // 警告色背景
|
@error-color: #F53F3F; // 错误色
|
@font-size-base: 14px; // 主字号
|
@line-height-base: 1.5715;
|
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
|
@text-color: rgba(0, 0, 0, 0.85); // 主文本色
|
@text-color-secondary: rgba(0, 0, 0, 0.65); // 次文本色
|
@text-color-three: rgba(0, 0, 0, 0.5); // 次次文本色
|
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
|
@border-radius-base: 2px; // 组件/浮层圆角
|
@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); // 浮层阴影
|
|
@table-header-bg: #f2f3f5;
|
@table-row-hover-bg: #e6f7ff;
|
|
@loading-color: #1089ff; // 进行中
|
|
@bg-color: #f0f2f5; // 项目背景色
|
|
@tag-color: #fafafa; // 项目tag标签颜色
|
|
@mediaConfirm: #05aeae; // 项目司法确认相关颜色
|
|
@pageAboutMargin: 16px; // 页面基础边距
|
|
@pageUpDownMargin: 16px; // 页面上下边距
|
|
@pageMargin: 16px @pageAboutMargin; //页面上下左右边距
|
|
@navBarHeight: 44px; // navBar高度
|
@tabBarHeight: 48px; // tabBar高度
|
|
|
html,
|
body {
|
margin: 0;
|
padding: 0;
|
height: 100%;
|
width: 100%;
|
background-color: @common_bg_color;
|
// color: @common_level1_base_color;
|
.common_body_text_style;
|
font-size: 15px; // 添加全局默认字体大小
|
}
|
|
#root,
|
.public-cacheRoute {
|
height: 100%;
|
width: 100%;
|
}
|
|
// 钉钉ui组件样式修改
|
#root {
|
// spin
|
.public-spin {
|
background-color: @common_overlay_color;
|
z-index: 1005;
|
}
|
|
// SearchBar
|
.dtm-search-bar {
|
padding: 0 12px;
|
height: 60px;
|
}
|
|
.dtm-search-bar-input,
|
.dtm-search-bar-input .dtm-search-bar-synthetic-ph-container {
|
height: 36px;
|
background-color: #eaeced;
|
}
|
|
.dtm-search-bar-input .dtm-search-bar-value[type='search'] {
|
height: 36px;
|
.common_body_text_style;
|
}
|
|
.dtm-search-bar-input .dtm-search-bar-synthetic-ph {
|
height: 36px;
|
line-height: 36px;
|
}
|
|
.dtm-search-bar-input .dtm-search-bar-clear {
|
padding: 8px;
|
}
|
|
.dtm-search-bar-input .dtm-search-bar-synthetic-ph-icon {
|
vertical-align: -3px;
|
}
|
|
.dtm-search-bar-input .dtm-search-bar-synthetic-ph-placeholder {
|
.common_body_text_style;
|
vertical-align: inherit;
|
}
|
|
.dtm-search-bar-cancel {
|
.common_body_text_style;
|
color: @theme_primary1_color;
|
height: 60px;
|
line-height: 60px;
|
}
|
|
// empty
|
.dtm-empty-page {
|
top: 60%;
|
text-align: center;
|
transform: translate(-50%, -50%);
|
left: 50%;
|
}
|
|
.dtm-empty-page-inline {
|
transform: translate(0, 0);
|
top: 0;
|
left: 0;
|
}
|
|
.dtm-empty-page-title {
|
font-size: 17px;
|
line-height: 24px;
|
}
|
|
.dtm-empty-page-content {
|
bottom: 0;
|
padding: 0;
|
}
|
|
// List.Item搭配picker使用选择后值的颜色
|
.dtm-list-item .dtm-list-line .dtm-list-extra {
|
color: @common_level1_base_color;
|
max-width: 145px;
|
font-size: 16px !important;
|
line-height: 24px !important;
|
}
|
|
//选择框文本
|
.dtm-form-item-default-label {
|
// width: 208px !important;
|
}
|
|
.form-picker {
|
width: 72px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.dtm-picker-col-item {
|
font-size: 14px !important;
|
}
|
|
.dtm-picker-col-item-selected {
|
font-size: 16px !important;
|
}
|
|
.dtm-list {
|
height: 100%;
|
}
|
|
.dtm-list-body {
|
height: 100%;
|
}
|
|
.text_align_l {
|
text-align: left;
|
}
|
|
.text_align_r {
|
text-align: right;
|
}
|
|
.dtm-select-default-item .dtm-list-content {
|
text-align: right;
|
}
|
|
.dtm-list-content {
|
font-size: 15px;
|
}
|
|
.require-red {
|
color: #e41100;
|
}
|
|
.Picker-required-list {
|
padding-left: 0;
|
// margin-left: 16px;
|
}
|
|
.Picker-required {
|
padding-left: 16px;
|
}
|
|
.Picker-required:before {
|
position: absolute;
|
display: inline-block;
|
color: var(--theme_danger1_color, #ff5219);
|
font-size: 14px;
|
font-family: SimSun, sans-serif;
|
line-height: 1;
|
content: '*';
|
left: 8px;
|
top: 16px;
|
height: 10px;
|
}
|
|
.form-picker-defaultStyle:before {
|
top: 26px !important;
|
}
|
|
.form-picker-defaultStyleDate:before {
|
top: 15px !important;
|
}
|
|
// 多行输入框
|
textarea {
|
font-size: 15px;
|
line-height: 23px;
|
font-family: inherit;
|
}
|
|
// input,select
|
.dtm-input-item-input {
|
font-size: 15px;
|
line-height: 23px;
|
}
|
|
// DatePicker组件修改
|
.dtm-date-picker-form-inner-node-content {
|
text-align: right;
|
}
|
|
.dtm-form .dtm-select .dtm-list-item.dtm-select-default-item {
|
min-height: 46px;
|
padding-left: 0;
|
}
|
}
|
|
// DatePicker
|
.dtm-picker-popup-mask,
|
.dtm-picker-popup-wrap {
|
z-index: 1002;
|
}
|
|
// 字母指示IndexBar
|
.dtm-indexBar-sticky .dtm-indexBar-anchor-title {
|
margin-bottom: 8px;
|
// display: none;
|
}
|
|
html .dtm-list-body :not(:last-child) .dtm-list-line:not(.dtm-list-line-hide-divider)::after {
|
background-color: #ffffff !important;
|
}
|
|
// modal.alert弹窗
|
.dtm-modal-wrap,
|
.dtm-modal-mask {
|
z-index: 1002;
|
}
|
|
//
|
|
h4 {
|
margin: 0;
|
font-size: 16px;
|
line-height: 24px;
|
font-weight: 600;
|
}
|
|
h5 {
|
margin: 0;
|
.common_body_text_style;
|
font-weight: 600;
|
}
|
|
.h6 {
|
font-size: 20px;
|
line-height: 28px;
|
font-weight: 600;
|
}
|
|
.h7 {
|
font-size: 16px;
|
line-height: 25px;
|
font-weight: 600;
|
}
|
|
::-webkit-scrollbar {
|
display: none;
|
}
|
|
pre {
|
font-family: none;
|
white-space: pre-wrap;
|
word-wrap: break-word;
|
margin: 0;
|
}
|
|
.public_body_text_style_bold {
|
.common_body_text_style;
|
font-weight: 600;
|
}
|
|
// 文本省略
|
.ellipsis-text-1 {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.public-space {
|
height: 8px;
|
background: #f2f2f2;
|
}
|
|
// 彩色tag 圆角2px
|
.public-tag {
|
font-size: 12px;
|
line-height: 20px;
|
padding: 0 4px;
|
border-radius: 2px;
|
color: @common_bg_z1_color;
|
display: inline-block;
|
|
&-red {
|
background-color: #d1423e;
|
}
|
|
&-blue {
|
background-color: #007fff;
|
}
|
|
&-blue2 {
|
color: @theme_primary1_color;
|
background-color: #e6f7ff;
|
}
|
|
&-green {
|
background-color: #009d3b;
|
}
|
|
&-green2 {
|
border: 0.5px solid #52c41a;
|
color: #52c41a;
|
}
|
|
&-green3 {
|
border: 0.5px solid #05aeae;
|
color: #05aeae;
|
}
|
|
&-organ {
|
background-color: #fff2e6;
|
color: #ff5500;
|
}
|
|
&-brown {
|
border: 0.5px solid #552719;
|
color: #552719;
|
}
|
}
|
|
// 类型单色tag 圆角4px
|
.public-tag2 {
|
font-size: 12px;
|
line-height: 20px;
|
color: #879aab;
|
padding: 0 4px;
|
background-color: #edeef0;
|
border-radius: 4px;
|
display: inline-block;
|
|
&-red {
|
color: #ff4d4f;
|
background-color: rgba(255, 77, 79, 0.16);
|
}
|
|
&-organ {
|
color: @common_bg_z1_color;
|
background-color: rgba(255, 146, 0, 0.48);
|
}
|
|
&-organ2 {
|
color: rgba(255, 146, 0, 1);
|
background-color: rgba(255, 146, 0, 0.24);
|
}
|
|
&-organ3 {
|
color: #ff5b1f;
|
background-color: #ffe7d8;
|
}
|
|
&-blue {
|
color: @common_bg_z1_color;
|
background-color: #007fff;
|
}
|
|
&-blue3 {
|
color: @common_text_blue1_color;
|
background-color: rgba(0, 127, 255, 0.12);
|
}
|
|
&-green {
|
color: #009d3b;
|
background-color: rgba(0, 176, 66, 0.12);
|
}
|
}
|
|
// 必填tag
|
.public-tag4 {
|
display: inline-block;
|
background: #edeef0;
|
color: #879aab;
|
font-size: 12px;
|
border-radius: 4px;
|
padding: 0 4px;
|
line-height: 18px;
|
height: 18px;
|
}
|
|
// 字体和边框变色
|
.public-tag5 {
|
border-radius: 15px;
|
padding: 4px 8px;
|
|
&-red {
|
color: #ff4d4f;
|
border: 1px solid #ff4d4f;
|
}
|
|
&-organ {
|
color: @common_bg_z1_color;
|
border: 1px solid @common_bg_z1_color;
|
}
|
|
&-organ2 {
|
color: rgba(255, 146, 0, 1);
|
border: 1px solid rgba(255, 146, 0, 1);
|
}
|
|
&-blue {
|
color: @main-color;
|
border: 1px solid @main-color;
|
}
|
|
&-green {
|
color: rgba(0, 176, 66, 1);
|
border: 1px solid rgba(0, 176, 66, 1);
|
}
|
|
&-grey {
|
color: rgba(23, 26, 29, 0.24);
|
border: 1px solid rgba(23, 26, 29, 0.24);
|
}
|
}
|
|
.public-tag6 {
|
border-radius: 10px;
|
padding: 2px 8px;
|
}
|
|
// border-radius=2
|
.public-tag7 {
|
border-radius: 2px;
|
font-size: 14px;
|
padding: 3px 8px;
|
color: rgba(23, 26, 29, 0.6);
|
border: 1px solid rgba(126, 134, 142, 0.16);
|
}
|
|
// 字体左侧border
|
.public-rightBorder {
|
position: relative;
|
margin-left: 13px;
|
|
&::before {
|
content: '';
|
position: absolute;
|
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
height: 14px;
|
top: 50%;
|
margin-top: -7px;
|
left: -7px;
|
}
|
}
|
|
// icon样式
|
.public-icon {
|
display: flex;
|
}
|
|
// 竖直分割线
|
.public-split {
|
height: 14px;
|
width: 1px;
|
margin: 0 8px;
|
background-color: @common_line_hard_color;
|
}
|
|
// 二次确认弹窗样式
|
.confirmModal {
|
&-title {
|
font-size: 16px;
|
line-height: 24px;
|
font-weight: 600;
|
}
|
|
&-subtitle {
|
font-size: 14px;
|
line-height: 20px;
|
color: @common_level2_base_color;
|
}
|
}
|
|
// 颜色
|
.public-search-color,
|
.public-color {
|
color: @theme_primary1_color;
|
}
|
|
.public-success-color {
|
color: @common_green1_color;
|
}
|
|
.public-fail-color {
|
color: @common_red1_color;
|
}
|
|
// 操作弹窗底部操作按钮样式
|
.myModal {
|
&-action {
|
border-top: 1px solid @common_line_light_color;
|
display: flex;
|
|
&-item1,
|
&-item2 {
|
flex: 1;
|
padding: 12px 0;
|
text-align: center;
|
font-size: 16px;
|
}
|
|
&-item2 {
|
color: @theme_primary1_color;
|
border-left: 1px solid @common_line_light_color;
|
}
|
}
|
}
|
|
.head-tip-blue {
|
background: #007fff;
|
width: 4px;
|
height: 14px;
|
display: inline-block;
|
margin-right: 8px;
|
}
|
|
// empty
|
.public-empty {
|
position: fixed;
|
top: 60%;
|
text-align: center;
|
transform: translate(-50%, -50%);
|
left: 50%;
|
margin-top: 90px;
|
width: 400px;
|
max-width: 300px;
|
}
|
|
// 白底次一级按钮
|
.public-btn {
|
&-danger {
|
color: @theme_danger1_color;
|
border: 1px solid @theme_danger1_color;
|
background-color: @common_bg_z1_color;
|
|
&:hover,
|
&:focus {
|
color: @theme_danger1_color;
|
}
|
|
&:hover::after {
|
background-color: transparent;
|
}
|
}
|
|
&-primary {
|
color: @theme_primary1_color;
|
border: 1px solid @theme_primary1_color;
|
background-color: @common_bg_z1_color;
|
|
&:hover,
|
&:focus {
|
color: @theme_primary1_color;
|
}
|
|
&:hover::after {
|
background-color: transparent;
|
}
|
}
|
}
|
|
// radio
|
.public-radio {
|
height: 18px;
|
width: 18px;
|
border-radius: 50%;
|
border: 2px solid @common_line_hard_color;
|
|
&-active {
|
border-color: @theme_primary1_color;
|
background-color: @theme_primary1_color;
|
color: @common_bg_z1_color;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
}
|
}
|
|
// empty 样式
|
.dtm-empty-page-button {
|
margin-top: 0px !important;
|
}
|
|
.institutions-add {
|
&-form {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
&-main {
|
height: calc(100% - 44px);
|
}
|
|
&-item {
|
flex: 1;
|
overflow: hidden;
|
margin-top: 8px;
|
|
&-button {
|
padding: 12px 16px;
|
background-color: #fff;
|
}
|
}
|
}
|
|
.dtm-list-content {
|
transform: translateY(20%);
|
}
|
}
|
|
.dtm-input-item-desktop-input {
|
border: 0px !important;
|
outline: none;
|
border: 0 !important;
|
padding: 0 !important;
|
}
|
|
.dtm-textarea-item-desktop {
|
border: 0px !important;
|
}
|
