兑换大厅列表样式调整

pages/core/index.vue

@@ -22,8 +22,6 @@
 				</view>
 			</view>
 		</view>
-		<!-- swiper结束 -->
-
 		<!-- 分类部分开始 -->
 		<view class="classificationBox">
 			<view v-for="(item,index) in goods" :key="index" @click="toCoreRange('category',item.categoryId, item.name)"
@@ -32,13 +30,11 @@
 				<view v-text="item.name" style=" "></view>
 			</view>
 		</view>
-		<!-- 分类部分结束 -->
-
 		<!-- 限时秒杀部分开始 -->
-		<view v-for="(item,index) in exclusiveSingle" :key="index">
-			<view class=" sticky-bac">
-				<text class="sticky-bac-text1" v-text="item.name"></text>
-				<view @click="toCoreRange('tag',item.tagId, item.name)" class="sticky-bac-text2">
+		<view v-for="(item,index) in exclusiveSingle" :key="index" class="sticky-wrap">
+			<view class=" sticky-nav">
+				<text class="sticky-nav-name" v-text="item.name"></text>
+				<view @click="toCoreRange('tag',item.tagId, item.name)" class="sticky-nav-all">
 					<view></view>
 					<view class="flex ">
 						<text>更多</text>
@@ -46,9 +42,9 @@
 					</view>
 				</view>
 			</view>
-			<view class="Seckill-bom">
-				<view class="Seckill-bom-grid">
-					<navigator :url="`/pages/goods/detail?id=${ itemExc.goodsId }`" class="core-list-item"
+			<view class="sticky-content-wrap">
+				<view class="flex sticky-content-list">
+					<navigator :url="`/pages/goods/detail?id=${ itemExc.goodsId }`" class="sticky-content-list-item"
 						hover-class="navigator-hover" v-for="(itemExc, indexNum) in item.data" :key="indexNum">
 						<view class="flex iamge-wrap">
 							<image :src="itemExc.picUrl" mode=""></image>
@@ -59,15 +55,12 @@
 							<view>× {{ itemExc.exchangePrice }}</view>
 						</view>
 					</navigator>
-					<view></view>
+					<view class="sticky-content-list-item"></view>
 				</view>
 			</view>
 		</view>
-		<!-- 限时秒杀部分结束 -->
-
-
-		<!-- 精选商品部份开始 -->
-		<u-sticky  class="offset-Height" :customNavHeight="navHeight" @touchmove.prevent.stop>
+		<!-- 精选商品筛选 -->
+		<u-sticky class="offset-Height" :customNavHeight="navHeight" @touchmove.prevent.stop>
 			<view class="screen-coin uSticky-toTop">
 				<view class="screen-coin-shopin">精选商品</view>
 
@@ -107,7 +100,7 @@
 				</view>
 			</view>
 		</u-sticky>
-
+		<!-- 精选商品列表 -->
 		<view class="core">
 			<view class="flex core-list">
 				<navigator :url="`/pages/goods/detail?id=${ item.goodsId }`" class="core-list-item"
@@ -128,10 +121,11 @@
 			</view>
 		</view>
 		<custom-tab-bar :activeValue="'core'" />
-
+		<!-- 筛选盲豆 -->
 		<u-overlay :show="coinShow" @click="coinShow = false" zIndex="1" @touchmove.prevent.stop></u-overlay>
+		<!-- 筛选排序 -->
 		<u-overlay :show="ascShow" @click="ascShow = false" zIndex="1" @touchmove.prevent.stop></u-overlay>
-		<!-- 精选商品结束 -->
+
 		<custom-tab-bar :activeValue="'core'" />
 	</view>
 </template>
@@ -146,7 +140,6 @@
 		},
 		data() {
 			return {
-
 				indicatorDots: true,
 				autoplay: true,
 				interval: 3000,
@@ -240,13 +233,10 @@
 				],
 				ascListsingle: {},
 				ascListIndex: 0,
-				
+
 				// 距顶部位置
-				navHeight:0,
+				navHeight: 0,
 			};
-		},
-		onShow() {
-
 		},
 		onLoad() {
 			this.pageList()
@@ -255,13 +245,13 @@
 			this.getSwiper()
 			this.getListIficationBox()
 			this.getExclusive()
-			
+
 			uni.getSystemInfo({
-				success: (data)=> {
-						let custom = wx.getMenuButtonBoundingClientRect()
-						//导航栏高度
-						this.navHeight = custom.bottom + custom.top - data.statusBarHeight
-					},
+				success: (data) => {
+					let custom = wx.getMenuButtonBoundingClientRect()
+					//导航栏高度
+					this.navHeight = custom.bottom + custom.top - data.statusBarHeight
+				},
 			})
 		},
 		methods: {
@@ -375,12 +365,14 @@
 					uni.hideLoading();
 				})
 			},
+			
 			pageList() {
 				this.pageNum = 1
 				this.total = 0
 				this.list = []
 				this.getList()
 			},
