transport_integrated_app/pages/home/index.vue

<template>
	<view class="home_warp">
		<view class="home_box">
			<view class="home_item" v-for="(item, index) in routeData" :index="index" :key="index">
				<image :src="item.img" class="img"></image>
				<view class="txt">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				routeData: [{
						name: "highway",
						title: "高速",
						img: '/static/image/highway.png',
						children: [{
							name: 'runData',
							title: '高速运行数据'
						}, {
							name: 'runStatusData',
							title: '高速运行情况'
						}]
					},
					{
						name: "roadTransport",
						title: "道路运输",
						img: '/static/image/roadTransport.png',
						children: [{
							name: 'transportData',
							title: '道路运输数据'
						}, {
							name: 'dataSubmission',
							title: '综合运输数据报送'
						}, {
							name: 'quantitySent',
							title: '道路运输发送量'
						}]
					},
					{
						name: "railway",
						title: "铁路",
						img: '/static/image/railway.png',
						children: [{
							name: 'railwayRunData',
							title: '铁路运行数据'
						}, {
							name: 'runStatus',
							title: '铁路运行情况'
						}]
					},
					{
						name: "bus",
						title: "公交",
						img: '/static/image/bus.png',
						children: [{
							name: 'busDataInfo',
							title: '公交投入数据'
						}]
					},
					{
						name: "water",
						title: "水运",
						img: '/static/image/water.png',
						children: [{
							name: 'TransportData',
							title: '水运运输数据'
						}, {
							name: 'transportation',
							title: '水运运输情况'
						}, {
							name: 'waterWay',
							title: '水路(陆岛)'
						}]
					},
					{
						name: "portShipping",
						title: "港口",
						img: '/static/image/portShipping.png',
						children: [{
							name: 'pilotStation',
							title: '引航站'
						}]
					},
					{
						name: "airport",
						title: "机场",
						img: '/static/image/airport.png',
						children: [{
							name: 'runData',
							title: '机场运行数据'
						}, {
							name: 'runStatus',
							title: '机场运行情况'
						}]
					},
					{
						name: "metro",
						title: "地铁",
						img: '/static/image/metro.png',
						children: [{
							name: 'pilotStation',
							title: '引航站'
						}]
					},
				], //路由权限
			}
		},
		onLoad() {
			if (uni.getStorageSync('satoken')) {

			} else {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
			}
		},
		methods: {
			//获取图形验证码
			getVerCode() {
				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + Date.parse(new Date()), {},
					'GET').then(res => {
					if (res.code == 200) {
						this.codeImg = res.data.img;
					}
				}).catch(() => {
					console.log('vercode err')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home_warp {
		height: calc(100vh - 60rpx);
		padding: 30rpx 50rpx;
		background-color: #fff;

		.home_box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.home_item {
			width: 300rpx;
			height: 300rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 4rpx 10rpx 30rpx 1rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;

			.img {
				width: 128rpx;
				height: 128rpx;
				margin: 50rpx auto 12rpx;
			}

			.txt {
				color: #333;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
			}
		}
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>