twong-h5/src/components/NavBar.vue

<template>
  <div>
    <div class="bg-color-red" style="height: 0; position:fixed; top: 0; width: 100%; z-index: 30;
        height: constant(safe-area-inset-top); height: env(safe-area-inset-top);"></div>
    <div
      class="bg-color-red"
      style="height: 0.7rem; position:fixed; z-index:999; top:0; width: 100%;
        top: constant(safe-area-inset-top); top: env(safe-area-inset-top);"
    >
      <div
        class=""
        style="width: 100%; display: flex; line-height: 0.7rem; font-size: 0.35rem;"
      >
        <div
          class="iconfont icon-xiangzuo"
          style="color: #FFFFFF; font-size: 0.35rem; padding-left: 10px;"
          @click="returns"
        ></div>
        <div
          style="color: #FFFFFF; font-weight: 400; flex: auto; text-align: center; padding-right: 30px;"
        >
          {{ titles }}
        </div>
      </div>
    </div>
    <div style="height: 0.7rem"></div>
    <div style="padding-top: 0;
        padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);"></div>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    title: String,
    path: String
  },
  data: function() {
    return {
      titles: ""
    };
  },
  created: function() {
    if (this.title === undefined) {
      this.titles = this.$route.meta.title;
    } else {
      this.titles = this.title;
    }
  },

  methods: {
    returns: function() {
      if (this.path === undefined) {
        this.$router.back();
      } else {
        this.$router.push({ path: this.path });
      }
    }
  }
};
</script>

<style></style>