nsgk_mobile/src/components/sunVillage/common/header.vue

<template>
  <div class="header_main">
    <div class="navigation_main">
      <div class="head_portrait"></div>
      <div class="dynamic_main">
        <div
          @click="skip('/sunVillage/index')"
          class="flex_navigation"
          :class="[currentNav == '1' ? 'current' : '']"
        >
          最新动态
        </div>
        <!--  -->
        <div
          @click="skip('/sunVillage/consulting')"
          class="flex_navigation"
          :class="[currentNav == '2' ? 'current' : '']"
        >
          民生直通车
        </div>
        <div
          @click="skip('/sunVillage/equity')"
          class="flex_navigation"
          :class="[currentNav == '3' ? 'current' : '']"
        >
          股权查询
        </div>
      </div>
    </div>
    <div class="headings_main" v-if="headings" @click="previousStep">
      <div class="return"></div>
      <div class="title">{{ headings }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["headings", "currentNav", "returnUrl"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    previousStep() {
      if (this.returnUrl) {
        this.$router.push(this.returnUrl);
      } else {
        this.$router.back();
      }
    },
    skip(url) {
      this.$router.push(url);
    },
  },
};
</script>


<style scoped lang="scss">
.header_main {
  padding: 32px 0 28px;
  border-bottom: 2px solid #e5e5e5;
  margin: 0 24px;
}
.navigation_main {
  display: flex;

  .head_portrait {
    width: 64px;
    height: 64px;
    background: url("../../../assets/images/sunVillage/head_portrait.jpg")
      no-repeat;
    background-size: 100% 100%;
    margin-right: 24px;
  }
  .dynamic_main {
    flex: 1;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    .flex_navigation {
      height: 64px;
      line-height: 64px;
      background: #ededed;
      font-size: 32px;
      border-radius: 10px;
      padding: 0 28px;
      &.current {
        background: #07c160;
        color: #fff;
      }
    }
  }
}
.headings_main {
  display: flex;
  align-items: center;
  padding-top: 28px;
  .return {
    width: 16px;
    height: 26px;
    background: url("../../../assets/images/sunVillage/headings_return.png")
      center center no-repeat;
    background-size: 100% 100%;
    margin-right: 16px;
    margin-left: 8px;
  }
  .title {
    font-size: 32px;
  }
}
</style>