77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<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> |