menber-center/pages/huifeijiaojiaoRukou/huifeijiaojiaoRukou.vue

<template>
	<view class="container">
		<view class="menus-box">
			<view class="menus-item-box" @click="toPage('个人会费缴交')">
				<view class="text-box">
					个人会费缴交
				</view>
			</view>
			<view class="menus-item-box" @click="toPage('代缴个人会费')">
				<view class="text-box">
					代缴个人会费
				</view>
			</view>
			<view class="menus-item-box" @click="toPage('代缴单位会费')">
				<view class="text-box">
					代缴单位会费
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	function toPage(name) {
		switch (name) {
			case '个人会费缴交': 
				uni.navigateTo({
					url: '/pages/huiFeiJiaoJiao/huiFeiJiaoJiao'
				});
				break;
			case '代缴个人会费':
				uni.navigateTo({
					url: '/pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei'
				})
				break;
			case '代缴单位会费':
				uni.navigateTo({
					url: '/pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei'
				})
				break;
		}
	}
</script>

<style lang="scss">
.container {
	height: 100vh;
	width: 100vw;
	background-color: $uni-text-color-inverse;
	.menus-box {
		padding: 20rpx;
	
		.menus-item-box {
			width: 100%;
			padding: 35rpx 50rpx;
			margin-bottom: 35rpx;
			display: flex;
			gap: 30rpx;
			align-items: center;
			justify-content: center;
			background-color: #006AF4;
			border-radius: $uni-card-border-radius;
	
			&:active {
				background-color: #005AF4;
			}
	
			.icon-box {
				width: 40%;
				text-align: center;
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 50%;
				border: 3rpx solid $uni-text-color-inverse;
				background-color: #004DC9;
	
				.iconfont {
					font-size: 60rpx;
					color: $uni-text-color-inverse;
				}
			}
	
			.text-box {
				font-size: 50rpx;
				font-weight: bold;
				color: $uni-text-color-inverse;
			}
		}
	}
}
</style>