uni-zhks-app/components/m-icon/m-icon.vue

<template>
	<view>
		<view class="icons">
			<view class="list_item">
				
				<view class="item" @click="go_w_infolist()">
					<view class="item_icon">
						<image src="./icon/icon_1.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>消息提醒</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_2.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>收藏</text>
					</view>
				</view>
				
				<view class="item" @click="go_m_worksheet()">
					<view class="item_icon">
						<image src="./icon/icon_3.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>工单审核</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_4.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>学习积分</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_5.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>积分商城</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_6.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>学习报表</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_7.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>个人云盘</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_8.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>使用手册</text>
					</view>
				</view>
				
				<view class="item" @click="tell()">
					<view class="item_icon">
						<image src="./icon/icon_9.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>服务电话</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon">
						<image src="./icon/icon_10.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>建议反馈</text>
					</view>
				</view>
				
				<view class="item">
					<view class="item_icon" @click="go_download()">
						<image src="./icon/icon_11.png" mode=""></image>
					</view>
					<view class="item_name">
						<text>下载二维码</text>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			go_download(){
				uni.navigateTo({
					url:"../../m-download/m-download"
				})
			},
			tell(){
				uni.makePhoneCall({
				    phoneNumber: '18152480670' //仅为示例
				});
			},
			go_w_infolist(){
				uni.navigateTo({
				    url: '../../w-infolist/w-infolist',
				    animationType: 'fade-in',
				    animationDuration: 200
				});
			},
			go_m_worksheet(){
				uni.navigateTo({
				    url: '../../m-worksheet/m-worksheet',
				    animationType: 'fade-in',
				    animationDuration: 200
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.icons{
		box-sizing: border-box;
		padding-top: 34rpx;
		padding-left: 38rpx;
		padding-right: 38rpx;
		
		.list_item{
			overflow: hidden;
			
			.item{
				float: left;
				margin-right: 86rpx;
				margin-bottom: 44rpx;
				.item_icon{
					width: 166rpx;
					height: 86rpx;
					text-align: center;
					image{
						width: 90rpx;
						height: 90rpx;
					}
				}
				.item_name{
					margin-top: 10rpx;
					width: 166rpx;
					height: 42rpx;
					font-size: 29rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #232627;
					line-height: 42rpx;
					
					text-align: center;

				}
			}
			.item:nth-child(3n){
				margin-right: 0;
			}
		}
	}
</style>