<template>
	<view class="nav-card">
		<u-grid :col="4" customStyle="height: 334rpx;align-content: normal" >
			<u-grid-item v-for="(item, index) in navItems" :key="item.icon" @click="handleItemClick(index)">
				<u-icon :name="item.icon" :size="46"></u-icon>
				<view class="grid-text">{{ item.text }}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navItems: [{
						icon: "/static/navbar/sy_icon_zrxx.png",
						text: "转让信息"
					},
					{
						icon: "/static/navbar/sy_icon_zdxx.png",
						text: "找店信息"
					},
					{
						icon: "/static/navbar/sy_icon_czxx.png",
						text: "出租信息"
					},
					{
						icon: "/static/navbar/sy_icon_xmzs.png",
						text: "项目招商"
					},
					{
						icon: "/static/navbar/sy_icon_cjal.png",
						text: "成交案例"
					},
					{
						icon: "/static/navbar/sy_icon_spdt.png",
						text: "速配地图"
					},
					{
						icon: "/static/navbar/sy_icon_zmhb.png",
						text: "招募合伙"
					},
					{
						icon: "/static/navbar/sy_icon_lxwm.png",
						text: "联系我们"
					}
					// 可以继续添加更多的项目
				]
			};
		},
		methods: {
			handleItemClick(index) {
				// 在这里处理点击事件，并使用下标值
				console.log(`项目 ${index} 被点击了`);
				// 或者执行其他需要的操作
			}
		}
	};
</script>



<style lang="scss">
	.nav-card {
		margin: 15px 0px;
		padding: 10px 0;
		background-color: $uni-bg-color;

		border-radius: $uni-border-radius-lg;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);

		.grid-text {
			font-size: 12px;
		}
	}
</style>