{"version":3,"file":"index.db61ad09.js","sources":["../../../../pages/resource/global/index.vue"],"sourcesContent":["<template>\n  <div>\n    <FilledBanner\n      :title=\"$t('全球雇佣指南')\"\n      :subtitle=\"$t('让你轻松实现150+国家的远程雇佣')\"\n      bg-image=\"https://video.reta-inc.com/image/default/5CEE755C3DA2466DB1F1BE6969A3BF25-6-2.jpg\"\n    />\n    <div class=\"main\">\n      <div class=\"tabs\">\n        <div\n          class=\"tab\"\n          v-for=\"area in data?.areaList\"\n          :key=\"area.id\"\n          :class=\"{ active: area.attributes.enName === activeTab }\"\n          @click=\"onTabClick(area.attributes.enName)\"\n        >\n          {{ $t(area.attributes.cnName) }}\n        </div>\n      </div>\n      <div\n        class=\"country-list\"\n        v-for=\"area in data?.areaList\"\n        :key=\"area.attributes.enName\"\n        v-show=\"area.attributes.enName === activeTab\"\n      >\n        <nuxt-link\n          class=\"country\"\n          v-for=\"country in data?.list?.filter(\n            item => item.attributes.area.data.attributes.enName === area.attributes.enName\n          )\"\n          :key=\"country.id\"\n          :to=\"country.url\"\n        >\n          <div class=\"hover_box\">\n            <button class=\"go_detail\">查看详情</button>\n          </div>\n          <a-image\n            class=\"country__cover\"\n            :src=\"`https://jkqj-assets-beijing.oss-cn-beijing.aliyuncs.com/global/covers/${country?.attributes?.country.data.attributes.shortCode}.jpg`\"\n            fit=\"cover\"\n            :preview=\"false\"\n          />\n          <div class=\"country__content\">\n            {{\n              locale === 'zh-CN'\n                ? country.attributes.country.data.attributes.cnName\n                : country.attributes.country.data.attributes.enName\n            }}\n          </div>\n        </nuxt-link>\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { IEntity, IList } from '@/@types/cms';\nimport { IArea, IGlobalRecruitment } from '@/@types/entities';\nimport { useI18n } from 'vue-i18n';\nconst { locale } = useI18n();\n\nuseSeoHead();\n\nconst { data, refresh } = await useAsyncData(async () => {\n  const { data } = await useFetch<IList<IGlobalRecruitment>>(`/api/global/list`);\n  const list = data.value?.data.map(item => ({\n    ...item,\n    url: `/resource/global/${item.attributes.country.data.attributes.name}`,\n  }));\n  const areaList = list?.reduce((res, item) => {\n    const itemArea = item.attributes.area.data;\n    if (res.findIndex(area => area.id === itemArea.id) < 0) {\n      res.push(itemArea);\n    }\n    return res;\n  }, [] as IEntity<IArea>[]);\n  return {\n    list,\n    areaList,\n  };\n});\n\nconst activeTab = ref(data.value?.areaList?.[0].attributes.enName);\nasync function onTabClick(name: string) {\n  activeTab.value = name;\n}\n</script>\n<style lang=\"less\" scoped>\n@media screen and (min-width: 800px) {\n  .main {\n    margin: -40px auto 60px;\n    width: 1280px;\n    padding: 0 32px;\n\n    .arco-pagination {\n      justify-content: center;\n      margin-top: 40px;\n    }\n  }\n\n  .tabs {\n    height: 120px;\n    background: #ffffff;\n    box-shadow: 0px 4px 32px rgba(135, 172, 255, 0.2);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .tab {\n      height: 60px;\n      padding: 16px 40px;\n      box-sizing: border-box;\n      font-size: 20px;\n      line-height: 28px;\n      color: #4e5969;\n      cursor: pointer;\n\n      &:hover {\n        color: #386aff;\n      }\n\n      &.active {\n        color: #386aff;\n        background: rgba(22, 93, 255, 0.1);\n        border-radius: 12px;\n      }\n\n      & + .tab {\n        margin-left: 40px;\n      }\n    }\n  }\n\n  .country-list {\n    margin-top: 60px;\n    width: 100%;\n    display: grid;\n    grid-template-columns: 400px 400px 400px;\n    grid-template-rows: 300px;\n    grid-row-gap: 40px;\n    grid-column-gap: 40px;\n\n    .country {\n      background: #ffffff;\n      box-shadow: 0px 4px 16px rgba(135, 172, 255, 0.2);\n      border-radius: 12px;\n      height: 300px;\n      box-sizing: border-box;\n      overflow: hidden;\n      text-decoration: none;\n      position: relative;\n\n      &__cover {\n        width: 400px;\n        height: 240px;\n        :deep(.arco-image-img) {\n          width: 100%;\n          height: 100%;\n        }\n      }\n\n      &__content {\n        font-size: 20px;\n        line-height: 26px;\n        color: #1d2129;\n        height: 60px;\n        text-align: center;\n        line-height: 60px;\n      }\n\n      &:hover {\n        .country__content {\n          color: #165dff;\n        }\n      }\n\n      .hover_box {\n        display: none;\n      }\n\n      &:hover .hover_box {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: calc(100% - 60px);\n        border-radius: 12px;\n        background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        .go_detail {\n          border: 1px solid #ffffff;\n          border-radius: 24px;\n          font-weight: 400;\n          font-size: 20px;\n          line-height: 26px;\n          text-align: center;\n          letter-spacing: 0.01em;\n          color: #ffffff;\n          background-color: transparent;\n          padding: 12px 30px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>\n<style lang=\"less\" scoped>\n@media screen and (max-width: 800px) {\n  .main {\n    .arco-pagination {\n      justify-content: center;\n      margin: 40px auto;\n    }\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tabs {\n    max-width: 100%;\n    overflow-x: auto;\n    position: sticky;\n    top: 108px;\n    z-index: 10;\n    padding: 8px 16px;\n    background: #ffffff;\n    box-shadow: 0px 4px 4px rgba(135, 172, 255, 0.1);\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    .tab {\n      padding: 6px 12px;\n      box-sizing: border-box;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 28px;\n      letter-spacing: 0.02em;\n      color: #4e5969;\n      white-space: nowrap;\n\n      &.active {\n        color: #386aff;\n        background: rgba(22, 93, 255, 0.1);\n        border-radius: 6px;\n      }\n    }\n  }\n\n  .country-list {\n    // background: #dfdfdf;\n    padding: 20px 16px 0;\n    display: grid;\n    grid-template-columns: repeat(2, 48%);\n    justify-content: space-between;\n    row-gap: 16px;\n\n    .country {\n      background: #ffffff;\n      box-shadow: 0px 4px 4px rgba(135, 172, 255, 0.1);\n      border-radius: 4px;\n      // height: 300px;\n      box-sizing: border-box;\n      overflow: hidden;\n      text-decoration: none;\n      position: relative;\n\n      &__cover {\n        width: 100%;\n        height: 98px;\n        :deep(.arco-image-img) {\n          width: 100%;\n          height: 100%;\n        }\n      }\n\n      &__content {\n        font-size: 14px;\n        line-height: 14px;\n        text-align: center;\n        letter-spacing: 0.01em;\n        color: #1d2129;\n        padding: 11px 0;\n      }\n\n      // &:hover {\n      //   .country__content {\n      //     color: #165dff;\n      //   }\n      // }\n\n      .hover_box {\n        display: none;\n      }\n\n      // &:hover .hover_box {\n      //   display: block;\n      //   position: absolute;\n      //   top: 0;\n      //   left: 0;\n      //   width: 100%;\n      //   height: calc(100% - 60px);\n      //   border-radius: 12px;\n      //   background: linear-gradient(\n      //     0deg,\n      //     rgba(0, 0, 0, 0.4),\n      //     rgba(0, 0, 0, 0.4)\n      //   );\n      //   display: flex;\n      //   justify-content: center;\n      //   align-items: center;\n\n      //   .go_detail {\n      //     border: 1px solid #ffffff;\n      //     border-radius: 24px;\n      //     font-weight: 400;\n      //     font-size: 20px;\n      //     line-height: 26px;\n      //     text-align: center;\n      //     letter-spacing: 0.01em;\n      //     color: #ffffff;\n      //     background-color: transparent;\n      //     padding: 12px 30px;\n      //     cursor: pointer;\n      //   }\n      // }\n    }\n  }\n}\n</style>\n"],"names":["locale","useI18n","useSeoHead","data","refresh","__temp","__restore","_withAsyncContext","useAsyncData","data2","useFetch","list","_a","item","areaList","res","itemArea","area","activeTab","ref","_b","onTabClick","name"],"mappings":"mrCA0DA,KAAA,CAAA,OAAAA,GAAAC,IAEAC,IAEA,KAAA,CAAA,KAAAC,EAAA,QAAAC,EAAA,GAAA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAAC,EAAA,SAAA,OACE,KAAA,CAAA,KAAAC,GAAA,MAAAC,EAAA,mBAAA,aAAA,EACAC,GAAAC,EAAAH,EAAA,QAAA,YAAAG,EAAA,KAAA,IAAAC,IAAA,CAA2C,GAAAA,EACtC,IAAA,oBAAAA,EAAA,WAAA,QAAA,KAAA,WAAA,MAC8D,IAEnEC,EAAAH,GAAA,YAAAA,EAAA,OAAA,CAAAI,EAAAF,IAAA,CACE,MAAAG,EAAAH,EAAA,WAAA,KAAA,KACA,OAAAE,EAAA,UAAAE,GAAAA,EAAA,KAAAD,EAAA,EAAA,EAAA,GACED,EAAA,KAAAC,CAAA,EAEFD,CAAO,EAAA,CAAA,GAET,MAAA,CAAO,KAAAJ,EACL,SAAAG,CACA,CACF,EAAA,aAAA,CAAA,EAAAT,EAAA,MAAAA,EAAAC,EAAA,EAAAD,GAGFa,EAAAC,GAAAC,GAAAR,EAAAT,EAAA,QAAA,YAAAS,EAAA,WAAA,YAAAQ,EAAA,GAAA,WAAA,MAAA,EACA,eAAAC,EAAAC,EAAA,CACEJ,EAAA,MAAAI,CAAkB"}