aizuda-web-vue3/src/views/approve/await/index.vue

<script setup lang="ts"></script>

<template>
	<div class="content-container">
		<section class="flow-approve-box">
			<!-- 需要抽成组件 -->
			<div class="flow-content">
				<!-- 搜索框 -->
				<div class="search-box">
					<div class="search-segment" style="flex: 1 1 0%"></div>
					<div class="search-segment"></div>
					<div class="search-segment"></div>
				</div>

				<!-- 列表值 -->
				<div class="flow-list-box">
					<div class="item-box">
						<div class="flow-card-box flow-card-box-hoverable">
							<div class="header">
								<span class="typography name">请假</span>
								<div class="status"><el-button type="success" plain size="small">审核中</el-button></div>
							</div>
							<div class="summary-list">
								<div class="summary-item">
									<div class="label">假期类型：</div>
									<div class="value">事假</div>
								</div>
								<div class="summary-item">
									<div class="label">假期时间：</div>
									<div class="value">2023</div>
								</div>
							</div>
							<div class="footer">
								<div class="initiator">
									<div class="avatar" style="height: 28px; border-radius: 14px; padding: 4px">
										<div class="icon" style="width: 20px; height: 20px; font-size: 10px"></div>
										<div class="name" style="font-size: 11px">123</div>
									</div>
								</div>
								<div class="begin-time">提交时间：1233-34-56</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="flow-detail-content"></div>
		</section>
	</div>
</template>

<style scoped lang="scss">
.content-container {
	height: calc(100% - 45px);
	.flow-approve-box {
		width: 100%;
		height: calc(100vh - 105px);
		overflow: hidden;
		padding: 0 12px;
		display: flex;
		gap: 12px;

		.flow-content {
			width: 330px;
			min-width: 330px;
			height: 100%;
			overflow: hidden;
			//background: #fff;
			border-radius: 6px;
			background: #0d84ff;
			.search-box {
				display: flex;
				align-items: center;
				height: 56px;
				padding: 0 12px;
				.search-segment {
					margin-left: 4px;
				}
			}
		}

		// 列表
		.flow-list-box {
			background-color: #fff;
			padding: 0 12px;
			height: calc(100vh - 161px);
			overflow: hidden auto;
			scroll-snap-type: y mandatory;
			will-change: scroll-position;
			.item-box {
				margin-bottom: 12px;
			}
		}

		// 列表的卡片样式
		.flow-card-box {
			-webkit-user-select: none;
			user-select: none;
			border-radius: 6px;
			overflow: hidden;
			border: 1px solid #e9ebef;
			padding: 10px 12px;
			cursor: pointer;
			transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.typography {
					//color: var(--color-text-1); todo
					line-height: 1.5715;
					white-space: normal;
					overflow-wrap: anywhere;
				}
				.name {
					font-size: 15px;
				}
			}

			.summary-list {
				margin-top: 10px;
				.summary-item {
					display: flex;
					min-height: 20px;
					.label {
						color: #9ba5b3;
						overflow: hidden;
						white-space: nowrap;
						flex-shrink: 0;
					}
					.value {
						color: #232730;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.footer {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;
				.avatar {
					background: #f2f4f5;
					display: flex;
					align-items: center;
					width: fit-content;
					.icon {
						overflow: hidden;
						flex-shrink: 0;
						border-radius: 50%;
					}
					.name {
						-webkit-user-select: none;
						user-select: none;
						font-family: PingFangSC-Regular, PingFang SC;
						color: #34383e;
						margin: 0 4px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						max-width: 64px;
					}
				}
				.initiator {
					display: flex;
					align-items: center;
				}
				.begin-time {
					//color: #9ba5b3; todo
				}
			}
		}

		.flow-detail-content {
			height: 100%;
			overflow: hidden;
			//background: #fff;
			border-radius: 6px;
			flex: auto;
			background: #0934ff;
		}
	}
}
</style>