{"version":3,"file":"_id_.544563ec.js","sources":["../../../../pages/showcase/[id].vue"],"sourcesContent":["<template>\n  <div class=\"showcase-container\">\n    <FilledBanner title=\"精选客户实践案例\" subtitle=\"了解全球同行如何使用DG.hire成功管理海外团队\"\n      bg-image=\"https://video.reta-inc.com/image/default/3373C26E46E247459AB89225F64D0C7E-6-2.jpg\" />\n    <div class=\"content\">\n      <div class=\"tabs\">\n        <NuxtLink v-for=\"(tab, i) in showcaseList\" :key=\"tab.tabName\" class=\"item-tab\"\n          :class=\"{ active: current === tab.routeName }\" :href=\"`/showcase/${tab.routeName}`\"\n          @click=\"current = tab.routeName\">\n          {{ tab.tabName }}\n        </NuxtLink>\n      </div>\n      <div v-for=\"(showcase, i) in showcaseList\" :key=\"showcase.tabName\" v-show=\"current === showcase.routeName\"\n        class=\"tab-content\">\n        <h3 class=\"title\">{{ showcase.title }}</h3>\n        <figure class=\"figure\">\n          <div class=\"figure-img\" :style=\"{ backgroundImage: `url(${showcase.img})` }\"></div>\n          <div>\n            <figcaption>客户故事</figcaption>\n            <div class=\"story-desc\">{{ showcase.storyDesc }}</div>\n          </div>\n        </figure>\n        <div v-if=\"showcase.solution\" class=\"solution\">\n          <div class=\"solution-title\">& 解决方案</div>\n          <div class=\"solution-content\">{{ showcase.solution }}</div>\n        </div>\n        <div class=\"sub-content\" :style=\"{ marginTop: showcase.solution ? '120px' : '80px' }\">\n          <div class=\"sub-title\">他们喜欢使用哪些功能？</div>\n          <div class=\"fun-list\">\n            <div v-for=\"(fun, i) in showcase.funList\" :key=\"i\" class=\"fun-item\">\n              <div class=\"nav\">\n                <div class=\"fun-title\">{{ fun.funTitle }}</div>\n                <a-rate class=\"fun-star\" :default-value=\"fun.star\" readonly />\n              </div>\n              <ul class=\"fun-content\">\n                <li v-for=\"fc in fun.funDescList\" :key=\"fc\" class=\"fc\">{{ fc }}</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport showcaseList from '@/assets/contents/showcase.json';\nimport { onMounted } from 'vue';\nconst moduleName = useState('module-name');\nmoduleName.value = 'showcase';\n\nconst current = ref('new-energy');\nconst route = useRoute();\n\nonMounted(() => {\n  current.value = route.params.id as string;\n});\n\nuseSeoHead();\n</script>\n\n<style lang=\"less\" scoped>\n.showcase-container {\n  padding-bottom: 120px;\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    margin: 0 auto;\n    width: 1280px;\n    padding: 0 32px;\n\n    .tabs {\n      width: 100%;\n      height: 120px;\n      padding: 0 226px;\n      box-sizing: border-box;\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: space-between;\n      margin-top: -40px;\n\n      .item-tab {\n        width: 162px;\n        height: 60px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 12px;\n        font-weight: 400;\n        font-size: 20px;\n        line-height: 28px;\n        color: #4e5969;\n        cursor: pointer;\n        text-decoration: none;\n\n        &.active {\n          background-color: #fff;\n          background: rgba(22, 93, 255, 0.1);\n          font-weight: 500;\n          color: #386aff;\n        }\n\n        &:hover {\n          color: #386aff;\n        }\n      }\n    }\n\n    .tab-content {\n      .title {\n        font-weight: 600;\n        font-size: 40px;\n        line-height: 56px;\n        color: #1d2129;\n        margin: 60px 0 0 0;\n        padding-bottom: 24px;\n        border-bottom: 1px solid #e5e7eb;\n      }\n\n      .figure {\n        margin: 48px 0 0;\n        display: flex;\n        gap: 80px;\n\n        .figure-img {\n          width: 560px;\n          height: 340px;\n          background-repeat: no-repeat;\n          background-size: 560px 340px;\n          flex-shrink: 0;\n          border-radius: 12px;\n        }\n\n        figcaption {\n          font-weight: 500;\n          font-size: 26px;\n          line-height: 36px;\n          color: #1d2129;\n          margin-bottom: 40px;\n        }\n\n        .story-desc {\n          font-weight: 400;\n          font-size: 18px;\n          line-height: 36px;\n          color: #4e5969;\n        }\n      }\n\n      .solution {\n        margin-top: 80px;\n        padding: 32px 40px;\n        background: url(https://video.reta-inc.com/image/default/B1BC1B6BD7A243F28BBDEC7C3EBEE18B-6-2.png) no-repeat center center/100% auto;\n        border-radius: 12px;\n\n        .solution-title {\n          font-weight: 500;\n          font-size: 26px;\n          line-height: 36px;\n          color: #1d2129;\n          margin-bottom: 32px;\n        }\n\n        .solution-content {\n          font-weight: 400;\n          font-size: 18px;\n          line-height: 36px;\n          color: #4e5969;\n        }\n      }\n    }\n\n    .sub-content {\n      .sub-title {\n        font-weight: 500;\n        font-size: 26px;\n        line-height: 36px;\n        color: #000000;\n        padding-left: 50px;\n        background: url('@/assets/icons/sub-title.svg') no-repeat left center/30px 30px;\n        margin-bottom: 40px;\n      }\n\n      .fun-list {\n        display: flex;\n        gap: 80px;\n\n        .fun-item {\n          flex: 1;\n          background: #f0f5ff;\n          border-radius: 12px;\n\n          .nav {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 19px 32px;\n\n            .fun-title {\n              font-weight: 500;\n              font-size: 24px;\n              line-height: 34px;\n              color: #1d2129;\n            }\n          }\n\n          .fun-content {\n            background: #ffffff;\n            border: 1px solid #165dff;\n            border-radius: 12px;\n            padding: 32px 20px 32px 40px;\n            height: 136px;\n            box-sizing: border-box;\n            margin: 0;\n\n            .fc {\n              font-weight: 400;\n              font-size: 20px;\n              line-height: 36px;\n              color: #1d2129;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n@media screen and (max-width: 800px) {\n  .showcase-container {\n    padding-bottom: 40px;\n\n    .content {\n      width: 100%;\n      padding: 0;\n\n      .tabs {\n        margin-top: 0;\n        padding: 0;\n        height: 56px;\n        justify-content: space-around;\n        box-shadow: 0px 4px 4px rgba(135, 172, 255, 0.1);\n        position: sticky;\n        top: 70px;\n        border-radius: 0;\n\n        .item-tab {\n          width: 81px;\n          height: 40px;\n          border-radius: 6px;\n          font-size: 14px;\n          text-decoration: none;\n        }\n      }\n\n      .tab-content {\n        padding: 0 16px;\n        box-sizing: border-box;\n\n        .title {\n          font-size: 18px;\n          line-height: 25px;\n          margin-top: 24px;\n          padding-bottom: 16px;\n        }\n\n        .figure {\n          flex-wrap: wrap;\n          margin-top: 16px;\n          gap: 24px;\n\n          .figure-img {\n            width: 100%;\n            height: auto;\n            background-size: 100% 100%;\n            aspect-ratio: 343 / 198;\n          }\n\n          figcaption {\n            margin-bottom: 12px;\n            font-size: 16px;\n            line-height: 22px;\n          }\n\n          .story-desc {\n            font-size: 13px;\n            line-height: 24px;\n          }\n        }\n\n        .solution {\n          margin-top: 24px;\n          padding: 16px 16px;\n          background-size: cover;\n\n          .solution-title {\n            font-size: 16px;\n            line-height: 22px;\n            margin-bottom: 12px;\n          }\n\n          .solution-content {\n            font-size: 13px;\n            line-height: 24px;\n          }\n        }\n\n        .sub-content {\n          margin-top: 32px !important;\n\n          .sub-title {\n            font-size: 16px;\n            line-height: 22px;\n            background-size: 16px 16px;\n            padding-left: 28px;\n            margin-bottom: 20px;\n          }\n\n          .fun-list {\n            flex-direction: column;\n            gap: 20px;\n\n            .fun-item {\n              .nav {\n                padding: 12px 16px;\n\n                .fun-title {\n                  font-size: 14px;\n                  line-height: 20px;\n                }\n\n                .fun-star {\n                  font-size: 16px;\n                }\n              }\n\n              .fun-content {\n                padding: 12px 7px 12px 34px;\n                height: 100%;\n                // height: 80px;\n\n                .fc {\n                  font-size: 14px;\n                  line-height: 28px;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["moduleName","useState","current","ref","route","useRoute","onMounted","useSeoHead"],"mappings":"60TAgDA,MAAAA,EAAAC,EAAA,aAAA,EACAD,EAAA,MAAA,WAEA,MAAAE,EAAAC,EAAA,YAAA,EACAC,EAAAC,IAEA,OAAAC,EAAA,IAAA,CACEJ,EAAA,MAAAE,EAAA,OAAA,EAA6B,CAAA,EAG/BG"}