{"version":3,"file":"company-info.4a0f38c2.js","sources":["../../../../assets/images/map.png","../../../../pages/about/company-info.vue"],"sourcesContent":["export default \"__VITE_ASSET__58190690__\"","<template>\n  <div class=\"company-info-container\">\n    <div class=\"banner\">\n      <div class=\"fan-row fan-row-1\"></div>\n      <div class=\"fan-row fan-row-2\"></div>\n      <div class=\"left\">\n        <div class=\"title\">{{ $t('公司简介') }}</div>\n        <img\n          class=\"mobile-img\"\n          src=\"https://video.reta-inc.com/image/default/B95C73D44C0F4AA8AEE7564A6599E95A-6-2.jpg\"\n        />\n        <div class=\"introduce\">\n          <p>\n            {{ $t('c1') }}\n          </p>\n          <p>\n            {{ $t('c2') }}\n          </p>\n          <p>\n            {{ $t('c3') }}\n          </p>\n        </div>\n      </div>\n      <div class=\"right\">\n        <div class=\"bg\"></div>\n        <div class=\"company-icon\"></div>\n      </div>\n    </div>\n    <div class=\"service-area\">\n      <div class=\"title\">{{ $t('我们的服务范围') }}</div>\n      <div class=\"area-list\">\n        <div class=\"area-item\" v-for=\"area in companyInfo.areaList\" :key=\"area.desc\">\n          <div class=\"num\">{{ area.num }}</div>\n          <div class=\"desc\">{{ $t(area.desc) }}</div>\n        </div>\n      </div>\n      <div class=\"map\">\n        <img src=\"~~/assets/images/map.png\" alt=\"\" />\n        <div class=\"legend\">\n          <div class=\"legend-item\">{{ $t('服务国家') }}</div>\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"core-person\">\n          <div class=\"title\">核心人员</div>\n          <div class=\"person-list\">\n            <div class=\"person-item\" v-for=\"person in companyInfo.personList\" :key=\"person.avatar\">\n              <img :src=\"person.avatar\" alt=\"\"/>\n              <div class=\"right\">\n                <div class=\"top\">\n                  <div class=\"name\">{{ person.name }}</div>\n                  <div class=\"post\">{{ person.post }}</div>\n                </div>\n                <div class=\"person-desc\">{{ person.desc }}</div>\n              </div>\n            </div>\n          </div>\n        </div> -->\n    <div class=\"core-team\">\n      <div class=\"title\">{{ $t('核心团队') }}</div>\n      <div class=\"core-team-tabs\">\n        <div\n          class=\"core-team-tab\"\n          v-for=\"(team, i) in companyInfo.teamList\"\n          :key=\"team.name\"\n          :class=\"{ active: i + 1 === currentTeam }\"\n          @click=\"handleChangeTeamTab(i)\"\n        >\n          {{ $t(team.name) }}\n        </div>\n      </div>\n      <a-carousel class=\"core-team-swiper\" v-model:current=\"currentTeam\" indicator-type=\"never\" animation-name=\"fade\">\n        <a-carousel-item class=\"core-team-swiper-item\" v-for=\"team in companyInfo.teamList\" :key=\"team.name\">\n          <div class=\"left\" :style=\"{ backgroundImage: `url(${team.teamImg})` }\"></div>\n          <div class=\"right\">\n            <div class=\"team-name\">{{ $t(team.name) }}</div>\n            <div class=\"team-desc\">{{ $t(team.desc) }}</div>\n            <!-- <div v-if=\"team.address && team.address !== ''\" class=\"team-address\">\n              {{ $t('地址') }}： {{ $t(team.address) }}\n            </div> -->\n            <img\n              class=\"map-img\"\n              :class=\"{ 'map-min': team.address && team.address !== '' }\"\n              :src=\"team.mapImg\"\n              alt=\"全球雇佣\"\n            />\n          </div>\n        </a-carousel-item>\n      </a-carousel>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport companyInfo from '@/assets/contents/company-info.json';\n\nuseSeoHead();\n\nconst currentTeam = ref(1);\n\nconst handleChangeTeamTab = (i: number) => {\n  currentTeam.value = i + 1;\n};\n\nonMounted(() => {\n  document.body.classList.add('in-company-info');\n});\n\nonUnmounted(() => {\n  document.body.classList.remove('in-company-info');\n});\n</script>\n\n<style lang=\"less\" scoped>\n.company-info-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .banner {\n    width: 1280px;\n    padding-top: 80px;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .fan-row {\n      border-radius: 50%;\n      opacity: 0.2;\n      background: conic-gradient(#3370ff 0deg, rgba(22, 93, 255, 0) 90deg);\n      position: absolute;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .fan-row-1 {\n      width: 302px;\n      height: 302px;\n      left: 90px;\n      top: 55px;\n    }\n\n    .fan-row-2 {\n      width: 214px;\n      height: 214px;\n      bottom: 55px;\n      right: 520px;\n      transform: rotateY(180deg);\n    }\n\n    .left {\n      width: 560px;\n      flex-shrink: 0;\n\n      .mobile-img {\n        display: none;\n      }\n\n      .title {\n        color: #202431;\n        font-size: 36px;\n        font-weight: 600;\n        line-height: 64px;\n        margin-bottom: 20px;\n      }\n\n      .introduce {\n        // font-weight: 400;\n        // font-size: 18px;\n        // line-height: 32px;\n        // color: #6E7282;\n        // display: flex;\n        // flex-direction: column;\n        // gap: 32px;\n        color: #6e7282;\n        display: flex;\n        flex-direction: column;\n        font-size: 16px;\n        font-weight: 400;\n        gap: 24px;\n        line-height: 28px;\n\n        p {\n          margin: 0;\n        }\n      }\n    }\n\n    .right {\n      position: relative;\n      width: 664px;\n      flex-shrink: 0;\n      display: flex;\n      justify-content: flex-end;\n\n      .bg {\n        width: 634px;\n        height: 440px;\n        background: url('https://video.reta-inc.com/image/default/B95C73D44C0F4AA8AEE7564A6599E95A-6-2.jpg') no-repeat\n          center center/634px 440px;\n        border-radius: 12px;\n      }\n\n      .company-icon {\n        width: 66px;\n        height: 66px;\n        position: absolute;\n        left: -3px;\n        top: 89px;\n        background: url('@/assets/icons/company-icon.svg') no-repeat center center/66px 66px;\n      }\n    }\n  }\n\n  .service-area,\n  .core-person,\n  .core-team {\n    width: 1280px;\n\n    .title {\n      font-weight: 600;\n      font-size: 36px;\n      line-height: 64px;\n      text-align: center;\n      color: #202431;\n      letter-spacing: 0.5px;\n    }\n  }\n\n  .core-team {\n    width: 1496px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .service-area {\n    margin-top: 80px;\n\n    .area-list {\n      margin-top: 40px;\n      display: flex;\n      justify-content: space-between;\n\n      .area-item {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n\n        .num {\n          font-weight: 600;\n          font-size: 42px;\n          line-height: 57px;\n          letter-spacing: 0.5px;\n          color: #165dff;\n        }\n\n        .desc {\n          font-weight: 400;\n          font-size: 22px;\n          line-height: 31px;\n          color: #4e5969;\n        }\n\n        &::after {\n          content: '';\n          width: 1px;\n          height: 40px;\n          background-color: #c9cdd4;\n          position: absolute;\n          right: 0;\n          top: 30px;\n        }\n\n        &:last-child {\n          &::after {\n            display: none;\n          }\n        }\n      }\n    }\n\n    .map {\n      margin: 80px auto 0;\n      position: relative;\n      text-align: center;\n\n      img {\n        width: 955px;\n        height: 469px;\n      }\n\n      .legend {\n        position: absolute;\n        left: 0;\n        bottom: 20px;\n        display: inline-block;\n        padding: 24px 46px 24px 24px;\n        background: #f9faff;\n        border: 1px solid #165dff;\n        border-radius: 8px;\n\n        .legend-item {\n          margin-top: 16px;\n          padding-left: 28px;\n          position: relative;\n          font-weight: 400;\n          font-size: 16px;\n          line-height: 22px;\n          color: #000000;\n\n          &::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 5px;\n            width: 12px;\n            height: 12px;\n            background: #5d34f3;\n            border: 2px solid #bdb6ff;\n            border-radius: 50%;\n            box-sizing: border-box;\n          }\n\n          &::before {\n            background: #ff7d00;\n            border: 2px solid #fae1cc;\n          }\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .core-person {\n    margin-top: 140px;\n\n    .person-list {\n      display: flex;\n      gap: 40px;\n      flex-wrap: wrap;\n      margin-top: 60px;\n\n      .person-item {\n        width: 620px;\n        padding: 36px;\n        box-sizing: border-box;\n        background: #f6f9ff;\n        border-radius: 12px;\n        display: flex;\n        align-items: center;\n\n        img {\n          width: 110px;\n          height: 110px;\n          border-radius: 50%;\n          margin-right: 32px;\n        }\n\n        .right {\n          .top {\n            display: flex;\n            gap: 16px;\n\n            .name {\n              font-weight: 600;\n              font-size: 26px;\n              line-height: 32px;\n              color: #1d2129;\n            }\n\n            .post {\n              font-weight: 500;\n              font-size: 18px;\n              line-height: 32px;\n              color: #1d2129;\n            }\n          }\n\n          .person-desc {\n            font-weight: 400;\n            font-size: 18px;\n            line-height: 28px;\n            color: #4e5969;\n            margin-top: 12px;\n          }\n        }\n      }\n    }\n  }\n\n  .core-team {\n    margin-top: 100px;\n\n    .core-team-tabs {\n      display: flex;\n      justify-content: center;\n      gap: 40px;\n      margin-top: 40px;\n\n      .core-team-tab {\n        padding: 16px 40px;\n        border: 1px solid #c9cdd4;\n        border-radius: 12px;\n        font-weight: 400;\n        font-size: 20px;\n        line-height: 28px;\n        color: #4e5969;\n        white-space: nowrap;\n        cursor: pointer;\n\n        &.active {\n          background: #165dff;\n          border: 1px solid #165dff;\n          color: #fff !important;\n        }\n\n        &:hover {\n          color: #386aff;\n          border: 1px solid #165dff;\n        }\n      }\n    }\n\n    .core-team-swiper {\n      width: 1280px;\n      height: 480px;\n      margin-top: 60px;\n      margin-bottom: 100px;\n\n      .core-team-swiper-item {\n        padding: 24px 40px 24px 24px;\n        background: #ffffff;\n        border: 2px solid #e5e7eb;\n        border-radius: 20px;\n        box-sizing: border-box;\n        display: flex;\n        gap: 40px;\n\n        .left {\n          width: 670px;\n          height: 432px;\n          border-radius: 12px;\n          overflow: hidden;\n          flex-shrink: 0;\n          background: url() no-repeat center center/cover;\n\n          img {\n            width: 100%;\n          }\n        }\n\n        .right {\n          .team-name {\n            position: relative;\n            font-weight: 500;\n            font-size: 28px;\n            line-height: 40px;\n            color: #1d2129;\n            padding-left: 22px;\n\n            &::before {\n              content: '';\n              width: 6px;\n              height: 28px;\n              position: absolute;\n              background: #165dff;\n              left: 0;\n              top: 6px;\n            }\n          }\n\n          .team-desc {\n            font-weight: 400;\n            font-size: 18px;\n            line-height: 28px;\n            color: #1d2129;\n            margin-top: 16px;\n          }\n\n          .team-address {\n            font-weight: 500;\n            font-size: 18px;\n            line-height: 28px;\n            letter-spacing: 0.02em;\n            color: #1d2129;\n            margin: 12px 0;\n          }\n\n          .map-img {\n            width: 300px;\n            position: absolute;\n            bottom: 24px;\n          }\n\n          .map-min {\n            width: 250px;\n          }\n        }\n      }\n\n      :deep(.arco-carousel-arrow) {\n        .arco-carousel-arrow-left,\n        .arco-carousel-arrow-right {\n          background-color: transparent;\n          border: 3px solid #c9cdd4;\n          width: 60px;\n          height: 60px;\n          box-sizing: border-box;\n\n          &:hover {\n            border-color: #165dff;\n\n            .arco-icon {\n              color: #165dff;\n            }\n          }\n        }\n\n        .arco-carousel-arrow-left {\n          left: -90px;\n        }\n\n        .arco-carousel-arrow-right {\n          right: -90px;\n          z-index: 0;\n        }\n\n        .arco-icon {\n          color: #c9cdd4;\n          font-size: 30px;\n        }\n      }\n    }\n  }\n}\n\n@media screen and (min-width: 800px) {\n  .company-info-container {\n    min-width: 1496px;\n  }\n}\n\n@media screen and (max-width: 800px) {\n  .company-info-container {\n    .banner {\n      width: 100%;\n      flex-direction: column;\n      padding: 12px 16px 0;\n\n      .left {\n        width: 100%;\n\n        .title {\n          font-size: 18px;\n          line-height: 25px;\n          text-align: center;\n          margin-bottom: 16px;\n        }\n\n        .mobile-img {\n          display: block;\n          width: 100%;\n          margin-bottom: 16px;\n        }\n      }\n\n      .fan-row,\n      .right {\n        display: none;\n      }\n    }\n\n    .service-area {\n      margin-top: 40px;\n      width: 100%;\n\n      .title {\n        font-size: 18px;\n        line-height: 25px;\n      }\n\n      .area-list {\n        flex-wrap: wrap;\n        justify-content: center;\n        margin-top: 0px;\n\n        .area-item {\n          width: 100px;\n          flex: unset;\n          margin-top: 20px;\n\n          .num {\n            font-size: 20px;\n            line-height: 27px;\n          }\n\n          .desc {\n            font-size: 12px;\n            line-height: 17px;\n          }\n\n          &::after {\n            height: 20px;\n            top: 15px;\n          }\n\n          &:nth-child(3),\n          &:nth-child(5) {\n            &::after {\n              display: none;\n            }\n          }\n        }\n      }\n\n      .map {\n        padding: 0 16px 40px 16px;\n        margin-top: 24px;\n\n        img {\n          width: 100%;\n          height: auto;\n        }\n\n        .legend {\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: auto;\n          width: 85px;\n          height: 30px;\n          padding: 8px 9px;\n          display: flex;\n          justify-content: space-between;\n          box-sizing: border-box;\n\n          .legend-item {\n            margin: 0;\n            font-size: 12px;\n            line-height: 12px;\n            padding-left: 16px;\n            white-space: nowrap;\n\n            &::before {\n              top: 0px;\n            }\n          }\n        }\n      }\n    }\n\n    .core-team {\n      width: 100%;\n      margin-top: 32px;\n      overflow: hidden;\n\n      .title {\n        font-size: 18px;\n        line-height: 25px;\n      }\n\n      .core-team-tabs {\n        width: 100%;\n        margin-top: 20px;\n        overflow-x: auto;\n        justify-content: unset;\n        gap: 12px;\n        padding: 0 12px;\n        box-sizing: border-box;\n\n        &::-webkit-scrollbar {\n          display: none;\n        }\n\n        .core-team-tab {\n          padding: 6px 12px;\n          font-size: 14px;\n          line-height: 28px;\n          border-radius: 6px;\n        }\n      }\n\n      .core-team-swiper {\n        width: 100%;\n        height: 530px;\n        padding: 0 16px;\n        margin-top: 24px;\n        box-sizing: border-box;\n        margin-bottom: 24px;\n\n        .core-team-swiper-item {\n          border: 0;\n          padding: 0;\n          border-radius: 0;\n          flex-direction: column;\n          gap: 0;\n\n          .left {\n            width: 100%;\n            height: 220px;\n          }\n\n          .right {\n            .team-name {\n              display: none;\n            }\n\n            .team-desc {\n              font-size: 14px;\n              line-height: 24px;\n              margin-top: 20px;\n            }\n\n            .map-img {\n              display: block;\n              position: unset;\n              width: 200px;\n              margin: 10px auto;\n            }\n          }\n        }\n\n        :deep(.arco-carousel-arrow) {\n          display: none !important;\n        }\n      }\n    }\n  }\n}\n</style>\n<style lang=\"less\">\n@media screen and (min-width: 800px) {\n  .in-company-info {\n    .header-menu {\n      min-width: 1496px !important;\n    }\n\n    .footer-banner {\n      min-width: 1496px !important;\n    }\n  }\n}\n</style>\n"],"names":["_imports_0","useSeoHead","currentTeam","ref","handleChangeTeamTab","i","onMounted","onUnmounted"],"mappings":"imBAAA,MAAeA,EAAA,GAAA,IAAA,IAAA,mBAAA,YAAA,GAAA,EAAA,ytLCgGfC,IAEA,MAAAC,EAAAC,EAAA,CAAA,EAEAC,EAAAC,GAAA,CACEH,EAAA,MAAAG,EAAA,CAAwB,EAG1B,OAAAC,EAAA,IAAA,CACE,SAAA,KAAA,UAAA,IAAA,iBAAA,CAA6C,CAAA,EAG/CC,EAAA,IAAA,CACE,SAAA,KAAA,UAAA,OAAA,iBAAA,CAAgD,CAAA"}