首页添加优惠活动内容

pages/index/index.scss

@@ -1,147 +1,181 @@
-page{background-color: $my-page-bg-color;}
-
-.header-bar{
-	background-color: $my-main-color;
-	height: 106rpx;
-	display: flex;
-	padding: 0 40rpx;
-	.city{
-		display: flex;
-		margin-right: 23rpx;
-		color: #fff;
-		align-items: center;
-		.city-name{
-			margin-right: 8rpx;
-		}
-	}
-	.scan{margin-left: 23rpx;}
-}
-.content-nav{
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	.content-nav-item{
-		.content-nav-item-icon-wrap{
-			width: 95rpx;
-			height: 95rpx;
-			margin: 0 auto 13rpx;
-			// border-radius: 30rpx;
-			// background: linear-gradient(163deg, #FFCC60 0%, #FF9221 100%);
-		}
-		.content-nav-item-icon-text{
-			font-size: 28rpx;
-			font-weight: 500;
-			color: #5A5A5A;
-			line-height: 1;
-		}
-	}
-	.content-nav-item + .content-nav-item{
-		// margin-left: 74rpx;
-	}
-}
-.pending-order-head{
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: $my-main-color;
-	.pending-order-head-left{
-		font-size: 30rpx;
-		b{font-weight: 500;font-size: 50rpx;margin-right: 5rpx;}
-	}
-	.pending-order-head-right{
-		font-size: 22rpx;
-		font-weight: 500;
-	}
-}
-.pending-order-body{
-	.pending-order-body-nav{
-		display: flex;
-		border-radius: 32px;
-		border: 1px solid $my-main-color;
-		margin-bottom: 36rpx;
-		.nav-item{
-			flex: 1;
-			height: 62rpx;
-			line-height: 62rpx;
-			font-size: 24rpx;
-			text-align: center;
-			&.active{
-				background: $my-main-color;
-				color: #fff;
-				border-radius: 32rpx;
-			}
-		}
-	}
-	.pending-order-body-wrap{
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		.pending-order-body-left-label{
-			font-size: 22rpx;
-			font-weight: 500;
-			color: #787878;
-		}
-	}
-	.pending-order-body-left{
-		.car-number{
-			margin-bottom: 32rpx;
-			font-size: 30rpx;
-			font-weight: 600;
-			color: #3A3A3A;
-			line-height: 42rpx;
-			letter-spacing: 1px;
-		}
-		.duration{
-			margin-bottom: 5rpx;
-			font-size: 26rpx
-		}
-		.cost{
-			.number{
-				font-size: 26rpx;
-				line-height: 50rpx;
-				color: $my-main-color;
-			}
-		}
-	}
-	.pending-order-body-right{
-		text-align: left;
-		font-size: 24rpx;
-		.order{
-			margin-bottom: 28rpx;			
-			font-weight: 400;
-			color: #9A9A9A;
-		}
-		
-	}
-	.go-pay-wrap{
-		margin-top: 150rpx;
-		width: 100%;
-		text-align: center;
-		.go-pay{
-			display: inline-block;
-			padding: 12rpx 39rpx 11rpx;
-			background: linear-gradient(90deg, #FF2727 0%, #FF9A13 100%, #FF0F0F 100%);
-			color: #fff;
-			border-radius: 35rpx;
-			cursor: pointer;
-		}
-	}
-	
-}
-
-.orderDetails{
-	color: #545454;
-	/deep/ dl{
-		margin: 20rpx 38rpx;
-		display: flex;
-		font-size: 30rpx;
-		dt{
-			width: 150rpx;
-			color: #A3A3A3;
-			text-align: right;
-		}
-		dd{
-			flex: 1;
-		}
+page{background-color: $my-page-bg-color;}
+
+.header-bar{
+	background-color: $my-main-color;
+	height: 106rpx;
+	display: flex;
+	padding: 0 40rpx;
+	.city{
+		display: flex;
+		margin-right: 23rpx;
+		color: #fff;
+		align-items: center;
+		.city-name{
+			margin-right: 8rpx;
+		}
+	}
+	.scan{margin-left: 23rpx;}
+}
+.content-nav{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	.content-nav-item{
+		.content-nav-item-icon-wrap{
+			width: 95rpx;
+			height: 95rpx;
+			margin: 0 auto 13rpx;
+			// border-radius: 30rpx;
+			// background: linear-gradient(163deg, #FFCC60 0%, #FF9221 100%);
+		}
+		.content-nav-item-icon-text{
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #5A5A5A;
+			line-height: 1;
+		}
+	}
+	.content-nav-item + .content-nav-item{
+		// margin-left: 74rpx;
+	}
+}
+.pending-order-head{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: $my-main-color;
+	.pending-order-head-left{
+		font-size: 30rpx;
+		b{font-weight: 500;font-size: 50rpx;margin-right: 5rpx;}
+	}
+	.pending-order-head-right{
+		font-size: 22rpx;
+		font-weight: 500;
+	}
+}
+.pending-order-body{
+	.pending-order-body-nav{
+		display: flex;
+		border-radius: 32px;
+		border: 1px solid $my-main-color;
+		margin-bottom: 36rpx;
+		.nav-item{
+			flex: 1;
+			height: 62rpx;
+			line-height: 62rpx;
+			font-size: 24rpx;
+			text-align: center;
+			&.active{
+				background: $my-main-color;
+				color: #fff;
+				border-radius: 32rpx;
+			}
+		}
+	}
+	.pending-order-body-wrap{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.pending-order-body-left-label{
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #787878;
+		}
+	}
+	.pending-order-body-left{
+		.car-number{
+			margin-bottom: 32rpx;
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #3A3A3A;
+			line-height: 42rpx;
+			letter-spacing: 1px;
+		}
+		.duration{
+			margin-bottom: 5rpx;
+			font-size: 26rpx
+		}
+		.cost{
+			.number{
+				font-size: 26rpx;
+				line-height: 50rpx;
+				color: $my-main-color;
+			}
+		}
+	}
+	.pending-order-body-right{
+		text-align: left;
+		font-size: 24rpx;
+		.order{
+			margin-bottom: 28rpx;			
+			font-weight: 400;
+			color: #9A9A9A;
+		}
+		
+	}
+	.go-pay-wrap{
+		margin-top: 150rpx;
+		width: 100%;
+		text-align: center;
+		.go-pay{
+			display: inline-block;
+			padding: 12rpx 39rpx 11rpx;
+			background: linear-gradient(90deg, #FF2727 0%, #FF9A13 100%, #FF0F0F 100%);
+			color: #fff;
+			border-radius: 35rpx;
+			cursor: pointer;
+		}
+	}
+	
+}
+
+.orderDetails{
+	color: #545454;
+	/deep/ dl{
+		margin: 20rpx 38rpx;
+		display: flex;
+		font-size: 30rpx;
+		dt{
+			width: 150rpx;
+			color: #A3A3A3;
+			text-align: right;
+		}
+		dd{
+			flex: 1;
+		}
+	}
+}
+
+.promotion{
+	margin: 20rpx 40rpx 40rpx;
+	background-color: #FFFFFF;
+	border-radius: 15rpx;
	&-header{
+		padding: 26rpx 40rpx 12rpx;
+		border-bottom: 1px solid #DFDFDF;
+		margin-bottom: 26rpx;
+		.promotion-header-til{
+			font-size: 30rpx;
+			color: #383838;
+			line-height: 42rpx;
+		}
+		.promotion-header-con{
+			font-size: 22rpx;
+			color: #787878;
+			line-height: 30rpx;
+		}
+	}
+	&-body{
+		padding: 0 40rpx 24rpx;
+		.promotion-body-til{
+			font-size: 26rpx;
+			color: #676767;
+			line-height: 37rpx;
+			margin-bottom: 15rpx;
+		}
+		.promotion-body-con{
+			font-size: 20rpx;
+			color: #A5A5A5;
+			line-height: 34rpx;
+		}
 	}
 }

pages/index/index.vue

@@ -90,7 +90,16 @@
 				</view>
 			</u-card>
 		</template>
-		
+		<view class="promotion">
+			<view class="promotion-header u-flex u-row-between">
+				<view class="promotion-header-til">优惠活动</view>
+				<view class="promotion-header-con">去领取</view>
+			</view>
+			<view class="promotion-body">
+				<view class="promotion-body-til">停车5折｜享受出行时光，专享停车优惠</view>
+				<view class="promotion-body-con">世界那么大，我想去看看。这话你已经说了一万遍但是却一直没有兑现原因竟然是“停车”可太难了</view>
+			</view>
+		</view>
 		
 		<u-modal 
 			v-model="bindCarShow"