修改更多页面ui

components/nav-bar/nav-bar.vue

 <template>
-	<view class="nav-bar" :style="{height:navHeight+'px'}">
+	<view class="nav-bar" :style="{height:navHeight+'px',background:bgColor,color:fontColor}">
 		<view class="title"
 			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
-			<block v-if="isBack && !isAlipay">
+			<view  @click="back" v-if="isBack && !isAlipay" class="back" :style="{height:searchHeight+'px',width:searchHeight+'px'}">
 				<image :src="`/static/image/icon-back.png`" mode="aspectFill"
-					:style="{height:searchHeight+'px',width:searchHeight+'px'}" class="back" @click="back"></image>
-			</block>
+					:style="{height:searchHeight+'px',width:searchHeight+'px'}" v-if='!backImgWhite'></image>
+					<image src="/static/image/icon-back-white.png" mode="aspectFill"
+						:style="{height:searchHeight+'px',width:searchHeight+'px'}" v-else></image>
+			</view>
 			<text>{{title}}</text>
 		</view>
 	</view>
 		onMounted,
 		ref
 	} from "vue";
-	
+
 	const navHeight = ref(null)
 	const searchMarginTop = ref(null)
 	const searchHeight = ref(32)
 	const searchWidth = ref(32)
-		const isAlipay = ref(false)
+	const isAlipay = ref(false)
 	onMounted(() => {
 		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 		const type = uni.getSystemInfoSync().uniPlatform
-		isAlipay.value = type === 'mp-alipay' 
+		isAlipay.value = type === 'mp-alipay'
 		const {
 			top,
 			width,
 		isBack: {
 			type: Boolean,
 			default: true
+		},
+		bgColor: {
+			type: String,
+			default: 'linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);'
+		},
+			
+		fontColor:{
+			type: String,
+			default: '#000'
+		},
+		backImgWhite:{
+			type: Boolean,
+			default: false
 		}
 	})
 	const back = () => {
 		position: fixed;
 		width: 100%;
 		z-index: 999;
-	
+
 	}
 
 	.nav-bar .title {
 		position: absolute;
 		left: 10rpx;
 	}
-</style>
+</style>

pages.json

 {
 	"mode": "production",
-	"pages": [{
+	"pages": [
+		{
+			"path": "pages/service/service",
+			"style": {
+				"navigationBarTitleText": "九州ETC",
+				"navigationStyle": "custom",
+				"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"defaultTitle": "" // 将导航栏默认的 title 置空
+				}
+			}
+		},
+		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarHidden": true,
 				}
 			}
 		},
-		{
-			"path": "pages/service/service",
-			"style": {
-				"navigationBarTitleText": "九州ETC",
-				"navigationStyle": "custom",
-				"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
-					"transparentTitle": "always",
-					"titlePenetrate": "YES",
-					"defaultTitle": "" // 将导航栏默认的 title 置空
-				}
-			}
-		},
+		// {
+		// 	"path": "pages/service/service",
+		// 	"style": {
+		// 		"navigationBarTitleText": "九州ETC",
+		// 		"navigationStyle": "custom",
+		// 		"mp-alipay": { //在支付宝小程序中如果不生效 就加上这两行代码 就会生效啦
+		// 			"transparentTitle": "always",
+		// 			"titlePenetrate": "YES",
+		// 			"defaultTitle": "" // 将导航栏默认的 title 置空
+		// 		}
+		// 	}
+		// },
 		{
 			"path": "pages/bluetooth/bluetooth",
 			"style": {

pages/service/service.vue

 <template>
 	<view class="wrapper">
-		<navBar title="九州ETC"></navBar>
+		<navBar title="九州ETC" bgColor="#01243A" fontColor='#fff' :backImgWhite='true'></navBar>
 		<view class="search-box">
 			<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill" @click="search()"></image>
 			<input class="search" placeholder="请输入业务名称" v-model="state.searchVal" @confirm="search()" />
 			<view class="right">
 				<view class="right-content">
 					<block v-if="menuShow.list.length > 0">
-						<view v-for="(item,index) in menuShow.list[tableSelectIndex].children" :key='index'
-							class="item-box" @click="toNext(item.link)">
+						<view v-for="(item,index) in menuShow.list[tableSelectIndex].children" :key='index' class="item-box"
+							@click="toNext(item.link)">
 							<view class="item bg-blue" :style="{ '--background': bgBlue }">
 								<image :src="`${fileURLList}${item.iconPath}`" mode="aspectFill" />
 							</view>
 		return new Promise(async (resolve, reject) => {
 			const res = await request(queryMenuConfig, options);
 			const data = stringToJson(res.bizContent);
-			console.log("data", data.menuList)
+			console.log("dataqueryMenuConfigAction", data.menuList)
 			resolve(data);
 		}).catch((error) => {
 			reject(error);
 
 	.wrapper {
 		display: flex;
-		background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
+		background: #01243A;
 		flex-direction: column;
 		height: 100%;
 	}
 
 	.left .active .menu-text {
 		font-weight: bold;
-		color: #00b38b;
-		font-size: 28rpx;
 		line-height: 32rpx;
+		font-family: NotoSansHans, NotoSansHans;
+		font-size: 28rpx;
+		color: #01243A;
 	}
 
 	.left .border {
 	}
 
 	.left .on {
-		background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
+		/* background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%); */
+
+		background: linear-gradient( 0deg, #fff 0%, #C2A75F 100%);
+		border-radius: 4rpx;
 		font-size: 28rpx;
 	}