XEH-miniProgram/pages/appCenter/index.vue

<template>
	<view class="page-wrap">
		<view class="app-item" v-for="(item, index) in navList" :key="index">
			<view :class="'icon icon-'+item.value">
				<image :src="`../../static/svg/app_${item.value}.svg`"></image>
			</view>
			<view class="text">{{item.label}}</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			navList: [
				{
					label: '记账报税',
					value: 1
				},
				{
					label: '税控托管',
					value: 2
				},
				{
					label: '社保代缴',
					value: 3
				},
				{
					label: '其他服务',
					value: 4
				},
				{
					label: '我的合同',
					value: 5
				},
				{
					label: '财务管家',
					value: 6
				},
				{
					label: '设置',
					value: 7
				},
				{
					label: '我的消息',
					value: 8
				},
				{
					label: '意见反馈',
					value: 9
				},
				{
					label: '服务电话',
					value: 10
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	min-height: 100%;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 27.47rpx 13.74rpx;
	box-sizing: border-box;
}
.app-item {
	flex: 0 0 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 27.47rpx;
	.icon {
		width: 118.13rpx;
		height: 118.13rpx;
		border-radius: 50%;
		background: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
		&-1{
			background: #ff7356;
		}
		&-2{
			background: #06d276;
		}
		&-3{
			background: #52abfd;
		}
		&-4{
			background: #fcb203;
		}
		&-5{
			background: #566c8b;
		}
		&-6{
			background: #4484ae;
		}
		&-7{
			background: #889fff;
		}
		&-8{
			background: #f7922a;
		}
		&-9{
			background: #1ed2c7;
		}
		&-10{
			background: #fcb203;
		}
		image {
			width: 68.68rpx;
			height: 68.68rpx;
			color: #fff;
		}
	}
	.text {
		font-size: 24.73rpx;
		margin-top: 13.74rpx;
	}
}
</style>