<template>
	<view class="menu-box">
		<view class="menu" v-for="(item,index) in menuList" :key='item.id' @click="$utils.route.clickJumpType(item)">
			<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
			<text class="text-1">{{item.pictureName}}</text>
			<text class="text-2">{{item.dataDescribe || '暂无描述'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-home-menu",
		props:{
			menuList:{
				type: Array,
				default:[]
			}
		}
	}
</script>

<style lang="scss">
	.menu-box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 0 -10rpx;

		.menu {
			width: 20%;
			padding: 0 10rpx;
			box-sizing: border-box;
			// height: 121rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.img {
				flex-shrink: 0;
				width: 83rpx;
				height: 83rpx;
				border-radius: 50%;
			}

			.text-1 {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #0F0404;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.text-2 {
				font-size: 20rpx;
				color: #666666;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
