aizuda-web-vue3/src/views/approve/components/approvedItem.vue

<template>
	<!-- 左侧列表 -->
	<div class="flow-content">
		<!-- 搜索条件 -->
		<div class="search-box">
			<div class="search-segment" style="flex: 1 1 0%">
				<el-input v-model="input3" placeholder="流程名称">
					<template #append>
						<el-button :icon="Search" />
					</template>
				</el-input>
			</div>
			<div class="search-segment">
				<el-tooltip effect="dark" content="重置" placement="top">
					<el-button :icon="Refresh" />
				</el-tooltip>
			</div>
			<div class="search-segment">
				<el-button :icon="Filter" />
			</div>
		</div>
		<!-- 内容值 -->
		<div v-infinite-scroll="load" class="flow-list-box">
			<div v-for="i in count" :key="i" class="item-box" :class="[i === 2 ? 'item-box-choosed' : '']">
				<div class="flow-card-box flow-card-box-hoverable">
					<!--头部-->
					<div class="header">
						<el-text tag="b">我是Bold {{ i }}</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 setup>
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
import { Search, Filter, Refresh } from '@element-plus/icons-vue'

import { ref } from 'vue'
const count = ref(0)
const load = () => {
	count.value += 2
}
</script>

<style scoped lang="scss">
.flow-content {
	width: 330px;
	min-width: 330px;
	height: 100%;
	overflow: hidden;
	background: var(--el-bg-color);
	border-radius: 6px;

	// 搜搜条件
	.search-box {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 12px;

		.search-segment + .search-segment {
			margin-left: 4px;
		}
		//> .el-button {
		//	padding: 0;
		//	width: 32px;
		//	background-color: var(--el-fill-color-light);
		//}
	}

	.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;
			&.item-box-choosed {
				.flow-card-box {
					border-color: var(--el-color-primary);
				}
			}
		}
		.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);

			&.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);
				}
			}
		}
	}
}
</style>