book-hi/pages-sell/components/category-icon.vue

<template>
	<view class="category-icon" @click="handleClick">
		<view class="icon-wrapper" :style="{ backgroundColor: bgColor }">
			<image :src="icon" mode="aspectFit" class="icon-image"></image>
		</view>
		<text class="icon-text">{{ text }}</text>
	</view>
</template>

<script>
export default {
	name: 'CategoryIcon',
	props: {
		icon: {
			type: String,
			required: true
		},
		text: {
			type: String,
			required: true
		},
		bgColor: {
			type: String,
			default: '#FF9500'
		}
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.category-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		
		.icon-image {
			width: 56rpx;
			height: 56rpx;
		}
	}
	
	.icon-text {
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 1.2;
	}
}
</style>