{"version":3,"file":"index.2357efca.js","sources":["../../../../assets/icons/arrow-down-blue.svg","../../../../pages/charge/index.vue"],"sourcesContent":["export default \"__VITE_ASSET__136cdc4a__\"","<template>\n  <div class=\"charge-container\">\n    <FilledBanner\n      bg-image=\"https://video.reta-inc.com/image/default/CF2D04D6F30548B7A81F5FE3C030495B-6-2.jpg\"\n      :title=\"$t('选择最适合您的方案')\"\n      :subtitle=\"$t('客户经理可以根据您企业的独特需求提供正确的采购建议')\"\n      :btn-text=\"$t('联系我们')\"\n    />\n    <div class=\"tab_container\">\n      <!-- <div class=\"limited-time-event\">\n        <div class=\"box\" @click=\"handlerGoActivity\">\n          <img src=\"@/assets/images/gift-box.png\" alt=\"gift-box\" />\n          <span>限时活动：推荐客户您将获得300元提成奖励，客户将享有50美元的海外雇佣优惠</span>\n        </div>\n      </div> -->\n      <div class=\"tab-list\">\n        <div\n          ref=\"itemContainer\"\n          class=\"item\"\n          v-for=\"(item, index) in chargeList\"\n          :key=\"item.title\"\n          :style=\"{ borderTopColor: item.borderColor }\"\n          :data-index=\"index + 1\"\n        >\n          <div>\n            <div class=\"title\">{{ $t(item.title) }}</div>\n            <div class=\"desc\">{{ $t(item.desc) }}</div>\n            <div\n              class=\"price\"\n              :style=\"{\n                'margin-top': locale === 'zh-CN' ? '0px' : '16px',\n              }\"\n            >\n              <div class=\"money\">{{ item.money }}</div>\n              <div class=\"time\">{{ $t(item.time) }}</div>\n            </div>\n            <div class=\"list\">\n              <div class=\"desc-item\" v-for=\"descItem in item.descList\" :key=\"descItem\">\n                {{ $t(descItem) }}\n              </div>\n            </div>\n          </div>\n          <div class=\"btn\" @click=\"onClick\">{{ $t('服务咨询') }}</div>\n        </div>\n      </div>\n      <div class=\"step_counter\">\n        <div\n          v-for=\"item in 3\"\n          :class=\"{ current_counter: index === item }\"\n          :key=\"item\"\n          class=\"item\"\n          @click=\"scrollToItem(item)\"\n        ></div>\n      </div>\n    </div>\n    <div class=\"extra_service\">\n      <article class=\"extra_title\">{{ $t('额外服务') }}</article>\n      <div class=\"services\">\n        <div class=\"item\" v-for=\"{ title, content, img } in list\" :key=\"title\">\n          <div class=\"left\">\n            <article class=\"title\">{{ $t(title) }}</article>\n            <article class=\"content\">{{ $t(content) }}</article>\n            <a-button type=\"outline\" class=\"button\" @click=\"connect(title)\">\n              {{ $t('联系我们') }}\n              <img :src=\"arrowIcon\" class=\"arrow\" />\n            </a-button>\n          </div>\n          <img :src=\"img\" :alt=\"title\" class=\"img\" />\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"evaluation\">\n      <Evaluation />\n      <nuxt-link to=\"/showcase/new-energy\" class=\"showcase\">\n        {{ $t('查看客户案例') }}\n        <icon-right />\n      </nuxt-link>\n    </div> -->\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport chargeList from '@/assets/contents/charge.json';\nimport arrowIcon from '@/assets/icons/arrow-down-blue.svg';\n// import Evaluation from '@/pages/index/components/evaluation/index.vue';\nimport { useI18n } from 'vue-i18n';\nconst { locale } = useI18n();\n\nuseSeoHead();\n\nconst router = useRouter();\nconst moduleName = useState('module-name');\nmoduleName.value = 'charge';\n\nfunction onClick() {\n  useLeadsInfo('收费标准-费用明细-联系我们', 'serviceConsulting');\n}\nconst index = ref(0);\nconst itemContainer = ref<HTMLDivElement[]>([]);\nfunction initScrollListener() {\n  const { length } = itemContainer.value;\n  const io = new IntersectionObserver(\n    entries => {\n      for (let i = 0; i < entries.length; i++) {\n        const item = entries[i];\n        if (item.intersectionRatio >= 0.75) {\n          index.value = Number(item.target.getAttribute('data-index')) || 0;\n        }\n      }\n    },\n    {\n      threshold: 0.75,\n    }\n  );\n  for (let i = 0; i < length; i++) {\n    const item = itemContainer.value[i];\n    io.observe(item as Element);\n  }\n}\nfunction handlerGoActivity() {\n  router.push({\n    name: 'activity',\n  });\n}\nfunction scrollToItem(count: number) {\n  if (count === index.value) {\n    return;\n  }\n  itemContainer.value[count - 1].scrollIntoView({\n    behavior: 'smooth',\n    inline: 'center',\n  });\n}\nonMounted(initScrollListener);\n\nconst list = [\n  {\n    title: '全球猎头',\n    content: '帮助您在150+国家完成海外人才寻访',\n    img: 'https://video.reta-inc.com/image/default/122E5BD1FE704F32A92147ECB8B540AF-6-2.png',\n  },\n  {\n    title: '合规咨询',\n    content: '为您提供专业的海外用工合规咨询',\n    img: 'https://video.reta-inc.com/image/default/87F5C3BB28C247349C38F0118E819891-6-2.png',\n  },\n  {\n    title: '企业落地',\n    content: '帮助您完成海外实体注册',\n    img: 'https://video.reta-inc.com/image/default/90BC638B90C647409A63945BD7E65AC0-6-2.png',\n  },\n  {\n    title: '其他海外服务',\n    content: '通过全球服务网络帮助您完成其他海外服务，例如办工签、办税等',\n    img: 'https://video.reta-inc.com/image/default/3FD5E04859D24133BE3CE2C416A0EC1E-6-2.png',\n  },\n];\nfunction connect(title: string) {\n  useLeadsInfo(`收费标准-额外服务-${title}-联系我们`, 'contactUs');\n}\n</script>\n\n<style lang=\"less\" scoped>\n@keyframes jitter {\n  0% {\n    transform: rotate(0deg);\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  10% {\n    transform: rotate(-12deg);\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  20% {\n    transform: rotate(12deg);\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  28% {\n    transform: rotate(-10deg);\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  36% {\n    transform: rotate(10deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  42% {\n    transform: rotate(-8deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  48% {\n    transform: rotate(8deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  52% {\n    transform: rotate(-4deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  56% {\n    transform: rotate(4deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  60% {\n    transform: rotate(0deg);\n    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);\n  }\n\n  100% {\n    transform: rotate(0deg);\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n}\n\n.limited-time-event {\n  padding: 0 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-top: 48px;\n  box-sizing: border-box;\n  background-color: #ecf2ff;\n\n  img {\n    width: 35px;\n    animation: jitter 1s 2s infinite;\n  }\n\n  .box {\n    width: 680px;\n    height: 48px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: #fff3f1;\n    border: 1px solid #ff8777;\n    box-shadow: 0px 2px 8px rgba(114, 148, 226, 0.2);\n    border-radius: 12px;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 22px;\n    color: #ff5c46;\n    cursor: pointer;\n\n    span {\n      margin-left: 16px;\n    }\n  }\n}\n\n@media screen and (min-width: 800px) {\n  :deep(.banner-container) {\n    height: 360px;\n    h2 {\n      margin-top: 86px;\n    }\n    .try-button {\n      margin-top: 48px;\n    }\n  }\n  .charge-container {\n    .tab-list {\n      padding: 40px 0 120px 0px;\n      background-color: #ecf2ff;\n      display: flex;\n      justify-content: center;\n      gap: 25px;\n      min-width: 1344px;\n\n      .item {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        width: 410px;\n        background: #ffffff;\n        border-radius: 4px;\n        padding: 40px;\n        box-sizing: border-box;\n        position: relative;\n        transition: all 0.3s;\n        border-top-width: 4px;\n        border-top-style: solid;\n\n        .title {\n          font-weight: 500;\n          font-size: 30px;\n          line-height: 42px;\n          color: #11151f;\n        }\n\n        .desc {\n          font-weight: 400;\n          font-size: 18px;\n          line-height: 25px;\n          color: #86909c;\n          margin-top: 12px;\n          height: 77px;\n          padding-top: 12px;\n          box-sizing: border-box;\n        }\n\n        .price {\n          .money {\n            font-weight: 600;\n            font-size: 42px;\n            line-height: 55px;\n            color: #386aff;\n            display: inline-block;\n            font-family: Silka, sans-serif, serif;\n            letter-spacing: -1px;\n          }\n\n          .time {\n            font-weight: 500;\n            font-size: 24px;\n            line-height: 34px;\n            color: #86909c;\n            display: inline-block;\n            margin-left: 10px;\n          }\n        }\n\n        .list {\n          margin-top: 40px;\n\n          .desc-item {\n            margin-bottom: 20px;\n            padding-left: 36px;\n            background: url('@/assets/icons/tick.svg') no-repeat 0 0/24px 24px;\n            font-weight: 400;\n            font-size: 18px;\n            line-height: 25px;\n            color: #4e5969;\n          }\n        }\n\n        .btn {\n          width: 330px;\n          height: 62px;\n          border: 2px solid #165dff;\n          border-radius: 8px;\n          font-weight: 500;\n          font-size: 24px;\n          line-height: 34px;\n          color: #165dff;\n          text-align: center;\n          line-height: 62px;\n          cursor: pointer;\n\n          &:hover {\n            background: #165dff;\n            color: #ffffff;\n          }\n        }\n\n        &:hover {\n          box-shadow: 0px 4px 24px rgba(114, 148, 226, 0.2);\n        }\n      }\n    }\n\n    .step_counter {\n      display: none;\n    }\n    .extra_service {\n      background-color: #fff;\n      padding: 60px 0 66px;\n      .extra_title {\n        font-weight: 500;\n        font-size: 32px;\n        line-height: 48px;\n        letter-spacing: 0.5px;\n        color: #000000;\n        text-align: center;\n      }\n      .services {\n        width: 1280px;\n        margin: 40px auto 0;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 36px;\n        .item {\n          box-sizing: border-box;\n          width: 622px;\n          background: #ffffff;\n          box-shadow: 0px 2px 24px rgba(114, 148, 226, 0.14);\n          border-radius: 12px;\n          padding: 40px 32px 40px 40px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          .left {\n            max-width: 400px;\n            .title {\n              font-weight: 500;\n              font-size: 28px;\n              line-height: 39px;\n              color: #1d2129;\n            }\n            .content {\n              margin-top: 16px;\n              margin-bottom: 36px;\n              font-size: 18px;\n              line-height: 25px;\n              color: #4e5969;\n            }\n            .button {\n              height: 42px;\n              border: 1.5px solid #2656ff;\n              filter: drop-shadow(0px 7px 8px rgba(89, 135, 255, 0.2));\n              border-radius: 6px;\n              font-weight: 500;\n              font-size: 18px;\n              line-height: 24px;\n              text-align: center;\n              color: #2656ff;\n              display: flex;\n              align-items: center;\n              .arrow {\n                // width: 24px;\n                // height: 24px;\n                margin-top: 2px;\n                margin-left: 8px;\n                transform: rotateZ(-90deg);\n                // vertical-align: middle;\n              }\n            }\n            .button:hover {\n              border: 1.5px solid #4080ff;\n              filter: drop-shadow(0px 7px 8px rgba(89, 135, 255, 0.2));\n              border-radius: 6px;\n              color: #4080ff;\n              .arrow {\n                opacity: 0.8;\n              }\n            }\n          }\n          .img {\n            width: 117px;\n            height: 122px;\n          }\n        }\n      }\n    }\n  }\n}\n.evaluation {\n  background: url('https://video.reta-inc.com/image/default/43291D4001D54758BD267F40B9A87CFB-6-2.png') no-repeat top center/878px 458px;\n  :deep(.evaluation_container) {\n    padding: 20px 0 50px;\n    .evaluation_title::after {\n      display: none;\n    }\n    .arco-image-img {\n      vertical-align: middle;\n      border-radius: inherit;\n      object-fit: contain;\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .showcase {\n    color: #2656FF;\n    text-align: center;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 24px;\n    text-decoration: none;\n    text-align: center;\n    margin-bottom: 90px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n  }\n}\n\n@font-face {\n  font-family: Silka;\n  src: url('https://jkqj-assets-beijing.oss-cn-beijing.aliyuncs.com/font/Silka-Medium.otf');\n}\n</style>\n<style lang=\"less\" scoped>\n@media screen and (max-width: 800px) {\n  .charge-container {\n    width: 100%;\n    overflow-x: hidden;\n\n    .limited-time-event {\n      .box {\n        padding: 10px 16px;\n        font-size: 12px;\n        line-height: 17px;\n      }\n    }\n\n    .tab_container {\n      background: #ecf2ff;\n    }\n\n    ::-webkit-scrollbar {\n      width: 0;\n      height: 0;\n      display: none;\n    }\n\n    .tab-list {\n      background: #ecf2ff;\n      padding: 40px 16px 24px;\n      display: flex;\n      gap: 24px;\n      overflow-x: auto;\n\n      .item {\n        background: #ffffff;\n        border-radius: 3px;\n        padding: 24px 20px;\n        border-top: 2px solid;\n        box-sizing: border-box;\n        min-width: 250px;\n        width: 250px;\n        height: 476px;\n        position: relative;\n\n        .title {\n          font-weight: 500;\n          font-size: 18px;\n          line-height: 25px;\n          letter-spacing: 0.01em;\n          color: #11151f;\n        }\n\n        .desc {\n          font-weight: 400;\n          font-size: 12px;\n          line-height: 17px;\n          letter-spacing: 0.01em;\n          color: #86909c;\n          margin-top: 8px;\n          height: 34px;\n        }\n\n        .price {\n          margin-top: 15px;\n\n          .money {\n            font-weight: 400;\n            font-size: 34px;\n            line-height: 34px;\n            letter-spacing: 0.01em;\n            color: #386aff;\n            display: inline-block;\n            font-family: Silka, sans-serif, serif;\n          }\n\n          .time {\n            font-weight: 500;\n            font-size: 14px;\n            line-height: 20px;\n            letter-spacing: 0.01em;\n            color: #86909c;\n            display: inline-block;\n            margin-left: 4px;\n          }\n        }\n\n        .list {\n          margin-top: 16px;\n\n          .desc-item {\n            margin-bottom: 8px;\n            padding-left: 16px;\n            background: url('@/assets/icons/tick.svg') no-repeat 0 3px/12px 12px;\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 18px;\n            letter-spacing: 0.01em;\n            color: #4e5969;\n          }\n        }\n\n        .btn {\n          display: block;\n          width: 200px;\n          height: 36px;\n          position: absolute;\n          bottom: 20px;\n          border: 1px solid #165dff;\n          border-radius: 4px;\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 34px;\n          color: #165dff;\n          text-align: center;\n        }\n      }\n    }\n\n    .step_counter {\n      padding-bottom: 24px;\n      display: flex;\n      justify-content: center;\n      gap: 8px;\n\n      .item {\n        width: 16px;\n        height: 4px;\n        background: #e5e7eb;\n        border-radius: 2px;\n      }\n\n      .current_counter {\n        background: #165dff;\n      }\n    }\n    .extra_service {\n      background-color: #fff;\n      padding: 32px 16px 40px;\n      .extra_title {\n        font-weight: 500;\n        font-size: 20px;\n        line-height: 28px;\n        letter-spacing: 0.5px;\n        color: #000000;\n        text-align: center;\n      }\n      .services {\n        margin: 24px auto 0;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 16px;\n        .item {\n          width: 100%;\n          box-sizing: border-box;\n          background: #ffffff;\n          box-shadow: 0px 2px 24px rgba(114, 148, 226, 0.14);\n          border-radius: 12px;\n          padding: 20px 16px 20px 20px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          .left {\n            max-width: 213px;\n            .title {\n              font-weight: 500;\n              font-size: 18px;\n              line-height: 25px;\n              color: #1d2129;\n            }\n            .content {\n              margin-top: 16px;\n              margin-bottom: 36px;\n              font-weight: 400;\n              // font-size: 14px;\n              line-height: 20px;\n              color: #4e5969;\n            }\n            .button {\n              height: 32px;\n              border: 1.5px solid #2656ff;\n              filter: drop-shadow(0px 7px 8px rgba(89, 135, 255, 0.2));\n              border-radius: 6px;\n              font-weight: 500;\n              // font-size: 18px;\n              line-height: 24px;\n              text-align: center;\n              color: #2656ff;\n              display: flex;\n              align-items: center;\n              .arrow {\n                // width: 24px;\n                // height: 24px;\n                margin-top: 2px;\n                margin-left: 8px;\n                transform: rotateZ(-90deg);\n                // vertical-align: middle;\n              }\n            }\n            .button:hover {\n              border: 1.5px solid #4080ff;\n              filter: drop-shadow(0px 7px 8px rgba(89, 135, 255, 0.2));\n              border-radius: 6px;\n              color: #4080ff;\n              .arrow {\n                opacity: 0.8;\n              }\n            }\n          }\n          .img {\n            width: 82px;\n            height: 86px;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["arrowIcon","locale","useI18n","useSeoHead","useRouter","moduleName","useState","onClick","useLeadsInfo","index","ref","itemContainer","initScrollListener","length","io","entries","i","item","scrollToItem","count","onMounted","list","connect","title"],"mappings":"69FAAeA,EAAA,GAAA,IAAA,IAAA,+BAAA,YAAA,GAAA,EAAA,6ZCsFf,KAAA,CAAA,OAAAC,GAAAC,IAEAC,IAEAC,EAAA,EACA,MAAAC,EAAAC,EAAA,aAAA,EACAD,EAAA,MAAA,SAEA,SAAAE,GAAA,CACEC,EAAA,6EAAA,mBAAA,CAAkD,CAEpD,MAAAC,EAAAC,EAAA,CAAA,EACAC,EAAAD,EAAA,CAAA,CAAA,EACA,SAAAE,GAAA,CACE,KAAA,CAAA,OAAAC,CAAA,EAAAF,EAAA,MACAG,EAAA,IAAA,qBAAeC,GAAA,CAEX,QAAAC,EAAA,EAAAA,EAAAD,EAAA,OAAAC,IAAA,CACE,MAAAC,EAAAF,EAAAC,GACAC,EAAA,mBAAA,MACER,EAAA,MAAA,OAAAQ,EAAA,OAAA,aAAA,YAAA,CAAA,GAAA,EACF,CACF,EACF,CACA,UAAA,GACa,CACb,EAEF,QAAAD,EAAA,EAAAA,EAAAH,EAAAG,IAAA,CACE,MAAAC,EAAAN,EAAA,MAAAK,GACAF,EAAA,QAAAG,CAAA,CAA0B,CAC5B,CAOF,SAAAC,EAAAC,EAAA,CACEA,IAAAV,EAAA,OAGAE,EAAA,MAAAQ,EAAA,GAAA,eAAA,CAA8C,SAAA,SAClC,OAAA,QACF,CAAA,CACT,CAEHC,EAAAR,CAAA,EAEA,MAAAS,EAAA,CAAa,CACX,MAAA,2BACS,QAAA,2FACE,IAAA,mFACJ,EACP,CACA,MAAA,2BACS,QAAA,6FACE,IAAA,mFACJ,EACP,CACA,MAAA,2BACS,QAAA,qEACE,IAAA,mFACJ,EACP,CACA,MAAA,uCACS,QAAA,iLACE,IAAA,mFACJ,CACP,EAEF,SAAAC,EAAAC,EAAA,CACEf,EAAA,qDAAAe,6BAAA,WAAA,CAAmD"}