MrShi
2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720
h5/components/Header.vue
对比新文件
@@ -0,0 +1,69 @@
<template>
  <view
    class="custombar"
    :style="{ height: statusbarHeight + navHeight + 'px' }"
  >
    <view class="status_bar" :style="{ height: statusbarHeight + 'px' }"></view>
    <view class="nav_bar" :style="{ height: navHeight + 'px' }">
      <view class="title">
        <text>{{ Title }}</text>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    Title: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState(['statusbarHeight', 'navHeight'])
  }
}
</script>
<style lang="less" scoped>
.custombar {
  position: sticky;
  top: 0rpx;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 45px;
  background-color: #ffffff;
  .nav_bar {
    position: relative;
    z-index: 999;
    .return {
      position: absolute;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
      top: 50%;
      left: 30rpx;
      z-index: 99;
    }
    .title {
      position: relative;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      font-size: 0;
      padding-left: 30rpx;
      box-sizing: border-box;
      text {
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #111111;
      }
    }
  }
}
</style>