// @mainBody : #439dc1;//主体色 // @background:#fff;//背景色 // @cheek: #dedede;//边框 //流程详情布局 .Demolition{ width: 100%; height: 100%; display: flex; justify-content: space-between; .Demolition-left{ width: 70%; height: 100%; .Demolition-left-top{ width: 100%; height: 65px; display: flex; justify-content: space-between; .Demolition-left-top-rigth{ .el-button{ width: 82px; height: 40px; border-radius: 12px; margin-top: 10px; padding: 0; font-size: 18px; color: #fff; background-color: #439dc1; border-color: #7aa2e200; } } } .Demolition-left-button{ width: 100%; height: calc(100% - 65px); background-color: #fff; border-radius: 20px; overflow: hidden; .Demolition-left-button-top{ height: 42px; box-sizing: border-box; padding: 9px; font-size: 16px; font-weight: 700; color: #167AA1; background-color: #fff; border-bottom: 2px solid #dedede; } .Demolition-left-button-buttom{ width: 100%; height: calc(100% - 42px); overflow: hidden; } .Demolition-left-button-file{ width: 100%; height: calc(100% - 42px); } } } .Demolition-rigth{ width: 29%; height: 100%; background-color: #fff; border-radius: 20px; overflow: hidden; } } //带背景色的按钮 .button-background .el-button{ width: 106px; height: 38px; background: #439dc1; color: #fff; border-radius: 12px; border: 0; &:focus{ width: 106px; height: 38px; background: #439dc1; color: #fff; border-radius: 12px; border: 0; } &:hover{ width: 106px; height: 38px; background: #439dc1; color: #fff; border-radius: 12px; border: 0; } } //不带背景色的按钮 .button-nobackgroubd .el-button { width: 106px; height: 38px; border-radius: 12px; border: 0; background-color: rgba(0,0,0,0); color: #439dc1; border: 1px solid #439dc1; } //搜索框 .search{ width: 100%; background-color: #fff; margin: 20px 0; border-radius: 24px; box-sizing: border-box; .search-top{ display: flex; justify-content: space-between; padding: 20px; .search-top-input{ display: flex; border-radius: 12px; min-width: 676px; overflow: hidden; border: 1px solid #439dc1; box-shadow: 0 5px 13px rgba(0, 0, 0, .25); .el-input-group { line-height: normal; display: inline-table; width: 100%; border-collapse: separate; border-spacing: 0; .el-input-group__prepend { border-radius: 0; background-color: #fff; border: none; font-size: 14px; font-weight: 400; line-height: 24px; color: #439dc1; } .el-input__inner { border-radius: 0; height: 41px; border: 1px solid #439dc1 !important; border-top: 0 !important; border-bottom: 0 !important; background-color: #fff; color: #439dc1; } } .el-button { border-radius: 0; background-color: #439dc1; border: 1px solid #439dc1; width: 77px; color: #fff; } .selector{ line-height: normal; display: flex; width: 100%; border-collapse: separate; border-spacing: 0; // display: flex; .selector-title{ border-radius: 0; background-color: #fff; border: none; font-size: 14px; font-weight: 400; line-height: 41px; color: #439dc1; vertical-align: middle; display: table-cell; position: relative; padding: 0 20px; white-space: nowrap; } .el-input__inner{ border-radius: 0; height: 41px; border: 1px solid #439dc1 !important; border-top: 0 !important; border-bottom: 0 !important; background-color: #fff; color: #439dc1; } } } .search-top-buttom{ width: 20%; display: flex; justify-content: right; .button-background{margin-left: 20px;} .button-nobackgroubd{margin-left: 20px;} } } } //可展开搜索框 .queryCriteria{ display: flex; height: 32px; padding: 20px; padding-top: 0; span{ font-size: 14px; color: #439dc1; font-weight: bold; line-height: 32px; margin-right: 20px; } .el-input{ width: 160px; height: 32px; .el-input__inner{ width: 100%; height: 32px; border: 1px solid #439dc1; border-radius: 8px; color: #439dc1; } } .el-input__prefix{color: #439dc1;width: 20px;} .interval{ width: 40px; height: 2px; background-color: #B3B3B3; margin: 16px 13px; border-radius: 20px; } button{ width: 80px; height: 32px; color: #439dc1; margin-left: 13px; background-color: #0000; border: 1px solid #439dc1; border-radius: 8px; } ul{ display: flex; li{ font-size: 14px; cursor: pointer; line-height: 32px; color: #5b5b5b; padding: 0; margin-right: 20px; i{ line-height: 34px; } } } } //选择字体颜色 .zt{ color: #2384aa !important; } //不带间隔的表格 .WithoutInterval{ .el-tag--dark { border: 1px solid rgba(0, 0, 0, 0); margin: 0 5px; cursor: pointer; min-width: 75px; min-height: 35px; } .el-button.is-disabled{ color: #C0C4CC; &:hover { color: #C0C4CC; } } .el-button--text{ color: #439dc1; &:hover { color: #4ab1d6; } } .el-table th.el-table__cell.is-leaf{ background-color: #ffffff; border-bottom: 1px solid #dedede ; } .el-table .cell { color: #707070 ; text-align: center; } .el-table td.el-table__cell { background-color: #fff; border-bottom: 1px solid #dedede ; } .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background-color: #f1f4f5; } .el-table__empty-block{ background-color: #fff; border-bottom: 1px solid #dedede ; } .el-table::before{ background-color: #dedede; } } //表格 可展开 he不可展开隐藏 .expand{ .el-table__expand-column{ background: #439dc1 !important; .cell { display: none; } } .indexbackground{ background-color: #439dc1 !important; } } //带间隔的表格 .interval{ .el-button--primary{ background-color: #439dc1; border-color: #439dc1; &:hover{ background-color: #4ab1d6; border-color: #4ab1d6; } } .el-button--danger{ background-color: #f56c6c; border-color: #f56c6c; &:hover{ background-color: #ff8181; border-color: #ff8181; } } .el-table, .el-table__expanded-cell { background-color: rgba(0, 0, 0, 0) !important; } .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background-color: #f1f4f5; } .el-table__fixed-right::before,.el-table--border::after, .el-table--group::after, .el-table::before { background: 0 !important; } .el-table__body, .el-table__footer, .el-table__header { border-collapse: separate; border-spacing: 0px 8px; } .is-leaf:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .is-leaf:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .el-table td.el-table__cell:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .el-table td.el-table__cell:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .el-table tr { border-radius: 8px; overflow: clip; background-color: #00000000; } .el-table td.el-table__cell{ border-bottom: none; background-color: #fff; } .indexbackground{ width: 20px; height: 20px; background: #439dc1; text-align: center; line-height: 20px; color: #fff; border-radius: 50%; margin: 0 auto; } .el-table .cell { color: #707070 ; text-align: center; } .el-table__empty-block{ background: #fff; border-radius: 8px; } .el-table th.el-table__cell.is-leaf { border-bottom: none; background: #fff !important; } } .block{ margin: 20px auto; width: 30%; } //表单 .form{ width: 100%; padding: 20px; box-sizing: border-box; .el-form { width: 100%; display: flex; box-sizing: border-box; flex-wrap: wrap; border: 1px solid #e4e7ed !important; .el-form-item { width: 50%; box-sizing: border-box; margin-bottom: 0px; .el-form-item__label { border: 1px solid #e4e7ed; box-sizing: border-box; line-height: 38px !important; background-color: #e4e7ed63; height: 100%; } .el-input-group__append{ border-radius: 0; } .is-disabled{ .el-input__inner{ color: #0006 !important; background-color: #0000000f !important; } .el-textarea__inner{ color: #0006 !important; background-color: #0000000f !important; } } .el-textarea__inner{ color: #666161 !important; border-radius: 0; background-color: #FFFFFF !important; } .el-input__inner { color: #666161 !important; border-radius: 0; background-color: #FFFFFF !important; } } } } //侧边栏按钮 .dialog-footer { width: 45%; margin: 0 auto; display: flex; justify-content: space-between; .el-button { width: 45%; } .el-button--primary { background-color: #47A1C4; border: 1px solid #47A1C4; } } //侧边栏 .al{ .el-drawer__header { -webkit-box-shadow: none; box-shadow: none; margin: 0; &:first-child { font-size: 18px !important; color: #439dc1 !important; padding: 10px 20px; border-bottom: 2px solid #ccc; } } .tc-top{ border-bottom: 2px solid #ccc; padding: 10px 0; h2 { padding:0 20px; font-size: 19px; color: #439dc1; } } .tc-middle{ padding: 20px; padding-top: 0; box-sizing: border-box; h3 { font-size: 18px; color: #439dc1; margin: 15px 0; } .el-table__empty-block{ border-radius: 8px; } .el-table tr { border-radius: 8px; overflow: clip; } } } //弹窗 .tk{ .el-dialog{ border-radius: 10px; } .el-dialog__header { box-shadow: 0 2px 2px #9d9d9d63; .el-dialog__title { color: #439dc1 !important; } } .el-dialog__body { padding: 14px 20px; box-sizing: border-box; } } //选择器 #header { box-sizing: border-box; padding: 20px 40px 0; display: flex; } .item_box{ width:140px; height:44px; line-height: 44px; border-radius: 8px 8px 0px 0px; margin-right: 10px; text-align: center; font-size: 18px; cursor: pointer; color: #7ABEFF; border: 1px solid #7AA2E2; background-color: #E0F0FF; border-bottom: none; .item_num{ display: inline-block; width:20px; height:20px; line-height: 20px; border-radius: 50%; background: #FF0000; border: 1px solid #fff; font-size: 12px; color:#fff; text-align: center; transform: translateY(-1px); } } .active { color: #167AA1; color: #fff; background: #439dc1; } //流程操作返回退回提交 .so-top{ border-top: 1px solid #dedede; background-color: #fff; padding: 0 1% 0 1%; margin: -20px; margin-bottom: 0; .Left-buttom-content { width: 100%; height: 98%; border-radius: 24px; overflow: auto; display: flex; border-radius: 0; justify-content: space-between; .Left-buttom-content-top { padding: 9px 20px; font-size: 16px; font-weight: 700; color: #167AA1; background-color: #fff; height: 42px; box-sizing: border-box; display: flex; align-items: center; img{ margin-right:8px; } } } .buttome { width: 333px; display: flex; justify-content: flex-end; box-sizing: border-box; .buttome-a { width: 80px; height: 30px; background-color: #439dc1; border-radius: 8px; margin: 5px 10px; text-align: center; line-height: 27px; cursor: pointer; span { font-size: 14px; color: #FFFFFF; } } } } //详情标题头 .detailstitle{ padding: 9px 20px; font-size: 16px; font-weight: 700; color: #167AA1; background-color: #fff; border-bottom: 2px solid #dedede; height: 42px; box-sizing: border-box; display: flex; align-items: center; img{ margin-right:8px; } } //分页样式 .block{ .el-pagination{ .btn-prev{border-radius: 5px;} .btn-next{border-radius: 5px;} .el-pager{ .active{ background-color: #439dc1 !important; &:hover{ color: #fff !important; } } .number{ border-radius: 5px; &:hover{ color: #439dc1 ; } } } } .el-input__inner{ border-radius: 5px; } } //输入框间隔 .line{ height: 40px; line-height: 40px; margin: 10px 0; font-size: 16px; color: #666; display: flex; justify-content: center; span{ display: inline-block; width: 200px; height: 20px; border-bottom: 2px solid #dfdfdf; &:first-child{ margin-right: 10px; } &:last-child{ margin-left: 10px; } } }