moin_app/pages/index/index.vue

<template>
	<view class="main">
		<view class="pad">
			<view class="h2">机器管理</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in list1" :key="index" @click="$goPage(item.url)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
			<view class="h2">执行管理</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in list2" :key="index"  @click="$goPage(item.url)">
					<view class="icon2">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					{
						text: '机器列表',
						icon: require('../../static/images/icon (10).png'),
						url: '/pages/sub/machineList/machineList'
					},
					{
						text: '机器监控',
						icon: require('../../static/images/icon (7).png'),
						url: '/pages/sub/mechanicalMonitor/mechanicalMonitor'
					},
					{
						text: '终端日志',
						icon: require('../../static/images/icon (1).png'),
						url: '/pages/'
					},
					{
						text: '终端会话',
						icon: require('../../static/images/icon (25).png'),
						url: '/pages/'
					},
					{
						text: '机器日志',
						icon: require('../../static/images/icon (13).png'),
						url: '/pages/sub/mechanicalLog/mechanicalLog'
					},
				],
				list2: [
					{
						text: '批量执行',
						icon: require('../../static/images/icon (15).png'),
						url: '/pages/sub/batchExecution/batchExecution'
					},
					{
						text: '执行记录',
						icon: require('../../static/images/icon (24).png'),
						url: '/pages/sub/executionRecord/executionRecord'
					},
					{
						text: '日志面板',
						icon: require('../../static/images/icon (16).png'),
						url: '/pages/sub/logPanel/logPanel'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		.pad {
			background: #fff;
			padding: 0 0 20rpx 0;
		}
	  .h2 {
		font-size: 30rpx;
		border-bottom: 1rpx solid #F5F5F5 ;
		height: 112rpx;
		line-height: 150rpx;
		font-weight: 600;
		padding: 0 24rpx;
	  }
	
	  .ul {
		  width: 100%;
		  display: flex;
		  flex-wrap: wrap;
		  padding: 0 24rpx;
	    .li {
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 32rpx 0 12rpx 0;
	      .icon {
	        width: 72rpx;
			height: 72rpx;
	      }
			.icon2 {
			  width: 56rpx;
				height: 56rpx;
			}
	      .text {
			font-size: 24rpx;
			margin-top: 14rpx;
			
	      }
	    }
	  }
	}
</style>