/** * 通用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-form .el-form-item__label { font-weight: 700; } .el-dialog.scrollbar .el-dialog__body { overflow: auto; overflow-x: hidden; max-height: 70vh; padding: 10px 20px 0; } .el-table { .el-table__header-wrapper, .el-table__fixed-header-wrapper { th { font-family: Microsoft YaHei !important; word-break: break-word; background-color: #f4f4f3 !important; color: #3B3B3B; height: 50px !important; font-size: 16px; } } .el-table__body-wrapper { .el-button [class*="el-icon-"]+span { margin-left: 1px; } } // 设置行单元格样式 .el-table__cell { font-family: Microsoft YaHei !important; // font-weight: 400 !important; font-size: 16px !important; color: #1E1E1E !important; padding: 4px 0px !important; height: 54px !important; } } /** 表单布局 **/ .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; background-color: transparent !important; } /* 弹窗中的分页器 */ .el-dialog .pagination-container { position: static !important; margin: 10px 0 0 0; padding: 0 !important; .el-pagination { position: static; } } /* 移动端适配 */ @media (max-width: 768px) { .pagination-container { .el-pagination { >.el-pagination__jump { display: none !important; } >.el-pagination__sizes { display: none !important; } } } } /* tree border */ .tree-border { margin-top: 5px; border: 1px solid var(--el-border-color-light, #e5e6e7); background: var(--el-bg-color, #FFFFFF) none; border-radius: 4px; width: 100%; } .el-table .fixed-width .el-button--small { padding-left: 0; padding-right: 0; width: inherit; } /** 表格更多操作下拉样式 */ .el-table .el-dropdown-link { cursor: pointer; color: #409EFF; margin-left: 10px; } .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: 14px 15px 7px !important; min-height: 40px; } .el-card__body { padding: 15px 20px 20px 20px !important; } .card-box { margin-bottom: 10px; } .el-button { font-size: 16px !important; } /* 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: #1c84c6; } .text-info { color: #23c6c8; } .text-warning { color: #f8ac59; } .text-danger { color: #ed5565; } .text-muted { color: #888888; } /* image */ .img-circle { border-radius: 50%; } .img-lg { width: 120px; height: 120px; } .avatar-upload-preview { position: absolute; top: 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 { margin-left: auto; } /* 分割面板样式 */ .splitpanes.default-theme .splitpanes__pane { background-color: var(--splitpanes-default-bg) !important; } // 自定义行样式 .my_row { padding: 0px; margin: 17px 0px; // text-align: right; } // 按钮样式 .el-message-box__btns .el-button--primary { /* 修改确认按钮样式 */ border-radius: 4px 4px 4px 4px; background: #1a75e6 !important; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #FFFFFF !important; } .el-message-box__btns .el-button--primary:hover { /* 修改确认按钮样式 */ background: #1a75e6 !important; color: #FFFFFF !important; } .el-message-box__btns .el-button--default { /* 修改取消按钮样式 */ border-radius: 4px 4px 4px 4px; background: #ffc63d; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #000000; } .el-message-box__btns .el-button--default:hover { /* 修改取消按钮样式 */ background: #ffc63d; color: #000000; } .custom-confirm-btn { // width: 100px; // height: 34px; border-radius: 4px 4px 4px 4px; background: #1a75e6; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #FFFFFF; } .custom-confirm-btn:hover { background: #1a75e6; color: #FFFFFF; } .custom-cancel-btn { // width: 100px; // height: 34px; border-radius: 4px 4px 4px 4px; background: #ffc63d; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #000000; } .custom-cancel-btn:hover { background: #ffc63d; color: #000000; } .my-confirm-btn { width: 100px; height: 34px; border-radius: 4px 4px 4px 4px; background: #1a75e6; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #FFFFFF; } .my-confirm-btn:hover { background: #1a75e6; color: #FFFFFF; } .my-cancel-btn { width: 100px; height: 34px; border-radius: 4px 4px 4px 4px; background: #ffc63d; font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; text-align: center; color: #000000; } .my-cancel-btn:hover { background: #ffc63d; color: #000000; } .primaryBtn { height: 30px; border-radius: 15px 15px 15px 15px; background: #1a75e6; font-family: Microsoft YaHei; font-weight: 600; font-size: 16px; text-align: center; color: #FFFFFF; padding: 7px 25px 8px 24px; } .primaryBtn:hover { background: #1a75e6; } .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before { color: #FF2A00; } // 确认消息框 .el-message-box__header { font-family: Microsoft YaHei; font-weight: 700; font-size: 18px; color: #000000; } .el-message-box__content { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } // 查询条件表单样式覆盖 .more-search-pane { display: flex; justify-content: space-between; align-items: center; } .search-where-container { flex: 1; } .search-more-button { width: 100px; text-align: right; display: flex; align-items: center; justify-content: flex-end; } .searchPanel { width: 100%; height: 45px; line-height: 45px; background: rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 20px; } .searchSmallPanel { width: 100%; height: 34px; line-height: 34px; background: rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 20px; } .el-button.is-text { background-color: transparent; border: 0 solid transparent; color: #ffffff; padding: 0 !important; } .el-button.is-text:not(.is-disabled):hover { background-color: transparent; border: 0 solid transparent; color: #ffffff; } .searchPanelForm .el-form-item--default, .searchSmallPanelForm .el-form-item--default { margin-bottom: 6px; } .searchPanelForm .el-form--inline .el-form-item, .searchSmallPanelForm .el-form--inline .el-form-item { display: inline-flex; margin-right: 26px; vertical-align: middle; } .searchPanelForm .el-form-item__label { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; min-width: 34px; } .searchSmallPanelForm .el-form-item__label { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; min-width: 34px; line-height: 34px; } // 文本输入框样式 .searchPanelForm .el-input__inner, .searchSmallPanelForm .el-input__inner { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; } .searchPanelForm .el-input__clear, .searchSmallPanelForm .el-input__clear { color: #FFFFFF; } .searchPanelForm .el-input__clear:hover, .searchSmallPanelForm .el-input__clear:hover { color: #FFFFFF; } .searchPanelForm .el-input__inner::placeholder, .searchSmallPanelForm .el-input__inner::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; } .searchPanelForm .el-input__wrapper, .searchSmallPanelForm .el-input__wrapper { background-color: transparent; border-radius: 0; box-shadow: none; padding: 0; } // 选择框样式 .searchPanelForm .el-select__wrapper, .searchSmallPanelForm .el-select__wrapper { background-color: transparent; border-radius: 0; box-shadow: none; padding: 0; } .searchPanelForm .el-select__wrapper.is-hovering:not(.is-focused), .searchSmallPanelForm .el-select__wrapper.is-hovering:not(.is-focused) { box-shadow: none; } .searchPanelForm .el-select__placeholder, .searchSmallPanelForm .el-select__placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; // 添加这三行,select中设置最小宽度,可以依据选择内容自适应 position: relative; top: none; transform: none; } .searchPanelForm .el-select__caret, .searchSmallPanelForm .el-select__caret { color: #FFFFFF; } // 查询日期框样式 .searchPanelForm .el-date-editor .el-range__icon, .searchSmallPanelForm .el-date-editor .el-range__icon { color: #FFFFFF; } .searchPanelForm .el-date-editor .el-range-separator, .searchSmallPanelForm .el-date-editor .el-range-separator { color: #FFFFFF; } .searchPanelForm .el-date-editor .el-range-input, .searchSmallPanelForm .el-date-editor .el-range-input { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; } .searchPanelForm .el-date-editor .el-range-input::placeholder, .searchSmallPanelForm .el-date-editor .el-range-input::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #FFFFFF; } .searchPanelForm .el-date-editor .el-range__close-icon, .searchSmallPanelForm .el-date-editor .el-range__close-icon { color: #FFFFFF; } .searchPanelForm .el-date-editor.el-input__wrapper:hover, .searchSmallPanelForm .el-date-editor.el-input__wrapper:hover { background-color: transparent; border-radius: 0; box-shadow: none !important; padding: 0; } // 独立查询输入框样式 .searchInputForm .el-form-item--default { margin-bottom: 0px; } .searchInputForm .el-input__inner { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } .searchInputForm .el-input__wrapper { border-radius: 18px; padding: 3px 15px; } .searchInputForm .el-input__inner::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #8C8C8C; } // 分页器 .pagination-container { display: flex; justify-content: center; margin-top: 20px; background-color: transparent !important; } .my-pagination .el-pagination__sizes, .el-pagination__total { font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; text-align: center; color: #000001; } .my-pagination .el-pagination__jump { font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; text-align: center; color: #000001; } .my-pagination .el-select__placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 14px; text-align: center; color: #000001; } .my-pagination .el-pagination__editor.el-input { width: 48px; } .my-pagination .el-input__wrapper { height: 28px; border-radius: 4px 4px 4px 4px; background: #ffffff; } .my-pagination .el-select { width: 100px; } .my-pagination .el-select__wrapper { height: 28px; border-radius: 4px 4px 4px 4px; background: #ffffff; } .my-pagination.is-background .btn-prev, .my-pagination.is-background .el-pager li, .my-pagination.is-background .btn-next { width: 30px; height: 28px; border-radius: 4px 4px 4px 4px; background: #f4f4f5; font-family: Arial; font-weight: 400; font-size: 14px; text-align: center; color: #000000; } .my-pagination.is-background .btn-next.is-active, .my-pagination.is-background .btn-prev.is-active, .my-pagination.is-background .el-pager li.is-active { background-color: #467CF6; color: #FFFFFF; } .my-pagination .btn-next .el-icon, .my-pagination .btn-prev .el-icon { fill: #C2CAD6; } // 主内容显示面板 .el-card { border: none; margin-bottom: 20px; } .el-card__body { padding: 0px 20px 20px 20px !important; } .el-card.is-always-shadow { box-shadow: none; } .el-card__header { height: 60px; font-family: Microsoft YaHei; font-weight: 700; font-size: 18px; color: #000000; border-bottom: 1px solid #DCDCDC; box-sizing: border-box; padding: 20px 30px !important; } .subHeaderTitle { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #000000; } // 弹窗样式覆盖 .my_dialog { padding: 0 !important; } .my_dialog .el-dialog__header { border-bottom: 1px solid #58585820 !important; padding: 16px; font-family: Microsoft YaHei; font-weight: 700; font-size: 18px; color: #000000; } .my_dialog .el-dialog__headerbtn { top: 6px; } .my_dialog .el-dialog__headerbtn .el-dialog__close { color: #000000; } .my_dialog .el-dialog__body { padding: 20px; } .my_dialog .el-dialog__footer { box-sizing: border-box; padding: 16px; text-align: center; border-top: 1px solid #58585830 !important; } // 表单录入样式 .myInsertForm .el-form-item--default { margin-bottom: 20px; } .myInsertForm .el-form--inline .el-form-item { display: inline-flex; margin-right: 26px; vertical-align: middle; } .myInsertForm .el-form-item__content { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; display: block; } .myInsertForm .el-form-item__label { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #3B3B3B; // min-width: 34px; } // 文本输入框样式 .myInsertForm .el-input__inner { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } .myInsertForm .el-input__clear { color: #B8B8B8; } .myInsertForm .el-input__clear:hover { color: #B8B8B8; } .myInsertForm .el-input__inner::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #B8B8B8; } .myInsertForm .el-input__wrapper { // background-color: transparent; // border-radius: 0; // box-shadow: none; // padding: 0; } // 选择框样式 .myInsertForm .el-select__wrapper { // background-color: transparent; // border-radius: 0; // box-shadow: none; // padding: 0; } .myInsertForm .el-select__wrapper.is-hovering:not(.is-focused) { // box-shadow: none; } .myInsertForm .el-select__placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; } .myInsertForm .el-select__caret { color: #B8B8B8; } // 单选框 .myInsertForm .el-radio__inner { width: 16px; height: 16px; } .myInsertForm .el-radio__label { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } // 复选框 .myInsertForm .el-checkbox__inner { width: 16px; height: 16px; } .myInsertForm .el-checkbox__label { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } // 树选择 .myInsertForm .el-text--default { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } // 多文本输入框 .myInsertForm .el-textarea__inner { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } .myInsertForm .el-textarea__inner::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #B8B8B8; } .myFeedBackForm .el-form-item__label { font-family: Microsoft YaHei; font-weight: 600; font-size: 16px; color: #000000; // min-width: 34px; } .myFeedBackForm .el-textarea__inner { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #525252; } .myFeedBackForm .el-textarea__inner::placeholder { font-family: Microsoft YaHei; font-weight: 400; font-size: 16px; color: #87898E !important; }