新人活动

pages.json

@@ -550,6 +550,15 @@
 			 		"navigationStyle": "custom",
 			 	    "enablePullDownRefresh": false
 			 	}
+			 },
+			 {
+			 	"path" : "newPeople",
+			 	"style" :                                                                                    
+			 	{
+			 	    "navigationBarTitleText": "新人首单礼",
+			 		"navigationStyle": "custom",
+			 	    "enablePullDownRefresh": false
+			 	}
 			 }
 		   
 		 ]

pages/activity/newPeople.vue

@@ -0,0 +1,262 @@
+<template>
+	<view class="newpeople">
+		<view class="newpeople-navbar">
+			<u-navbar title="" back-icon-color="#fff" :border-bottom="false" :background="background"></u-navbar>
+		</view>
+		<view class="newpeople-hd"></view>
+		<view class="newpeople-gift">
+			<view class="a">
+				<image src="@/static/news/newPeople-bg1.png"></image>
+			</view>
+			<scroll-view scroll-x class="b">
+				<view class="item" v-for="i in 12" :key="i">
+					<image src="@/static/news/newPeople-bg2.png"></image>
+					<view class="p">¥<text>200</text></view>
+					<view class="l">满2000可用</view>
+					<view class="btn">立即领取</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="newpeople-bd">
+			<view class="a">
+				<u-tabs :list="list" bg-color="#fafafa" inactive-color="#3C3C3C" active-color="#FF3C43" :is-scroll="true" font-size="30" v-model="current" @change="change"></u-tabs>
+			</view>
+			<view scroll-x class="b">
+				<view class="item" v-for="i in 10" :key="i" @click="tabFilter(0)">
+					<image src="@/static/home/phone.jpg"></image>
+					<view class="title">
+						<text>自营</text>iphone13 绿色 128GB
+					</view>
+					<view class="price">
+						<view class="n">￥<text>7595</text>到手价</view>
+						<view class="o">￥7595</view>
+					</view>
+					<view class="desc">
+						200+条评论 99%好评率
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="newpeople-fd">
+			<image src="@/static/news/top.png"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	import img from "@/static/news/newPeople-bg.png"
+	export default {
+		data() {
+			return {
+				current: 1,
+				background: {
+					background: 'url('+	img+') center top no-repeat',
+					backgroundSize: '100%',
+					
+				},
+				list: [{
+					name: '精选好物'
+				}, {
+					name: '吹风机'
+				}, {
+					name: '空调'
+				}, {
+					name: '手机'
+				}, {
+					name: '洗衣机'
+				}, {
+					name: '冰箱'
+				}, {
+					name: '彩电'
+				}],
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.newpeople{
+	background: url(@/static/news/newPeople-bg.png) center top no-repeat;
+	background-size: 100% auto;
+	overflow: hidden;
+	&-hd{
+		height: 200rpx;
+	}
+	&-gift{
+		width: 100%;
+		border-radius: 10rpx 10rpx 0 0;
+		background-color: #fff;
+		overflow: hidden;
+		.a{
+			width: 100%;
+			image{
+				width: 380rpx;
+				height: 58rpx;
+				margin-left: 60rpx;
+				margin-top: 20rpx;
+			}
+		}
+		.b{
+			padding: 20rpx;
+			overflow: hidden;
+			white-space: nowrap;
+			.item{
+				width: 210rpx;
+				height: 266rpx;
+				position: relative;
+				margin-left: 30rpx;
+				display: inline-block;
+				text-align: center;
+				&:first-child{
+					margin-left: 0;
+				}
+				image{
+					width: 100%;
+					height: 100%;
+				}
+				.p{
+					width: 100%;
+					font-size: 42rpx;
+					color: #FF343B;
+					height: 80rpx;
+					position: absolute;
+					left: 0;
+					top: 50rpx;
+					z-index: 2;
+					text{
+						font-size: 52rpx;
+					}
+				}
+				.l{
+					width: 100%;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #8C4D00;
+					height: 50rpx;
+					position: absolute;
+					left: 0;
+					top: 120rpx;
+					z-index: 2;
+					text{
+						font-size: 52rpx;
+					}
+				}
+				.btn{
+					width: 100%;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #8C4D00;
+					height: 50rpx;
+					position: absolute;
+					left: 0;
+					bottom: 2rpx;
+					z-index: 2;
+					text{
+						font-size: 52rpx;
+					}
+				}
+			}
+		}
+	}
+	&-bd{
+		padding: 0 20rpx;
+		overflow: hidden;
+		.a{
+			padding: 10rpx 0;
+			overflow: hidden;
+		}
+		.b{
+			overflow: hidden;
+			.item{
+					width: 340rpx;
+					height: 436rpx;
+					background: #FFFFFF;
+					border-radius: 8rpx;
+					opacity: 1;
+					border: 1px solid #ECECEC;
+					padding: 10rpx 15rpx;
+					box-sizing: border-box;
+					float: left;
+					margin-left: 30rpx;
+					margin-bottom: 30rpx;
+					&:nth-child(2n+1){
+						margin-left: 0;
+					}
+					image{
+						width: 275rpx;
+						height: 275rpx;
+						display: block;
+						margin: 0 auto;
+					}
+					.title{
+						padding: 10rpx 0;
+						line-height: 40rpx;
+						font-size: 24rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 400;
+						color: #1E1E1E;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						text{
+							background-color: #F34A40;
+							font-size: 24rpx;
+							padding: 0 10rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							text-align: center;
+							border-radius: 4rpx;
+							font-weight: 400;
+							color: #FFFFFF;
+							margin-right: 5rpx;
+							display: inline-block;
+						}
+					}
+					.price{
+						display: flex;
+						align-items: center;
+						white-space: nowrap;
+						.n{
+							display: flex;
+							align-items: baseline;
+							font-size: 11px;
+							font-weight: 500;
+							color: #F21A1C;
+							text{
+								font-size: 29rpx;
+							}
+						}
+						.o{
+							font-size: 12px;
+							color: #949494;
+							text-decoration: line-through;
+						}
+					}
+					.desc{
+						font-size: 10px;
+						font-weight: 400;
+						color: #949494;
+						white-space: nowrap;
+						margin-top: 10rpx;
+					}
+				}
+			
+		}
+	}
+	&-fd{
+		width: 132rpx;
+		height: 166rpx;
+		position: fixed;
+		right: 10rpx;
+		bottom: 10%;
+		z-index: 99;
+		image{
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>