From dd0bcba3122954042a3e45ecc5f5054fe74152a0 Mon Sep 17 00:00:00 2001
From: kylin L <452061493@qq.com>
Date: Mon, 25 Mar 2024 15:36:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=92=8C=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=AE=A1=E7=AE=97=E8=83=B6=E5=9B=8A=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=9D=A5=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/navigation/navigation.vue | 77 ++++++++++++++++++++++++++++
 subpkg/list/list.vue                 | 15 +++---
 2 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 components/navigation/navigation.vue

diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
new file mode 100644
index 0000000..0640c9e
--- /dev/null
+++ b/components/navigation/navigation.vue
@@ -0,0 +1,77 @@
+<template>
+	<view class="header" :style="{top: height}">
+		<label class="back" @click="back()"></label>
+		<view class="title">{{title}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"navigation",
+		data() {
+			return {
+				height: 0,
+			};
+		},
+		props: {
+			title: {
+				type: String,
+				default: ''
+			}
+		},
+		created() {
+			this.getWXStatusHeight();
+		},
+		methods: {
+			getWXStatusHeight() {
+				//获取状态栏高度
+				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+				//获取小程序胶囊信息
+				const menu = uni.getMenuButtonBoundingClientRect()
+				//导航栏高度 == （胶囊距顶部高度-状态栏高度） *2 +胶囊高度
+				const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height
+				//头部整体高度 ==状态栏高度 + 导航栏高度
+				const headerHeight = statusBarHeight + navBarHeightWechat
+				//计算导航内容距离顶部高度= 状态栏高度/2
+				const topHeight = statusBarHeight / 2
+				this.height = headerHeight - (topHeight/2) +"rpx"
+		   },
+			back(){
+				uni.navigateBack({
+					delta:1,//返回层数，2则上上页
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.header {
+	position: relative;
+	z-index: 99;
+	top: 90rpx;
+	width: 100%;
+	height: 90rpx;
+	background-color: #bac6fc;
+}
+
+label.back {
+	display: inline-block;
+	position: relative;
+	top: 16rpx;
+	left: 4%;
+	padding-left: 1.25rem;
+	width: 60rpx;
+	height: 60rpx;
+	background: url(/static/images/icon_arb.png) no-repeat left center;
+	background-size: auto 60%;
+}
+
+.title {
+	margin: -54rpx 0 50rpx;
+	color: #333;
+	font-size: 36rpx;
+	font-weight: bold;
+	text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/subpkg/list/list.vue b/subpkg/list/list.vue
index 8115bee..4bc29a6 100644
--- a/subpkg/list/list.vue
+++ b/subpkg/list/list.vue
@@ -1,9 +1,11 @@
 <template>
 	<view class="wrap">
 		<view class="stabar"></view>
-		<view class="secbar"> <label class="back" @click="back()"></label>
-		<view class="title">场景演练</view>
-		</view>
+		<!-- <view class="secbar" :style="{top:getWXStatusHeight()}"> 
+			<label class="back" @click="back()"></label>
+			<view class="title">场景演练</view>
+		</view> -->
+		<navigation title="场景演练"></navigation>
 		<view class="mainwrap3">
 		<!-- 轮播图 -->
 		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
@@ -40,7 +42,9 @@
 </template>
 
 <script>
+	import navigation from "@/components/navigation/navigation.vue";
 	export default {
+		components: {navigation},
 		data() {
 			return {
 				queryObj:{
@@ -55,16 +59,15 @@
 				//轮播图数据列表
 				swiperList: [],
 				//场景数据列表
-				sceneList: []
+				sceneList: [],
 			};
 		},
 		onLoad(options) {
 			this.queryObj.isOpen = options.isOpen
 			this.getSwiperList();
-			this.getSceneList()
+			this.getSceneList();
 		},
 		methods: {
-			
 			async getSwiperList() {
 				const {
 					data: res