aizuda-web-vue3/src/views/flow/modal/index.vue

<template>
	<div class="pageWrap">
		<div style="padding: 10px">
			<el-card class="box-card">
				<el-row :gutter="20">
					<el-col :span="6"><el-input v-model="input" placeholder="请输入名称和拼音" /> </el-col>
					<el-col :span="6"> <el-button type="primary">创建审批</el-button></el-col>
				</el-row>
			</el-card>
		</div>
		<div style="padding: 10px">
			<el-card class="box-card">
				<el-collapse v-model="activeNames" @change="handleChange">
					<el-collapse-item title="合同审批" name="1">
						<el-row>
							<el-col v-for="i in 30" :span="6" style="padding-left: 8px; padding-right: 8px; margin-bottom: 12px; cursor: pointer">
								<div class="card-in">
									<div class="flow-icon">
										<img
											src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwBAMAAAA0zul4AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURf///zKW+ur0/nO4+6XR/YvE/Eqi+5DG/Nnr/sPg/brnfYAAAAFMSURBVFjD7dfPSsNAEAbwNTGtuXVM09pbqCAeFV8gwYNXtU+wioI3FcFrLorH+OeBncYuSnYl+wUKEueDNmHhR8rO7myqqGOUQIECBQoUaDK5dsQD3ihXNtth6YTqtQ0mbqcGbXD8C4z6BYPFUSP3ftCawOVU+8ANezH5QXuVzDwnJ5g38nfruP/SSOYHh9bkjNdcjrDrAghOHhvJe7ettlab6RaFA9fDkTpOURivbi963OX+H/x4qLrA4IzHzjvA57pzVDCMsU7+nT0eKfiTofCQKF2SAxAGPLBdf4GQz63LXB1rHsVgRDtfD05BGLKofQJDOuXLHQyHdQm5mOhPjQ2coXXUXIiM6zFCYUGj3aTUlKMwpIQPOd9j7ufS0abDotsqMu+wcAd40nRV+sCp1W0ysxbW9GpNlRsWrTB9mzvyLn/KBAoUKFCgyScZMYmWkzKSDQAAAABJRU5ErkJggg=="
											alt=""
										/>
									</div>
									<div class="space space-vertical">
										<div class="space-item">
											<div class="first-edit">
												<strong>合同审批 {{ i }} (1.2)</strong>
												<el-dropdown>
													<span class="el-dropdown-link">
														配置
														<el-icon class="el-icon--right">
															<arrow-down />
														</el-icon>
													</span>
													<template #dropdown>
														<el-dropdown-menu>
															<el-dropdown-item>修改</el-dropdown-item>
															<el-dropdown-item>复制</el-dropdown-item>
															<el-dropdown-item>停用</el-dropdown-item>
														</el-dropdown-menu>
													</template>
												</el-dropdown>
											</div>
										</div>
										<div class="space-item">
											<div>2023-09-03 17:00:00</div>
										</div>
										<div class="space-item">
											<div>钉钉</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-collapse-item>
				</el-collapse>
			</el-card>
		</div>
	</div>
</template>

<script setup name="flow_modal">
import { ref } from 'vue'
const input = ref('')
const activeNames = ref(['1'])
import { ArrowDown } from '@element-plus/icons-vue'
const handleChange = val => {
	console.log(val)
}
</script>

<style scoped lang="scss">
.pageWrap {
	//height: 100%;
	overflow-x: scroll;
	//background: #fff;
}
.card-in {
	height: 100px;
	border-radius: 8px;
	padding: 16px;
	display: flex;
	flex-direction: row;
	width: 100%;
	border: 1px solid #d9d9d9;
	background: var(--component-background);
	cursor: pointer;
	> div:nth-child(1) {
		vertical-align: middle;
	}
	> div:nth-child(2) {
		flex: 0 1 100%;
		margin-left: 12px;
		text-overflow: ellipsis;
		overflow: hidden;
		.first-edit {
			font-size: 14px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
		}
		> div {
			cursor: default;
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 12px;
		}
	}
	.flow-icon {
		flex: 0 0 66px;

		img {
			flex: 0 0 auto;
			height: 100%;
			border-radius: 8px;
			vertical-align: middle;
			border-style: none;
		}
	}
	.space {
		display: inline-flex;
	}
	.space-vertical {
		flex-direction: column;
	}
	&:hover {
		border: 1px solid var(--el-color-primary);
		box-shadow: 0 0 4px #ddd;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}
}
</style>