hlt_app/components/Card/FlowCard.vue

<!-- 我的流程中所用卡片 -->
<template>
	<view class="flow-card-box">
		<view class="card-content">
			<view class="content-left">
				<view class="title">
					{{props.cardInfo.title}}
				</view>
				<view class="time">
					<view class="icon">
						<image style="width: 100%; height: 100%;" src="/static/images/components/card/clock.svg" mode="scaleToFill"></image>
					</view>
					<text>{{props.cardInfo.time}}</text>
				</view>
			</view>
			<view class="content-status-icon">
				<image style="width: 100%; height: 100%;" :src="`/static/images/components/card/flow-${props.cardInfo.flow}.svg`" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="btn">
			<button style="border-radius: 9999px;" type="primary" @tap="clickDetail">查看详情</button>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		cardInfo:{
			type:Object,
			default:()=>{
				return {
					title:"张三提交的水库水情表",
					time:"2024-04-10 12:00:00",
					flow:"待审批",
					id:"1"
				}
			}
		}
	})
	const emit = defineEmits(['handleClickDetail'])
	const clickDetail = ()=>{
		emit('handleClickDetail')
	}
</script>

<style lang="scss" scoped>
.flow-card-box{
	padding: 32rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	
	.card-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		
		.content-left{
			.title{
				font-family: Source Han Sans;
				font-size: 20px;
				font-weight: 600;
				font-feature-settings: "kern" on;
				color: $uni-text-color;
				margin-bottom: 10px;
			}
			.time{
				display: flex;
				align-items: center;
				
				.icon{
					width: 16px;
					height: 16px;
					margin-right: 8px;
				}
				
				text{
					font-family: Roboto;
					font-size: 16px;
					font-weight: bold;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}
			}
		}
		
		.content-status-icon{
			width: 55px;
			height: 48px;
		}
	}
	
	.btn{
		width: 130px;
	}
}
</style>