+			
 			pageListTwo() {
 				this.pageNum = 1
 				this.total = 0
@@ -392,12 +384,13 @@
 				if (this.coinShow == false) {
 					this.coinShow = true
 					this.ascShow = false
-					
+
 					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
-						uni.createSelectorQuery().select(".screen-coin-select-text-two").boundingClientRect((data) => {
+						uni.createSelectorQuery().select(".screen-coin-select-text-two").boundingClientRect((
+							data) => {
 							uni.pageScrollTo({
 								duration: 0,
-								scrollTop: -res.top + data.top +350 ,
+								scrollTop: -res.top + data.top + 350,
 							})
 						}).exec()
 					}).exec()
@@ -411,16 +404,16 @@
 				if (this.ascShow == false) {
 					this.ascShow = true
 					this.coinShow = false
-					
+
 					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
 						uni.createSelectorQuery().select(".screen-coin-select-text").boundingClientRect((data) => {
 							uni.pageScrollTo({
 								duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
-								scrollTop: -res.top + data.top ,
+								scrollTop: -res.top + data.top,
 							})
 						}).exec()
 					}).exec()
-					
+
 				} else {
 					this.ascShow = false
 				}
@@ -434,6 +427,7 @@
 				this.coinNum.endPrice = item.max
 				this.pageList()
 			},
+			
 			selectCoinTwo(item, index) {
 				this.ascListIndex = index
 				this.ascListsingle = this.ascList[this.ascListIndex]
@@ -450,6 +444,7 @@
 				this.pageListTwo()
 			},
 		},
+		
 		//精选商品
 		onReachBottom() {
 			// 判断是否有数据
@@ -504,53 +499,102 @@
 		border-radius: 29px;
 	}
 
-	.sticky-bac {
-		border: 1px;
-		border-top-right-radius: 10px;
-		border-top-left-radius: 10px;
-		// margin-top: 10px;
-		background-color: #FFFFFF;
-		// padding: 0 3px;
-		margin:10px 10px 0px 10px;
-
-		.sticky-bac-text1 {
-			color: #2f2f2f;
-			font-size: 18px;
-			line-height: 25px;
-			display: inline-block;
-			padding: 8px;
-		}
+	.sticky-wrap {
+
+		.sticky-nav {
+			border: 1px;
+			border-radius: 20rpx 20rpx 0 0;
+			background-color: #FFFFFF;
+			margin: 20rpx 20rpx 0 20rpx;
+
 
-		;
-
-		.sticky-bac-text2 {
-			width: 128px;
-			height: 40px;
-			text-align: right;
-			line-height: 40px;
-			color: #9c9c9c;
-			float: right;
-			display: grid;
-			grid-template-columns: 1fr 1fr;
+			.sticky-nav-name {
+				color: #2f2f2f;
+				font-size: 18px;
+				line-height: 25px;
+				display: inline-block;
+				padding: 8px;
+			}
+
+			.sticky-nav-all {
+				width: 128px;
+				height: 40px;
+				text-align: right;
+				line-height: 40px;
+				color: #9c9c9c;
+				float: right;
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+			}
 		}
-	}
 
-	.Seckill-bom {
-		// padding: 0 3px;
-		margin:0 10px;
-		// margin-bottom: 10px;
-		
+		.sticky-content-wrap {
+			margin: 0 20rpx;
+			border-radius: 0 0 20rpx 20rpx;
+			overflow: hidden;
 
-		.Seckill-bom-grid {
-			
-			background-color: #FFFFFF;
-			min-height: 530rpx;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			// padding: 15rpx 15rpx 0rpx 15rpx;
-			margin-bottom: 10px;
+			.sticky-content-list {
+				width: 100%;
+				background-color: #FFFFFF;
+				justify-content: space-around;
+				flex-wrap: wrap;
+				padding-top: 20rpx;
+
+				&-item {
+					box-sizing: border-box;
+					width: 320rpx;
+					height: 502rpx;
+					background-color: #FFFFFF;
+					border-radius: 10rpx;
+					margin-bottom: 30rpx;
+
+					.iamge-wrap {
+						image {
+							border-radius: 10rpx 10rpx 0 0;
+							width: 320rpx;
+							height: 320rpx;
+							margin-bottom: 6rpx;
+						}
+					}
+
+					.title {
+						padding: 0 14rpx;
+						font-size: 28rpx;;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+					}
+
+					.bean {
+						padding: 0 14rpx;
+						display: flex;
+						align-items: center;
+						font-size: 32rpx;
+						line-height: 44rpx;
+						color: rgba(235, 112, 9, 100);
+						margin-top: 12rpx;
+
+						image {
+							width: 42rpx;
+							height: 42rpx;
+							margin-right: 16rpx;
+						}
+					}
+				}
+
+				&-item:last-child {
+					padding: 0;
+					height: 0;
+				}
+			}
+		}
+
+		.sticky-content-wrap:last-child {
+			margin-bottom: 20rpx;
 		}
+
 	}
 
 	.screen-coin-shopin {
@@ -571,11 +615,7 @@
 		height: 26rpx;
 	}
 
-
-
-	//================
 	.screen-coin {
-		// position: fixed;
 		width: 100%;
 		z-index: 10;
 		background-color: #FFFFFF;
@@ -622,7 +662,6 @@
 		&-list {
 			justify-content: space-evenly;
 			flex-wrap: wrap;
-			// padding-top: 96rpx;
 
 			&-item {
 				box-sizing: border-box;