simulation-front/src/assets/common/css/theme.less

//header相关
// @headerHeight: 65px;
// @headerBg: #164489;
// @docColor: #f52323;

// 蓝湖UI规范 颜色、字体大小 less变量设置
@themeColor: #3397FF; //链接/按钮 #409EFF#DA3947
@greenA: #67C239;
@greenBgA: #F0F9EA;
@orangeA: #CB7C2C;
@orangeBgA: #FFE9CE;
@lightBlueA: #2CA8CB;
@lightBlueBgA: #E8F9FE;
@purpleA: #7B2CCB;
@purpleBgA: #F3ECFD;
// @fontSize30: 30px; //一般是网站最重要的标题，也可以用于阿拉伯数字等
// @fontSize24: 24px; //一般用于页面标题
// @fontSize16: 16px; //用于二级页面标题或者阅读文段
// @fontSize14: 14px; //用于表头，表单列表，导航，输入框
// @fontSize12: 12px; //用于说明性文字，次要文字信息

// @padding80: 80px; //用于内容区距footer区的距离
// @padding40: 40px; //用于内容区大间距
// @padding24: 24px; //用于同区内中间距
// @padding20: 20px;
// @padding16: 16px; //用于同区内次间距,也可是12px
// @padding12: 12px; //用于同区内次间距
@padding10: 10px; //用于同区内次间距

.padBot60 {
    padding-bottom: 60px;
}

.marRt0 {
    margin-right: 0;
}

.searchLayoutBox {
    padding: 22px 36px 0;
    border: 1px solid #dfdfdf;
    box-shadow: 0 4px 9px #dcdcdc;
    border-radius: 3px;
}

.inputBox {
    .label {
        display: inline-block;
        min-width: 60px;
        margin-right: 20px;
        line-height: 32px;
        text-align: right;
    }
}

/deep/ .el-input {
    width: 230px;
}

/deep/ .el-pagination__editor.el-input {
    width: 50px;
}

.el-table {
    // .el-table__cell {
    //     padding: 0;
    // }

    .elIcon {
        margin-right: 20px;
        font-size: 16px;
        color: @themeColor;
        cursor: pointer;

        &:last-child {
            margin-right: 0;
        }
    }
}

.flexBox {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.cursor {
    cursor: pointer;
}

.el-dialog {

    .el-input,
    .el-select {
        width: 100%;

        /deep/ .el-input {
            width: 100%;
        }
    }
}

.titlePanelBor {
    padding-left: 9px;
    border-left: 6px solid @themeColor;
    font-weight: bold;
    line-height: 1.08;
    color: @themeColor;
}

/deep/ .el-checkbox {
    margin-right: 48px;
}

[class*=" my-icon-"],
[class^=my-icon-] {
    font-family: element-icons !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.themeColor {
    color: @themeColor;
}

.shadowBox {
    border: 1px solid #dfdfdf;
    padding: 12px 24px;
    box-shadow: 0 4px 9px #dcdcdc;
    border-radius: 3px;
}

.myTabsBox {
    position: relative;
    overflow: hidden;

    .addBtn {
        position: absolute;
        right: 40px;
        top: 45px;
    }

    .el-tabs {
        width: 285px;
        margin: 45px 40px 15px;
        color: @themeColor;

        .el-tabs__content {
            display: none;
        }

        .el-tabs__nav-scroll {
            padding-left: 25px;
            position: relative;

            &:before {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 25px;
                height: 1px;
                border-bottom: 1px solid @themeColor;
            }

            &:after {
                content: "";
                display: block;
                position: absolute;
                right: 0;
                bottom: 0;
                width: 60px;
                height: 1px;
                border-bottom: 1px solid @themeColor;
            }
        }
    }

    &.myTabsBoxThreeTabs {
        .el-tabs {
            width: 385px;
        }

        .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
            padding-left: 0;
        }

        .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item.is-active~.el-tabs__item {
            border-left-color: transparent;
        }

        // .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2).is-active {
        //     &.el-tabs__item:nth-child(3) {
        //         border-left-color: transparent;
        //     }
        // }

        .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
            padding-left: 20px;
        }
    }
}

.el-tabs--card>.el-tabs__header {
    border-bottom: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
}

.addBtn.disabled {
    &.el-button {
        background: #F5F7FA;
        border: 1px solid #DEE6F3;
        color: #BABABA;
    }
}

.el-range-editor.el-input__inner {
    padding: 0 10px;
}

.el-date-editor .el-range-separator {
    width: 6%;
}

