deming/components/informations/titles/titles.vue

<template>
	<view id="info_title">
		<view>
			<view class="url_info" v-for="(item,index) in list" :key="index" @click="route_skip(index)">
				<image :src="item.url"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.url_info {
		width: 127rpx;
		float: left;
		flex: 1;
	}

	.url_info image {
		width: 84rpx;
		height: 84rpx;
		margin: 0 auto;
		display: block;
		margin-bottom: 16rpx;
	}

	.url_info text {
		display: block;
		text-align: center;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.sousuo {
		height: 113rpx;
		border: 1px #f00 solid;
	}

	#info_title {
		width: 620rpx;
		margin: 0 auto;
		padding: 37rpx 0;

	}

	#info_title>view {
		overflow: hidden;
		zoom: 1;
		display: flex;
		flex-wrap: wrap;
		display: -webkit-flex;
		/* Safari */
	}
</style>
<script>
	export default {
		name: "info_title",
		data() {

			return {
				list: [{
						id: 0,
						url: '../../static/pageD/info(11).png',
						text: '公告/资讯'
					},
					{
						id: 0,
						url: '../../static/pageD/info(6).png',
						text: '活动消息'
					},
					{
						id: 0,
						url: '../../static/pageD/info(14).png',
						text: '交易物流'

					},
					{
						id: 0,
						url: '../../static/pageD/info(15).png',
						text: '关注消息'
					},

				],
			}
		},
		methods: {
			// 点击顶部的标题模块跳转
			route_skip(index) {
				console.log(index)
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pageD' + "/notice/notice"
						});
						break;
					case 1:
						uni.navigateTo({
							url: '/pageD' + "/activity/activity"
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pageD' + "/logistics/logistics"
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pageD' + "/attention/attention"
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>