导航栏修正

common/style/base-style.scss

@@ -0,0 +1,9 @@
+$brand-theme-color:#28B389;      //品牌主体红色
+
+$border-color:#e0e0e0;           //边框颜色
+$border-color-light:#efefef;     //边框亮色
+
+$text-font-color-1:#000;         //文字主色
+$text-font-color-2:#676767;      //副标题颜色
+$text-font-color-3:#a7a7a7;      //浅色
+$text-font-color-4:#e4e4e4;      //更浅

common/style/common-style.scss

@@ -0,0 +1,19 @@
+view,swiper,swiper-item{
+	box-sizing: border-box;
+}
+
+.pageBg{
+	background: 
+	linear-gradient(to bottom,transparent,#fff 400rpx),
+	linear-gradient(to right,#beecd8 20%,#F4E2D8);
+	min-height: 80vh;
+}
+
+.loadingLayout{
+	padding:30rpx 0;
+}
+
+.safe-area-inset-bottom{
+	height: env(safe-area-inset-bottom);
+}
+

components/custom-nav-bar/custom-nav-bar.vue

@@ -0,0 +1,85 @@
+<template>
+  <view class="layout">
+    <view class="navbar">
+      <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
+      <view
+        :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
+        class="titleBar"
+      >
+        <view class="title">{{ title }}</view>
+        <navigator class="search" url="/pages/search/search">
+          <uni-icons class="icon" color="#888" size="18" type="search"></uni-icons>
+          <text class="text">></text>
+        </navigator>
+      </view>
+    </view>
+
+    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  getStatusBarHeight,
+  getTitleBarHeight,
+  getNavBarHeight,
+  getLeftIconLeft,
+} from '@/utils/system.js'
+
+defineProps({
+  title: {
+    type: String,
+    default: '壁纸',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  .navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    background: #ffddca;
+
+    .statusBar {
+    }
+
+    .titleBar {
+      display: flex;
+      align-items: center;
+      padding: 0 30rpx;
+
+      .title {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #3d3d3d;
+      }
+
+      .search {
+        width: 220rpx;
+        height: 50rpx;
+        margin-left: 10rpx;
+        color: #3d3d3d;
+        font-size: 28rpx;
+        display: flex;
+        align-items: center;
+
+        .icon {
+          margin-left: 5rpx;
+        }
+
+        .text {
+          padding-left: 10rpx;
+        }
+      }
+    }
+  }
+
+  .fill {
+  }
+}
+</style>

components/home-header/home-header.vue

@@ -1,64 +0,0 @@
-<template>
-  <view class="header">
-    <view class="location-info" @click="onLocationClick">
-      <image class="location" :src="locationIcon"></image>
-      <text class="company-name">{{ companyName }}</text>
-      <text class="arrow">></text>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'HomeHeader',
-  props: {
-    companyName: {
-      type: String,
-      default: '福鼎创特物联科技有限公司',
-    },
-    locationIcon: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    onLocationClick() {
-      this.$emit('location-click')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.header {
-  padding: 106rpx 30rpx 20rpx 30rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #ffddca;
-  z-index: 999;
-
-  .location-info {
-    display: flex;
-    align-items: center;
-    gap: 10rpx;
-    flex: 1;
-
-    .location {
-      width: 27rpx;
-      height: 31rpx;
-    }
-
-    .company-name {
-      color: #3d3d3d;
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    .arrow {
-      font-size: 24rpx;
-      color: #666;
-    }
-  }
-}
-</style>

pages.json

@@ -64,5 +64,11 @@
     "requiredPrivateInfos": [
       "getLocation"
     ]
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue"
+    }
   }
 }

pages/index/index.vue

@@ -1,11 +1,8 @@
 <template>
   <view class="home-container">
     <!-- 头部信息 -->
-    <home-header
+
-      :company-name="companyName"
+    <custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>
-      :location-icon="commonEnum.LOCATION"
-      @location-click="onLocationClick"
-    />
 
     <!-- 公告栏 -->
     <announcement-bar
@@ -39,14 +36,12 @@
 
 <script>
 import commonEnum from '../../enum/commonEnum'
-import HomeHeader from '../../components/home-header/home-header.vue'
 import AnnouncementBar from '../../components/announcement-bar/announcement-bar.vue'
 import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
 import EquipmentList from '../../components/equipment-list/equipment-list.vue'
 
 export default {
   components: {
-    HomeHeader,
     AnnouncementBar,
     BannerSwiper,
     EquipmentList,
@@ -168,7 +163,6 @@ export default {
 <style lang="scss" scoped>
 .home-container {
   background: linear-gradient(to bottom, #ffddca 0px, #ffddca 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
-  min-height: 100vh;
   padding-bottom: 120rpx; /* 为底部导航留出空间 */
   max-width: 750rpx;
   margin: 0 auto;

uni.scss

@@ -12,6 +12,9 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 
+/* 引入项目自定义样式变量 */
+@import '@/common/style/base-style.scss';
+
 /* 颜色变量 */
 
 /* 行为相关颜色 */

utils/system.js

@@ -0,0 +1,27 @@
+const SYSTEM_INFO = uni.getSystemInfoSync()
+
+export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15
+
+export const getTitleBarHeight = () => {
+  if (uni.getMenuButtonBoundingClientRect) {
+    let { top, height } = uni.getMenuButtonBoundingClientRect()
+    return height + (top - getStatusBarHeight()) * 2
+  } else {
+    return 40
+  }
+}
+
+export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight()
+
+export const getLeftIconLeft = () => {
+  // #ifdef MP-TOUTIAO
+  let {
+    leftIcon: { left, width },
+  } = tt.getCustomButtonBoundingClientRect()
+  return left + parseInt(width)
+  // #endif
+
+  // #ifndef MP-TOUTIAO
+  return 0
+  // #endif
+}