veterans_H5/h5_web/pages/mine/mine.scss

/* 部分菜单图标 */
.mine {
	min-height: calc(100vh - 44px);
	background-color: #F2F2F2;
	font-family: 'PingFangSC-Regular, PingFang SC';
	
	&-bg {
		height: 650rpx;
		margin-top: -70rpx;
		background-image: url(../../static/img/mine-bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	&-info {
		margin-top: -430rpx;
		
		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-left {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				.avatar {
					background-color: rgba(255, 255, 255, 0.2);
					width: 146rpx;
					height: 146rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}
				}
				
				.name {
					color: #fff;
					font-size: 40rpx;
					font-family: 'PingFangSC-Medium, PingFang SC';
					// width: 180rpx;
					// overflow: hidden !important;
					// word-break: break-all;  /* break-all(允许在单词内换行。) */
					// text-overflow: ellipsis;  /* 超出部分省略号 */
					// display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					// -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					// -webkit-line-clamp: 1; /** 显示的行数 **/
				}
			}
			
			&-right {
				background: linear-gradient(270deg, #FF6100 0%, #FE7C02 100%);
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				border: solid 2px rgba(255, 255, 255, 0.3);
				border-right: none;
				display: flex;
				align-items: center;
				padding: 0 30rpx 0 26rpx;
				height: 82rpx;
				view {
					&:first-child {
						font-size: 22rpx;
						color: #fff;
						opacity: 0.7;
					}
					&:nth-child(2) {
						font-size: 60rpx;
						color: #fff;
						font-weight: 500;
						margin: 0 22rpx 0 16rpx;
					}
				}
			}
		}
		
		&-authentication {
			display: flex;
			justify-content: space-between;
			width: calc(100% - 220rpx);
			margin: 30rpx auto;
			font-size: 24rpx;
			color: rgba(255, 255, 255, .6);
			&-item {
				display: flex;
				align-items: center;
				view {
					&:last-child {
						padding: 6rpx 16rpx;
						background-color: rgba(255, 255, 255, 0.2);
						border-radius: 30rpx;
						margin-left: 10rpx;
						font-size: 18rpx;
					}
				}
			}
		}
		
		&-gain {
			display: flex;
			justify-content: space-between;
			width: calc(100% - 60rpx);
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 36rpx 34rpx;
			&-item {
				text-align: center;
				view {
					&:first-child {
						font-size: 70rpx;
						font-weight: 500;
						text {
							font-size: 38rpx;
							font-weight: 400;
							color: #6E6E6E;
						}
					}
					&:last-child {
						font-size: 32rpx;
						margin-top: 10rpx;
						font-weight: 400;
					}
				}
				&:first-child {
					view {
						&:first-child {
							color: #4591E7;
						}
					}
				}
				&:nth-child(2) {
					view {
						&:first-child {
							color: #FF5733;
						}
					}
				}
				&:last-child {
					view {
						&:first-child {
							color: #17BEB2;
						}
					}
				}
			}
		}
		
		&-cell1 {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			padding: 0 34rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.cell-icon {
				margin-right: 24rpx;
			}
			.jianli {
				width: 34rpx;
				height: 34rpx;
			}
			.toudi {
				width: 34rpx;
				height: 34rpx;
			}
			.mianshi {
				width: 28rpx;
				height: 34rpx;
			}
			.peixun {
				width: 30rpx;
				height: 38rpx;
			}
			.pingjia {
				width: 36rpx;
				height: 30rpx;
			}
			.shezhi {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}