feat: 调整页面样式

src/views/approve/await/index.vue

@@ -3,16 +3,44 @@
 <template>
 	<div class="content-container">
 		<section class="flow-approve-box">
+			<!-- 需要抽成组件 -->
 			<div class="flow-content">
-				<div class="test">
-					<el-row class="row-bg" justify="space-around">
-						<el-col :span="6">test</el-col>
-						<el-col :span="6"><el-button type="success" plain size="small">123</el-button></el-col>
-					</el-row>
-					<el-row class="row-bg other-content" justify="space-around">
-						<el-col :span="6"><span class="item-title">假期类型：</span></el-col>
-						<el-col :span="6"><span class="item-value">123456</span></el-col>
-					</el-row>
+				<!-- 搜索框 -->
+				<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>
@@ -39,26 +67,113 @@
 			//background: #fff;
 			border-radius: 6px;
 			background: #0d84ff;
-			.test {
-				width: 330px;
-				min-width: 330px;
-				height: 100%;
-				overflow: hidden;
-				//background: #fff;
-				border-radius: 6px;
-				.other-content {
-					margin: 20px 0;
+			.search-box {
+				display: flex;
+				align-items: center;
+				height: 56px;
+				padding: 0 12px;
+				.search-segment {
+					margin-left: 4px;
 				}
-				.item-title {
-					font-size: 12px;
-					color: #c8cbcf;
+			}
+		}
+
+		// 列表
+		.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;
 				}
-				.item-value {
-					font-size: 12px;
-					color: #000000;
+				.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;