veterans_teacher/src/components/NavBar.vue

<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="title || '标题'"
      :border="false"
      left-arrow
      @click-left="onClickLeft"
      :style="[customStyle]"
    />
  </div>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    title: String,
    backUrl: String,
    customStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: this.backUrl });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav-bar .van-nav-bar {
  background: $color-theme;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon {
    color: #fff;
  }
}
</style>