初始化参股

前端/components/service-card/service-card.uvue

@@ -0,0 +1,56 @@
+<template>
+	<view class="service-card" @click="handleClick">
+		<view class="service-icon-wrapper">
+			<image class="service-icon" :src="icon" mode="aspectFit"></image>
+		</view>
+		<text class="service-name">{{ name }}</text>
+	</view>
+</template>
+
+<script setup lang="uts">
+	const props = defineProps<{
+		id : string
+		name : string
+		icon : string
+	}>()
+	
+	const emit = defineEmits<{
+		(e : 'click', id : string) : void
+	}>()
+	
+	const handleClick = () => {
+		emit('click', props.id)
+	}
+</script>
+
+<style lang="scss">
+	.service-card {
+		align-items: center;
+		justify-content: center;
+		padding: 24rpx 16rpx;
+		background-color: #ffffff;
+		border-radius: 16rpx;
+		width: 160rpx;
+	}
+	
+	.service-icon-wrapper {
+		width: 80rpx;
+		height: 80rpx;
+		background-color: #FDF6EE;
+		border-radius: 50%;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 16rpx;
+	}
+	
+	.service-icon {
+		width: 48rpx;
+		height: 48rpx;
+	}
+	
+	.service-name {
+		font-size: 26rpx;
+		color: #333333;
+		text-align: center;
+	}
+</style>