qa-prevention-xgf-app/pages/eight_assignments/index.vue

<template>
	<view class="content">
		<view class="card">
			<view class="items">
				<view class="item" v-for="(item,index) in baseList" :key="index" @click="fnNavigator(index)">
					<image :src="item.img" mode=""></image>
					<view class="text">
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [
					{
            img: require('../../static/icon-apps/i1.png'),
						title: '受限空间安全作业',
						url: '/pages/eight_assignments/confined_space/index'
					},
					{
            img: require('../../static/icon-apps/i2.png'),
						title: '盲板抽堵作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i3.png'),
						title: '动土作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i4.png'),
						title: '高处作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i5.png'),
						title: '吊装作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i6.png'),
						title: '临时用电作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i7.png'),
						title: '动火作业',
						url: '/pages/electronic_work_card/index'
					},
					{
            img: require('../../static/icon-apps/i8.png'),
						title: '断路作业',
						url: '/pages/electronic_work_card/index'
					},
				]
			};
		},
		methods: {
			fnNavigator(e) {
				uni.$u.route({
					url: this.baseList[e].url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		margin-top: -20upx;

		.item {
			flex-basis: 25%;
			text-align: center;
			margin-top: 20upx;

			image {
				width: 110upx;
				height: 110upx;
			}

			.text {
				width: 130upx;
				font-size: 28upx;
				margin: auto;
			}
		}
	}
</style>