wip-Navbar

src/components/AppProvider/inedx.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup name="AppProvider"></script>
 <template>
-  <view class="_u_p-safe _u_bg-blue-500">
+  <view class="_u_bg-blue-500">
     <slot></slot>
   </view>
 </template>

src/components/Navbar/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup name="Navbar"></script>
+<template>
+  <view class="navbar-wrapper _u_bg-lime-400">
+    <!-- 顶部状态栏 S-->
+    <view class="status-bar"></view>
+    <!-- 顶部状态栏 E-->
+  </view>
+</template>
+<style lang="scss" scoped>
+  .navbar-wrapper {
+    .status-bar {
+      height: var(--status-bar-height);
+    }
+  }
+</style>

src/pages.json

@@ -3,7 +3,8 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "首页",
+        "navigationStyle":"custom"
       },
       "meta": {
         "ignoreAuth": true

src/pages/index/index.vue

@@ -6,6 +6,7 @@
   import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
   import { judgePlatform } from '@/utils/platform';
   import Iconify from '@/components/Iconify/index.vue';
+  import Navbar from '@/components/Navbar/index.vue';
 
   const title = ref('uni-app vue3 ts --Vite');
 
@@ -20,6 +21,7 @@
 </script>
 <template>
   <AppProvider>
+    <Navbar />
     <view class="content">
       <image class="logo" src="/static/svg/LOGO.svg" />
       <view class="text-area">