/* 改变系统主题色变量 ——*/ $--theme-color: #2761ff; /*主题颜色(即首页导航栏颜色)——#2761ff*/ $--theme-color-active: #1f4ecc; /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/ /* 改变element组件主题色变量 ——*/ $--color-primary: #1677ff; /*主题颜色 默认——#409EFF*/ $--color-primary-light-3: #4096ff !default; /* mix($--color-white, $--color-primary, 30%) */ $--color-primary-light-5: #bbdaff !default; /* mix($--color-white, $--color-primary, 50%) */ $--color-primary-light-7: #cce3ff !default; /* mix($--color-white, $--color-primary, 70%) */ $--color-primary-light-8: #ddecff !default; /* mix($--color-white, $--color-primary, 80%) */ $--color-primary-light-9: #f0f7ff !default; /* mix($--color-white, $--color-primary, 90%) */ $--color-success: #08b767; /*成功颜色——#67c23a*/ $--color-warning: #faad14; /*警告颜色——#e6a23c*/ $--color-danger: #ff4d4f; /*危险颜色——#f56c6c*/ $--color-info: #595959; /*信息颜色——#909399*/ $--color-text-primary: rgba(0, 0, 0, 0.88); /*主要文字颜色——#303133*/ $--color-text-regular: rgba(0, 0, 0, 0.65); /*常规文字颜色——#606266*/ $--color-text-secondary: rgba(0, 0, 0, 0.45); /*次要文字颜色——#909399*/ $--color-text-placeholder: rgba(0, 0, 0, 0.25); /*占位文字颜色——#c0c4cc*/ $--input-disabled-color: rgba(0, 0, 0, 0.55); /*占位文字颜色——#c0c4cc*/ $--border-color-base: #e8e8ea; /*一级边框颜色——#dcdfe6*/ $--border-color-light: #eeeef0; /*二级边框颜色——#e4e7ed*/ $--border-color-lighter: #f0f1f3; /*三级边框颜色——#ebeef5*/ $--border-color-extra-light: #f4f4f4; /*四级边框颜色——#f2f6fc*/ $--color-white: #ffffff; /*基础白色——#FFFFFF*/ $--color-black: #000000; /*基础黑色——#000000*/ $--fill-base: #f0f1f3 !default; $--background-color-base: #f2f3f5; /*基础背景色——#F5F7FA*/ $--background-color-secondary: #f0f2f5; /*第二基础背景色——#F0F2F5*/ $--color-secondary: #dfebfc; $--purple-color: rgb(169, 102, 245); $--pink-color: rgb(255, 119, 119); /* 左侧树宽度设置 */ $--aside-width: 230px; $--border-color-hover: #4096ff !default; // 悬浮边框颜色 --#C0C4CC $--select-option-hover-background: #e6f4ff !default; // 悬浮选项背景色 --#f5f7fa $--input-placeholder-color: rgba(0, 0, 0, 0.25) !default; // 输入框占位符颜色 --#C0C4CC $--box-shadow-light: 0px 2px 8px 0px rgba(0, 0, 0, 0.06) !default; // 轻微阴影 $--box-shadow-hover-light: 0px 2px 8px 0px rgba(22, 119, 255, 0.2) !default; // 选中阴影 $--border-radius-base: 4px !default; $--input-border-radius: $--border-radius-base !default; $--pagination-button-height: 32px !default; /* 自定义主题色变量 */ .primaryColor { background-color: $--color-primary; } //主要的一步: :export { aside_width: $--aside-width; } // 表单设计页面主题颜色 $--form-design-active-color: #409eff; $base-color-black: $--color-black; $base-color-white: $--color-white; $base-color-blue: $--color-primary; $base-color-green: #67c23a !default; $base-color-gray: #909399 !default; $base-color-orange: #cf9236 !default; $base-color-red: #dd6161 !default; $base-color: #333333; $base-border-color: #ebebeb; //顶部导航高 $base-header-height: 60px; $base-collapse-bg: #f6f6f6; // 表格相关配置 $--table-border-color: #eeeef0 !default; // 表格边框颜色 $--table-border: 1px solid $--table-border-color !default; // 表格边框 $--table-header-background-color: #f9f9f9 !default; // 表格表头背景颜色 $--table-header-font-color: rgba(0, 0, 0, 0.85) !default; // 表格表头字体颜色 $--table-font-color: rgba(0, 0, 0, 0.65) !default; // 表格字体颜色 // 输入框相关配置 $--input-focus-border: #4096ff !default; // 输入框聚焦边框颜色 /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import '~element-ui/packages/theme-chalk/src/index'; @mixin base-scrollbar { &::-webkit-scrollbar { width: 13px; height: 13px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); background-clip: padding-box; border: 3px solid transparent; border-radius: 7px; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-track:hover { background-color: #f8fafc; } } //弹窗样式 .manage-dialog__wrap { overflow: unset !important; .el-dialog { width: 70%; height: 72%; .el-dialog__header { height: 24px; padding: 10px 0; margin: 0 20px; line-height: 24px; border-bottom: 1px solid #ebeef5; } .el-dialog__title { font-size: 16px; color: #333; } .el-dialog__headerbtn { top: 14px; } .el-dialog__body { height: calc(100% - 120px); padding-top: 10px; padding-bottom: 10px; overflow: auto; font-size: 12px; .el-main { padding-top: 0; padding-bottom: 0; } } .el-input__inner { font-size: 12px; } } .el-dialog__footer { padding-top: 0; } .dialog-footer { text-align: center; } } @include b(input) { @include when(disabled) { .el-input__inner { &::placeholder { color: $--input-disabled-color; } } } } .manage-dialog__wrap { @media (max-width: 1024px) { .el-dialog { width: 100%; height: 90%; margin-top: 4vh !important; } } @media (min-width: 1152px) and (max-width: 1400px) { .el-dialog { width: 90%; } } } .el-dialog__footer { text-align: center; } // htTable顶部按钮样式 .ht-table { .el-radio { .el-radio__label { display: none; } } } .tooltip-wrapper { position: relative; top: 10px; display: inline-block; padding: 4px 6px; } .tooltip-wrapper::before { position: absolute; top: -10px; left: 50%; content: ''; border-color: transparent; border-style: solid; border-width: 4px 6px 0 6px; border-top-color: black; opacity: 1; transform: translateX(-50%); } .msg-log-icon { position: relative; } .log-id { padding-top: 10px; color: #333; } .msg-log-content { position: absolute; top: -5px; left: 50%; min-width: 80px; padding: 4px 2px; color: #fff; text-align: center; pointer-events: auto; background: black; border-radius: 5px; opacity: 1; transform: translateX(-50%) translateY(-100%); } .tooltip-wrapper:hover::after, .tooltip-wrapper:hover::before { opacity: 1; } /* 右侧 */ .tooltip-wrapper:hover[position='right']::before { top: 15%; left: 8%; margin-left: -3px; transform: translateY(-50%) rotate(-90deg); } .tooltip-wrapper[position='right']>.msg-log-content { top: 50%; left: 100%; margin-left: 10px; transform: translateY(-50%); } .import-export__wrap { .el-dropdown { padding-right: 14px; font-size: 14px; } } .table-header-btn__wrap { .clear-all-btn { margin-top: 4px; } } //无数据时显示图片样式 .el-tree__empty-block { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; .no-data-text { margin: 0; } .el-image__inner { width: 380px; } } //全局表格样式 .el-table__fixed { z-index: 998; } .el-table { // border: 0; .el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__cell { z-index: auto; padding: 16px 0; background: $--table-header-background-color; .cell { font-size: 14px; font-weight: bold; color: $--table-header-font-color; } } } .el-table__body { .el-table__cell { padding: 16px 0; .cell { font-size: 14px; color: $--table-font-color; .el-button { font-size: 14px; } } } .el-table__row:nth-child(2n) { background: $--table-header-background-color; } } th.el-table__cell { font-size: 14px; color: #333; background: #f4f4f4; } } p, ul, li { padding: 0; margin: 0; } // 子表中 radio和checkbox对齐样式 .xh_table { .ht-form-inputs__block { .el-checkbox-group, .el-radio-group { text-align: left; } } } .ht-selector__table { &::before { height: 0; } } .follow-theme-background-color { background-color: #409eff !important; } .follow-theme-color { color: #409eff !important; } //表格校验样式 .form-table__container { .form-table_box { .xh_table { .inputs { div[aria-invalid='true'] { padding: 8px 0; } div[aria-invalid='true']+.field-tail__wrap { position: absolute; left: 10px; margin-top: 36px; text-align: left; } } } } } .button-theme-style { .el-select-dropdown__item.selected { color: unset; } .el-select-dropdown__item:nth-child(2) { color: $--color-primary; } .el-select-dropdown__item:nth-child(3) { color: $--color-success; } .el-select-dropdown__item:nth-child(4) { color: #ccc; } .el-select-dropdown__item:nth-child(5) { color: $--color-warning; } .el-select-dropdown__item:nth-child(6) { color: $--color-danger; } } .el-table__fixed { z-index: 999; } // 全局下拉更多 .template-opterate-item { display: inline-block; span { padding: 0; margin-right: 6px; color: $--color-primary; text-decoration: none; cursor: pointer; } span:hover { border-bottom: 1px solid $--color-primary; } } .template-opterate-dropdown { border: 0.8px solid $--border-color-base; border-color: $--border-color-base; border-radius: 4px; .el-dropdown__caret-button.el-button--default::before { background: none; } .el-dropdown__caret-button { padding-left: 0px; } .template-dropdown-item { color: $--color-text-regular; background: transparent; border-radius: 4px; } .template-dropdown-item span { padding: 7px 4px 7px 6px !important; } .el-button { color: $--color-text-regular; background: transparent; border: none; } } .template-opterate-dropdown:hover { border: 0.8px solid $--color-primary; border-radius: 4px; .template-dropdown-item { color: $--color-primary; cursor: default; background: $--select-option-hover-background; } .el-button { color: $--color-primary; background: $--select-option-hover-background; } .template-dropdown .template-dropdown-item span { padding: 7px; } } .el-collapse-item__header { height: auto; } .preview-form-container, .custom-form { // 全局栅格布局 .el-row--flex { margin-bottom: 0 !important; } // 全局表格布局 .el-main { padding: 0px 20px !important; } // 全局折叠面板 .el-collapse .el-collapse-item__header { margin-bottom: 0 !important; } // 全局金额和比率 .ht-form-inputs__block.has-company-box { line-height: 32px !important; } .ht-form-inputs__block.has-company-box>.el-input-number+span { margin-left: 6px; } } // 全局下拉列表 .el-dropdown-menu--mini .el-dropdown-menu__item { line-height: 32px; } .el-dropdown-menu.el-dropdown-menu--mini { .el-dropdown-menu__item::after { display: block; width: 100%; height: 1px; margin: 0 auto; content: ''; border-bottom: 1px solid #e6e6e6; } .el-dropdown-menu__item:last-of-type::after { display: none; content: ''; } } // 表单相关 .el-input__inner { padding-left: 11px; cursor: text; // &:focus { // box-shadow: 0px 0px 0px 1px rgba(22, 119, 255, 0.2); // } } .el-input-group { .el-input__inner { border-radius: $--input-border-radius 0 0 $--input-border-radius; } .el-input-group__append { border-radius: 0 $--input-border-radius $--input-border-radius 0; } } .el-upload-list__item { &:hover { background-color: #e6f4ff; } } // 文本域 @include b(textarea) { @include e(inner) { &::placeholder { font-family: 'Arial'; } } } // 步骤条 @include b(step) { @include e(head) { @include when(process) { color: $--color-white; border-color: $--color-primary; @include e(icon) { background-color: $--color-primary; } } } @include e(title) { @include when(process) { font-weight: bold; color: $--color-primary; } } } // 按钮 @mixin button-plain($color) { color: $color; background: $--color-white; border-color: $color; &:hover, &:focus { color: $color; background: mix($--color-white, $color, 90%); border-color: mix($--color-white, $color, 60%); } &:active { color: $color; background: mix($--color-white, $color, 90%); border-color: mix($--color-white, $color, 60%); outline: none; } } @include b(button) { &+& { margin-left: 10px; } @include m(primary) { @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color ); } @include m(success) { @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color ); } @include m(warning) { @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color ); } @include m(danger) { @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color ); } @include m(info) { @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color ); } } // 分页 @include b(pagination) { .el-select .el-input { .el-input__inner { height: 32px !important; padding-right: 25px; border-radius: $--pagination-border-radius; } } // .btn-prev, // .btn-next, // .el-pager li { // min-width: 32px; // height: 32px; // margin: 0 4px; // color: $--color-text-primary; // background-color: $--color-white; // border: 1px solid #d9d9d9; // border-radius: $--border-radius-base; // } // .el-pager li.active + li { // border-left: 1px; // } // .el-pager li:not(.disabled) { // &:hover { // color: $--color-primary; // border-color: $--color-primary; // } // &.active { // color: $--color-primary; // background-color: $--color-white; // border-color: $--color-primary; // } // } @include when(background) { .btn-prev, .btn-next, .el-pager li { min-width: 32px; height: 32px; margin: 0 4px; color: $--color-text-primary; background-color: $--color-white; border: 1px solid #d9d9d9; border-radius: $--border-radius-base; } .el-pager li:not(.disabled) { &:hover { color: $--color-primary; border-color: $--color-primary; } &.active { color: $--color-primary; background-color: $--color-white; border-color: $--color-primary; } } } } //树组件 .treeCont .el-tree, .el-tree { color: $--color-text-primary; background: transparent; &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background: $--select-option-hover-background; } .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { background: $--color-primary !important; border-color: $--color-primary !important; } .el-checkbox__inner:hover { border-color: $--color-primary !important; } .el-checkbox__inner::after { border-color: #fff; } .el-tree-node__children { .el-tree-node { //&:not(:last-child)::after{ // content: ''; // display: block; // width: 1px; // height: calc(100% - 7px); // background: $--border-color-light; // position: absolute; // left: 31px; // top: 19px; //} //&::after{ // content: ''; // display: block; // width: 1px; // height: calc(100% - 7px); // background: $--border-color-light; // position: absolute; // left: 31px; // top: 19px; //} //&:has(.el-tree-node__children):empty{ // &::after{ // content: ''; // display: block; // width: 1px; // height: calc(100% - 7px); // background: $--border-color-light; // position: absolute; // left: 31px; // top: 19px; // } //} //&:has(.el-tree-node__children):not(.el-tree-node__children .el-tree-node){ // &::after{ // display: none; // } //} //&:first-child{ // label.el-checkbox::after{ // display: none; // } //} //label.el-checkbox::after{ // content: ''; // display: block; // width: 1px; // height: calc(100% - 7px); // background: $--border-color-light; // position: absolute; // left: 50%; // top: -11px; //} //label.el-checkbox.hideLine{ // &::after{ // content: ''; // display: none !important; // } //} //&:last-child{ // .el-tree-node__children{ // .el-tree-node{ // label.el-checkbox::after{ // content: ''; // display: block; // width: 1px; // height: 12px; // background: $--border-color-light; // position: absolute; // left: 50%; // } // //&:last-child{ // // label.el-checkbox::after{ // // content: ''; // // display: none; // // } // //} // } // } // label.el-checkbox::after{ // content: ''; // display: none; // } //} } } /* 树形结构节点添加连线 */ .el-tree-node { position: relative; .el-tree-node__content { height: 32px; padding-left: 0 !important; &>.el-tree-node__expand-icon { flex-shrink: 0; padding: 0; } .el-tree-node__expand-icon { display: inline-block; width: 24px; height: 32px; padding: 0; background: url(~@/assets/images/t-open.png) no-repeat; background-size: contain; &.expanded { background: url(~@/assets/images/t-close.png) no-repeat; background-size: contain; transform: none; } &::before { display: none; content: ''; } &.is-leaf { background: none; } } .el-tree-node__label { margin-left: 10px; } } &:last-child:before { height: 50px; } &.is-expanded { .el-tree-node__children { &:not(:empty):before { position: absolute; top: 22px; right: auto; bottom: 0px; left: 12px; width: 1px; height: calc(100% - 22px); content: ''; border-width: 1px; border-left: 1px solid $--border-color-light; } } } //&:after { // content: ""; // left: -4px; // position: absolute; // right: auto; // border-width: 1px; // border-top: 1px solid #BBBBBB; // height: 20px; // top: 24px; // width: 18px; //} } //&>.el-tree-node { // &>.el-tree-node__content{ // .el-tree-node__expand-icon{ // background: url(~@/assets/img/t-open.png); // background-size: contain; // } // } // // &::after { // border: 0px solid; // } //} .custom-tree-node { box-sizing: border-box; width: calc(100% - 50px); img { height: 10px; margin-right: 5px; object-fit: contain; } i { margin-right: 5px; font-size: 10px; } .tree-node { display: flex; align-items: center; } .no-ellipsis { box-sizing: border-box; width: 100%; padding-right: 5px; .tree-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .show-ellipsis { box-sizing: border-box; width: calc(100% - 29px); padding-right: 5px; &:not(:has(.tree-node)) { display: flex; align-items: center; } .tree-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .tree-btn { font-weight: bold; visibility: hidden; .t-edit { width: 14px; height: 14px; margin-right: 5px; } .t-more { width: 14px; height: 14px; } } &:hover .tree-btn { visibility: visible; } } .el-tree-node__children { padding-left: 12px; } } .el-container.content-layout .el-header.content-layout__header { height: 46px !important; padding: 0; } //tabs组件 .el-tabs.el-tabs--border-card, .el-tabs { &>.el-tabs__header.is-top { height: 46px !important; line-height: 46px !important; background: transparent; } .el-tabs__nav-wrap { padding: 0 20px; .el-tabs__active-bar.is-top { display: none; } .el-tabs__nav.is-top { display: flex; align-items: center; border: none; } .el-tabs__item.is-top { box-sizing: border-box; height: 46px; padding: 0 15px; line-height: 46px; border-right: none; border-left: none; &.is-active { color: $--color-primary; border-bottom: 3px solid $--color-primary; .el-link { color: $--color-primary; } } } .el-tabs__nav.is-left { .el-tabs__active-bar { width: 3px; background-color: $--color-primary; } } .el-tabs__item.is-left { box-sizing: border-box; height: 46px; padding: 0 15px; line-height: 46px; &.is-active { color: $--color-primary; } } } } //侧边树 .content-layout__aside.el-aside .process-classify .ht-tree { .el-tree { color: $--color-text-primary; } .expanded { color: $--color-text-primary; } .el-tree-node__content { &:hover { color: $--color-text-primary; background: $--background-color-base; } svg { width: 12px; height: 10px; } } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: $--select-option-hover-background; border-radius: 0; .span-ellipsis { span, i { color: $--color-text-primary; } } } } //卡片布局 html body .card-mode .card-content .card-item__wrap { &:hover { border: 1px solid $--color-primary; box-shadow: 0px 0px 4px $--color-primary; } } .card-todo .card-todo__wrap .card-content .card-item__wrap .card-item-content .item-bottom .copy-id { color: $--color-primary !important; } .top_btn_col { .el-dropdown .el-button-group { display: flex !important; align-items: baseline; .el-button { padding: 7px 0 !important; } .el-upload.el-upload--text { span { height: auto !important; line-height: 0px !important; } } } }