2023-5-22

pages.json

@@ -75,6 +75,26 @@
 					"style": {
 						"navigationBarTitleText": "水票购买"
 					}
+				},
+				{
+					"path": "/myWaterList",
+					"style": {
+						"navigationBarTitleText": "我的水票"
+					}
+				},
+				{
+					"path": "/deposit",
+					"style": {
+						"navigationBarTitleText": "我的押金"
+					}
+				},
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "我的水票",
+						"navigationBarBackgroundColor": "#3C82E6",
+						"navigationBarTextStyle": "white"
+					}
 				}
 			]
 		},
@@ -289,19 +309,11 @@
 				{
 					"path": "money/wallet",
 					"style": {
-						"navigationBarTitleText": "我的钱包",
-						"navigationBarBackgroundColor": "#3C82E6",
-						"navigationBarTextStyle": "white"
-					}
-				},
-				{
-					"path": "water/list",
-					"style": {
-						"navigationBarTitleText": "我的水票",
-						"navigationBarBackgroundColor": "#3C82E6",
-						"navigationBarTextStyle": "white"
+						"navigationStyle": "custom",
+						"navigationBarTitleText": "我的余额"
 					}
 				},
+				
 				{
 					"path": "money/walletList",
 					"style": {
@@ -318,7 +330,7 @@
 					"path": "money/recharge",
 					"style": {
 						"navigationBarTitleText": "充值",
-						"navigationBarBackgroundColor": "#0BBB62",
+						"navigationBarBackgroundColor": "#3C82E6",
 						"navigationBarTextStyle": "white"
 					}
 				},

pages/home/user.vue

@@ -17,14 +17,14 @@
 						<text class="num">{{user.now_money || '0.00' }}</text>
 						<text>我的余额</text>
 					</view>
-					<view class="tj-item" @click="navTo('/pages/user/water/list')">
+					<view class="tj-item" @click="navTo('/pages/water/myWaterList')">
 						<text class="num">{{'0.00' }}</text>
 						<text>我的水票</text>
 						
 					</view>
-					<view class="tj-item" @click="navTo('/pages/user/award/award')">
+					<view class="tj-item" @click="navTo('/pages/water/deposit')">
 						<text class="num">{{ user.brokerage_price || '0.00' }}</text>
-						<text>我的佣金</text>
+						<text>我的押金</text>
 					</view>
 				</view>
 			</view>

pages/user/money/recharge.vue

@@ -1,7 +1,5 @@
 <template>
 	<view class="content">
-		<view class="bg">
-		</view>
 		<view class="listBox">
 			<view class="list flex">
 				<view @click="changeMoney(index)" :class="{action:index==actionIndex}" class="item flex"
@@ -90,7 +88,12 @@
 		data() {
 			return {
 				actionIndex: 0, //当前选中的充值金额对象
+				// #ifndef H5
 				type: 'alipay',
+				// #endif
+				// #ifdef H5
+				type: 'wxpay',
+				// #endif
 				money: '', //充值金额
 				payLoding: false, //是否加载中
 				moneyList: [],
@@ -446,10 +449,11 @@
 	.list {
 		padding-top: 10rpx;
 		flex-wrap: wrap;
-
+		justify-content: flex-start;
 		.item {
 			justify-content: center;
-			width: 210rpx;
+			margin-left: 14rpx;
+			width: 200rpx;
 			height: 100rpx;
 			margin-bottom: 20rpx;
 			background-color: #F5F5F5;
@@ -465,18 +469,6 @@
 			}
 		}
 	}
-
-	.bg {
-		background-color: $color-green;
-		width: 950rpx;
-		position: absolute;
-		left: -100rpx;
-		border-bottom-left-radius: 1000rpx;
-		border-bottom-right-radius: 1000rpx;
-		top: 0rpx;
-		height: 300rpx;
-	}
-
 	.base-buttom {
 		position: relative;
 		left: auto;

pages/user/money/wallet.vue

@@ -1,51 +1,50 @@
 <template>
 	<view class="content">
-		<view class="bg">
-		</view>
+		<uni-nav-bar class="nav" @clickLeft='back' :border='false' backgroundColor='transparent' leftIcon='left'
+			color='#FFF' title="我的余额" />
 		<view class="content-money">
 			<view class="conetnt-box">
 				<view class="money-box">
-					<view class="text">可用金额（元）</view>
-					<view class="money">{{ money | getMoneyStyle }}</view>
-				</view>
-				<view class="flex buttom-box">
-					<view class="buttom" @click="navto('./recharge')">
-						<text>充值</text>
-					</view>
+					<view class="money"><text class="tip">￥</text>{{ money | getMoneyStyle }}</view>
+					<view class="text">当前余额</view>
 				</view>
 			</view>
 		</view>
-		<view class="listbox">
-			<view class="navbar flex">
-				<view class="title">
-					余额变动明细
-				</view>
-				<view class="alllist" @click="navto('./walletList')">
-					全部
-				</view>
-			</view>
-			<view class="conetntList">
-				<view class="listItem flex" v-for="(item, tabIndex) in navList[0].orderList">
-					<view class="itemLeft">
-						<view class="itemTitle">
-							{{item.title}}
-						</view>
-						<view class="itemBottom">
-							{{item.add_time}}
-						</view>
-					</view>
-					<view class="itemRight">
-						<view class="itemTitle">
-							{{(item.pm == 0 ? '-' : '+')+item.number}}
-						</view>
-						<!-- <view class="itemBottom">
-							余额{{item.yue}}
+		<view class="navbar">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item"
+				:class="{ current: tabCurrentIndex === index }" @click="tabCurrentIndex=index">{{ item.text }}</view>
+		</view>
+		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+					<!-- 空白页 -->
+					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
+					
+					<!-- 订单列表 -->
+					<view class="itemList" v-for="(items, indexs) in tabItem.orderList" :key="indexs">
+						<!-- <view class='font-size-lg padding-l-30 bg-gray padding-v-10'>
+							{{items.time}}
 						</view> -->
+						<view v-for="(item, index) in items.list" :key="index" class="order-item flex">
+							<view class="title-box">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="time">
+									<text>{{ item.add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<text>{{ (item.pm == 0 ? '-' : '+') + item.number }}</text>
+							</view>
+						</view>
 					</view>
-				</view>
-				<uni-load-more :status="navList[0].loadingType"></uni-load-more>
-			</view>
-		</view>
+					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+
+		<view class="base-buttom" @click="navto('./recharge')">立即充值</view>
 	</view>
 </template>
 
@@ -64,16 +63,24 @@
 		data() {
 			return {
 				// 头部图高度
-				maxheight: '',
 				tabCurrentIndex: 0, //当前选中的
 				navList: [{
-					state: 0,
-					text: '全部',
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				}, ],
+						state: 1,
+						text: '支出',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 2,
+						text: '收入',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				],
 				money: ''
 			};
 		},
@@ -94,6 +101,17 @@
 			this.loadData();
 		},
 		methods: {
+			//swiper 切换
+			changeTab(e) {
+				this.tabCurrentIndex = e.target.current;
+				this.loadData('tabChange');
+			},
+			// 返回退回
+			back() {
+				uni.reLaunch({
+					url: '/pages/home/user'
+				})
+			},
 			// 页面跳转
 			navto(e) {
 				uni.navigateTo({
@@ -127,7 +145,7 @@
 						data
 					}) => {
 						if (data.length > 0) {
-							navItem.orderList = navItem.orderList.concat(data[0].list);
+							navItem.orderList = navItem.orderList.concat(data);
 							console.log(navItem.orderList);
 							navItem.page++;
 						}
@@ -144,7 +162,6 @@
 					})
 					.catch(e => {
 						console.log(e);
-						this.$set(navItem, 'loaded', true);
 					});
 			}
 		}
@@ -159,110 +176,138 @@
 	.content-money {
 		position: relative;
 		padding: 20rpx;
-		z-index: 1;
-		height: 440rpx;
-
-		.conetnt-box {
-			border-radius: 20rpx;
-			background-color: #ffffff;
-			height: 400rpx
-		}
+		padding-top: var(--status-bar-height);
+		background: url('../../../static/image/tg-bg.png') no-repeat;
+		height: 200px;
 
-		.buttom-box {
+		.money-box {
+			padding-top: 80px;
 			text-align: center;
-			margin: 0 30rpx;
-			margin-top: 80rpx;
+			color: #FFF;
 
-			.buttom {
-				flex-grow: 1;
-				border-radius: 100rpx;
-				font-size: $font-lg;
-				width: 300rpx;
-				height: 80rpx;
-				line-height: 80rpx;
-				background-color: $color-green;
-				color: #FFFFFF;
+			.text {
+				font-size: $font-base;
+			}
+
+			.money {
+				font-weight: bold;
+				font-size: 82rpx;
 
-				&.geMoney {
-					border: 1px solid $font-color-disabled;
-					color: $font-color-disabled;
-					background-color: #FFFFFF;
+				.tip {
+					font-size: $font-lg;
 				}
 			}
 		}
 	}
 
-	.money-box {
-		text-align: center;
-		color: $font-color-dark;
-		font-weight: bold;
 
-		.text {
-			padding-top: 85rpx;
-			font-size: 24rpx;
-			margin-bottom: 20rpx;
+
+	.content {
+		height: 100%;
+
+		.nav {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: 0;
+			z-index: 998;
 		}
+	}
+
+	.buttom-box {
+		text-align: center;
+		margin: 0 30rpx;
+		margin-top: 80rpx;
+
+		.buttom {
+			flex-grow: 1;
+			border-radius: 100rpx;
+			font-size: $font-lg;
+			width: 300rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			background-color: $color-green;
+			color: #FFFFFF;
 
-		.money {
-			font-size: 60rpx;
+			&.geMoney {
+				border: 1px solid $font-color-disabled;
+				color: $font-color-disabled;
+				background-color: #FFFFFF;
+			}
 		}
 	}
 
-	.listbox {
-		margin: 0 20rpx;
-		border-radius: 20rpx;
+	.base-buttom {
+		position: fixed;
+		bottom: 30rpx;
+		left: 0;
+		right: 0;
 	}
 
 	.navbar {
+		display: flex;
+		height: 40px;
+		padding: 0 5px;
+		margin-top: 10px;
 		background: #fff;
-		padding: 30rpx;
-		border-bottom: 1px solid $page-color-light;
-		border-top-left-radius: 20rpx;
-		border-top-right-radius: 20rpx;
+		position: relative;
+		border-bottom: 1px solid $border-color-light;
+		z-index: 10;
 
-		.title {
-			font-size: 32rpx;
-			font-weight: bold;
-		}
+		.nav-item {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 15px;
+			color: $font-color-dark;
+			position: relative;
 
-		.alllist {
-			font-size: 28rpx;
+			&.current {
+				color: $base-color;
 
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 44px;
+					height: 0;
+					border-bottom: 2px solid $base-color;
+				}
+			}
 		}
 	}
 
-
-	.content {
-		height: 100%;
-
-		.bg {
-			background-color: $color-green;
-			width: 950rpx;
-			position: absolute;
-			left: -100rpx;
-			border-bottom-left-radius: 1000rpx;
-			border-bottom-right-radius: 1000rpx;
-			top: 0rpx;
-			height: 300rpx;
+	.swiper-box {
+		height: calc(100% - 250px);
+		background-color: #FFF;
+		.list-scroll-content{
+			height: 100%;
+			padding-bottom: 150rpx;
 		}
+		.order-item {
+			padding: 20rpx 30rpx;
+			line-height: 1.5;
 
-	}
-
-	.conetntList {
-		padding: 30rpx;
-		background-color: #FFFFFF;
-		border-bottom-left-radius: 20rpx;
-		border-bottom-right-radius: 20rpx;
+			.title-box {
+				.title {
+					font-size: $font-lg;
+					color: $font-color-base;
+				}
 
-		.listItem {
-			font-size: 30rpx;
-			color: $font-color-dark;
-			align-items: flex-start;
-		}
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
+			}
 
-		.itemBottom {
-			font-size: 24rpx;
-			color: $font-color-disabled;
+			.money {
+				color: #fd5b23;
+				font-size: $font-lg;
+			}
 		}
 	}
 </style>

pages/water/list.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/water/myWaterList.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

uni_modules/uni-nav-bar/changelog.md

@@ -0,0 +1,51 @@
+## 1.3.11（2023-03-29）
+- 修复 自定义状态栏高度闪动BUG
+## 1.3.10（2023-03-29）
+- 修复 暗黑模式下边线颜色错误的bug
+## 1.3.9（2022-10-13）
+- 修复 条件编译错误的bug
+## 1.3.8（2022-10-12）
+- 修复 nvue 环境 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.7（2022-08-11）
+- 修复 nvue 环境下 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.6（2022-06-30）
+- 修复 组件示例中插槽用法无法显示内容的bug
+## 1.3.5（2022-05-24）
+- 新增 stat 属性 ，可开启统计title 上报 ，仅使用了title 属性且项目开启了uni统计生效
+## 1.3.4（2022-01-24）
+- 更新 组件示例
+## 1.3.3（2022-01-24）
+- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+## 1.3.2（2022-01-18）
+- 修复 在vue下，标题不垂直居中的bug
+## 1.3.1（2022-01-18）
+- 修复 height 属性类型错误
+## 1.3.0（2022-01-18）
+- 新增 height 属性,可修改组件高度
+- 新增 dark 属性可可开启暗黑模式
+- 优化 标题字数过多显示省略号
+- 优化 插槽，插入内容可完全覆盖
+## 1.2.1（2022-01-10）
+- 修复 color 属性不生效的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-30）
+- 修复 在nvue下fixed为true，宽度不能撑满的Bug
+## 1.0.9（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.8（2021-04-14）
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+
+## 1.0.7（2021-02-25）
+- 修复 easycom 下，找不到 uni-status-bar 的bug
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

@@ -0,0 +1,357 @@
+<template>
+	<view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
+		<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+			:style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }" >
+			<status-bar v-if="statusBar" />
+			<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
+				class="uni-navbar__header">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
+					:style="{width:leftIconWidth}">
+					<slot name="left">
+						<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+							<uni-icons :color="themeColor" :type="leftIcon" size="20" />
+						</view>
+						<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-navbar__header-container " @tap="onClickTitle">
+					<slot>
+						<view class="uni-navbar__header-container-inner" v-if="title.length>0">
+							<text class="uni-nav-bar-text uni-ellipsis-1"
+								:style="{color: themeColor }">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
+					:style="{width:rightIconWidth}">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<uni-icons :color="themeColor" :type="rightIcon" size="22" />
+						</view>
+						<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #ifndef APP-NVUE -->
+		<view class="uni-navbar__placeholder" v-if="fixed">
+			<status-bar v-if="statusBar" />
+			<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import statusBar from "./uni-status-bar.vue";
+	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
+
+	/**
+	 * 
+	 * 
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} backgroundColor 导航栏背景颜色
+	 * @property {Boolean} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+	 * @property {Boolean} stat 是否开启统计标题上报
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	export default {
+		name: "UniNavBar",
+		components: {
+			statusBar
+		},
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
+		props: {
+			dark: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			leftText: {
+				type: String,
+				default: ""
+			},
+			rightText: {
+				type: String,
+				default: ""
+			},
+			leftIcon: {
+				type: String,
+				default: ""
+			},
+			rightIcon: {
+				type: String,
+				default: ""
+			},
+			fixed: {
+				type: [Boolean, String],
+				default: false
+			},
+			color: {
+				type: String,
+				default: ""
+			},
+			backgroundColor: {
+				type: String,
+				default: ""
+			},
+			statusBar: {
+				type: [Boolean, String],
+				default: false
+			},
+			shadow: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			height: {
+				type: [Number, String],
+				default: 44
+			},
+			leftWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			rightWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		computed: {
+			themeBgColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.backgroundColor) {
+						return this.backgroundColor
+					} else {
+						return this.dark ? '#333' : '#FFF'
+					}
+				}
+				return this.backgroundColor || '#FFF'
+			},
+			themeColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.color) {
+						return this.color
+					} else {
+						return this.dark ? '#fff' : '#333'
+					}
+				}
+				return this.color || '#333'
+			},
+			navbarHeight() {
+				return getVal(this.height)
+			},
+			leftIconWidth() {
+				return getVal(this.leftWidth)
+			},
+			rightIconWidth() {
+				return getVal(this.rightWidth)
+			}
+		},
+		mounted() {
+			if (uni.report && this.stat && this.title !== '') {
+				uni.report('title', this.title)
+			}
+		},
+		methods: {
+			onClickLeft() {
+				this.$emit("clickLeft");
+			},
+			onClickRight() {
+				this.$emit("clickRight");
+			},
+			onClickTitle() {
+				this.$emit("clickTitle");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$nav-height: 44px;
+
+	.uni-nvue-fixed {
+		/* #ifdef APP-NVUE */
+		position: sticky;
+		/* #endif */
+	}
+	.uni-navbar {
+		// box-sizing: border-box;
+	}
+
+	.uni-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 14px;
+		/* #endif */
+	}
+
+	.uni-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.uni-navbar__content {
+		position: relative;
+		// background-color: #fff;
+		// box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.uni-navbar__content_view {
+		// box-sizing: border-box;
+	}
+
+	.uni-navbar-btn-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.uni-navbar__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0 10px;
+		flex-direction: row;
+		height: $nav-height;
+		font-size: 12px;
+	}
+
+	.uni-navbar__header-btns {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		display: flex;
+		/* #endif */
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: 120rpx;
+		// padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-navbar__header-btns-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.uni-navbar__header-btns-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 150rpx;
+		// padding-right: 30rpx;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-navbar__header-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.uni-navbar__header-container-inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		// box-sizing: border-box;
+	}
+
+
+	.uni-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.uni-navbar--fixed {
+		position: fixed;
+		z-index: 998;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+
+	}
+
+	.uni-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.uni-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eee;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.uni-dark {}
+</style>

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue

@@ -0,0 +1,24 @@
+<template>
+	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniStatusBar',
+		data() {
+			return {
+				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-status-bar {
+		// width: 750rpx;
+		height: 20px;
+		// height: var(--status-bar-height);
+	}
+</style>

uni_modules/uni-nav-bar/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "uni-nav-bar",
+  "displayName": "uni-nav-bar 自定义导航栏",
+  "version": "1.3.11",
+  "description": "自定义导航栏组件，主要用于头部导航。",
+  "keywords": [
+    "uni-ui",
+    "导航",
+    "导航栏",
+    "自定义导航栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-nav-bar/readme.md

@@ -0,0 +1,15 @@
+
+
+## NavBar 导航栏
+> **组件名：uni-nav-bar**
+> 代码块： `uNavBar`
+
+导航栏组件，主要用于头部导航。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+