menber-center/pages/huifeijiaojiaoRukou/huifeijiaojiaoRukou.vue

<template>
	<view class="container menus-box">
		<view class="main-btn" @click="toPage('个人会费缴交')">
			<image :src="`${FILE_URL}/person-fee.png`"></image>
			<text>个人会费缴交</text>
		</view>
		<view class="main-btn" @click="toPage('代缴个人会费')">
			<image :src="`${FILE_URL}/fee.png`"></image>
			<text>代缴个人会费</text>
		</view>
		<view class="main-btn" @click="toPage('代缴单位会费')">
			<image :src="`${FILE_URL}/change.png`"></image>
			<text>代缴单位会费</text>
		</view>
		<view class="">
			
			<!-- <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>
	import configService from '@/utils/baseurl.js'
	const FILE_URL = configService.FILE_URL;
	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">
	$certificate-width: 220rpx;
	$certificate-height: 300rpx;

	.container {
		height: 100vh;
		width: 100vw;
		background: rgb(141, 204, 255);
		background: -moz-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -o-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -ms-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: linear-gradient(180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);

		
	}
	.menus-box {
		padding: 30rpx 0;
		.main-btn {
			width: 85%;
			background-color: #006af4;
			border-radius: 20rpx;
			margin: 0 auto 30rpx;
			padding: 40rpx 30rpx;
			display: flex;
			align-items: center;
		
			image {
				width: 100rpx;
				height: 100rpx;
				flex: 0 0 auto;
			}
		
			text {
				margin-left: 20rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}
	
		.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>