From 677f19b81407aa1375c47a6e67741f69eef41418 Mon Sep 17 00:00:00 2001
From: 26947 <12@1>
Date: Sat, 11 May 2024 09:54:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dnavbar=E4=B8=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                       |  5 +-
 pages/common/navbar/index.vue | 64 +++++++++++++++++++++++++
 pages/index.vue               | 88 ++++++++++++++++++++++-------------
 3 files changed, 121 insertions(+), 36 deletions(-)
 create mode 100644 pages/common/navbar/index.vue

diff --git a/App.vue b/App.vue
index bd6c253..a22289c 100644
--- a/App.vue
+++ b/App.vue
@@ -43,10 +43,7 @@
 		box-sizing: border-box;
 	}
 	
-	image {
-		width: 100%;
-		height: auto;
-	}
+
 	
 	/* Flex布局 */
 	
diff --git a/pages/common/navbar/index.vue b/pages/common/navbar/index.vue
new file mode 100644
index 0000000..d23f4d6
--- /dev/null
+++ b/pages/common/navbar/index.vue
@@ -0,0 +1,64 @@
+<template>
+<view class="content">
+    		<!-- 顶部导航栏 -->
+		<u-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
+            <image src="../static/images/icon/tu2-4.png" class="img1" slot="center"></image>
+		    <view class="img1BOX" slot="left">
+				<image src="../static/images/icon/tu2-4.png" class="img1"></image>
+				<image src="../static/images/icon/tu2-5.png" class="img2"></image>
+				<view class="qiehuanBox">
+					<u-tabs lineColor="#B3D7FF" lineWidth="50" lineHeight="8" 
+					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}" 
+					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
+					:list="list1" @click="clickList1"></u-tabs>
+				</view> 
+		    </view>
+		</u-navbar>
+</view>
+</template>
+
+<script setup>
+import {
+	ref,
+	reactive,
+	toRefs,
+	getCurrentInstance
+} from 'vue';
+const list1 = ref([{
+    name: '关注',
+}, {
+    name: '推荐',
+}])
+const bgColor = ref('rgba(170, 0, 0, 0)');
+
+const clickList1 = () => {
+    console.log(111);
+}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		position: relative;
+		.img1BOX{
+			width:200rpx;
+			display: flex;
+			align-content: center;
+			.img1{
+		width: 41rpx;
+		height: 46rpx;
+		margin-right: 28rpx;
+	}
+
+	.img2{
+		width: 46rpx;
+		height: 46rpx;
+	}
+			.qiehuanBox{
+				margin-left: 130rpx;
+				display: flex;
+				align-content: center;
+				justify-content: center;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 78f594c..b52067d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,28 +1,23 @@
 <template>
 	<view class="content">
 		<!-- 顶部导航栏 -->
-		<!-- <u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
-		    <view class="img1BOX flex alignCenter" slot="left">
+		<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
+		    <template class="img1BOX" #left>
 				<image src="../static/images/icon/tu2-4.png" class="img1"></image>
 				<image src="../static/images/icon/tu2-5.png" class="img2"></image>
-				<view class="qiehuanBox flex alignCenter justifyCenter">
-					<u-tabs lineColor="#B3D7FF" lineWidth="50rpx" lineHeight="8rpx" 
+				
+		    </template>
+			 <template class="img2Box" #center>
+				<view class="qiehuanBox">
+					<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" 
 					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}" 
 					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
 					:list="list1" @click="click"></u-tabs>
 				</view>
-		    </view>
-		</u-navbar> -->
-		<up-navbar
-		leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor"
-		        >
-				<view class="">
-					<text>1</text>
-					<image src="../static/images/icon/tu2-4.png" class="img1"></image>
-					<image src="../static/images/icon/tu2-5.png" class="img2"></image>
-				</view>
-				
-		        </up-navbar>
+			</template> 
+
+		</u-navbar>
+
 		<view class="bgc"></view>
 		<!-- 搜索栏 -->
 		<view class="sousuoBox1 flex alignCenter justifyBetween">
@@ -271,9 +266,51 @@
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	// 微信小程序配置
+:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
+	padding-left: 32rpx !important;
+}
+	// 安卓app配置
+:deep(.u-navbar__content__left[data-v-f631659b], .u-navbar__content__right[data-v-f631659b]){
+	padding-left: 32rpx !important;
+}
+	.img1BOX{
+		padding-left: 32rpx;
+		display: flex;
+		align-content: center;
+	}
+	.img1{
+		width: 46rpx;
+		height: 46rpx;
+		margin-right: 28rpx;
+	}
+	.img2{
+		width: 46rpx;
+		height: 46rpx;
+	}
+
 	.content {
 		position: relative;
+
+
+
+	.img2Box{
+		
+
+		.qiehuanBox{
+		padding-left: 32rpx;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+	}
+	}
+
+
+		
+
+
+
 	}
 	.u-scroll-list.data-v-fea2b4f4 {
 		padding-bottom: 0px !important;
@@ -291,21 +328,8 @@
 	    position: relative;
 	    justify-content: center;
 	} */
-	.img1{
-		width: 41rpx;
-		height: 46rpx;
-		margin-right: 28rpx;
-	}
-	.img1BOX{
-		width:698rpx;
-	}
-	.img2{
-		width: 46rpx;
-		height: 46rpx;
-	}
-	.qiehuanBox{
-		margin-left: 130rpx;
-	}
+
+
 	.bgc{
 		width: 750rpx;
 		height: 356rpx;