VberAdminPlusV3/UI/VAP_V3.VUE/src/assets/sass/_table.scss

.vb-table {
	--table-footer-height: 50px;
	--table-radius: var(--bs-card-inner-border-radius);
	--table-bg: var(--bs-app-header-minimize-bg-color);
	width: 100%;
	position: relative;
	background-color: var(--table-bg);
	border-radius: var(--table-radius);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	overflow-y: auto;
	overflow-x: hidden;

	.table-tool {
		width: 100%;
		padding: 0 20px;
		border-radius: var(--table-radius) var(--table-radius) 0 0;
	}
	.table-responsive {
		width: 100%;
	}
	.table-box {
		position: relative;
		width: 100%;
		min-height: 90px;
		> div {
			overflow-y: auto;
			height: 100%;
		}
		.fixed-columns,
		.fixed-columns-right {
			position: absolute;
			top: 0;
			height: calc(100% - 10px);
			box-sizing: border-box;
			background-color: var(--table-bg);
			z-index: 2;
			overflow: hidden !important;
			// 使用 will-change 提示浏览器优化性能
			will-change: transform;
			// 启用硬件加速
			transform: translateZ(0);
			&.no-shadow {
				box-shadow: none;
			}
			// 确保内部内容可以正确应用transform
			> div {
				will-change: transform;
				transform: translateZ(0);
			}
		}
		.fixed-columns {
			left: 0;
			box-shadow: 20px -2px 10px -13px #ddd;
		}
		.fixed-columns-right {
			right: 0;
			box-shadow: -20px -2px 10px -13px #ddd;
		}
		&.radius {
			border-radius: var(--table-radius) var(--table-radius) 0 0;
			.fixed-columns,
			.table-responsive,
			.fixed-columns-right {
				border-radius: var(--table-radius) var(--table-radius) 0 0;
			}
		}
		table {
			table-layout: fixed;
			border-collapse: collapse;
			width: 100%;
			--h: 37px;

			thead {
				vertical-align: middle;
				table-layout: fixed;
				&.fixed {
					position: sticky;
					top: 0px;
					z-index: 10;
					tr {
						&:first-child {
							border-top: none !important;
						}
					}
				}
				tr {
					th {
						height: calc(var(--h) + 8px);
						line-height: calc(var(--h) + 8px);
						padding-top: 0px;
						padding-bottom: 0px;
						background-color: #fff;
						font-size: 110%;
						vertical-align: middle;

						// background-image: linear-gradient(rgba(0,0,0,.02),rgba(0,0,0,.02));
					}
				}
			}
			tbody {
				overflow-y: auto;

				tr {
					&:nth-child(even) {
						background-color: var(--vb-tr-even-bg-color);
					}
					td {
						padding-top: 0px;
						padding-bottom: 0px;
						height: var(--h);
						line-height: var(--h);

						.table-action {
							padding: 2px 4px;
							margin: 0 4px;
							color: var(--bs-text-primary);
							cursor: pointer;
							&:hover {
								border-bottom: 2px solid;
							}
						}
					}
				}
			}
		}
	}

	.table-footer {
		width: 100%;
		height: var(--table-footer-height);
		align-items: center;
		border-radius: 0 0 var(--table-radius) var(--table-radius);
	}

	tr.text-center {
		th,
		td {
			text-align: center;
		}
	}

	// &.pagination{
	//   .fixed-columns,   .fixed-columns-right{
	//     height:calc(100% - var(--table-footer-height) - 10px);
	//   }
	// }
}
.vb-table.vb-tree-table {
	tr {
		&.hide {
			display: none;
			animation: hideTr 0.5s linear;
		}
		&.show {
			animation: showTr 0.5s linear;
		}
		.tree-icon {
			.icon {
				cursor: pointer;
			}
		}
	}
}

@keyframes showTr {
	0% {
		display: none;
		opacity: 0;
	}
	100% {
		opacity: 1;
		display: table-row;
	}
}

@keyframes hideTr {
	0% {
		opacity: 1;
		display: table-row;
	}
	100% {
		display: none;
		opacity: 0;
	}
}