aiot-app/pages/index/MenuIcon.vue

<template>
	<view class="menu-icon" :style="{ background: bg, color: color }">{{ char }}</view>
</template>

<script>
	import {
		resolveMenuIcon
	} from "./menu-icon";
	export default {
		name: "MenuIcon",
		props: {
			// 菜单名称（如「离职交接单」「保养工单」），接口新增菜单无需配置即可自动出图
			name: {
				type: String,
				default: "",
			},
		},
		computed: {
			icon() {
				return resolveMenuIcon(this.name);
			},
			char() {
				return this.icon.char;
			},
			color() {
				return this.icon.color;
			},
			bg() {
				return this.icon.bg;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.menu-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 44rpx;
		font-weight: 600;
		line-height: 1;
		margin-bottom: 12rpx;
	}
</style>