FleetManagement-MPWEIXIN/pages/personal/index.scss

.personal {
	padding: 0 30rpx;
	height: 100%;
	font-family: PingFang SC-Bold, PingFang SC;
	background: linear-gradient(180deg, #c5e5ff 0%, rgba(216, 216, 216, 0) 73%);
	.personal_center {
		position: relative;
		margin-top: 50rpx;
		.menu-item {
			width: 307rpx;
			height: 147rpx;
			background: linear-gradient(90deg, rgba(161, 193, 255, 0.2) 6%, rgba(116, 161, 252, 0.2) 100%);
			// box-shadow: 0rpx 4rpx 10rpx 0rpx #f3f7ff;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			image {
				width: 101rpx;
				height: 101rpx;
			}
			.menu-item-label {
				color: #007dff;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
		}
	}
	.ball {
		width: 315rpx;
		height: 315rpx;
		opacity: 1;
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(62deg, rgba(220, 237, 255, 0.8) 0%, rgba(162, 212, 255, 0) 100%);
		&:nth-child(1) {
			right: -57rpx;
			top: -31rpx;
		}
		&:nth-child(2) {
			left: -57rpx;
			top: -20rpx;
			width: 338rpx;
			height: 338rpx;
			background: linear-gradient(315deg, #e2ebff 0%, rgba(167, 214, 255, 0.3) 100%);
		}
	}
	.personal_title {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		font-weight: 600;
	}
	.personal_bottom {
		margin-bottom: 20rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		box-sizing: border-box;
		padding: 46rpx;
		background: rgba(255, 255, 255, 0.9);
		.personal_bottom_others {
			margin-top: 50rpx;
			.personal_bottom_others_item {
				margin-bottom: 30rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
				.personal_bottom_others_item_title {
					color: #121836;
					font-size: 28rpx;
				}
			}
		}

		.personal_bottom_banner {
			width: 100%;
			height: 288rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.personal_top {
		position: relative;
		z-index: 1;
		.options {
			margin-top: 53rpx;
			.options_item {
				image {
					height: 45rpx;
				}
				.options_item_title {
					color: rgba(0, 0, 0, 0.85);
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}
		}
		.wallet {
			color: #ffffff;
			width: 690rpx;
			height: 200rpx;
			// background: rgba(98, 105, 140, 0.1);
			opacity: 1;
			// margin-top: 72rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			.wallet_balance {
				color: #ffffff;
				font-size: 42rpx;
			}
			.wallet_container {
				position: relative;
				z-index: 2;
				padding: 0 35rpx;
				width: 100%;
				.wallet_name {
					margin-bottom: 38rpx;
					color: #ffffff;
					font-size: 28rpx;
				}
			}
			image {
				width: calc(100% - 20rpx);
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
		.businessCard {
			.sculpture {
				width: 130rpx;
				height: 129rpx;
				background: #121836;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.information {
			margin-left: 43rpx;
			.information_footer {
				color: rgba(0, 0, 0, 0.3);
				font-size: 24rpx;
				margin-top: 15rpx;
			}
			.information_name {
				font-weight: 600;
				color: #000000;
				font-size: 34rpx;
			}
		}
	}
}