wisdomisitezwfront-web/src/styles/element.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: var(--el-fill-color-blank);
	border: 1px solid var(--el-border-color-light);
	border-radius: 4px;
	box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

// * 不需要 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;

	// table-search 表格搜索样式
	.table-search {
		padding: 18px 18px 0;
		margin-bottom: 10px;
		border-radius: 12px;
		.el-form {
			.el-form-item__content > * {
				width: 160px;
			}

			// 去除时间选择器上下 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 {
		flex: 1;

		// 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
		table {
			width: 100%;
		}
		.el-table__header th {
			height: 45px;
			font-size: 14px;

			// font-weight: bold;
			color: #333333;
			background: var(--el-fill-color-light);
		}
		.el-table__row {
			height: 63px;
			font-size: 14px;
		}

		// 设置 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-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 {
	border-radius: 8px;

	// 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;
		}
	}
	.el-dialog__footer {
		text-align: center;

		// margin: -36px 0;
	}
}
.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: 100px;
}