<template>
  <div class="header_main">
    <div class="navigation_main">
      <div
        class="head_portrait"
        @click="PersonalSkip('/sunVillage/user/index')"
      ></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 {
  components: {},
  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);
    },
    PersonalSkip(url) {
      window.localStorage.setItem(
        "setupEntrance",
        window.location.pathname + window.location.search
      );
      this.$router.push(url);
    },
  },
};
</script>


<style scoped lang="scss">
.header_main {
  padding: 32px 24px 28px;
  border-bottom: 2px solid #e5e5e5;
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  background: #fff;
  z-index: 20;
}
.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;
    align-items: center;
    .flex_navigation {
      height: 64px;
      line-height: 64px;
      background: #ededed;
      font-size: 32px;
      border-radius: 10px;
      flex: 1;
      text-align: center;
      // display: flex;
      // align-items: center;
      margin-right: 20px;
      &.current {
        background: #07c160;
        color: #fff;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.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>