<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/subordinate_index', params: { type: 'confinedSpace', } }, { img: require('../../static/icon-apps/i2.png'), title: '盲板抽堵作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'blindBoard', } }, { img: require('../../static/icon-apps/i3.png'), title: '动土作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'breakGround', } }, { img: require('../../static/icon-apps/i4.png'), title: '高处作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'highWork', } }, { img: require('../../static/icon-apps/i5.png'), title: '吊装作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'hoisting', } }, { img: require('../../static/icon-apps/i6.png'), title: '临时用电作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'electricity', } }, { img: require('../../static/icon-apps/i7.png'), title: '动火作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'hotWork', } }, { img: require('../../static/icon-apps/i8.png'), title: '断路作业', url: '/pages/eight_assignments/subordinate_index', params: { type: 'cutRoad', } }, ] }; }, methods: { fnNavigator(e) { uni.$u.route({ url: this.baseList[e].url, params: { title: this.baseList[e].title, ...this.baseList[e].params } }) }, } } </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>