這里其實很復雜.我們在前面已經說了這個組件 shop-headbar ，這里來繼續說。

該組件實現一個高度的顯示以及圖片展示，包含logo 名稱  后臺管理以及避讓 導航欄 和 手機的狀態欄。

1 整體

代碼如下：

<template><view class="headr" :style="{ height: totalHeight + 'px'}"><!-- style  這里加樣式，是因為css中的style 應用不了 計算的變量結果 --><!-- 自定義頭部 --><view class="bg"><!-- 這里是要全屏鋪滿的  應該是高度范圍內鋪滿 --><!--注意 組件中，對image 設置樣式  需要給 image 一個class，在非組件中可以直接用image設置樣式 --><image class="bgImg" src="/static/白菜.png" mode="aspectFill"></image></view><view class="container"><!-- 狀態欄 --><!-- <view class="statusBar"><!-- 這是一種獲取方法還有api的方法 --><!-- https://uniapp.dcloud.net.cn/tutorial/syntax-css.html  找到 statusbar 的使用方法 --><!-- </view> --><view class="statusBar" :style="{ height: StatusBarHeight + 'px'}"></view><!-- style  這里加樣式，是因為css中的style 應用不了 計算的變量結果 --><!-- 服務藍 耳機+后臺 --><view class="titleBar" :style="{ height: TitleBarHeight + 'px'}" v-if="!foldState"><!-- style  這里加樣式，是因為css中的style 應用不了 計算的變量結果 --><!-- 農貿集市服務內容 --><!-- //true將客服和后臺 不顯示  --><view class="kefu"><u-icon name="server-fill" size="22" color="#fff"></u-icon></view><navigator url="/pages/land/land" class="manger"><u-icon name="bag-fill" size="22" color="#fff"></u-ico