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;
// @hoverColor: #b81c24; //链接/按钮悬停
// @aideYellow: #fbc02d; //辅助色1
// @aideBlue: #03a9f4; //辅助色2#409EFF
// @deepBlack: #282828; //最深色
// @grayColor: #8c8c8c; //灰色
// @successColor: #00c07c; //成功提示
// @errorColor: #da3947; //错误提示
// @textColor1: #282828; //一级文字
// @textColor2: #595959; //二级文字
// @textColor3: #8c8c8c; //三级文字
// @placeholderColor: #bfbfbf; //输入框空状态文字
// @borderColor: #d9d9d9; //一级背景
// @borderColor2: #ebeef5; //边框颜色
// @bgGray: #fafafa; //背景
// @bgWhite: #fff; //页面背景
// @bgTransparent: transparent; //透明
// //胡立国添加fwForm使用颜色begin
// @fwFormColor: #f52323; //表单主题颜色
// @inputBorder: #bfbfbf; //input输入框边框
// @inputFocus: #409eff; //点击input颜色
// @biaotou: #ccebf8; //表头颜色
// //胡立国添加fwForm使用颜色end
// @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; //用于同区内次间距
// @padding8: 8px; //用于同区内小间距，也可是4px
// @padding7: 7px;
// @padding4: 4px; //用于同区内小间距

// .main-wraper {
//     padding: 0 @padding24;
// }

// .move-right {
//     float: right;
// }

// .page-title {
//     //页面大标题
//     padding: 0 0 24px 0;
//     border-bottom: 1px solid #d8d8d8;
//     font-size: 30px;
//     color: #282828;
//     font-weight: 700;
// }

// /*tab切换*/
// .conditionWrapper {
//     margin-bottom: 0 !important;
//     border-bottom: 1px solid @borderColor;
// }

// .conditionBox {
//     margin-bottom: -1px;
// }

// .condition {
//     width: 114px;
//     float: left;
//     margin-right: 3px;
//     line-height: 40px;
//     border: 1px solid @borderColor;
//     border-bottom: none;
//     border-radius: 4px 4px 0 0;
//     font-size: 14px;
//     text-align: center;
//     color: #666666;
//     cursor: pointer;
// }

// .condition.active {
//     color: @themeColor;
//     background-color: @bgGray;
// }

// .main-wraper .el-dropdown-link {
//     cursor: pointer;
//     color: @themeColor;
// }

// .a-link {
//     color: @themeColor;
//     cursor: pointer;
// }

// .el-table th {
//     background-color: @bgGray;
// }

// // table边框
// .el-table td,
// .el-table th.is-leaf {
//     border-bottom: 1px solid #c9c9c9;
//     //border-bottom: 1px solid @borderColor;
// }

// .el-table--border td,
// .el-table--border th,
// .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
//     border-right: 1px solid #c9c9c9;
// }

// .el-table--border,
// .el-table--group {
//     border: 1px solid #c9c9c9;
//     border-right: none;
//     border-bottom: none;
// }

// .el-table--border::after,
// .el-table--group::after,
// .el-table::before {
//     background-color: #c9c9c9;
// }

// /**  el-form  **/
// .df-form {
//     .df-form-title {
//         font-size: 24px;
//         letter-spacing: 3px;
//         color: @textColor1;
//         padding: 10px 0 5px 50px;
//         text-align: left;
//         border-bottom: 2px solid @borderColor;
//         margin: 0 20px 15px 20px;
//     }

//     table {
//         width: 80%;
//         margin: auto;
//         border-collapse: collapse;
//         height: 30px;
//         line-height: 30px;
//         border: 1px solid #fff;
//     }

//     td {
//         border: 1px solid #fff;
//         text-align: center;
//     }

//     .td-bg-color {
//         background-color: @bgGray;
//     }

//     .td-bg-color.is-required:before {
//         content: "*";
//         color: #f56c6c;
//         margin-right: 4px;
//     }

//     .td-w-1 {
//         width: 10%;
//     }

//     .td-w-2 {
//         width: 20%;
//     }

//     .td-w-3 {
//         width: 30%;
//     }

//     .td-w-4 {
//         width: 40%;
//     }

//     .td-w-5 {
//         width: 50%;
//     }

//     .td-w-6 {
//         width: 60%;
//     }

//     .td-w-7 {
//         width: 70%;
//     }

//     .td-w-8 {
//         width: 80%;
//     }

//     .td-w-9 {
//         width: 90%;
//     }

//     .td-w-10 {
//         width: 100%;
//     }

//     .el-form-item {
//         margin-bottom: unset;

//         .el-form-item__content {

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

//     .el-form-item__error {
//         position: absolute;
//         left: auto;
//         right: 0px;
//         top: 50%;
//         padding-top: 0px;
//         transform: translate(-10%, -50%);
//     }
// }

// /**时间选择el-time-picker添加禁用提示**/
// .myTimeTip {
//     width: 300px;
// }

// .myTimeTip .el-time-spinner__item.disabled {
//     position: relative;
// }

// .myTimeTip .el-time-spinner__item.disabled:after {
//     position: absolute;
//     padding-left: 3px;
//     color: #c0c4cc;
//     content: "(不可用)";
//     z-index: 2;
// }

.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;
}











/**
* **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;
}