YouKeChuanMei_VUE/src/assets/styles/ruoyi.scss
2025-08-04 18:02:05 +08:00

986 lines
17 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 通用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;
}