no message

common/css/common.css

@@ -286,6 +286,11 @@ image {
 	color: #333;
 }
 
+.fc-a {
+	color: #aaa;
+}
+
+
 .fc-6 {
 	color: #666;
 }
@@ -318,6 +323,11 @@ image {
 	color: #ff3939;
 }
 
+.fc-F93435 {
+	color: #F93435;
+}
+
+
 .fc-FF7F00 {
 	color: #FF7F00;
 }
@@ -330,6 +340,15 @@ image {
 	color: #ED301D;
 }
 
+.fc-F6531E {
+	color: #F6531E;
+}
+
+
+.fc-FF5022 {
+	color: #FF5022;
+}
+
 .fc-ADADAD {
 	color: #ADADAD;
 }
@@ -342,6 +361,10 @@ image {
 	color: #FE9E11;
 }
 
+.fc-FCFBF8 {
+	color: #FCFBF8;
+}
+
 /* 背景颜色 */
 .bgc-f {
 	background-color: #fff;
@@ -474,6 +497,10 @@ image {
 	padding: 32rpx;
 }
 
+.pt-48 {
+	padding-top: 48rpx;
+}
+
 .p-t-4 {
 	padding-top: 4rpx;
 }
@@ -530,6 +557,9 @@ image {
 	padding: 12rpx 24rpx;
 }
 
+.p-28-20-39 {
+	padding: 28rpx 20rpx 39rpx
+}
 
 
 .pl-15 {
@@ -679,6 +709,10 @@ image {
 	margin-bottom: 28rpx;
 }
 
+.mb-30 {
+	margin-bottom: 30rpx;
+}
+
 .mb-32 {
 	margin-bottom: 32rpx;
 }

pages-buy/group-mod/shop-list.vue

@@ -7,42 +7,61 @@
 				</template>
 			</EnBlank>
 		</view>
-		<view v-else class="item-box mb-16 bgc-f p-24 box-border-box display-flex" v-for="(item,index) in list"
-			:key="index" @click="goToUrl(item)">
-			<view class="item-left flex-shrink0">
-				<image :src="item.shop_logo" mode="aspectFill" class="shop_logo mr-16"></image>
-			</view>
-			<view class="item-right flex-1">
-				<view class="w-240 fs-34 fc-3 fw-600 mb-8 text-overflow-ellipsis-one">
-					{{item.shop_name}}
+		<view v-else class="item-box mb-16 bgc-f p-28-20-39 box-border-box" v-for="(item,index) in list" :key="index"
+			@click="goToUrl(item)">
+			<view class="display-flex">
+				<view class="flex-shrink0">
+					<image :src="item.shop_logo" mode="aspectFill" class="shop_logo mr-30"></image>
 				</view>
-				<view class="align-items-center flex-justify-space mb-4">
-					<view class="fs-24 fc-9 w-150 text-overflow-ellipsis">
-						{{item.address}}
-					</view>
-					<view class="fs-24 fc-9 flex-shrink0">
-						销量{{item.shop_sales}}
+				<view class="item-right flex-1 flex-direction flex-justify-around">
+					<view class="">
+						<view class="w-240 fs-32 fc-0 fw-b mb-12 text-overflow-ellipsis-one">
+							{{item.shop_name}}
+						</view>
+						<view class="align-items-center">
+							<image class="dw mr-8" src="@/static/img/group/jl.png" mode=""></image>
+							<view class="fs-24 fc-a">
+								{{item.address}}
+							</view>
+						</view>
 					</view>
-				</view>
-				<view class="align-items-center flex-justify-end pb-10 b-b-F9F9F9 mb-12">
-					<image class="dw mr-4" src="@/static/img/my/wz-two.png" mode=""></image>
-					<view class="fs-24 fc-9">
-						距离{{item.distance}}Km
+					<view class="align-items-center flex-justify-space">
+						<view class="align-items-center">
+							<view class="fs-24 fc-a">
+								距离{{item.distance}}Km
+							</view>
+							<view class="hr"></view>
+							<view class="fs-24 fc-a">
+								销量{{item.shop_sales}}
+							</view>
+						</view>
+						<view class="ljqg-but fs-28 fw-b fc-F6531E text-align-center">
+							立即抢购
+						</view>
 					</view>
 				</view>
-				<view class="align-items-center" v-for="(goodsItem,goodsIndex) in item.goods" :key="goodsIndex">
-					<view class="fs-30 fw-600 fc-ff3939 mr-8 flex-shrink0">
-						<span class="fs-24 fw-600 fc-ff3939">￥</span>
-						{{goodsItem.price}}
-					</view>
-					<view class="mr-8 fs-20 fc-ff3939 discount-box flex-shrink0">
-						6.3折
-					</view>
-					<view class="mr-8 fc-9 fs-24 flex-shrink0 line-price">
-						￥{{goodsItem.line_price}}
+			</view>
+			<view class="pt-48" v-if="item.goods.length>0">
+				<view class="align-items-center flex-justify-space list-b" v-for="(goodsItem,goodsIndex) in item.goods" :key="goodsIndex">
+					<view class="align-items-center">
+						<view class="mr-8 discount-box flex-shrink0">
+							<image class="zkbg-img" src="@/static/img/group/zkbg.png" mode=""></image>
+							<view class="zkje fs-24 fc-f">
+								6.3折
+							</view>
+						</view>
+						<view class="fs-24 fc-0 max-w-252 text-overflow-ellipsis-one">
+							{{goodsItem.title}}
+						</view>
 					</view>
-					<view class="fs-26 max-w-130 text-overflow-ellipsis-one">
-						{{goodsItem.title}}
+					<view class="align-items-center">
+						<view class="fs-32 fw-b fc-F93435 mr-12 flex-shrink0">
+							<span class="fs-24 fw-b fc-F93435">￥</span>
+							{{goodsItem.price}}
+						</view>
+						<view class="fc-a fs-24 flex-shrink0 line-price">
+							￥{{goodsItem.line_price}}
+						</view>
 					</view>
 				</view>
 			</view>
@@ -93,18 +112,35 @@
 </script>
 
 <style lang="scss" scoped>
-	.max-w-130{
-		width: 200rpx;
+	.hr{
+		width: 1rpx;
+		height: 16rpx;
+		background: #DEDEDE;
+		margin: 0 11rpx 0 17rpx;
+	}
+	.ljqg-but{
+		width: 164rpx;
+		height: 54rpx;
+		line-height: 54rpx;
+		background: linear-gradient(-90deg, #FFE192, #FFD568);
+		box-shadow: 0rpx 2rpx 21rpx 0rpx rgba(232,183,55,0.48);
+		border-radius: 27rpx;
 	}
-	.line-price{
+	.max-w-252 {
+		width: 252rpx;
+	}
+
+	.line-price {
 		text-decoration: line-through;
 	}
-	.dw{
-		width: 20rpx;
-		height: 20rpx;
+
+	.dw {
+		width: 16rpx;
+		height: 18rpx;
 	}
+
 	.w-240 {
-		width: 480rpx;
+		// width: 480rpx;
 	}
 
 	.min-h-85 {
@@ -117,16 +153,33 @@
 	}
 
 	.shop_logo {
-		width: 160rpx;
-		height: 160rpx;
-		border-radius: 15rpx;
+		width: 180rpx;
+		height: 180rpx;
+		border-radius: 20rpx;
+	}
+
+	.w-150 {
+		// width: 300rpx;
+	}
+
+	.discount-box {
+		width: 82rpx;
+		height: 32rpx;
+		position: relative;
+	}
+	.zkbg-img{
+		width: 100%;
+		height: 100%;
+	}
+	.zkje{
+		position: absolute;
+		left: 10rpx;
+		top: 0;
 	}
-	.w-150{
-		width: 300rpx;
+	.list-b{
+		margin-bottom: 34rpx;
 	}
-	.discount-box{
-		padding: 2rpx 6rpx;
-		border: 1rpx solid #ff3939;
-		border-radius: 6rpx;
+	.list-b:last-child {
+		margin: 0;
 	}
 </style>

pages-buy/group.vue

@@ -16,32 +16,38 @@
 					</view>
 				</view>
 				<view class="p-12-30 box-border-box class-b">
-					
-<!-- 					<view class="display-flex p-24 box-border-box nav-list bgc-f b-rad-16 mb-12">
-						<view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i"
-							@click="selectType(item.id)">
-							<image class="nav-img" :src="item.img" mode="scaleToFill"></image>
-							<view class="fs-24 w-96"
-								:class="fromData.category_id == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}
+					<view class="class-bg-box">
+						<image class="class-bg" src="@/static/img/group/fl-bg.png" mode=""></image>
+						<view class="align-items-center box-border-box class-box-head">
+							<image class="qbfl mr-18" src="@/static/img/group/qbfl.png" mode=""></image>
+							<view class="fs-24 fc-FF5022 fw-400">
+								特价拼团尽您选择！
 							</view>
 						</view>
-					</view> -->
+						<view class="class-list-box box-border-box">
+							<view class="class-list align-items-center flex-wrap-wrap">
+								<view class="mr-30 mb-30" v-for="(item,i) in navList" :key="i"
+									@click="selectType(item.id)">
+									<image class="nav-img mb-18" :src="item.img" mode="scaleToFill"></image>
+									<view class="fs-24 fc-0 text-align-center">
+										{{item.name}}
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
 				</view>
-				<view class="p-12-24 box-border-box sift-box align-items-center" :class="siftType?'bgc-f':''"
+				<view class="p-12-24 box-border-box sift-box align-items-center flex-justify-center"
 					@touchmove.stop.prevent="stopScroll">
 					<view class="mr-20 sift-item align-items-center flex-justify-center"
-						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1 && pop_type}]"
 						@click="siftClick(1)">
-						<view class=""
-							:class="[{'fc-41ABF5':(siftClassID === 1 && pop_type) || fromData.distance != 0}]">
+						<view class="fs-28 fc-FCFBF8">
 							{{siftDistance}}
 						</view>
 					</view>
-					<view class="mr-12 sift-item align-items-center flex-justify-center"
-						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 2 && pop_type}]"
+					<view class="mr-12 sift-item align-items-center flex-justify-center "
 						@click="siftClick(2)">
-						<view class=""
-							:class="[{'fc-41ABF5':(siftClassID === 2 && pop_type) || fromData.orderBy != 0}]">
+						<view class="fs-28 fc-FCFBF8">
 							{{siftSort}}
 						</view>
 					</view>
@@ -156,7 +162,9 @@
 		},
 		onLoad() {},
 		mounted() {
-			this.getHeight()
+			setTimeout(()=> {
+				this.getHeight()
+			},500)
 		},
 		methods: {
 			distanceClick(item) {
@@ -238,6 +246,7 @@
 					query.select('.class-b').boundingClientRect(data => {
 						if (data) {
 							// data.height 就是元素的高度
+							console.log(Number(data.height),Number(HThree),'**********************');
 							this.navListHeight = Number(data.height) + Number(HThree)
 						}
 					}).exec()
@@ -302,6 +311,47 @@
 </script>
 
 <style scoped lang="scss">
+	.class-box-head {
+		position: relative;
+		// z-index: 2;
+		padding: 30rpx 27rpx 22rpx;
+	}
+
+	.class-list-box {
+		padding: 0 20rpx;
+	}
+
+	.class-list {
+		position: relative;
+		padding: 36rpx 8rpx 8rpx 38rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0.95));
+	}
+
+	.qbfl {
+		width: 140rpx;
+		height: 28rpx;
+	}
+
+	.class-b {
+		width: 100%;
+		min-height: 510rpx;
+	}
+
+	.class-bg-box {
+		width: 100%;
+		position: relative;
+	}
+
+	.class-bg {
+		width: 100%;
+		height: 471rpx;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
 	.group-bg {
 		width: 100%;
 		height: 188rpx;
@@ -399,6 +449,7 @@
 		left: 0;
 		z-index: 200;
 		overflow-x: scroll;
+		background: #FF3D19;
 	}
 
 	.sift-content-box {
@@ -410,11 +461,12 @@
 	}
 
 	.sift-item {
-		min-width: 150rpx;
-		max-width: 280rpx;
+		// min-width: 150rpx;
+		// max-width: 280rpx;
+		width: 50%;
 		height: 60rpx;
 		line-height: 60rpx;
-		border-radius: 8rpx;
+		// border-radius: 8rpx;
 		transition: all .5s ease;
 	}
 
@@ -433,10 +485,9 @@
 	}
 
 	.nav-img {
-		width: 80rpx;
-		height: 80rpx;
-		border-radius: 5px;
-		margin: 0 auto 12rpx auto;
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 50%;
 	}
 
 	.head-search {