MALL_MP_WX/Order/pages/index/index.scss

 
.Order_body {
	width: 100vw;
	// height: 100vh;
	overflow-y: auto;
	padding-top: 80rpx;
	// background-color: #f2f2f2;
	box-sizing: border-box;
	.order_item {
		width: 100%; 
		height: 498rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 10rpx;
		padding: 30rpx 0;
		.order_item_footer {
			width: 686rpx;
			height: 88rpx;
			background: #f7f7f7;
			border-radius: 10rpx;
			opacity: 1;
			margin: auto; 
			color: #000000;
			font-size: 32rpx;
			font-weight: 600;
		}
		.order_item_center {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			.order_item_right {
				margin-left: 20rpx;
			}
			image {
				width: 220rpx;
				height: 220rpx;
			}
		}
		.order_item_title {
			width: 100%;
			box-sizing: border-box;
			color: #000000;
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			border-bottom: solid 1rpx #d7d7d7;
			.type {
				color: #f83d3d;
				font-size: 32rpx;
			}
			.siteName {
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}
}
.navigation {
	font-size: 28rpx;
	color: #f83d3d;
	padding: 5rpx 20rpx;
	border: solid 1rpx #f83d3d;
	border-radius: 50rpx;
}

.site-list-item {
	margin: 20rpx auto !important;
}

.selectTriangle {
	border-bottom: 4px solid $base-color !important;
}

.selectTriangle2 {
	border-top: 4px solid $base-color !important;
}

.triangle {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid #bbbbbb;
	margin-bottom: 10rpx;
}

.triangle2 {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #bbbbbb;
}

.navbar {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	width: 100%;
	height: 80upx;
	background: #fff;
	box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30upx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid $base-color;
			}
		}
	}

	.p-box {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;

		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30upx;
			height: 14upx;
			line-height: 1;
			margin-left: 4upx;
			font-size: 26upx;
			color: #888;

			&.active {
				color: $base-color;
			}
		}

		.xia {
			transform: scaleY(-1);
		}
	}

	.cate-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 80upx;
		position: relative;
		font-size: 44upx;

		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-left: 1px solid #ddd;
			width: 0;
			height: 36upx;
		}
	}
}