duantuihe/pages/my/index.scss

	view {
		box-sizing: border-box;
	}
 
	.container {
		min-height: 100vh;
		// padding-bottom: 200rpx;
 .topBox{
	 height: 370rpx;
	 padding-top: 38rpx;
	 padding-left: 30rpx;
	padding-right: 30rpx;
	background: #028BFC;
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	 
	 .userBox{
		 display: flex;
		 align-items: center;
		 // background: red;
		 // min-width:50vw;
		 // justify-content: flex-start;
		 .avatar{
			 width: 120rpx;
			 height: 120rpx;
			 border-radius: 50%;
			 border: 2rpx solid #fff;
			 margin-right: 24rpx;
		 }
		 .nickname{
			 font-size: 36rpx;
			 // font-size: 42rpx;
			 font-family: PingFang-SC, PingFang-SC;
			 font-weight: 800;
			 color: #FFFFFF;
			 margin-right: 20rpx;
			 
			 // background: #F7E0AB;
			 // width: 200rpx;
			 // height: 150rpx;
		 }
		 .icon{
			 width: 28rpx;
			 height: 28rpx;
			 // max-lines: 20rpx;
		 }
		
	 }
	 .infoBox{
	 		// background: rgba(31,48,69,0.7);
	 		// box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
	 		// border-radius: 32rpx 32rpx 0rpx 0rpx;
	 		// border: 2rpx solid rgba(112,193,255,0.81);
	 		// backdrop-filter: blur(10px);	
			font-size: 30rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			height: 145rpx;
			
			padding-left: 48rpx;
			padding-right: 48rpx;
			justify-content: space-between;
			position: relative;
			z-index: 1;
			
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-bottom: 20rpx;
			.left{
				display: flex;
				align-items: center;
				.icon{
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			
			
			.btn{
				width: 130rpx;
				height: 46rpx;
				background: #F7E0AB;
				border-radius: 23rpx;
				
				font-size: 24rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				color: #1F3045;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	 }
 }
 }
	
	
	
	.contentBox{
		min-height: 970rpx;
		// background: #F7F8FB;
		// box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
		// border-radius: 30rpx 30rpx 0 0;
		// background: red;
		margin-top: -40rpx;
		position: relative;
		z-index: 2;
		padding-top: 40rpx;
		padding-left:30rpx;
		padding-right: 30rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
		// padding-bottom: 100rpx;
		
		
		.tabBox{
			display: flex;
			justify-content: space-between;
			.item{
				width: 48%;
				height: 150rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx -14rpx rgba(1,135,255,0.38);
				border-radius: 28rpx;
				
				display: flex;
				align-items: center;
				padding-left: 24rpx;
				.icon{
					width: 50rpx;
					height: 50rpx;
					margin-right: 16rpx;
				}
				.t1{
					font-size: 30rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12rpx;
				}
				.t2{
					font-size: 22rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		
		.serListBox{
			padding-bottom: 200rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 142rpx;
				// background: red;
				
				border-bottom: 1rpx solid #E6E6E6;
				.left{
					height: 100%;
					display: flex;
					align-items: center;
					
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;
					.icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}
				.icon_r{
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}
	
	
	
	
	::v-deep button{
		color: #333!important;
	
		padding: 0 20rpx!important;
		background: #F7E0AB!important;
		border:none!important;
		margin-left: 0!important;
		
		height: 70rpx!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
	}
	
	::v-deep button::after{
		border:  none!important;
		height: auto!important;
	}