duantuihe/pages/my/charge/index.scss

	view {
		box-sizing: border-box;
	}
 
	.container {
		.addBg{
			background: skyblue;
			
			min-height: 100vh;
			
			padding: 38rpx 30rpx;
			.topBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.btn{
					width: 116rpx;
					height: 52rpx;
					background: linear-gradient(180deg, #90E5FF 0%, #4EDCFF 100%);
					box-shadow: 0rpx 4rpx 8rpx -4rpx rgba(0,109,243,0.5);
					border-radius: 26rpx;
					
					font-size: 26rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.userBox{
						 display: flex;
						 align-items: center;
						 .avatar{
							 width: 120rpx;
							 height: 120rpx;
							 border-radius: 50%;
							 border: 2rpx solid #fff;
							 margin-right: 20rpx;
						 }
						 
						 .right{
							
							 .nickname{
							 							 font-size: 36rpx;
							 							 font-family: PingFang-SC, PingFang-SC;
							 							 font-weight: 800;
							 							 color: #FFFFFF;
							 							 margin-right: 20rpx;
							 }
							
							 
							 .bot{
								 display: flex;
								 align-items: center;
								 font-size: 26rpx;
								 font-family: PingFang-SC, PingFang-SC;
								 font-weight: 500;
								 color: #FFFFFF;
								 
								 margin-top: 16rpx;
								 .icon{
								 							 width: 28rpx;
								 							 height: 28rpx;
								 							 // max-lines: 20rpx;
															 
															 margin-right: 8rpx;
								 }
							 }
						 }
						 
						
				}
					}
					
					
					
					
					.mainBox{
						
						height: 934rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16);
						border-radius: 32rpx;
						
						margin-top: 48rpx;
						
						padding: 16rpx 24rpx;
						display: flex;
						flex-direction: column;
						
						flex-wrap: nowrap;
						
						overflow-y: scroll;
						.tagLine{
							width: 72rpx;
							height: 10rpx;
							background: #EFF3F8;
							border-radius: 5rpx;
							
							margin-left: 50%;
							
							transform: translateX(-50%);
							
							margin-bottom: 32rpx;
						}
						.bor{
							border: 4rpx solid #007AFF;
						}
						
						.carItem{
							flex-shrink: 0;
							
							height: 148rpx;
							background: #F7F8FB;
							border-radius: 20rpx;
							
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							padding: 0 32rpx;
							
							margin-bottom: 24rpx;
							.left{
								.name{
									font-size: 30rpx;
									font-family: SourceHanSansCN, SourceHanSansCN;
									font-weight: bold;
									color: #333333;
									
									margin-bottom: 20rpx;
								}
								.count{
									font-size: 24rpx;
									font-family: SourceHanSansCN, SourceHanSansCN;
									font-weight: 400;
									color: #666666;
								}
							}
							.right{
								font-size: 48rpx;
								font-family: SourceHanSansCN, SourceHanSansCN;
								font-weight: bold;
								color: #444444;
							}
						}
					}
					
		}
		
		.btnBox{
			height: 176rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.05);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			
			
			position: fixed;
			bottom: 0;
			width: 100%;
			
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				height: 96rpx;
				background: linear-gradient(132deg, #0298FF 0%, #017AFF 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,122,255,0.2);
				border-radius: 54rpx;
				
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				font-size: 32rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
		
	}