{"version":3,"file":"index.c5b19f35.mjs","sources":["../../../../components/index/header/index.vue"],"sourcesContent":["<template>\n  <div class=\"nav_wrapper w\" v-if=\"componentInfo\">\n    <NuxtLink class=\"nav_logo\" to=\"/\">\n      <img\n        v-if=\"componentInfo.websiteLogo\"\n        :src=\"componentInfo.websiteLogo\"\n        alt=\"\"\n      />\n    </NuxtLink>\n    <ul\n      v-if=\"componentInfo.contentList && componentInfo.contentList.length\"\n      class=\"nav_list_wrapper\"\n    >\n      <template v-for=\"(navItem, index) in componentInfo.contentList\">\n        <custom-link \n          :to=\"handleNavigate(navItem)\"\n          :targetType=\"navItem.targetType\"\n          :key=\"navItem.id\"\n          :targetOpenNewPage=\"navItem.targetOpenNewPage\"\n          v-if=\"(index < showNum || componentInfo.contentList.length === showNum) && navItem.status\"\n        >\n          <li class=\"nav_item\" :class=\"{ active: index === activeItem }\">\n            {{ navItem.navName }}\n          </li>\n        </custom-link>\n      </template>\n      <client-only>\n        <el-popover\n          v-if=\"componentInfo.contentList.length > showNum\"\n          placement=\"bottom\"\n          trigger=\"hover\"\n          @show=\"showheadMoreBg()\"\n          @hide=\"hideheadMoreBg()\"\n          popper-class=\"nav_popover\"\n          :width=\"116\"\n        >\n          <template #reference>\n            <li class=\"nav_item\" :class=\"{ active: activeItem >= showNum}\">\n              <i class=\"font20 iconfont icon-icon_More\"></i>\n            </li>\n          </template>\n          <ul class=\"nav_list_wrapper more_items\">\n            <template v-for=\"(navItem, index) in componentInfo.contentList\">\n              <custom-link \n                :to=\"handleNavigate(navItem)\"\n                :targetType=\"navItem.targetType\"\n                :key=\"navItem.id\"\n                :targetOpenNewPage=\"navItem.targetOpenNewPage\"\n                v-if=\"index >= showNum\"\n              >\n                <li\n                  class=\"nav_color_item\"\n                  :class=\"{ active_color: index === activeItem }\"\n                  :key=\"navItem.id\"\n                >\n                  {{ navItem.navName }}\n                </li>\n              </custom-link >\n            </template>\n          </ul>\n        </el-popover>\n      </client-only>\n    </ul>\n    <div class=\"handle_bar\">\n      <index-header-box :componentInfo=\"componentInfo\"></index-header-box>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { handleNavigate } from \"@/utils/utils\";\nimport { getHearder } from \"@/api/layouts\";\nimport { useNavStore } from \"~/stores/nav\";\nconst store = useNavStore();\n\nconst router = useRouter();\nconst route = useRoute();\nconst showNum = ref(5);\nconst activeItem = ref(-1);\nconst isMore = ref(false);\n\nconst { data: componentInfo } = await useAsyncData(\"header\", async () => {\n  let activeIndex = 0;\n  let data = await getHearder();\n  if (data && data.contentList && data.contentList.length) {\n    let is = false;\n    data.contentList.forEach((navItem, i) => {\n      navItem.path = handleNavigate(navItem);\n      if(navItem.path !== '/'){\n        if (route.fullPath.indexOf(navItem.path) != -1) {\n          activeIndex = i;\n          is = true;\n        }\n      } else {\n        if(route.path ===  navItem.path){\n          activeIndex = i;\n          is = true;\n        }\n      }\n    });\n    if(!is) {\n      activeIndex = -1\n    }\n  }\n  data.activeIndex = activeIndex;\n  return data;\n});\n\n\nstore.setNav(componentInfo.value)\n\nrouter.beforeResolve((to) => {\n  if (componentInfo && componentInfo.value) {\n    const contentList = componentInfo.value.contentList;\n    if (contentList && contentList.length) {\n      let is = false;\n      contentList.forEach((e, i) => {\n        if(e.path !== '/'){\n          if (to.fullPath.indexOf(e.path) != -1) {\n            activeItem.value = i;\n            is = true;\n          }\n        } else {\n          if(to.path ===  e.path){\n            activeItem.value = i\n            is = true;\n          }\n        }\n      });\n      if(!is) {\n        activeItem.value = -1\n      }\n    }\n  }\n});\nconst showheadMoreBg = () => {\n  isMore.value = true;\n};\nconst hideheadMoreBg = () => {\n  isMore.value = false;\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.nav_wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 66px;\n}\n.nav_logo {\n  width: 170px;\n  height: 36px;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n.nav_list_wrapper {\n  flex: 1;\n  display: flex;\n  padding-left: 60px;\n  color: #333333;\n  .nav_item {\n    display: flex;\n    align-items: center;\n    margin-right: 50px;\n    color: #333;\n    font-size: 18px;\n    line-height: 40px;\n    white-space: nowrap;\n    .nav_item_more {\n      min-width: 20px;\n    }\n    &:hover{\n      cursor: pointer;\n    position: relative;\n    color: var(--el-color-primary);\n    }\n  }\n  .nav_color_item{\n    height: 50px;\n    padding: 15px 26px;\n    font-size: 16px;\n    color: #333333;\n    white-space: nowrap;\n    &:hover{\n      cursor: pointer;\n      position: relative;\n      color: var(--el-color-primary);\n    }\n  }\n  .nav_item:hover::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n    width: 20px;\n    height: 3px;\n    border-radius: 1.5px;\n    background-color: var(--el-color-primary);\n  }\n  .active {\n    position: relative;\n    color: var(--el-color-primary);\n  }\n  .active::after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    bottom: 0;\n    transform: translateX(-50%);\n    width: 20px;\n    height: 3px;\n    border-radius: 1.5px;\n    background-color: var(--el-color-primary);\n  }\n}\n.more_items {\n  flex-direction: column;\n  padding-left: 0;\n  .nav_item {\n    justify-content: center;\n    margin: 11px 0px;\n    margin-right: 0;\n  }\n  .nav_item:first-child {\n    margin-top: 3px;\n  }\n  .nav_item:last-child {\n    margin-bottom: 3px;\n  }\n  .active_color {\n    color: #2256f6;\n  }\n}\n.handle_bar {\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  height: 36px;\n}\n</style>\n<style>\n.nav_popover{\n  padding: 0 !important;\n  min-width: none !important;\n}\n</style>\n"],"names":["store","useNavStore","router","useRouter","route","useRoute","showNum","ref","activeItem","isMore","data","componentInfo","__temp","__restore","_withAsyncContext","async","useAsyncData","activeIndex","getHearder","contentList","length","is","forEach","navItem","i","path","handleNavigate","fullPath","indexOf","setNav","value","beforeResolve","to","e"],"mappings":"qhBAyEA,MAAAA,EAAAC,IAEAC,EAAAC,IACAC,EAAAC,IACAC,EAAAC,EAAA,GACAC,EAAAD,GAAA,GACAE,EAAAF,GAAA,IAEAG,KAAAC,KAAsCC,EAAAC,GAAAC,GAAAC,SAAAC,EAAA,UAAAD,UACtC,IAAAE,EAAA,EACAP,QAAAQ,IACA,GAAAR,GAAAA,EAAAS,aAAAT,EAAAS,YAAAC,OAAA,CACA,IAAAC,GAAA,EACAX,EAAAS,YAAAG,SAAA,CAAAC,EAAAC,KACAD,EAAAE,KAAAC,EAAAH,GACA,MAAAA,EAAAE,MACA,GAAArB,EAAAuB,SAAAC,QAAAL,EAAAE,QACAR,EAAAO,EACAH,GAAA,GAGAjB,EAAAqB,OAAAF,EAAAE,OACAR,EAAAO,EACAH,GAAA,EAEA,IAEAA,IACAJ,GAAA,EAEA,CAEA,OADAP,EAAAO,YAAAA,EACAP,CAAA,GACA,kCAGAV,EAAA6B,OAAAlB,EAAAmB,OAEA5B,EAAA6B,eAAAC,IACA,GAAArB,GAAAA,EAAAmB,MAAA,CACA,MAAAX,EAAAR,EAAAmB,MAAAX,YACA,GAAAA,GAAAA,EAAAC,OAAA,CACA,IAAAC,GAAA,EACAF,EAAAG,SAAA,CAAAW,EAAAT,KACA,MAAAS,EAAAR,MACA,GAAAO,EAAAL,SAAAC,QAAAK,EAAAR,QACAjB,EAAAsB,MAAAN,EACAH,GAAA,GAGAW,EAAAP,OAAAQ,EAAAR,OACAjB,EAAAsB,MAAAN,EACAH,GAAA,EAEA,IAEAA,IACAb,EAAAsB,OAAA,EAEA,CACA,qxBAGArB,EAAAqB,OAAA,2BAGArB,EAAAqB,OAAA"}