XEH-miniProgram/pages/self/index.scss

	.page-wrap {
		padding-bottom: 41.21rpx;
	}

	.header-panel {
		height: 274.73rpx;
		background: rgba(0, 210, 195, 1);
		font-size: 27.47rpx;
		display: flex;
		align-items: center;
		color: #fff;

		.avatar {
			width: 123.63rpx;
			height: 123.63rpx;
			margin: 0 39.84rpx 0 53.57rpx;
			border-radius: 50%;
		}

		.btn {
			width: 151.1rpx;
			height: 54.95rpx;
			line-height: 52.2rpx;
			border: 1px solid #fff;
			border-radius: 2.75rpx;
			font-size: 27.47rpx;
			background: transparent;
			color: #fff;
			padding: 0;
			margin: 0;

			&::after {
				display: none;
			}
		}

		.info {
			flex: 1;
			line-height: 1;
			position: relative;
			padding-right: 82.42rpx;

			.name {
				font-size: 38.46rpx;
				margin-bottom: 16.48rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.company {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.arrow {
				width: 23.35rpx;
				height: 43.96rpx;
				position: absolute;
				right: 53.57rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.menu-panel {
		display: flex;
		background: #fff;
		position: relative;
		font-size: 27.47rpx;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			bottom: 0%;
			right: 0;
			height: 1rpx;
			background: #e0e0e0;
		}

		.item {
			flex: 1;
			height: 151.1rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			&:before {
				content: '';
				width: 1rpx;
				position: absolute;
				left: 0%;
				top: 0;
				bottom: 0%;
				background: #e0e0e0;
			}

			&:first-child::before {
				display: none;
			}

			.icon {
				width: 54.95rpx;
				height: 54.95rpx;
				margin-bottom: 13.74rpx;
			}
			
			.badge{
				position: absolute;
				left: 50%;
				top: 13.74rpx;
				margin-left: 13.74rpx;
				line-height: 27.47rpx;
				min-width: 27.47rpx;
				text-align: center;
				border-radius: 13.74rpx;
				background: #f97631;
				color: #fff;
				font-size: 19.23rpx;
				font-weight: bold;
				padding: 0 5.49rpx;
				box-sizing: border-box;
			}
		}
	}

	.nav-panel {
		margin-top: 13.74rpx;

		.item {
			background: #fff;
			display: flex;
			align-items: center;
			height: 96.15rpx;
			position: relative;
			font-size: 27.47rpx;

			&:before {
				content: '';
				position: absolute;
				left: 0%;
				right: 0%;
				top: 0;
				height: 1rpx;
				background: #e0e0e0;
				transform: scaleY(.5);
			}

			&:first-child::before {
				display: none;
			}

			&.sapce {
				margin-top: 13.74rpx;

				&:before {
					display: none;
				}
			}

			.icon {
				width: 43.96rpx;
				height: 43.96rpx;
				margin: 0 20.6rpx 0 31.59rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&-img{
					width: 43.96rpx;
					height: 43.96rpx;
					&-4{
						width: 38.46rpx;
					}
				}
			}
			.label{
				flex: 1;
			}
			.arrow{
				width: 27.47rpx;
				height: 27.47rpx;
				margin-right: 27.47rpx;
			}
			.tag{
				font-size: 24.73rpx;
				color: #fff;
				background: #f97631;
				line-height: 43.96rpx;
				border-radius: 5.49rpx;
				min-width: 193.68rpx;
				text-align: center;
				padding: 0 13.74rpx;
				box-sizing: border-box;
			}
			.sub{
				color: #515151;
			}
			.active{
				color: #F97631;
			}
		}
	}