界面阴影增加

components/zbpSwiper.vue

@@ -5,7 +5,7 @@
 			<img :src="bgColor" alt="">
 		</view>
 
-		<view class="site-box flex_a_c_j_sb" >
+		<view class="site-box flex_a_c_j_sb"  >
 			<view class="place_wrapper flex_a_c" @click="selectLocation">
 				<view class="iconfont icon-weizhi"></view>
 				<view class="town_name">{{street}}</view>

pages/supply_chains/supply_chains.vue

@@ -3,11 +3,11 @@
 		<view class="circle_friends_wrapper">
 
 
-			<view class="">
+			<view v-if='ishshow'>
 				<view :class="['site-box ','flex_a_c_j_sb',isFshow?'sitbox':'']">
 					<view :class="['place_wrapper','flex_a_c',isFshow?'sitbox':'']" @click="selectLocation"
 						style="opacity: 0;">
-						<view class="iconfont icon-weizhi" style="margin-left: 20rpx;">
+						<view class="iconfont icon-weizhi" style="margin-left: 20rpx;background-color: transparent;">
 						</view>
 						<view class="town_name">{{street}}</view>
 					</view>
@@ -16,14 +16,12 @@
 						:class="[isFshow?'sitbox':'']">
 						<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
 					</navigator>
-
 				</view>
-				<view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
+				<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
 					<view class="bg-img">
 						<img :src="bgColor" alt="">
 					</view>
-				</view>
+				</view> -->
-
 			</view>
 
 
@@ -52,8 +50,8 @@
 						</view>
 
 					</view>
-					<view class="list-title-info"  style="color:#3A7331 ;">
+					<view class="list-title-info" style="color:#3A7331 ;">
-						<view class="" >
+						<view class="">
 							点击查看
 						</view>
 						<text class="iconfont icon-xiangyou"></text>
@@ -75,7 +73,7 @@
 						</view>
 					</view>
 					<view class="list-title-info" style="color:#3A7331 ;">
-						<view class="" >
+						<view class="">
 							点击查看
 						</view>
 						<text class="iconfont icon-xiangyou"></text>
@@ -125,7 +123,7 @@
 				<image src="@/static/images/f4.png" mode=""></image>
 			</view>
 			<view class="goodslist">
-				<WaterfallsFlow :wfList='cateGoods' @itemTap="itemTap" />
+				<WaterfallsFlow :wfList='cateGoods'  />
 
 			</view>
 			<view class="empty_wrapper" v-if="emptyShow">
@@ -225,7 +223,7 @@
 				streeta_id: '',
 				street: '',
 				bgColor: '',
-				ishshow: false,
+				ishshow: true,
 				isFshow: false,
 			}
 		},
@@ -293,15 +291,16 @@
 		// #ifdef APP-PLUS
 		onPageScroll(e) {
 			// this.scrollTop = e.scrollTop;
-			console.log(e.scrollTop)
+			// console.log(e.scrollTop)
 			if (e.scrollTop > 0) {
-
 				this.ishshow = true
-				setTimeout(() => {
+				this.isFshow = true
-					this.ishshow = false
+			
-					this.isFshow = true
+			} else if (e.scrollTop == 0) {
-				}, 3000)
+				this.ishshow = false
+				this.isFshow = false
 			} else {
+				this.ishshow = false
 				this.isFshow = false
 			}
 
@@ -650,7 +649,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	/deep/.color-lump {
 		display: none;
 	}
@@ -696,54 +695,15 @@
 	}
 
 
-	.sistbox {
-		transition: fadenum 3s;
-	}
-
-	@keyframes fadenum {
-		0% {
-			opacity: 0;
-		}
-
-		50% {
-			opacity: 1;
-		}
-
-		100% {
-			opacity: 0;
-		}
-	}
-
-	.bg-img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-
-		top: 0;
-		/* #ifdef MP || APP-PLUS */
-		z-index: -100;
-		/* #endif */
-		/* #ifdef H5 */
-		z-index: -100;
-		/* #endif */
-		z-index: -100;
-		filter: blur(0);
-		overflow: hidden;
-
-
-		img {
-			width: 100%;
-			height: 100%;
-			filter: blur(30rpx);
-			transform: scale(1.5);
-		}
-	}
-
 	.sitbox {
 		opacity: 1 !important;
-		background: #F84221 !important;
+		// background: #F84221 !important;
+		background: linear-gradient(to bottom, #F84221, #F84221);
+		background-color: #F84221;
+
 	}
 
+
 	.site-box {
 		width: 100%;
 		/* #ifdef MP || APP-PLUS */
@@ -766,9 +726,10 @@
 		// background-color: #e5e5e5;
 		// opacity: 0;
 		/* 初始时设置元素不透明 */
-		transition: opacity 0.2s ease-in;
+		backdrop-filter: blur(5px) opacity(0);
+		transition: opacity 0.2s ease-in-out;
 		transition-delay: 1.5s;
-		transition: background 0.2s ease-in;
+		transition: background 0.2s ease-in-out;
 		padding-right: 20rpx;
 
 		// 位置
@@ -777,7 +738,7 @@
 			margin-right: 24.56rpx;
 			font-size: 30rpx;
 			opacity: 0;
-			transition: opacity 1s ease-in;
+			transition: opacity 1s ease-in-out;
 			transition-delay: 1.5s;
 
 			.town_name {
@@ -910,6 +871,7 @@
 			width: 356rpx;
 			height: 235rpx;
 			position: relative;
+			background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
 
 			.list-title {
 				display: flex;
@@ -930,12 +892,14 @@
 						color: #F4F7FE;
 
 						.titlea {
-							font-size: 5rpx;
+							margin-top: 10rpx;
+							margin-left: 15rpx;
+							font-size: 12rpx;
 							font-family: PingFang SC-Semibold, PingFang SC;
 						}
 
 						.titleb {
-							margin-top: 10rpx;
+							margin-top: 18rpx;
 							font-size: 37rpx;
 							font-family: PingFang SC-Semibold, PingFang SC;
 							font-weight: 600;
@@ -983,8 +947,8 @@
 				border-radius: 19rpx 19rpx 19rpx 19rpx;
 				position: absolute;
 				bottom: 14rpx;
-				left:100rpx ;
+				left: 100rpx;
-				padding-left:15rpx ;
+				padding-left: 15rpx;
 			}
 
 			image {
@@ -1004,6 +968,7 @@
 			width: 356rpx;
 			height: 482rpx;
 			position: relative;
+			background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
 
 			.list-con-title {
 				position: absolute;
@@ -1042,6 +1007,7 @@
 				width: 356rpx;
 				height: 235rpx;
 				position: relative;
+				background: linear-gradient(180deg, #3B7733 0%, rgba(59, 118, 50, 0.88) 60%, rgba(56, 113, 49, 0) 100%);
 
 				.list-con-title {
 					position: absolute;