完成consumer端同步

components/homeService/ServiceActionRow.uvue

@@ -0,0 +1,83 @@
+<template>
+	<view class="action-row" :class="compact ? 'compact-row' : ''">
+		<view v-for="item in actions" :key="item.key" class="action-btn" :class="item.tone" @click="handleClick(item.key)">
+			{{ item.label }}
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+type ServiceActionItem = {
+	key: string
+	label: string
+	tone: string
+}
+
+defineProps({
+	actions: {
+		type: Array<ServiceActionItem>,
+		default: [] as Array<ServiceActionItem>
+	},
+	compact: {
+		type: Boolean,
+		default: false
+	}
+})
+
+const emit = defineEmits<{
+	(e: 'action', key: string): void
+}>()
+
+function handleClick(key: string) {
+	emit('action', key)
+}
+</script>
+
+<style scoped>
+.action-row {
+	margin-top: 20rpx;
+	flex-direction: row;
+	gap: 16rpx;
+}
+
+.compact-row {
+	margin-top: 12rpx;
+}
+
+.action-btn {
+	flex: 1;
+	padding: 20rpx 0;
+	border-radius: 16rpx;
+	text-align: center;
+	font-size: 26rpx;
+	font-weight: 700;
+}
+
+.ghost {
+	background: #ffffff;
+	color: #16324f;
+	border-width: 2rpx;
+	border-style: solid;
+	border-color: #d7e0ea;
+}
+
+.primary {
+	background: #1d4ed8;
+	color: #ffffff;
+}
+
+.warn {
+	background: #fff4e5;
+	color: #b45309;
+}
+
+.success {
+	background: #e8f7ef;
+	color: #15803d;
+}
+
+.teal {
+	background: #e6fffb;
+	color: #0f766e;
+}
+</style>