Applet/pages/service/index.vue

<template>
	<view class="container">
		<uni-card class="card card2" v-for="(item, index) in policyList" :key="index" @click="policyBtn(item)">
			<image class="cover" :src="item.url"></image>
			<h2>{{ item.title }}</h2>
			<text class="cardText">{{ item.text }}</text>
		</uni-card>
	</view>
</template>

<script>
	import requestLogin from '../../api/login.js';
	export default {
		data() {
			return {
				policyList: []
			}
		},
		async mounted() {
			const config = await requestLogin.getJson();
			const { list, bannerList, policyList } = config.data;
			this.policyList = policyList;
		},
		onShow: function() {},
		methods: {
			policyBtn(e) {
				uni.navigateTo({ url: e.path });
			},
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {}
	}
</script>

<style>
	.container {
		display: flex;
		flex-wrap: wrap;
	}
	.card {
		display: block;
		margin: 10px;
		width: 27%;
	}
	.cover {
		display: block;
		width: 40px;
		height: 40px;
		margin: 5px auto;
	}
	.uni-card {
		padding: 0 !important;
		margin: 0 !important;
	}
	.uni-card__content {
		padding: 0 !important;
	}
	h2 {
		font-weight: 700;
		width: 100%;
		text-align: center;
		font-size: 16px;
	}
	.cardText {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 5px;
		color: #999;
	}
</style>