hlt_app/components/Card/BaseCard.vue

<template>
	<view class="base-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>
			<view class="card-body-right">
				<image style="width: 100%; height: 100%;" src="/static/images/index/deploy/right-arrow.svg"
					mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		cardInfo: {
			type: Object,
			default: () => {
				return {
					title: '标题',
					time: '2024-04-08 12:00:00',
					list: [{
							label: 'label',
							value: '100m³'
						},
						{
							label: 'label',
							value: '100m³'
						}
					]
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.base-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 {

				&-item {
					display: flex;

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

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

			&-right {
				width: 20rpx;
				height: 36rpx;
			}
		}
	}
</style>