XEH-miniProgram/pages/appCenter/index.vue

<template>
	<view class="page-wrap">
		<view class="app-item" v-for="(item, index) in navList" :key="index" @click="handleNav(item.value)">
			<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
				}
			]
		};
	},
	methods: {
		handleNav(val) {
			let url = '';
			switch (val) {
				case 1:
					url = 'accounting/index';
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</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;
		image {
			width: 68.68rpx;
			height: 68.68rpx;
		}
		&-1 {
			background: #ff7356;
		}
		&-2 {
			background: #06d276;
		}
		&-3 {
			background: #52abfd;
		}
		&-4 {
			background: #fcb203;
			image {
				width: 89.29rpx;
				height: 89.29rpx;
			}
		}
		&-5 {
			background: #566c8b;
		}
		&-6 {
			background: #4484ae;
		}
		&-7 {
			background: #889fff;
			image {
				width: 82.42rpx;
				height: 82.42rpx;
				margin-left: 27.47rpx;
			}
		}
		&-8 {
			background: #f7922a;
		}
		&-9 {
			background: #1ed2c7;
			image {
				width: 82.42rpx;
				height: 82.42rpx;
			}
		}
		&-10 {
			background: #fcb203;
		}
	}
	.text {
		font-size: 24.73rpx;
		margin-top: 13.74rpx;
	}
}
</style>