@import "./common/variables.scss"; .layui-card { margin-bottom: 10px; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 20px rgba(228, 232, 233, 1); opacity: 1; border-radius: 0px 4px 4px 4px; } .layui-card .layui-tab-brief { padding: 40px; box-shadow: 0px 2px 20px #e4e8e9; opacity: 1; border-radius: 0px 4px 4px 4px; background-color: #fff; } .layui-card .layui-tab-brief .layui-tab-title { background-color: #fff; } .layui-card .layui-tab-brief .layui-tab-title li.layui-this { background-color: #fff; color: $table-main-color; } .layui-card .layui-tab-brief .layui-tab-title li.layui-this:after { border-radius: 2px; border-bottom: 2px solid $table-main-color; border-top: none; } .layui-card .layui-tab-card .layui-tab-title li.layui-this { background-color: #f2f2f2; } .layui-card .layui-tab-card .layui-tab-title li.layui-this:after { border-radius: 2px; border-bottom: 2px solid $table-main-color; border-top: none; } .layui-card .layui-tab-title { background-color: #f2f2f2; } .layui-card .layui-tab-title li.layui-this { background-color: #fff; } .layui-card .layui-tab-title li.layui-this:after { border-radius: 2px; border-top: 2px solid $table-main-color; border-bottom: none; } .layui-card .layui-tab-title li .layui-tab-close { background-color: #f2f4f5; border-radius: 50%; } .layui-card .layui-tab-title li .layui-tab-close:hover { background-color: #ff5722; } .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) { background-color: #f6f8f9; } .layui-table thead tr { border-left: 4px; border-left-style: solid; border-color: #f6f8f9; } .layui-table tbody tr { border-left: 4px; border-left-style: solid; border-color: transparent; } .layui-table tbody tr:hover { background-color: #e8f2ff; border-color: $table-main-color; } .layui-table-view .layui-form-checkbox[lay-skin="primary"] i { width: 14px; height: 14px; line-height: 14px; } .layui-form-checkbox[lay-skin="primary"]:hover i { border-color: $table-main-color; } .layui-table .layui-a { color: $table-main-color; cursor: pointer; display: inline-block; padding: 0px 5px; } .layui-table .layui-a.layui-a-primary { color: #ff9800; } .layui-table .layui-a.layui-a-danger { color: #f63c49; } .layui-laypage span, .layui-laypage a { margin-right: 8px; border-radius: 4px; } .layui-laypage span.layui-laypage-curr { border-width: 1px; border-style: solid; border-color: $table-main-color; } .layui-laypage span.layui-laypage-curr .layui-laypage-em { background-color: unset; color: $table-main-color; } .layui-laypage span.layui-laypage-curr em { color: $table-main-color; } .layui-laypage a { border-color: #dfe5e8; border-style: solid; border-width: 1px; } .layui-layer.layui-layer-msg { width: auto !important; } .layui-layer.layui-layer-msg .layui-layer-content { height: auto; } .layui-layer .layui-layer-title { color: #454b50; height: 49px; line-height: 49px; padding: 0 80px 0 16px; } .layui-layer.layui-layer-page .layui-layer-content { padding: 30px 30px 20px 0px; overflow-y: auto; } .layui-layer.layui-layer-dialog .layui-layer-content { text-align: center; } .layui-layer.layui-layer-dialog .layui-layer-btn { text-align: center; } .layui-form-radio i { font-size: 16px; margin-right: 6px; } .layui-form-radio i:hover { color: $table-main-color; } .layui-form-radio.layui-form-radioed i { color: $table-main-color; } .layui-form-radio.layui-form-radioed i:hover { color: $table-main-color; } .layui-form-checked { border-color: $table-main-color; } .layui-form-checked i { color: $table-main-color; } .layui-form-checked span { background-color: $table-main-color; } .layui-form-checked:hover { border-color: $table-main-color; } .layui-form-checked:hover i { color: $table-main-color; } .layui-form-checked:hover span { background-color: $table-main-color; } .layui-form-checkbox[lay-skin="primary"] { padding-left: 20px; } .layui-form-checkbox[lay-skin="primary"] i { width: 14px; height: 14px; line-height: 14px; } .layui-form-checkbox[lay-skin="primary"]:hover i { border-color: $table-main-color; } .layui-form-checked[lay-skin="primary"] i { border-color: $table-main-color; background-color: $table-main-color; } .layui-form-checkbox[lay-skin="primary"] span { background: 0 0; color: #666; } .layui-form-switch.layui-form-onswitch { border-color: $table-main-color; background-color: $table-main-color; } .layui-input { border-radius: 4px; } .layui-input:focus, .layui-input:hover { border-color: $table-main-color !important; } .layui-input-disable { border-radius: 4px; background-color: #f5f5f5; border: 1px solid #e7e8eb; color: #bdc2c5; } .layui-input:focus, .layui-input-disable:hover { border-color: #e7e8eb !important; } .layui-form-danger { border-color: #ff4d4f; } .layui-form-danger:focus { border-color: #ff4d4f; } .layui-unselect dl dd:hover { color: rgba(69, 75, 80, 1); background: rgba(246, 248, 249, 1); } .layui-unselect dl dd.layui-this { background-color: #e8f2ff; color: #454b50; } .layui-nav { background-color: #323e47; } .layui-nav.layui-nav-tree .layui-nav-bar { background-color: $table-main-color; } .layui-nav.layui-nav-tree .layui-nav-itemed { margin-bottom: 3px; } .layui-nav.layui-nav-tree .layui-nav-itemed > .layui-nav-child { background-color: unset !important; } .layui-nav.layui-nav-tree .layui-nav-itemed:before { position: absolute; content: ""; top: 0; right: 0; bottom: 3px; left: 5px; width: calc(100% - 10px); height: 100%; background-color: rgba(81, 94, 104, 0.53); border-radius: 4px; } .layui-nav.layui-nav-tree .layui-nav-child dd { width: calc(100% - 10px); margin: 0 auto; } .layui-nav.layui-nav-tree .layui-nav-child a { width: calc(100% - 40px); margin: 0 auto; } .layui-nav.layui-nav-tree .layui-nav-child a:hover { background: #515e68; border-radius: 4px; width: calc(100% - 40px); } .layui-nav.layui-nav-tree .layui-nav-child a:hover:after { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 3px; background-color: $table-main-color; z-index: 2; } .layui-nav.layui-nav-tree .layui-nav-item a:hover { background-color: unset; } .layui-nav.layui-nav-tree .layui-this, .layui-nav.layui-nav-tree .layui-this > a, .layui-nav.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav.layui-nav-tree .layui-nav-child dd.layui-this a { background-color: $table-main-color !important; border-radius: 4px; } .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after { background-color: $table-main-color; } /* 颜色 */ .layui-bg-gray-1 { background-color: #f2f4f5 !important; opacity: 1; border-radius: 4px; } .layui-bg-gray-2 { background-color: #f3f3f3 !important; opacity: 1; border-radius: 4px; } .layui-bg-gray-3 { background-color: #dedfe1 !important; opacity: 1; border-radius: 4px; } .layui-bg-gray-4 { background-color: #e3e3e3 !important; opacity: 1; border-radius: 4px; } .layui-bg-gray-5 { background-color: #f6f8f9 !important; opacity: 1; border-radius: 4px; } .layui-bg-gray-6 { background-color: #f8f8f8 !important; opacity: 1; border-radius: 4px; } .layui-bg-blue-1 { background-color: $table-main-color !important; opacity: 1; border-radius: 4px; } .layui-bg-black-1 { background-color: #323e47 !important; opacity: 1; border-radius: 4px; } .layui-bg-black-2 { background-color: #424e58 !important; opacity: 1; border-radius: 4px; } .layui-bg-black-3 { background-color: #515e68 !important; opacity: 1; border-radius: 4px; } .layui-bg-select-gray { background-color: #ebebeb !important; opacity: 1; border-radius: 4px; } .layui-text-blue-1 { color: $table-main-color !important; } .layui-text-black-1 { color: #454b50 !important; } .layui-text-black-2 { color: #515151 !important; } .layui-text-gray-1 { color: #8e8e8e !important; } .layui-text-gray-2 { color: #c3c3c3 !important; } .layui-text-red-1 { color: #f63c49 !important; } .layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin="line"], .layui-table[lay-skin="row"] { border-width: 0px; border-style: solid; border-color: #e6e6e6; } .layui-layer-btn-c { text-align: right !important; } .layui-laypage { display: block; margin: 0; font-size: 0; text-align: center; } /* 按钮 */ .layui-btn-default { width: 80px; height: 32px; line-height: 32px; padding: 0px; } .layui-btn-blue { background-color: $table-main-color; border-radius: 4px; color: #ffffff; } .layui-btn-primary-gray { border: 1px solid #cfd0d4; background-color: #fff; border-radius: 4px; color: #454b50; } .layui-btn-primary-blue { border: 1px solid $table-main-color; background-color: #fff; border-radius: 4px; color: $table-main-color; } .layui-btn-primary-gray:hover { border-color: $table-main-color; color: #333; } .layui-btn-primary-blue:hover { border-color: $table-main-color; color: #333; } .layui-btn-disabled-blue { background-color: #9cc0f9; border-width: 0px; border-radius: 4px; color: #ffffff; } .layui-btn-disabled-gray { background-color: #f5f5f5; border-width: 1px; border-color: #dedfe1; border-radius: 4px; color: #b8b8b8; } .layui-btn-disabled-gray:hover { opacity: 0.8; color: #b8b8b8; } .layui-btn-normal-blue { background-color: $table-main-color; border-radius: 4px; color: #ffffff; } .layui-btn-sm { height: 38px !important; line-height: 38px !important; padding: 0 10px; font-size: 12px; } .layui-btn-lg-blue { background-color: $table-main-color; height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px; border-radius: 4px; } .layui-btn-sm-blue { background-color: $table-main-color; height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 4px; } .layui-btn-xs-blue { background-color: $table-main-color; height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px; border-radius: 4px; } .layui-btn-danger-red { background-color: #f63c49; border-radius: 4px; } /* 表单 */ .layui-form-select dl dd.layui-this { background: rgba(18, 137, 255, 0.12); font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: $main-text-color; height: 40px; line-height: 40px; } .layui-laydate .layui-this { background-color: $table-main-color !important; color: #fff !important; } .layui-laydate-header i:hover, .layui-laydate-header span:hover { color: $table-main-color !important; } .layui-laydate-footer span:hover { color: $table-main-color !important; } /* tab */ .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after { position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: $table-main-color; transition: all 0.2s; -webkit-transition: all 0.2s; } .layui-nav-pages { font-size: 14px; color: #454b50; width: 100%; height: 100%; } .layui-nav-page-tabs { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .layui-nav-page-menu { color: #8e8e8e; text-decoration: none; line-height: 42px; padding-left: 29px; padding-right: 9px; background-color: transparent; display: inline-flex; align-items: center; justify-content: center; } .layui-nav-page-menu.active { background-color: #ffffff; border-radius: 6px 6px 0px 0px; position: relative; color: #454b50; } .layui-pages { flex: 1; background-color: #ffffff; margin-top: 10px; box-shadow: 0px 2px 10px 0px rgba(228, 232, 233, 0.8); border-radius: 0px 0px 4px 4px; } .layui-tab-title-black { color: #454b50; } .layui-tab-brief > .layui-tab-title .layui-this { color: $table-main-color; } .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after { border: none; border-radius: 0; border-bottom: 3px solid $table-main-color; } /* 内容块 */ .layui-form-gray { background-color: #f8f8f8; border-radius: 2px; border: 1px solid #ececec; padding: 22px 0px 0px 24px; margin-bottom: 14px; } .layui-input-inline-w218 { width: 218px !important; } .layui-input-inline-w303 { width: 303px !important; } .layui-input-inline-w650 { width: 650px !important; } .layui-icon-upload { width: 55px; height: 55px; background-color: #ffffff; border-radius: 4px; border: 1px dashed #d2d3d8; } .layui-input-inline-upload { width: 55px !important; margin-left: 14px; } .layui-form-mid-hint { margin-left: 55px; } .layui-title1 { display: flex; margin-bottom: 24px; align-items: center; } .layui-title-line { width: 3px; height: 16px; background-color: $table-main-color; margin-right: 6px; float: left; } .layui-title-label1 { font-size: 18px; color: #333333; } .layui-title2 { display: flex; margin: 22px 0px 14px 0px; /* align-items: center; */ } .layui-title-label2 { font-size: 14px; color: #454b50; } /* 逐条添加 */ .layui-form-item-gray { background-color: #ffffff; border-radius: 4px; border: 1px solid #ececec; margin-bottom: 20px; } .layui-form-item-left1 { padding: 20px 0px 0px 20px; background: #f8f8f8; } .layui-form-item-left2 { float: left; padding: 20px 0px 0px 20px; width: 96%; background: #f8f8f8; } .layui-form-item-right { float: left; width: 30px; height: 179px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: center; } .layui-icon-close-gray { color: #8e8e8e; font-size: 10px; } .layui-form-label-item { padding: 9px 0px; } .layui-input-block-item { display: flex; align-items: center; margin-left: 90px; } .layui-form-item-add { height: 50px; border-radius: 4px; border: 1px dashed #d2d3d8; margin-bottom: 20px; display: flex; align-items: center; padding-left: 20px; font-size: 14px; color: #454b50; } .layui-icon-add-circle-fine-blue { float: left; font-size: 20px; color: $table-main-color; margin-right: 8px; } /* 数据表单 */ .layui-custom-line { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; } .lauyu-custom-item-line { width: 100%; height: 1px; background-color: #e6e6e6; } .layui-custom-key { height: 50px; background-color: #f6f7f9; border-right: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; } .layui-custom-value { height: 50px; border-right: 1px solid #e6e6e6; display: flex; align-items: center; padding: 0px 40px; } .layui-form-block { background: rgba(248, 248, 248, 1); border: 1px solid rgba(236, 236, 236, 1); opacity: 1; border-radius: 4px; padding: 20px 20px 5px 0px; margin-bottom: 10px; position: relative; } .layui-form-item-close { position: absolute; right: 0px; top: 0px; width: 30px; height: 100%; text-align: center; border-left: 1px solid rgba(233, 233, 233, 1); background: rgba(255, 255, 255, 1); opacity: 1; border-radius: 0px 4px 4px 0px; } .layui-form-item-close-icon { position: absolute; top: 50%; right: 50%; text-align: center; width: 10px; height: 10px; color: #f63c49; cursor: pointer; font-weight: bold; } .layui-table-tool { background-color: #ffffff; } .layui-card-gray { margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 2px 10px 0 rgba(228, 232, 233, 0.8) !important; } /* 弹窗 */ .layui-layer { box-shadow: 0px 2px 20px rgba(187, 187, 187, 0.53) !important; border-radius: 4px !important; } .layui-form-layer { padding: 30px 30px 42px 30px; border-bottom: 1px solid #efefef; } .layui-input-noborder { border: 0px; /* width: 150px */ } .layui-layer-row-checkbox { padding: 22px 22px 0px 22px; } .layui-layer-row-select { min-height: 259px; border: 1px solid #dedfe1; border-radius: 4px; margin-top: 10px; padding: 16px; } .layui-layer-select { width: 66px !important; height: 32px; margin: 0px 8px 8px 0px; border: 1px solid $table-main-color; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #454b50; float: left; } .layui-inline-layer-btn { position: relative; left: 348px; padding: 10px 0px; } .layui-btn-layer { width: 80px; height: 32px; line-height: 32px; } .layui-text-gray { font-size: 14px; color: #454b50; } .layui-transfer-data li:hover { background-color: #e2edff; transition: 0.5s all; } .layui-transfer-active .layui-btn { display: block; margin: 0; padding: 0 15px; background-color: $table-main-color !important; border-color: $table-main-color !important; color: #fff; } .layui-transfer-active .layui-btn-disabled { background-color: #fbfbfb; border-color: #e6e6e6; color: #c9c9c9; } .layui-form-checked[lay-skin="primary"] i { border-color: $table-main-color !important; background-color: $table-main-color; color: #fff; } /* 控件 */ .layui-laypage a:hover { color: $table-main-color; } .layui-laypage input:focus, .layui-laypage select:focus { border-color: $table-main-color !important; } .layui-laypage select { height: 28px; padding: 3px; border-radius: 4px; cursor: pointer; background-color: #fff; } .layui-icon-picture-gray { font-size: 23px !important; color: #a8a8a8 !important; } .layui-icon-close-fill-black { font-size: 16px; color: #000000; position: relative; left: -8px; top: -8px; } .layui-row-fl { float: left; } .layui-upload-drag { float: left; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0px; font-size: 12px; color: #a8a8a8; border-radius: 4px; } .layui-upload-drag-lg { width: 198px; height: 198px; margin-bottom: 20px; } .layui-upload-img-lg { float: left; width: 200px; height: 200px; margin-bottom: 20px; border-radius: 4px; } .layui-upload-drag-mid { width: 98px; height: 98px; margin-bottom: 20px; } .layui-upload-img-mid { float: left; width: 100px; height: 100px; margin-bottom: 20px; border-radius: 4px; } .layui-upload-drag-sm { width: 54px; height: 54px; margin-bottom: 8px; } .layui-upload-img-sm { float: left; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 4px; } .layui-upload-drag-xs { width: 44px; height: 44px; margin-bottom: 8px; } .layui-upload-img-xs { float: left; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 4px; } .layui-upload-input { width: 377px; height: 32px; margin-right: 16px; } .layui-label { float: left; height: 32px; padding: 0px 14px; margin: 0px 8px 8px 0px; background-color: #efefef; border-radius: 4px; font-size: 14px; color: #454b50; display: flex; align-items: center; justify-content: space-between; } .layui-icon-close-fill-label { font-size: 14px; color: #aeaeae; margin-left: 8px; } .layui-input-inline-content { padding: 19px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid #e7e8eb; box-shadow: 0px 2px 6px rgba(68, 70, 74, 0.05); background-color: #ffffff; font-size: 14px; color: #454b50; } .layui-input-inline-content:hover { border: 1px solid $table-main-color; } .layui-laypage select { padding: 0px; height: 26px; } .layui-table-cell { height: 50px; line-height: 50px; font-size: 14px; } .layui-table-header { .layui-table-cell { font-weight: bold; color: rgba(69, 75, 80, 1); } } .layui-card-body { padding: 0; color: rgba(69, 75, 80, 1); } .layui-opr-block { .normal-btn { width: 90px; height: 32px; line-height: 32px; border-radius: 4px; font-size: 14px; background-color: $form-input-bg; color: $table-main-color; border: 1px solid $table-main-color; display: inline-block; text-align: center; } } .cell-opr { display: inline-block; width: 24px; height: 24px; cursor: pointer; } .save-cell { background: url(../img/save-cell.png) no-repeat center/cover; } .edit-cell { margin-right: 8px; background: url(../img/edit-cell.png) no-repeat center/cover; } .delete-cell { background: url(../img/delete-cell.png) no-repeat center/cover; } .layui-layer-tips .layui-layer-content { position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float: left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); background-color: #000; color: #fff; padding: 4px 8px !important; /* left: 0; */ } .layui-layer-tips i.layui-layer-TipsT { bottom: -8px; left: 0; } .layui-layer-btn-r { display: flex; justify-content: flex-end; } .layui-layer-btn .layui-layer-btn0 { border-radius: 4px; border: 1px solid rgba(220, 224, 228, 1) !important; background-color: rgba(255, 255, 255, 1) !important; color: rgba(69, 75, 80, 1) !important; } .layui-layer-btn .layui-layer-btn1 { color: rgba(255, 255, 255, 1) !important; background: rgba(18, 137, 255, 1) !important; border-radius: 4px; border-color: $main-border-color; } .msg-skin .layui-layer-btn a { color: rgba(255, 255, 255, 1) !important; background: rgba(18, 137, 255, 1) !important; border-radius: 4px; border-color: rgba(18, 137, 255, 1); } .layui-table-grid-down { display: none; } .layui-table-grid-down:hover { display: none; } .layui-layer.layui-layer-page .layui-layer-content { padding: 0; } .layui-form { .layui-form-item { display: flex; align-items: center; font-size: 14px; .layui-form-label { font-size: 14px; font-family: MicrosoftYaHei; color: rgba(69, 75, 80, 1); } .layui-input, .layui-select, .layui-textarea { height: 34px; } input::placeholder { font-size: 14px; } } } .form-box { padding-left: 10px; .layui-form-label, .layui-form-mid, .layui-form-select, .layui-input-block, .layui-input-inline, .layui-textarea { width: 180px; } } .import-title { font-size: 18px; font-family: MicrosoftYaHei; color: rgba(18, 137, 255, 1); margin-left: 10px; } .cell-opr { display: inline-block; width: 24px; height: 24px; cursor: pointer; }