feat: ✨ 自定义导航栏

src/pages/index/components/CustomNavbar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+
+<template>
+  <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
+    <!-- logo文字 -->
+    <view class="logo">
+      <image class="logo-image" src="@/static/images/logo.png"></image>
+      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
+    </view>
+    <!-- 搜索条 -->
+    <view class="search">
+      <text class="icon-search">搜索商品</text>
+      <text class="icon-scan"></text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+/* 自定义导航条 */
+.navbar {
+  background-image: url(@/static/images/navigator_bg.png);
+  background-size: cover;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-top: 20px;
+  .logo {
+    display: flex;
+    align-items: center;
+    height: 64rpx;
+    padding-left: 30rpx;
+    .logo-image {
+      width: 166rpx;
+      height: 39rpx;
+    }
+    .logo-text {
+      flex: 1;
+      line-height: 28rpx;
+      color: #fff;
+      margin: 2rpx 0 0 20rpx;
+      padding-left: 20rpx;
+      border-left: 1rpx solid #fff;
+      font-size: 26rpx;
+    }
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10rpx 0 26rpx;
+    height: 64rpx;
+    margin: 16rpx 20rpx;
+    color: #fff;
+    font-size: 28rpx;
+    border-radius: 32rpx;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .icon-search {
+    &::before {
+      margin-right: 10rpx;
+    }
+  }
+  .icon-scan {
+    font-size: 30rpx;
+    padding: 15rpx;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -1,41 +1,14 @@
 <template>
+  <CustomNavbar />
   <view class="content">
-    <image class="logo" src="/static/logo.png" />
+    {{ title }}
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
   </view>
 </template>
 
 <script setup lang="ts">
+import CustomNavbar from './components/CustomNavbar.vue'
 import { ref } from 'vue'
 const title = ref('Hello')
 </script>
 
-<style>
+<style></style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-</style>

src/pages/my/my.vue

@@ -1,4 +1,9 @@
 <template>
+  <!-- #ifdef APP-PLUS -->
+  <view class="status_bar">
+    <view class="top_view"></view>
+  </view>
+  <!-- #endif -->
   <view class="content">
     <view class="info"> 会员信息: {{ memberStore.profile }} </view>
     <button @tap="handleLogin">登录</button>
@@ -44,4 +49,18 @@ const handleTestHttp = async () => {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.status_bar {
+  height: var(--status-bar-height);
+  width: 100%;
+  background-color: #f8f8f8;
+}
+.top_view {
+  height: var(--status-bar-height);
+  width: 100%;
+  position: fixed;
+  background-color: #f8f8f8;
+  top: 0;
+  z-index: 999;
+}
+</style>