.colorfulTable {
    /deep/ .el-table__body {
        .el-table__row:nth-child(2) {
            td:nth-child(2) {
                background-color: #c1db69;
            }

            td:nth-child(3) {
                background-color: #faf54a;
            }

            td:nth-child(4) {
                background-color: #ff9d33;
            }

            td:last-child {
                background-color: #f56c6c;
            }
        }
    }
}

// .elPopoverReport {
//     padding: 0;

//     .rowStyle {
//         margin: 0;
//     }
// }

.myIconPause {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid @themeColor;
    border-radius: 50%;

    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 5px;
        height: 5px;
        background-color: @themeColor;
        transform: translate(-2.5px, -2.5px);
    }
}

.dateSeparator {
    padding: 0 6px;
}

.dateRangeInput {
    width: 160px;
}

// /deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
//     content: "";
// }











/**
* **xx提供的UI优化代码
*/
// element 主题色
@--color-primary: #3397FF;
// @--font-path: '~element-ui/lib/theme-chalk/fonts';
// @import "~element-ui/packages/theme-chalk/src/index.scss";
@grayLine: #e5e5e5;
@lightColor: #3397FF;
@tableTitleBg: #f5f6fa;
@gray: #b2b2b2;
@color: #666666;
@grayBg: #cccccc;


.el-form-item__content {
    line-height: 32px;
}

.el-form-item__label {
    line-height: 32px;
    padding: 0 20px 0 0;
}

// elemen ui 表单 input样式更改
.el-input__inner {
    height: 32px;
    line-height: normal;
    border: 1px solid @grayLine;
}

.el-input__icon {
    line-height: 32px;
}

// elemen ui 表单 textarea样式更改
.el-textarea__inner {
    height: 80px;
    border: 1px solid @grayLine;
}

// elemen ui 表单 单选按钮样式更改
.el-radio__input {
    line-height: 16px;
}

.el-radio__inner {
    width: 16px;
    height: 16px;
    border: 1px solid @grayLine;
}

.el-radio__input.is-checked .el-radio__inner {
    background: transparent;
}

.el-radio__inner:after {
    width: 10px;
    height: 10px;
    background-color: @lightColor;
}

.el-radio__input.is-disabled .el-radio__inner {
    background-color: @tableTitleBg;
    border-color: #E5E5E5;
}

.el-radio__input.is-disabled .el-radio__inner {
    border-color: #E5E5E5;
    background-color: #F5F6Fa;
}

// elemen ui 表单 多选按钮样式更改
.el-checkbox-group {
    font-size: 12px;
}

.el-checkbox__inner {
    border: 1px solid @gray;
}

// elemen ui 表格样式更改
.el-table::before {
    background-color: @grayLine;
}

.el-table td {
    border-bottom: 1px solid @grayLine;
}

.el-table th {
    padding: 0;
    background-color: @tableTitleBg;
    border-bottom: none !important;
    color: @color;

    .cell {
        line-height: 40px;
        font-size: 12px;
    }
}

.el-table td {
    padding: 8px 0;
    font-size: 12px;
    height: 40px;
}

// .el-table tr:hover td {
//     background: #fff !important;
// }

.el-table .cell {
    overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
}

// table filer
.el-table-filter__list {
    max-height: 200px;
    overflow: auto;

    li {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        word-wrap: normal;
        line-height: 30px;
        font-size: 12px;
    }

    li:hover,
    .el-table-filter__list-item.is-active {
        background-color: @grayBg;
        color: @lightColor;
    }
}

// elemen ui 表单 划过 样式更改
.el-input__inner:hover,
.el-radio__inner:hover,
.el-textarea__inner:hover,
.el-checkbox__inner:hover,
.el-select .el-input__inner:hover {
    border: 1px solid @gray;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
    background: @grayBg;
}

/*按钮样式更改*/
//按钮最小宽度更改 默认按钮
.el-button {
    padding: 8px 15px;
    min-width: 88px;
    color: @color;
    border-color: @grayLine;
}

.el-button:focus {
    color: @color;
    border-color: @grayLine;
    background-color: #fff;
}

.el-button:hover,
.el-button:active {
    color: #fff;
    border-color: @grayLine;
    background-color: @gray;
}

// 蓝色朴素按钮
.el-button--primary.is-plain {
    background: #fff;
    border-color: @lightColor;
    color: @lightColor;
}

.el-button--primary.is-plain:active {
    background: @lightColor;
    border-color: @lightColor;
    color: #fff;
}

.el-button--primary.is-plain:focus {
    background: #fff;
    border-color: @lightColor;
    color: @lightColor;
}

