{"version":3,"file":"index.2bac5959.js","sources":["../../../../pages/help-center/index.vue"],"sourcesContent":["<template>\n  <div class=\"help-center\">\n    <Search @search=\"onSearch\" />\n    <div class=\"faq\">\n      <div class=\"faq_title\">常见问题</div>\n      <div v-if=\"helpCenterData\" class=\"faq_list\">\n        <div class=\"faq-category\" v-for=\"(category, index) in helpCenterData.faqCategories\" :key=\"index\">\n          <div class=\"faq-category__title\">{{ category.title }}</div>\n          <div class=\"faq-category__content\">\n            <ul :style=\"{\n              height: category.showMoreStatus ? '180px' : `${category.faqs.length * 36}px`,\n              overflowY: category.showMoreStatus ? 'hidden' : 'auto'\n            }\">\n              <li v-for=\"(faq, faqIndex) in category.faqs\" :key=\"faqIndex\">\n                <nuxt-link :to=\"`/help-center/faq/${faq.id}`\">{{ faq.attributes.title }}</nuxt-link>\n              </li>\n            </ul>\n            <div v-if=\"category.faqs.length > 5\" class=\"show-more\"\n              @click=\"category.showMoreStatus = !category.showMoreStatus\">\n              {{ category.showMoreStatus ? '查看更多' : '收起更多' }}\n              <icon-down v-if=\"category.showMoreStatus\" style=\"color: #386AFF; font-size: 16px;\" />\n              <icon-up v-else />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"quick-faq\">\n      <div class=\"quick-faq__title\">快问快答</div>\n      <a-collapse :default-active-key=\"['0']\" expand-icon-position=\"right\">\n        <template #expand-icon=\"{ active }\">\n          <icon-up v-if=\"active\" style=\"color: #86909C;\" />\n          <icon-down v-else style=\"color: #86909C;\" />\n        </template>\n        <a-collapse-item v-for=\"(item, index) in helpCenter.quickFaqContent\" :key=\"`${index}`\">\n          <template #header>\n            <div class=\"quick-faq__header\">\n              <div class=\"quick-faq__header-icon\">问</div>{{ item.question }}\n            </div>\n          </template>\n\n          <div class=\"answer\">{{ item.answer }}</div>\n        </a-collapse-item>\n      </a-collapse>\n    </div>\n    <div class=\"free-question\">\n      <div class=\"question-title\">“ 我们有没有漏掉什么？还有问题吗？”</div>\n      <div class=\"question-desc\">DG.hire海外雇佣资深专家，免费提供1v1咨询,专属学习资料，最新政策、资讯限时免费发送</div>\n      <a-button class=\"free-question-btn\" type=\"primary\" @click=\"useLeadsInfo('帮助页面-免费提问', 'contactUs')\">\n        免费提问\n      </a-button>\n    </div>\n    <div class=\"practical-tool\">\n      <div class=\"practical-tool-title\">实用工具</div>\n      <div class=\"practical-tool-desc\">从本地薪酬洞察到每个国家的雇主成本，我们广泛收集的全球招聘资源可以回答您所有的国际招聘问题。</div>\n      <div class=\"tool-list\">\n        <div class=\"tool-item\" v-for=\"tool in helpCenter.toolList\" :key=\"tool.title\"\n          :style=\"{ backgroundImage: `url(${tool.bgUrl})` }\">\n          <div class=\"tool-title\">{{ tool.title }}</div>\n          <div class=\"tool-desc\">{{ tool.desc }}</div>\n          <a-button class=\"tool-btn\" type=\"outline\" @click=\"router.push(tool.path)\">\n            了解更多\n            <icon-right style=\"font-size: 30px; color: #2656FF;\" />\n          </a-button>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"helpCenterData?.glossaryList\" class=\"glossary\">\n      <div class=\"title\">海外雇佣术语表</div>\n      <div class=\"glossary-list\">\n        <div class=\"glossary-item\" v-for=\"item in helpCenterData.glossaryList\" :key=\"item.id\">\n          <nuxt-link :to=\"`/help-center/faq/${item.id}`\">{{ item.attributes.title }}</nuxt-link>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { IListQuery, IList, IEntity } from '@/@types/cms';\nimport { IFaq } from '@/@types/entities';\nimport Search from './components/search.vue';\nimport helpCenter from '~~/assets/contents/help-center.json';\nimport useLeadsInfo from '@/composables/use-leads-info';\nimport { IconRight } from '@arco-design/web-vue/es/icon';\nuseSeoHead();\n\nconst router = useRouter();\n\ntype Category = { name: string; title: string; faqs: IEntity<IFaq>[], showMoreStatus?: boolean };\nconst { data: helpCenterData } = await useAsyncData(async () => {\n  const [{ data: question }, { data: glossary }] = await Promise.all([\n    useFetch('/api/faq/list?type=question'),\n    useFetch('/api/faq/list?type=glossary')\n  ]);\n  const faqCategories = question.value?.data.reduce((result: Category[], item: IEntity<IFaq>) => {\n    item.attributes.knowledges.data?.forEach(knowledge => {\n      const { name, title } = knowledge.attributes;\n      let category = result.find(res => res.name === name);\n      if (!category) {\n        category = {\n          name,\n          title,\n          faqs: [],\n          showMoreStatus: true\n        };\n        result.push(category);\n      }\n      category.faqs.push(item);\n    });\n    return result;\n  }, [] as Category[]);\n  const glossaryList = glossary.value.data.map((g: IEntity<IFaq>) => g);\n  return {\n    faqCategories,\n    glossaryList\n  };\n});\n\nasync function onSearch(keyword: string) {\n  if (!keyword) {\n    return;\n  }\n  await navigateTo({\n    path: '/help-center/search',\n    query: {\n      keyword,\n    },\n  });\n}\n\n</script>\n<style lang=\"less\" scoped>\n.faq {\n  background: linear-gradient(180deg, #F2F5FF 0%, #F2F5FF 0.01%, rgba(249, 250, 255, 0.5) 100%);\n  padding: 60px 0 80px;\n\n  &_title {\n    font-weight: 500;\n    font-size: 32px;\n    line-height: 48px;\n    color: #000000;\n    text-align: center;\n  }\n\n  &_list {\n    margin-top: 40px;\n    display: flex;\n    gap: 28px;\n    justify-content: center;\n    height: 368px;\n\n    .faq-category {\n      width: 408px;\n      height: 368px;\n      background: #FFFFFF;\n      border-radius: 16px;\n      position: relative;\n      z-index: 9;\n\n      &__title {\n        height: 88px;\n        font-weight: 500;\n        font-size: 28px;\n        line-height: 39px;\n        text-align: center;\n        color: #1D2129;\n        box-sizing: border-box;\n        padding: 24px 0;\n        border-radius: 16px 16px 0 0;\n      }\n\n      &:nth-child(1) {\n        .faq-category__title {\n          background: url('https://video.reta-inc.com/image/default/6A71B50EF2294011816755525DA73B77-6-2.jpg') no-repeat center center/cover;\n        }\n      }\n\n      &:nth-child(2) {\n        .faq-category__title {\n          background: url('https://video.reta-inc.com/image/default/75C44A268E954F958E79BE9CAFE599BB-6-2.jpg') no-repeat center center/cover;\n        }\n      }\n\n      &:nth-child(3) {\n        .faq-category__title {\n          background: url('https://video.reta-inc.com/image/default/4DCD4693F2F541E884604D4FD8E20E3A-6-2.jpg') no-repeat center center/cover;\n        }\n      }\n\n      &__content {\n        font-size: 16px;\n        line-height: 36px;\n        letter-spacing: 0.02em;\n        padding: 32px 24px 68px;\n        background: #FFFFFF;\n        position: relative;\n        border-radius: 0 0 16px 16px;\n        box-shadow: 0px 4px 24px rgba(114, 148, 226, 0.2);\n\n        ul {\n          max-height: 500px;\n          transition: all .5s;\n        }\n\n        ul,\n        li {\n          margin: 0;\n          padding: 0;\n          list-style-position: inside;\n        }\n\n        a {\n          color: #4E5969;\n          text-decoration: none;\n\n          &:hover {\n            color: #386AFF;\n          }\n        }\n\n        .show-more {\n          font-weight: 400;\n          font-size: 14px;\n          line-height: 20px;\n          letter-spacing: 0.01em;\n          color: #386AFF;\n          text-align: center;\n          position: absolute;\n          left: 0;\n          right: 0;\n          bottom: 24px;\n          margin: auto;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n\n.quick-faq {\n  width: 1280px;\n  margin: 0 auto;\n\n  &__title {\n    font-weight: 500;\n    font-size: 32px;\n    line-height: 48px;\n    color: 000;\n    text-align: center;\n  }\n\n  .answer {\n    white-space: pre-wrap;\n  }\n\n  :deep(.arco-collapse) {\n    margin-top: 36px;\n    border: 0;\n    overflow: visible;\n\n    .arco-collapse-item {\n      background: #FFFFFF;\n      box-shadow: 0px 2px 24px rgba(114, 148, 226, 0.14);\n      border: 0;\n      border-radius: 12px;\n\n      .arco-collapse-item-header {\n        border: 0;\n        border-radius: 12px;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 24px;\n        padding: 20px 32px;\n\n        .arco-collapse-item-icon-right {\n          right: 32px;\n        }\n      }\n\n      .arco-collapse-item-content {\n        background: none;\n        border-top: 1px solid #E5E7EB;\n        font-size: 16px;\n        line-height: 28px;\n        color: #4E5969;\n        padding: 0 32px;\n\n        .arco-collapse-item-content-box {\n          padding: 20px 0 44px;\n        }\n      }\n\n      &-active {\n        .arco-collapse-item-header {\n          border-bottom-right-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n      }\n\n      & + .arco-collapse-item {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &__header {\n    display: flex;\n    align-items: center;\n\n    .quick-faq__header-icon {\n      width: 22px;\n      height: 22px;\n      background: linear-gradient(180deg, #FFC47E 0%, #FE9D2B 100%);\n      box-shadow: 0px 2px 4px rgba(190, 103, 0, 0.16);\n      border-radius: 4px;\n      margin-right: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 500;\n      font-size: 12px;\n      line-height: 14px;\n      color: #FFFFFF;\n    }\n  }\n}\n\n.free-question {\n  width: 100%;\n  height: 180px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 60px;\n  background: linear-gradient(0deg, rgba(95, 38, 255, 0.12), rgba(95, 38, 255, 0.12)), url('https://video.reta-inc.com/image/default/F81AC01FF7444745A97F6F8E2BB410FD-6-2.jpg') no-repeat center center/1920px 180px;\n\n  .question-title {\n    font-weight: 700;\n    font-size: 28px;\n    line-height: 48px;\n    color: #FFFFFF;\n    margin-top: 24px;\n  }\n\n  .question-desc {\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 22px;\n    color: #FFFFFF;\n    margin-top: 4px;\n  }\n\n  .free-question-btn {\n    width: 144px;\n    height: 48px;\n    margin-top: 16px;\n    background: #3C5BFF;\n    box-shadow: 0px 7px 8px rgba(49, 106, 255, 0.2);\n    border-radius: 6px;\n    font-weight: 600;\n    font-size: 20px;\n    line-height: 24px;\n    color: #FFFFFF;\n  }\n}\n\n.practical-tool {\n  width: 100%;\n  padding: 60px 0 80px;\n  box-sizing: border-box;\n  background: #F6F8FF;\n\n  .practical-tool-title,\n  .practical-tool-desc {\n    text-align: center;\n  }\n\n  .practical-tool-title {\n    font-weight: 500;\n    font-size: 32px;\n    line-height: 48px;\n    letter-spacing: 0.5px;\n    color: #000000;\n  }\n\n  .practical-tool-desc {\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 22px;\n    color: #86909C;\n    margin-top: 12px;\n  }\n\n  .tool-list {\n    width: 1280px;\n    margin: 40px auto 0;\n    display: flex;\n    justify-content: space-between;\n\n    .tool-item {\n      flex-shrink: 0;\n      width: 408px;\n      height: 340px;\n      background: #fff no-repeat top center/408px 120px;\n      box-shadow: 0px 4px 24px rgba(114, 148, 226, 0.2);\n      border-radius: 16px;\n      position: relative;\n\n      .tool-title {\n        font-weight: 500;\n        font-size: 32px;\n        line-height: 120px;\n        text-align: center;\n        letter-spacing: 0.02em;\n        color: #FFFFFF;\n      }\n\n      .tool-desc {\n        font-weight: 400;\n        font-size: 16px;\n        line-height: 28px;\n        color: #4E5969;\n        padding: 28px;\n        box-sizing: border-box;\n      }\n\n      .tool-btn {\n        width: 140px;\n        height: 42px;\n        font-weight: 500;\n        font-size: 18px;\n        color: #2656FF;\n        border: 2px solid #2656FF;\n        filter: drop-shadow(0px 7px 8px rgba(89, 135, 255, 0.2));\n        border-radius: 6px;\n        position: absolute;\n        bottom: 32px;\n        left: 0;\n        right: 0;\n        margin: auto;\n      }\n    }\n  }\n}\n\n.glossary {\n  margin-bottom: 80px;\n\n  .title {\n    font-weight: 500;\n    font-size: 32px;\n    line-height: 48px;\n    text-align: center;\n    letter-spacing: 0.5px;\n    color: #000000;\n    margin-top: 40px;\n  }\n\n  .glossary-list {\n    width: 1280px;\n    margin: 34px auto 0;\n    background: url('https://video.reta-inc.com/image/default/F4703FDC0FA44DBBA5132E850BC29CF2-6-2.jpg') no-repeat center center/cover;\n    padding: 48px;\n    box-sizing: border-box;\n    border-radius: 12px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 24px;\n    flex-wrap: wrap;\n\n    .glossary-item {\n      padding: 11px 24px;\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 22px;\n      background: #FFFFFF;\n      box-shadow: 0px 1px 8px rgba(114, 148, 226, 0.2);\n      border-radius: 4px;\n      cursor: pointer;\n      user-select: none;\n\n      a {\n        color: #1D2129;\n        text-decoration: none;\n      }\n\n      &:hover {\n        a {\n          color: #165DFF;\n        }\n      }\n    }\n  }\n}\n\n@media screen and (max-width: 800px) {\n  .faq {\n    padding: 20px 20px 40px 20px;\n\n    &_title {\n      font-size: 18px;\n      line-height: 25px;\n    }\n\n    &_list {\n      display: flex;\n      height: auto;\n      flex-direction: column;\n      margin-top: 16px;\n\n      .faq-category {\n        width: auto;\n        height: auto;\n\n        &__title {\n          height: auto;\n          padding: 13px 0;\n          font-size: 16px;\n          line-height: 22px;\n        }\n        &__content {\n          font-size: 14px;\n          line-height: 28px;\n          padding: 16px 20px 45px;\n        }\n      }\n    }\n  }\n\n  .quick-faq {\n    width: auto;\n    margin-top: 20px;\n    padding: 0 20px;\n\n    &__title {\n      font-size: 18px;\n      line-height: 25px;\n      text-align: center;\n    }\n\n    .quick-faq__header-icon {\n      width: 20px;\n      height: 20px;\n    }\n\n    .quick-faq__header {\n      font-size: 14px;\n      line-height: 24px;\n      padding-right: 24px;\n    }\n\n    :deep(.arco-collapse-item-content-box) {\n      padding: 16px 0 !important;\n    }\n\n    .answer {\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 24px;\n    }\n  }\n\n  .free-question {\n    height: 135px;\n\n    .question-title {\n      font-size: 19px;\n      line-height: 26px;\n    }\n\n    .question-desc {\n      font-size: 11px;\n      line-height: 15px;\n      text-align: center;\n      width: 280px;\n    }\n\n    .free-question-btn {\n      width: 88px;\n      height: 28px;\n      font-size: 14px;\n      line-height: 24px;\n      margin-top: 12px;\n    }\n  }\n\n  .practical-tool {\n    padding: 32px 20px;\n\n    .practical-tool-desc {\n      font-size: 12px;\n      line-height: 20px;\n    }\n\n    .practical-tool-title {\n      font-size: 18px;\n      line-height: 25px;\n    }\n\n    .tool-list {\n      gap: 24px;\n      width: auto;\n      flex-direction: column;\n      margin: 16px;\n\n      .tool-item {\n        width: auto;\n        height: 250px;\n        background: #fff no-repeat top center / 100% 66px;\n\n        .tool-title {\n          padding: 16px 0;\n          font-size: 22px;\n          line-height: 31px;\n        }\n\n        .tool-desc {\n          font-size: 14px;\n          line-height: 24px;\n        }\n\n        .tool-btn {\n          width: 100px;\n          height: 32px;\n          font-size: 14px;\n          line-height: 24px;\n          border: 1px solid #2656FF;\n        }\n      }\n    }\n  }\n\n  .glossary {\n    .title {\n      font-size: 18px;\n      line-height: 25px;\n    }\n\n    .glossary-list {\n      width: auto;\n      margin: 12px 20px;\n\n      .glossary-item {\n        padding: 5px 8px;\n        font-size: 12px;\n      }\n    }\n  }\n}\n</style>\n"],"names":["useSeoHead","router","useRouter","helpCenterData","__temp","__restore","_withAsyncContext","useAsyncData","question","glossary","useFetch","faqCategories","_a","result","item","knowledge","name","title","category","res","glossaryList","g","onSearch","keyword","navigateTo"],"mappings":";;;;;;;;;;44HAoFAA,IAEA,MAAAC,EAAAC,IAGA,CAAA,KAAAC,CAAA,GAAA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAAC,EAAA,SAAA,OACE,KAAA,CAAA,CAAA,KAAAC,GAAA,CAAA,KAAAC,EAAA,EAAA,MAAA,QAAA,IAAA,CAAmEC,EAAA,8BAAA,aAAA,EAC3BA,EAAA,8BAAA,aAAA,CACA,CAAA,EAExCC,GAAAC,EAAAJ,EAAA,QAAA,YAAAI,EAAA,KAAA,OAAA,CAAAC,EAAAC,IAAA,OACE,OAAAF,EAAAE,EAAA,WAAA,WAAA,OAAA,MAAAF,EAAA,QAAAG,GAAA,CACE,KAAA,CAAA,KAAAC,EAAA,MAAAC,GAAAF,EAAA,WACA,IAAAG,EAAAL,EAAA,KAAAM,GAAAA,EAAA,OAAAH,CAAA,EACAE,IACEA,EAAA,CAAW,KAAAF,EACT,MAAAC,EACA,KAAA,CAAA,EACO,eAAA,EACS,EAElBJ,EAAA,KAAAK,CAAA,GAEFA,EAAA,KAAA,KAAAJ,CAAA,CAAuB,GAEzBD,CAAO,EAAA,CAAA,GAETO,EAAAX,EAAA,MAAA,KAAA,IAAAY,GAAAA,CAAA,EACA,MAAA,CAAO,cAAAV,EACL,aAAAS,CACA,CACF,EAAA,aAAA,CAAA,EAAAhB,EAAA,MAAAA,EAAAC,EAAA,EAAAD,GAGF,eAAAkB,EAAAC,EAAA,CACE,CAAAA,GAGA,MAAAC,EAAA,CAAiB,KAAA,sBACT,MAAA,CACC,QAAAD,CACL,CACF,CAAA,CACD"}