feat: 审批列表UI调整 - 左侧列表

src/views/approve/components/approvedItem.vue

@@ -5,16 +5,31 @@
 		<!-- 内容值 -->
 		<div class="flow-list-box">
 			<div class="item-box">
-				<div class="flow-card-box flow-card-box-hoverable"></div>
+				<div class="flow-card-box flow-card-box-hoverable">
+					<!--头部-->
+					<div class="header">
+						<el-text tag="b">我是Bold</el-text>
+						<el-tag type="primary">待审核</el-tag>
+					</div>
+					<!--操作类容-->
+					<div class="summary-list"></div>
+					<!--底部-->
+					<div class="footer">
+						<!-- 头像 -->
+						<div class="initiator">
+							<FlowNodeAvatar id="1" />
+						</div>
+						<!-- 时间 -->
+						<div class="begin-time">提交于 2024-02-29 15:30:23</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'ApprovedItem'
-}
+<script setup>
+import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 </script>
 
 <style scoped lang="scss">
@@ -45,6 +60,36 @@ export default {
 			padding: 10px 12px;
 			cursor: pointer;
 			transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+
+			&.flow-card-box-hoverable {
+				&:hover {
+					box-shadow: 4px 4px 12px rgb(229, 230, 235);
+				}
+			}
+
+			// 头部
+			.header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			// 操作类容
+			.summary-list {
+				margin-top: 10px;
+			}
+
+			// 底部
+			.footer {
+				margin-top: 10px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-size: 13px;
+				.begin-time {
+					color: var(--el-text-color-regular);
+				}
+			}
 		}
 	}
 }