menber-center/pages/huifeijiaojiaoRukou/huifeijiaojiaoRukou.vue

<template>
	<view class="container">
		<view class="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="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: 20rpx;
			.main-btn {
				width: 85%;
				background-color: #006af4;
				border-radius: 20rpx;
				margin: 30rpx auto;
				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>