.el-button--primary.is-plain:hover {
    background: @lightColor;
    border-color: @lightColor;
    color: #fff;
    ;
}

// 蓝色主要按钮
.el-button--primary {
    color: #fff;
    border-color: @lightColor;
}

.el-button--primary:hover,
.el-button--primary:active,
.el-button--primary:focus {
    color: #fff;
    border-color: @lightColor;
    background-color: @lightColor;
}

//.el-button--primary:hover, .el-button--primary:focus{background:@lightColor;}
//灰色按钮
.el-button--info.is-plain {
    background: #fff;
    border-color: @gray;
    color: #666;

    &:hover {
        color: #fff;
        background: @gray;
    }

    &:active {
        background: #a2a2a2;
        color: #fff;
    }
}

.el-button--primary.is-disabled.disabledBtn {
    color: #666;
    background: #f1f1f1;
    border: 1px solid #dedede;
    cursor: default;
}

// 禁用按钮
.el-button--info.is-plain.is-disabled,
.el-button--info.is-plain.is-disabled:hover,
.el-button--info.is-plain.is-disabled:focus,
.el-button--info.is-plain.is-disabled:active {
    color: @gray;
    background-color: @tableTitleBg;
    border-color: #e5e5e5;
}

// 文字按钮
.el-button--text {
    border-color: transparent;
    color: @lightColor;
    min-width: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.el-button--text:hover,
.el-button--text:active,
.el-button--text:focus {
    color: @lightColor;
    background-color: transparent;
    border-color: transparent;
}

.el-button--small {
    padding: 9px 15px;
}

//修改tab切换 样式
.el-tabs__item {
    width: 100px;
    text-align: center;
    padding: 0;
    color: @color;
}


.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: @grayLine;
}

.el-tabs--border-card {
    box-shadow: 0 0 0 0;
    -webkit-box-shadow: 0 0 0 0;
}

.el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2) {
    padding-left: 0 !important;
}

// 修改表单边框颜色（验证，focus）
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus {
    border-color: @grayLine;
}

.el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-input__inner:focus,
.el-form-item.is-success .el-textarea__inner,
.el-form-item.is-success .el-textarea__inner:focus {
    border-color: @grayLine;
}

.el-form-item.is-error .el-input__inner:hover,
.el-form-item.is-error .el-textarea__inner:hover,
s {
    border-color: @gray;
}

.el-form-item.is-success .el-input__inner:hover,
.el-form-item.is-success .el-textarea__inner:hover {
    border-color: @gray;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
    border-color: @grayLine;
}

//修改复选框字体颜色
.el-checkbox {
    color: @color;
    margin-right: 0;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: @color;
}

.el-message {
    top: 60px;
    min-width: 0;
    padding-right: 20px;
}

.el-message-box {
    width: 460px;
    padding: 5px 5px 20px 5px;

    .el-message-box__content {
        color: @color;
        padding: 20px 15px 25px;
    }

    .el-message-box__header {
        .el-message-box__title {
            font-size: 16px;
            color: @color;
        }

        .el-message-box__headerbtn {
            top: 12px;
        }
    }

    .el-message-box__message {
        p {
            word-break: break-all;
        }
    }
}

.el-message-box__btns button:nth-child(1) {
    margin-left: 10px;
    float: right;
}

.cancel-left {
    float: right;
    margin-left: 15px;
    font-size: 14px;
}

.size14 {
    font-size: 14px;
}

// dialog
.el-dialog__title {
    font-size: 16px;
    color: @color;
}

.el-dialog__body {
    padding: 20px 20px;
}

// 不加粗
.el-pagination {
    font-weight: normal;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

// loding 颜色
.el-upload .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.5);
}

.el-loading-spinner {
    .el-loading-text {
        color: #fff;
    }
}

.el-loading-spinner {
    i {
        color: #fff;
    }
}

.el-upload-list__item-name {
    margin-right: 110px;
}

/* tree划过选中样式 */
.el-tree .el-tree-node .el-tree-node__content {
    height: 30px;
    line-height: 30px;
}

.el-tree .el-tree-node__label {
    font-size: 12px;
}

.el-tree .el-tree-node[aria-disabled=true] {
    color: #ccc;
}

.el-tree-node__content:hover {
    background-color: transparent;
}

.el-tree-node:focus>.el-tree-node__content {
    background-color: transparent;
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: transparent;
    color: @lightColor;
}

.classify-select {
    .el-tree-node__content {
        cursor: default;
    }
}

//截图回显隐藏对勾图标
.el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none;
}

//抽屉弹框的标题样式修改
.el-drawer__header {
    font-size: 16px;
    color: @color;
}