完成consumer端同步

components/homeService/ServiceInfoCard.uvue

@@ -0,0 +1,99 @@
+<template>
+	<view class="info-card">
+		<view class="header-row">
+			<view>
+				<text class="title">{{ title }}</text>
+				<text class="code">{{ code }}</text>
+			</view>
+			<ServiceStatusTag v-if="statusText != ''" :text="statusText" :tone="statusTone"></ServiceStatusTag>
+		</view>
+		<view v-for="item in items" :key="item.label" class="info-line">
+			<text class="info-label">{{ item.label }}</text>
+			<text class="info-value">{{ item.value }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
+
+type ServiceInfoItem = {
+	label: string
+	value: string
+}
+
+defineProps({
+	title: {
+		type: String,
+		default: ''
+	},
+	code: {
+		type: String,
+		default: ''
+	},
+	statusText: {
+		type: String,
+		default: ''
+	},
+	statusTone: {
+		type: String,
+		default: 'neutral'
+	},
+	items: {
+		type: Array<ServiceInfoItem>,
+		default: [] as Array<ServiceInfoItem>
+	}
+})
+</script>
+
+<style scoped>
+.info-card {
+	padding: 24rpx;
+	border-radius: 20rpx;
+	background: #f8fbfc;
+}
+
+.header-row {
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 12rpx;
+}
+
+.title {
+	font-size: 34rpx;
+	font-weight: 700;
+	color: #16324f;
+}
+
+.code,
+.info-label,
+.info-value {
+	margin-top: 10rpx;
+	font-size: 26rpx;
+	line-height: 38rpx;
+}
+
+.code,
+.info-label {
+	color: #66788a;
+}
+
+.info-value {
+	color: #16324f;
+	flex: 1;
+	text-align: right;
+}
+
+.info-line {
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	padding-top: 14rpx;
+	border-top-width: 1rpx;
+	border-top-style: solid;
+	border-top-color: #e2e8f0;
+	margin-top: 14rpx;
+	gap: 24rpx;
+}
+</style>