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