这里其实很复杂.我们在前面已经说了这个组件 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
