首页

components/indexnav.vue

@@ -2,14 +2,17 @@
 	<view>
 		<!-- 占位高度 -->
 		<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
-		<view class="navbar"
-			:style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
-			<!-- 左边返回键 -->
+		<view class="navbar" :style="[centerContentStyle,navbarStyle]">
+			<!-- 左边返回键 ,-->
 			<view v-if="showBack" @click="goBack" class="back-icon">
-				<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
+				<view class="navbar_tow_one flex-start">
+					<text class="textnth-childone">零点八零</text>
+					<text class="textnth-childtow">西安市</text>
+					<up-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></up-icon>
+				</view>
 			</view>
 			<!-- 中间内容 -->
-			<view class="center-content" :style="centerContentStyle">
+			<view class="center-content">
 				<view v-if="showSearch">
 					<view class="navbar_tow_tow flex-start">
 						<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
@@ -20,6 +23,7 @@
 			</view>
 			<!-- 右边文字 -->
 			<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
+			<view v-else></view>
 		</view>
 	</view>
 </template>
@@ -31,7 +35,8 @@
 	import {
 		ref,
 		watch,
-		onMounted
+		onMounted,
+		computed
 	} from 'vue';
 
 	const store = useNavbarStore();
@@ -42,9 +47,12 @@
 		title,
 		isTransparent,
 		height,
-		hasPlaceholder
+		hasPlaceholder,
+		scrollTop
 	} = store;
 
+	const keyword = ref()
+
 	const goBack = () => {
 		uni.navigateBack({
 			delta: 1
@@ -52,29 +60,36 @@
 	};
 
 	const onRightTextClick = () => {
-		// 这里可以添加右边文字点击的处理逻辑
 		console.log('右边文字被点击');
 	};
+
+	const navbarStyle = computed(() => {
+		return {
+			height: `${height}px`,
+			backgroundColor: store.scrollTop >= 44 ? '#F9F9F9' : 'transparent'
+		};
+	});
+	// 小程序单独胶囊的样式
 	const centerContentStyle = ref({});
-
-
 	onMounted(() => {
+		// #ifdef MP-WEIXIN
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 		const systemInfo = uni.getSystemInfoSync();
 		const statusBarHeight = systemInfo.statusBarHeight;
-
 		// 计算标题的垂直偏移量
-		const verticalOffset = menuButtonInfo.top - statusBarHeight;
+		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
+		const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
+			menuButtonInfo.top - menuButtonInfo.height)
 		const titleHeight = menuButtonInfo.height;
-
 		centerContentStyle.value = {
-			marginTop: `${titleHeight}px`,
-			height: `${titleHeight}px`,
-			lineHeight: `${titleHeight}px`,
+			paddingTop: `${verticalOffset}px`,
+			paddingRight: `${menuButtonInfo.width +20}px`,
+			height: `${height}px`,
+			lineHeight: `${height}px`,
 			boxSizing: 'border-box',
-
 		};
-		console.log(centerContentStyle)
+		// #endif
+
 	});
 </script>
 
@@ -92,6 +107,26 @@
 
 		.back-icon {
 			cursor: pointer;
+
+			.navbar_tow_one {
+				height: 100%;
+				line-height: 100%;
+
+				.textnth-childone {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: bold;
+					font-size: 28rpx;
+					color: #333333;
+				}
+
+				.textnth-childtow {
+					margin-left: 16rpx;
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #333333;
+				}
+			}
 		}
 
 		.center-content {
@@ -124,7 +159,7 @@
 
 				.navbar_tow_towinput {
 					padding-left: 32rpx;
-					padding: 12rpx 120rpx 12rpx 32rpx;
+					padding: 12rpx 120rpx 12rpx 8rpx;
 					height: 100%;
 					flex: auto;
 					background: #FFFFFF;