.app {
		background: #ffffff;

		.titles {
			height: 80rpx;
		}

		.mask {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100%;
			opacity: 0.9;
			background-color: #6A6A6A;
			text-align: center;
			line-height: 68rpx;

			.masktext {}

			.maskcontent {
				position: absolute;
				width: 100%;
				bottom: 120rpx;
			}

			.add {
				width: 80%;
				height: 68rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 1rpx #26A888;
				position: absolute;
				color: #26A888;
				bottom: 50rpx;
				left: 10%;
			}

			.p2 {
				left: 10%;
				width: 80%;
				height: 68rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 1rpx #ffffff;
				opacity: 1;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}

			.p1 {
				opacity: 1;
				color: #ffffff;
				left: 10%;
				width: 80%;
				height: 68rpx;
				background-color: #4AC4AB;
				margin: 0 auto;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
			}
		}

		.myorder {
			position: relative;

			.orderStatus {
				text-align: center;
				margin: 60rpx auto 30rpx;
				width: 90%;
				display: flex;
				justify-content: space-around;
				padding-bottom: 30rpx;

				.item {
					width: 25%;

					.text {
						font-size: 26rpx;
						color: #333333;
						margin-top: 10rpx;
					}

					image {
						width: 70rpx;
						height: 60rpx;
					}
				}

				.orderCount {
					width: 38rpx;
					height: 38rpx;
					background: #FFFFFF;
					border: 3rpx solid #DC222F;
					position: relative;
					top: -125rpx;
					left: 103rpx;
					font-size: 22rpx;
					border-radius: 50%;
					line-height: 35rpx;
					color: #DC222F;
				}
			}

			.righttitle {
				font-size: 26rpx;
				color: #969494;
				position: absolute;
				right: 30rpx;
				top: 5rpx;

				image {
					vertical-align: middle;
					padding-left: 20rpx;
					width: 13rpx;
					height: 23rpx;
					display: inline-block;
				}
			}

			.title {
				margin-left: 30rpx;
				font-size: 32rpx;
				color: #4B4B4B;
			}
		}

		.Threecategories {
			height: 200rpx;
			background-color: #fff;
			width: 90%;
			display: flex;
			justify-content: space-around;
			position: absolute;
			border-radius: 20rpx;
			left: 50%;
			top: 380rpx;
			transform: translateX(-50%);
			align-items: center;
			box-shadow: 0rpx 0rpx 24rpx 0rpx RGBA(38, 168, 136, 0.41);

			.item {

				width: 33%;
				text-align: center;

				.text {
					font-size: 28rpx;
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.topbanner {
			width: 100%;
			height: 500rpx;
			position: relative;
			color: #FFFFFF;
			margin-bottom: 50rpx;


			.btn {
				position: absolute;
				top: 40%;
				right: 2%;
				width: 170rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #51b9a0;
				border-radius: 5rpx;
				font-size: 24rpx;
			}

			.manage {
				position: absolute;
				top: 54%;
				right: 2%;
			}

			.phone {
				position: absolute;
				top: 56%;
				left: 30%;
				font-size: 24rpx;
			}

			.namesigning {
				position: absolute;
				top: 38%;
				left: 30%;

				.name {
					display: inline-block;
					font-size: 36rpx;
				}

				.signing {
					text-align: center;
					margin-left: 30rpx;
					height: 36rpx;
					line-height: 36rpx;
					display: inline-block;
					width: 90rpx;
					background: #FFFFFF;
					border: 2rpx solid #FFA115;
					border-radius: 5rpx;
					font-size: 22rpx;
					color: #FFA115;
				}
			}


			.title {
				position: absolute;
				top: 15%;
				left: 0%;
				width: 100%;
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
			}

			.headsculpture {
				position: absolute;
				top: 35%;
				left: 5%;
				width: 150rpx;
				height: 150rpx;
			}

			.userbanner {
				position: absolute;
				top: 0%;
				left: 0%;
				// z-index: -1;
				width: 100%;
				height: 100%;
			}
		}
	}