细节优化

pages/index/index.vue

 <template>
 	<view class="home" @touchstart="onTouchStart" @touchend="onTouchEnd">
-		<f-navbar :title="storeInfo.name" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff"
-			:fontSize="38" bgColor="#e40583" :scrollTop="scrollTop" navbarType='5'></f-navbar>
+		<f-navbar :title="'凑角-'+storeInfo.name" :isShowTransparentTitle="false" :isShowLeft="false" fontColor="#ffffff"
+			:fontSize="38" bgColor="#E40583" :scrollTop="scrollTop" navbarType='5'></f-navbar>
+			
+		<view class="header-content" :style="{paddingTop:statusBarHeight+'px' }">
+			<image class="logo-bg" :src="assetsPath +'/logo.png'" mode="widthFix"></image>
+		</view>	
+		
 		<scroll-view :enable-flex="true" class="scroll-view" scroll-y="true" @scroll="onScroll">
 			<view class="content-box">
-				<view class="header-content" :style="{paddingTop:statusBarHeight+'px' }">
-					<image :src="assetsPath + '/banner.png'" mode="widthFix"></image>
+				<view class="black-header">
+					
 				</view>
-				<view class="store-nav">
+				<view class="store-nav" :style="{background: storeNavBg}">
 					<view class="icon-box">
 						<image :src="assetsPath +'/logo_icon.png'" mode="widthFix"></image>
 					</view>
@@ -20,7 +25,7 @@
 							<image class="bg-img" :src="assetsPath+ '/44@2x.png'" mode="scaleToFill"></image>
 							<view class="flex-between tips-box">
 								<view class="flex-col part-left">
-
+				
 									<view v-if="storeInfo && storeInfo.distance" class=" flex-row">
 										<text class="cuIcon-locationfill text-red text-dw"></text>
 										<text>距您{{storeInfo.distance}}公里</text>
@@ -295,7 +300,8 @@
 				list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
 				objListDate: [],
 				timer2: null,
-				timerLocation: null
+				timerLocation: null,
+				storeNavBg:'rgba(255, 255, 255, 1)'
 			}
 		},
 		onShow() {
@@ -399,7 +405,6 @@
 							setTimeout(() => {
 								uni.removeStorageSync('storeId');
 								let aaa = uni.getStorageSync('storeId') ? true : false;
-								console.log(aaa, "是否删除数据")
 								this.onGetListStore()
 							}, 10)
 
@@ -420,11 +425,8 @@
 					if (res.data.code == 200 && res.data.data.length) {
 						let obj = {}
 						if (uni.getStorageSync("storeId")) {
-							console.log(1)
 							obj = res.data.data.find(item => item.id === uni.getStorageSync("storeId"));
-							// uni.removeStorageSync('storeId')
 						} else {
-							console.log(2)
 							obj = res.data.data[0];
 							uni.setStorageSync("storeId", obj.id);
 						}
@@ -580,12 +582,20 @@
 				})
 			},
 			onTouchStart() {
-
 				this.timer = null;
 				this.show = true;
 			},
 			onScroll(e) {
 				this.scrollTop = e.target.scrollTop;
+				let n = 0;
+				if(this.scrollTop<=10){
+					n = 0
+				}else if(this.scrollTop>=50){
+					n=0.1
+				}else{
+					n = Number( this.scrollTop/500).toFixed(4)
+				}
+				this.storeNavBg =`rgba(255, 255, 255, ${1-n})`
 				if (!this.timer) {
 					this.timer = setTimeout(() => {
 						this.show = false;
@@ -658,7 +668,10 @@
 		display: flex;
 		flex: 1;
 		width: 100vw;
-
+        .black-header{
+			width: 100%;
+			height: 340upx;
+		}
 
 		.content-box {
 			position: absolute;
@@ -673,31 +686,31 @@
 	}
 
 	.header-content {
+		position: fixed;
+		top: 0;
+		left: 0;
 		display: flex;
 		justify-content: center;
+		align-items: center;
 		width: 100%;
-		min-height: 280upx;
-		backdrop-filter: blur(5px);
-		background-color: #E40583;
-
-		image {
-			display: block;
-			width: 100%;
-			height: auto;
-			backdrop-filter: blur(5px);
+		min-height: 392upx;
+		background: linear-gradient(to right, #FB406F,#E40583);
+		.logo-bg{
+			width: 380upx;
+			max-height: 280upx;
 		}
 	}
 
 	.store-nav {
 		position: relative;
 		display: flex;
-		width: 94%;
+		align-self: flex-end;
+		width: 698upx;
 		height: 220upx;
-		background: #FFFFFF;
 		box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.302);
 		border-radius: 29rpx 29rpx 29rpx 29rpx;
-		margin-top: -60upx;
 		z-index: 10;
+		margin: 0 auto 24upx;
 
 		.icon-box {
 			position: absolute;
@@ -851,7 +864,7 @@
 		width: 100%;
 		margin: 0 0 24upx;
 		padding-bottom: 24upx;
-
+        background-color: #ffffff;
 		.title {
 			width: 94%;
 			margin: 12upx 0;