489 lines
9.7 KiB
SCSS
489 lines
9.7 KiB
SCSS
// * 设置 notification/message 层级在 loading 之上
|
|
.el-message,
|
|
.el-notification {
|
|
z-index: 99999 !important;
|
|
}
|
|
|
|
// * 设置 el-alert 边框
|
|
.el-alert {
|
|
border: 1px solid;
|
|
}
|
|
|
|
// * 当前页面最大化 css
|
|
.main-maximize {
|
|
.aside-split,
|
|
.el-aside,
|
|
.el-header,
|
|
.el-footer,
|
|
.tabs-box {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// * card 卡片样式
|
|
.card {
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
overflow-x: hidden;
|
|
background-color: #092945;
|
|
// background-color: var(--el-fill-color-blank);
|
|
// border: 1px solid var(--el-border-color-light);
|
|
border-radius: 8px;
|
|
// box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
|
// height: 56px;
|
|
}
|
|
|
|
// * 不需要 card 卡片样式（在组件内使用 proTable 会使用到）
|
|
.no-card {
|
|
.card {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
.table-search {
|
|
padding: 18px 0 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
// * content-box (常用内容盒子)
|
|
.content-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
.text {
|
|
margin: 20px 0 30px;
|
|
font-size: 23px;
|
|
font-weight: bold;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
.el-descriptions {
|
|
width: 100%;
|
|
padding: 40px 0 0;
|
|
.el-descriptions__title {
|
|
font-size: 18px;
|
|
}
|
|
.el-descriptions__label {
|
|
width: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// * main-box (树形表格 treeFilter 页面会使用，左右布局 flex)
|
|
.main-box {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
.table-box {
|
|
/* 这里减去的是 treeFilter 组件宽度 */
|
|
width: calc(100% - 300px);
|
|
}
|
|
}
|
|
|
|
// * table 表格页面样式
|
|
.table-box,
|
|
.table-main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
|
|
// table-search 表格搜索样式
|
|
.table-search {
|
|
padding: 12px 0 0px 36px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
// background-color: pink;
|
|
box-sizing: border-box;
|
|
.el-form {
|
|
.el-form-item__content > * {
|
|
width: 160px;
|
|
}
|
|
.el-form-item__label {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.el-input__wrapper {
|
|
background-color: transparent;
|
|
box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
|
|
}
|
|
.el-input__inner {
|
|
color: white;
|
|
}
|
|
// 去除时间选择器上下 padding
|
|
.el-range-editor.el-input__wrapper {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
.operation {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: 18px;
|
|
|
|
// margin-left: 25px;
|
|
}
|
|
}
|
|
|
|
// 表格 header 样式
|
|
.table-header {
|
|
.header-button-lf {
|
|
float: left;
|
|
}
|
|
.header-button-ri {
|
|
float: right;
|
|
}
|
|
.el-button {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
// el-table 表格样式
|
|
.el-table {
|
|
background-color: transparent;
|
|
flex: 1;
|
|
|
|
// 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
|
|
table {
|
|
width: 100%;
|
|
}
|
|
tr {
|
|
background-color: transparent;
|
|
}
|
|
td.el-table__cell {
|
|
background-color: transparent !important;
|
|
border-bottom: 0 !important;
|
|
}
|
|
th.el-table__cell {
|
|
background-color: transparent;
|
|
border-bottom: 0 !important;
|
|
}
|
|
td.el-table-fixed-column--right {
|
|
background-color: transparent !important;
|
|
}
|
|
.el-table__header {
|
|
// background-color: #09405f;
|
|
background: rgba(11, 196, 240, 0.15);
|
|
// background: url("@/assets/images/layoutImg/tableThead.png") no-repeat 0 0;
|
|
// background-size: 100% 100%;
|
|
}
|
|
.el-table__header th {
|
|
height: 60px;
|
|
font-size: 14px;
|
|
// font-weight: bold;
|
|
color: var(--el-color-primary);
|
|
// background: var(--el-fill-color-light);
|
|
}
|
|
.el-table__row:nth-child(2n) {
|
|
height: 60px;
|
|
font-size: 14px;
|
|
background-color: #09314e;
|
|
// background: url("@/assets/images/layoutImg/tableTwoN.png") no-repeat 0 0;
|
|
// background-size: 100% 100%;
|
|
}
|
|
|
|
.el-table__row:nth-child(2n-1) {
|
|
height: 60px;
|
|
font-size: 14px;
|
|
// background-color: transparent !important;
|
|
}
|
|
|
|
.el-table__row:hover {
|
|
background-color: #09405f;
|
|
// background: url("@/assets/images/layoutImg/TableHover.png") no-repeat 0 0;
|
|
// background-size: 100% 100%;
|
|
}
|
|
.el-table__row {
|
|
height: 60px;
|
|
font-size: 14px;
|
|
color: #c4c4c4;
|
|
}
|
|
|
|
// 设置 el-table 中 header 文字不换行，并省略
|
|
.el-table__header .el-table__cell > .cell {
|
|
white-space: nowrap;
|
|
|
|
// height: 60px;
|
|
}
|
|
|
|
// 解决表格数据为空时样式不居中问题(仅在element-plus中)
|
|
.el-table__empty-block {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
.table-empty {
|
|
margin-top: 20px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
// table 中 image 图片样式
|
|
.table-image {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// 表格 pagination 样式
|
|
.el-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
.el-pagination__goto {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.el-pagination__classifier {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.el-input__wrapper {
|
|
color: var(--el-color-primary);
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
|
|
height: 26px;
|
|
}
|
|
.el-input__inner {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.el-pager li {
|
|
background-color: transparent;
|
|
color: var(--el-color-primary);
|
|
border: 1px solid var(--el-color-primary);
|
|
height: 26px;
|
|
}
|
|
.el-pager li:active {
|
|
color: var(--el-color-primary);
|
|
border: none;
|
|
height: 26px;
|
|
}
|
|
.el-pagination__total {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.btn-prev,
|
|
.btn-next,
|
|
.btn-prev:disabled,
|
|
.btn-next:disabled {
|
|
color: var(--el-color-primary);
|
|
background-color: transparent;
|
|
border: 1px solid var(--el-color-primary);
|
|
height: 26px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 去除表格的横线
|
|
// .el-table td.el-table__cell,
|
|
// .el-table th.el-table__cell.is-leaf {
|
|
// border-bottom: none;
|
|
// }
|
|
|
|
// * el-table 组件大小切换样式
|
|
.el-table--small {
|
|
.el-table__header th {
|
|
height: 40px !important;
|
|
font-size: 14px !important;
|
|
}
|
|
.el-table__row {
|
|
height: 40px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
.el-table--large {
|
|
.el-table__header th {
|
|
height: 50px !important;
|
|
font-size: 16px !important;
|
|
}
|
|
.el-table__row {
|
|
height: 50px !important;
|
|
font-size: 15px !important;
|
|
}
|
|
}
|
|
|
|
// * el-drawer 样式
|
|
.el-drawer {
|
|
.el-drawer__header {
|
|
padding: 15px 20px 14px;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
span {
|
|
font-size: 17px;
|
|
color: var(--el-text-color-primary) !important;
|
|
}
|
|
}
|
|
.el-drawer__footer {
|
|
border-top: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
|
|
// drawer select 样式
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
// drawer-form 中存在两列 form-item
|
|
.drawer-multiColumn-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.el-form-item {
|
|
width: 47%;
|
|
&:nth-child(2n-1) {
|
|
margin-right: 5%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// * el-dialog 样式
|
|
.el-dialog {
|
|
background-color: rgba(9, 64, 95, 0.85);
|
|
border-radius: 8px;
|
|
// .el-dialog__body {
|
|
// min-height: 300px;
|
|
// }
|
|
|
|
// min-height: 50%;
|
|
// 标记弹窗高度
|
|
.el-dialog__header {
|
|
padding: 15px 20px;
|
|
margin: 0;
|
|
|
|
// display: flex;
|
|
// align-items: center;
|
|
// border-bottom: 1px solid var(--el-border-color-lighter);
|
|
.el-dialog__title {
|
|
font-size: 20px;
|
|
color: white;
|
|
}
|
|
}
|
|
.el-dialog__footer {
|
|
text-align: center;
|
|
|
|
// margin: -36px 0;
|
|
}
|
|
}
|
|
.hzStyle {
|
|
background-color: #087ba4;
|
|
border-color: #087ba4;
|
|
}
|
|
.hzCancelStyle {
|
|
margin-right: 14%;
|
|
background-color: transparent;
|
|
border-color: #087ba4;
|
|
color: #0a769a;
|
|
}
|
|
.addButtonStyle {
|
|
color: #ffffff;
|
|
background-color: #30ac7c;
|
|
}
|
|
.cancelButtonStyle {
|
|
margin-right: 14%;
|
|
background: rgb(0 0 0 / 10%);
|
|
}
|
|
.el-table__body tr:hover > td {
|
|
// background-color: #008bff !important;
|
|
background-color: rgb(0 139 255 / 10%) !important;
|
|
}
|
|
.el-input-group__append {
|
|
padding: 0 8px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
background-color: #008bff;
|
|
|
|
// height: 38px;
|
|
}
|
|
.el-message-box__btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
.el-button--default {
|
|
margin: 0 10%;
|
|
}
|
|
}
|
|
|
|
// 步骤条的
|
|
// .el-step__line {
|
|
// background-color: #3e7bfa;
|
|
// }
|
|
.el-step__icon.is-text {
|
|
// background-color: #3E7BFA;
|
|
border-radius: 0;
|
|
|
|
// color: #3e7bfa;
|
|
// border: 2px solid #3e7bfa;
|
|
}
|
|
|
|
// .el-step__icon {
|
|
// // background-color: #3E7BFA;
|
|
// border-radius: 0;
|
|
// color: pink;
|
|
// // border: 2px solid #3e7bfa;
|
|
// }
|
|
.el-step__title.is-process {
|
|
color: #3e7bfa;
|
|
}
|
|
.el-steps--horizontal {
|
|
margin: 0 0 50px;
|
|
}
|
|
.el-step__head.is-process {
|
|
color: #3e7bfa;
|
|
border-color: #3e7bfa;
|
|
}
|
|
.el-input-number {
|
|
width: 100%;
|
|
}
|
|
.el-input-select {
|
|
width: 100%;
|
|
}
|
|
|
|
// 下载的文件名宽度
|
|
.el-upload-list__item-file-name {
|
|
width: 100%;
|
|
}
|
|
// 按钮的字体大小
|
|
.el-button {
|
|
font-size: 12px;
|
|
}
|
|
// .el-form-item--default{
|
|
// display: flex;
|
|
// align-items: center;
|
|
// }
|
|
|
|
// card去除阴影和边框
|
|
.el-card {
|
|
border: none;
|
|
}
|
|
.el-card.is-always-shadow {
|
|
box-shadow: none;
|
|
}
|
|
|
|
// 单选框
|
|
.el-radio {
|
|
.el-radio__inner {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
background-color: transparent;
|
|
}
|
|
.el-radio__input.is-checked .el-radio__inner {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
background-color: transparent;
|
|
}
|
|
.el-radio__inner::after {
|
|
width: 13px;
|
|
height: 13px;
|
|
background: #3f6ab0;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
// 表单
|
|
.el-form {
|
|
.el-form-item__label {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|