/** * 通用css样式布局处理 * Copyright (c) 2019 ruoyi */ /** 基础通用 **/ .pt5 { padding-top: 5px; } .pr5 { padding-right: 5px; } .pb5 { padding-bottom: 5px; } .mt5 { margin-top: 5px; } .mr5 { margin-right: 5px; } .mb5 { margin-bottom: 5px; } .mb8 { margin-bottom: 8px; } .ml5 { margin-left: 5px; } .mt10 { margin-top: 10px; } .mr10 { margin-right: 10px; } .mb10 { margin-bottom: 10px; } .ml10 { margin-left: 10px; } .mt20 { margin-top: 20px; } .mr20 { margin-right: 20px; } .mb20 { margin-bottom: 20px; } .ml20 { margin-left: 20px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } .el-message-box__status + .el-message-box__message{ word-break: break-word; } .el-dialog:not(.is-fullscreen) { margin-top: 6vh !important; } .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { overflow: auto; overflow-x: hidden; max-height: 70vh; padding: 10px 20px 0; } .el-form-item__label { color: #5f6b7a; font-weight: 600; } .el-input__inner, .el-textarea__inner, .el-range-editor.el-input__inner, .el-select .el-input__inner, .vue-treeselect__control { border-color: #d9e3ee !important; border-radius: 10px; color: #1f2d3d; box-shadow: none; } .el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #8a97a6; } .el-input__inner:hover, .el-textarea__inner:hover, .el-range-editor.el-input__inner:hover, .vue-treeselect__control:hover { border-color: #c8d7e6 !important; } .el-input.is-focus .el-input__inner, .el-textarea.is-focus .el-textarea__inner, .el-select .el-input.is-focus .el-input__inner, .el-range-editor.is-active, .el-range-editor.is-active:hover, .vue-treeselect--focused .vue-treeselect__control { border-color: #2f5d8a !important; box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.08); } .el-button { border-radius: 10px; } .el-button--primary { box-shadow: 0 6px 16px rgba(47, 93, 138, 0.18); } .el-button--primary:focus, .el-button--primary:hover { background-color: #244a6d; border-color: #244a6d; } .el-button.is-plain { border-color: #d9e3ee; } .el-card, .tree-border, .pagination-container, .splitpanes.default-theme .splitpanes__pane { background: transparent !important; } .el-card { border: 1px solid #d9e3ee; border-radius: 14px; box-shadow: 0 8px 24px rgba(31, 45, 61, 0.05); } .el-table { border: 1px solid #d9e3ee; border-radius: 12px; overflow: hidden; .el-table__header-wrapper, .el-table__fixed-header-wrapper { th { word-break: break-word; background-color: #f7fafd; color: #5f6b7a; height: 40px; font-size: 13px; border-bottom-color: #d9e3ee; } } .el-table__body-wrapper { .el-button [class*="el-icon-"] + span { margin-left: 1px; } } } .el-table th.el-table__cell, .el-table td.el-table__cell { border-bottom-color: #e7edf5; } .el-table::before { background-color: #d9e3ee; } .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: #f9fbfe; } /** 表单布局 **/ .form-header { font-size: 15px; color: #6379bb; border-bottom: 1px solid #ddd; margin: 8px 10px 25px 10px; padding-bottom: 5px } /** 表格布局 **/ .pagination-container { display: flex; justify-content: flex-end; margin-top: 20px; padding: 0; background: transparent; } /* tree border */ .tree-border { margin-top: 5px; border: 1px solid #d9e3ee; background: #ffffff none; border-radius: 12px; box-shadow: 0 8px 24px rgba(31, 45, 61, 0.05); } /* horizontal el menu */ .el-menu--horizontal .el-menu-item .svg-icon + span, .el-menu--horizontal .el-submenu__title .svg-icon + span { margin-left: 3px; } .el-menu--horizontal .el-menu--popup { min-width: 120px !important; } @media (max-width: 768px) { .pagination-container .el-pagination > .el-pagination__jump { display: none !important; } .pagination-container .el-pagination > .el-pagination__sizes { display: none !important; } } .el-table .fixed-width .el-button--mini { padding-left: 0; padding-right: 0; width: inherit; } /** 表格更多操作下拉样式 */ .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { cursor: pointer; margin-left: 5px; } .el-table .el-dropdown, .el-icon-arrow-down { font-size: 12px; } .el-tree-node__content > .el-checkbox { margin-right: 8px; } .list-group-striped > .list-group-item { border-left: 0; border-right: 0; border-radius: 0; padding-left: 0; padding-right: 0; } .list-group { padding-left: 0px; list-style: none; } .list-group-item { border-bottom: 1px solid #e7eaec; border-top: 1px solid #e7eaec; margin-bottom: -1px; padding: 11px 0px; font-size: 13px; } .pull-right { float: right !important; } .el-card__header { padding: 16px 18px 10px; min-height: 40px; border-bottom-color: #e7edf5; } .el-card__body { padding: 18px 20px 20px 20px; } .card-box { margin-bottom: 10px; } /* button color */ .el-button--cyan.is-active, .el-button--cyan:active { background: #20B2AA; border-color: #20B2AA; color: #FFFFFF; } .el-button--cyan:focus, .el-button--cyan:hover { background: #48D1CC; border-color: #48D1CC; color: #FFFFFF; } .el-button--cyan { background-color: #20B2AA; border-color: #20B2AA; color: #FFFFFF; } /* text color */ .text-navy { color: #1ab394; } .text-primary { color: inherit; } .text-success { color: #3f6b55; } .text-info { color: #2f5d8a; } .text-warning { color: #a56a2a; } .text-danger { color: #b55252; } .text-muted { color: #8a97a6; } /* image */ .img-circle { border-radius: 50%; } .img-lg { width: 120px; height: 120px; } .avatar-upload-preview { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 0 4px #ccc; overflow: hidden; } /* 拖拽列样式 */ .sortable-ghost { opacity: .8; color: #fff !important; background: #42b983 !important; } .top-right-btn { position: relative; float: right; } /* 分割面板样式 */ .splitpanes.default-theme .splitpanes__pane { background-color: transparent!important; } .el-dialog { border-radius: 16px; box-shadow: 0 16px 36px rgba(31, 45, 61, 0.12); } .el-dialog__header { border-bottom: 1px solid #e7edf5; } .el-dialog__title { color: #1f2d3d; font-weight: 700; } .el-dialog__footer { border-top: 1px solid #e7edf5; } .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li { background: #ffffff; border: 1px solid #d9e3ee; color: #5f6b7a; border-radius: 8px; min-width: 30px; } .el-pagination.is-background .el-pager li:not(.disabled).active { background: #2f5d8a; border-color: #2f5d8a; color: #ffffff; } .el-pagination.is-background .el-pager li:not(.disabled):hover, .el-pagination.is-background .btn-next:hover, .el-pagination.is-background .btn-prev:hover { color: #2f5d8a; }