nsgk_mobile/src/components/common/nav_bar.vue

<template>
  <div>
    <div
      :class='[background == "1"?"nav-wrap":"nav-wrap1",positionType=="fixed"?"nav-position-fixed":"nav-position-relative"]'
      :style='{"height": 50+"px","overflow": "hidden","background":backgroundColor}'
    >
      <!-- // 导航栏 中间的标题 -->
      <div class='nav-title' :style='{"line-height": 50+"px"}'>{{title}}</div>
      <div style='display: flex; justify-content: center;flex-direction: column;height: 50px;padding-left: 2%;'>
        <!-- //  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 -->
        <van-icon name="arrow-left" color="#333333" size="25" @click="onClickLeft()" />
      </div>
    </div>
    <div :style='{"height": 50+"px"}' v-if="positionType == 'fixed'"></div>
  </div>
</template>

<script>
  export default {
    name: "nav_bar",
    props: [
      "background",
      "backgroundColor",
      "positionType",
      "showCapsule",
      "title",
    ],
    data() {
      return {
        height: '',
        navHeight:'',
      }
    },
    created() {

    },
    methods: {

    },
  }
</script>

<style scoped lang="scss">
  .nav-wrap {
    width: 100%;
    top: 0;
    background: transparent;
    color: #000;
    z-index: 9999999;
  }

  .nav-wrap1 {
    width: 100%;
    top: 0;
    background: linear-gradient(to bottom right,#91E1CA,#E0F4E4);
    color: #333333;
    z-index: 9999999;
  }

  /* 标题要居中 */
  .nav-title {
    position: absolute;
    text-align: center;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 16Px;
  }

  .nav-capsule {
    display: flex;
    align-items: center;
    margin-left: 5px;
    width: 70px;
    justify-content: space-between;
    height: 100%;
  }

  .navbar-v-line {
    width: 1px;
    height: 16px;
    background-color: #e5e5e5;
  }

  /*.back-pre,*/
  /*.back-home {*/
  /*  width: 18Px;*/
  /*  height: 25Px;*/
  /*  margin-top: 2px;*/
  /*  padding: 5px;*/
  /*  border-radius: 50%;*/
  /*}*/

  .nav-capsule .back-home {
    width: 30px;
    height: 30px;
    margin-top: 1.5px;
  }

  .nav-position-fixed{
    position: fixed;
  }
  .nav-position-relative{
    position: relative;
  }
</style>