<!--
 * @Description: 菜单导航
 * @Author: 空白格
 * @Date: 2022-08-22 09:22:47
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-22 14:42:47
 * @FilePath: \veterans_client_web\src\views\Home\components\MenuNavigation.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="home-menu" :class="{ 'home-menu-fixed': scrollTop > 473 }">
    <div class="home-menu-list">
      <div
        class="home-menu-list-item"
        :class="{ active: index === 0 }"
        v-for="(item, index) in menuList"
        :key="index"
        @click="jumpPage(item.path)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          name: "首页",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
        },
        {
          name: "政策咨询",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-1.svg"),
          path: "/policyadvice",
        },
        {
          name: "招聘就业",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-2.svg"),
          path: "/recruitmentemployment",
        },
        {
          name: "合作企业",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-3.svg"),
          path: "/cooperativeenterprise",
        },
        {
          name: "合作院校",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-4.svg"),
          path: "/cooperativecolleges",
        },
        {
          name: "技能培训",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-5.svg"),
          path: "/skilltraining",
        },
        {
          name: "适应性培训",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-6.svg"),
          path: "/adaptivetraining",
        },
        {
          name: "学历提升",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-7.svg"),
          path: "/educationpromote",
        },
        {
          name: "创业指引",
          icon: require("@/assets/images/home-menu-icon/home-menu-icon-8.svg"),
          path: "/workguide",
        },
      ],
    };
  },
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    /**
     * 跳转到指定页面
     * @date 2022-08-22
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path) {
      if (path) {
        this.$router.push(path);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  &-menu {
    background-color: #416050;
    width: 100%;
    line-height: 80px;
    &-list {
      width: 70%;
      min-width: 600px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      margin: 0 auto;
      &-item {
        color: #fff;
        font-size: 20px;
        padding: 0 30px;
        cursor: pointer;
        &:hover {
          background-color: #478364;
        }
      }
      .active {
        background-color: #478364;
      }
    }
    &-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 111;
    }
  }
}
</style>
