153 lines
2.6 KiB
Vue
153 lines
2.6 KiB
Vue
<template>
|
|
<view class="index-page bg-page">
|
|
<view class="menus-section" v-for="(menu,index) in menuList" :key="index">
|
|
<view class="title-t">{{menu.label}}</view>
|
|
<view class="menu-ul">
|
|
<view class="menu-li" v-for="(cdm,i) in menu.children" :key="i">
|
|
<view class="menu_item" @click="linknavFn(cdm)">
|
|
<view class="icon"></view>
|
|
<view class="name">{{cdm.label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: 'Hello',
|
|
menuList:[
|
|
{
|
|
label:'监测数据管理',
|
|
children:[
|
|
{
|
|
label:'气象监测',
|
|
},
|
|
{
|
|
label:'智能监控',
|
|
},
|
|
{
|
|
label:'土壤监控',
|
|
},
|
|
{
|
|
label:'水质监控',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label:'基础数据管理',
|
|
children:[
|
|
{
|
|
label:'城镇数据',
|
|
},
|
|
{
|
|
label:'基地数据',
|
|
},
|
|
{
|
|
label:'城镇农作物',
|
|
},
|
|
{
|
|
label:'基地农作物',
|
|
},
|
|
{
|
|
label:'城镇产量',
|
|
},
|
|
{
|
|
label:'基地产量',
|
|
},
|
|
{
|
|
label:'稻虾价格',
|
|
},
|
|
{
|
|
label:'稻虾每周价格',
|
|
},
|
|
{
|
|
label:'稻虾产业',
|
|
},
|
|
{
|
|
label:'稻虾流向',
|
|
},
|
|
{
|
|
label:'大宗物资',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label:'设备管理',
|
|
children:[
|
|
{
|
|
label:'设备管理',
|
|
},
|
|
{
|
|
label:'警报明显',
|
|
}
|
|
],
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
linknavFn(item){
|
|
console.log(item)
|
|
if(item.label=='气象监测'){
|
|
uni.navigateTo({
|
|
url:'/pages/index/meteorological'
|
|
})
|
|
}else if(item.label=='智能监控'){
|
|
uni.navigateTo({
|
|
url:'/pages/index/monitor'
|
|
})
|
|
}else if(item.label=='土壤监控'){
|
|
uni.navigateTo({
|
|
url:'/pages/index/soil-monitoring'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index-page{
|
|
background-color: #f8f8f8;
|
|
padding-top: 40rpx;
|
|
}
|
|
.menus-section{
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
margin-top: -18rpx;
|
|
.title-t{
|
|
margin-bottom: 24rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
.menu-ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.menu-li{
|
|
flex: 0 0 25%;
|
|
text-align: center;
|
|
padding: 0 10rpx;
|
|
margin-bottom: 18rpx;
|
|
.menu_item{
|
|
background-color: #fff;
|
|
box-shadow:0 0 20rpx rgba(0,0,0,0.15);
|
|
min-height: 90rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|