hlt_app/components/Card/ProgressCard.vue

<!-- 带进度条的卡片 -->
<!-- 用于供水分析、灌溉进度等 -->
<template>
	<view class="progress-card-box">
		<view class="card-header">
			<view class="card-header-title">
				{{ props.cardInfo.title }}
			</view>
			<view class="card-header-time">
				{{ props.cardInfo.time }}
			</view>
		</view>
		<view class="card-body">
			<view class="card-body-list" v-if="props.cardInfo?.list">
				<view class="card-body-list-item" v-for="(item, index) in props.cardInfo.list" :key="index">
					<view class="label">
						{{item.label}}：
					</view>
					<view class="value">
						{{item.value}}
					</view>
				</view>
				<view class="card-body-list-item" v-for="(item, index) in props.cardInfo.progress" :key="index">
					<view class="label">
						{{item.label}}：
					</view>
					<view class="progress">
						<progress :percent="item.value" :active-color="item.color" show-info stroke-width="5" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		cardInfo: {
			type: Object,
			default: () => {
				return {
					title: '井研干渠（钟祥站）',
					list: [{
							label: '计划毛用水量',
							value: '263.71m³'
						},
						{
							label: '实际毛用水量',
							value: '263.71m³'
						}
					],
					progress: [{
							label: '计划进度',
							value: '88',
							color: "#2D74E7"
						},
						{
							label: '实际进度',
							value: '50',
							color: "#f0ad4e"
						}
					]
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.progress-card-box {
		padding: 0 32rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		.card-header {
			padding: 16rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 2rpx solid $uni-text-color-grey;

			&-title {
				font-family: Source Han Sans;
				font-size: 40rpx;
				font-weight: 500;
				font-feature-settings: "kern" on;
				color: $uni-text-color;
			}

			&-time {
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-feature-settings: "kern" on;
				color: $uni-text-color-grey;
			}
		}

		.card-body {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-list {
				width: 100%;

				&-item {
					display: flex;
					padding: 10rpx 0;
					width: 100%;
					align-items: center;

					.label {
						font-family: Source Han Sans;
						font-size: 32rpx;
						font-feature-settings: "kern" on;
						color: $uni-text-color-grey;
						white-space: nowrap;
					}
					
					.progress{
						flex: 1;
						
						::v-deep .uni-progress-bar{
							border-radius: 1998rpx;
							.uni-progress-inner-bar{
								border-radius: 1998rpx;
							}
						}
					}

					.value {
						font-family: Source Han Sans;
						font-size: 32rpx;
						font-feature-settings: "kern" on;
						color: $uni-text-color;
					}
				}
			}
		}
	}
</style>