{"version":3,"file":"CustomizePage.abb77661.js","sources":["../../src/display/views/customize/components/GameCarousel.vue","../../src/display/views/customize/CustomizePage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useQidianService } from '@/composable'\n  import { BtnType, ColorType } from '@/define'\n  import { getAssetsFile } from '@/utils'\n  import BaseBtn from '@components/btn/BaseBtn.vue'\n  import CarouselCase from '@components/carousel/CarouselCase.vue'\n\n  const unitFilter = (value: string) => {\n    const lastStr = value.charAt(value.length - 1)\n    return isNaN(Number(lastStr)) ? lastStr : ''\n  }\n\n  const tabList = [\n    {\n      key: 1,\n      checkImg: getAssetsFile('case/case-game-logo-check_1.png'),\n      noCheckImg: getAssetsFile('case/case-game-logo_1.png'),\n    },\n    {\n      key: 2,\n      checkImg: getAssetsFile('case/case-game-logo-check_2.png'),\n      noCheckImg: getAssetsFile('case/case-game-logo_2.png'),\n    },\n    {\n      key: 3,\n      checkImg: getAssetsFile('case/case-game-logo-check_4.png'),\n      noCheckImg: getAssetsFile('case/case-game-logo_4.png'),\n    },\n    {\n      key: 4,\n      checkImg: getAssetsFile('case/case-game-logo-check_3.png'),\n      noCheckImg: getAssetsFile('case/case-game-logo_3.png'),\n    },\n    {\n      key: 5,\n      checkImg: getAssetsFile('case/case-game-logo-check_5.png'),\n      noCheckImg: getAssetsFile('case/case-game-logo_5.png'),\n    },\n  ]\n  const slideList = [\n    {\n      logo: [getAssetsFile('case/case-game-logo_1.png')],\n      brandName: 'A1零食研究所',\n      title: '糕颜值挑战',\n      tag: ['粉丝活跃'],\n      content: '爱逸三八节档在社群发布跳跃类互动小游戏，游戏中植入糕点等产品元素，节点营销氛围浓厚',\n      phoneImg: getAssetsFile('customize/game-case-banner_1.jpg'),\n      data: [\n        {\n          total: '72.8w',\n          name: '新用户回访率',\n          precision: 1,\n        },\n        {\n          total: '52.6%',\n          name: '新增阅读转化',\n          precision: 1,\n        },\n        {\n          total: '29.7%',\n          name: '分享率',\n          precision: 1,\n        },\n      ],\n    },\n    {\n      logo: [getAssetsFile('case/case-game-logo_2.png'), getAssetsFile('case/case-game-logo_4.png')],\n      brandName: '鸿星尔克 ✕ 盼盼',\n      title: '鸿运上上签&好运上上签',\n      tag: ['品牌传播', '裂变引流'],\n      content:\n        '鸿星尔克&昐盼在春节期间进行的跨界联盟互动(抽签)，将两个品牌的流量进行置换，成功实现异业品牌间的奖券互派及核销转化',\n      phoneImg: getAssetsFile('customize/game-case-banner_2.jpg'),\n      data: [\n        {\n          total: '55.2w',\n          name: '裂变新增流量',\n          precision: 1,\n        },\n        {\n          total: '43.6%',\n          name: '新增阅读转化',\n          precision: 1,\n        },\n        {\n          total: '47.2%',\n          name: '会员券核销率',\n          precision: 1,\n        },\n      ],\n    },\n    {\n      logo: [getAssetsFile('case/case-game-logo_4.png'), getAssetsFile('case/case-game-logo_2.png')],\n      brandName: '盼盼✕ 鸿星尔克',\n      title: '好运上上签&鸿运上上签',\n      tag: ['品牌传播', '裂变引流'],\n      content:\n        '鸿星尔克&昐盼在春节期间进行的跨界联盟互动(抽签)，将两个品牌的流量进行置换，成功实现异业品牌间的奖券互派及核销转化',\n      phoneImg: getAssetsFile('customize/game-case-banner_3.jpg'),\n      data: [\n        {\n          total: '55.2w',\n          name: '裂变新增流量',\n          precision: 1,\n        },\n        {\n          total: '43.6%',\n          name: '新增阅读转化',\n          precision: 1,\n        },\n        {\n          total: '47.2%',\n          name: '会员券核销率',\n          precision: 1,\n        },\n      ],\n    },\n    {\n      logo: [getAssetsFile('case/case-game-logo_4.png')],\n      brandName: '安井',\n      title: '早餐向前冲',\n      tag: ['会员新增'],\n      content: '搭积木类游戏，结合安井各系列产品，用户在沉浸游戏的同时，对品牌产品快速形成记忆',\n      phoneImg: getAssetsFile('customize/game-case-banner_4.jpg'),\n      data: [\n        {\n          total: '49.2%',\n          name: '裂变新增流量',\n          precision: 1,\n        },\n        {\n          total: '70.4%',\n          name: '粉丝活跃增长',\n          precision: 1,\n        },\n        {\n          total: '32.5%',\n          name: '首购付款率',\n          precision: 1,\n        },\n      ],\n    },\n    {\n      logo: [getAssetsFile('case/case-game-logo_5.png')],\n      brandName: '韩菲诗',\n      title: '跨越山海宠爱你',\n      tag: ['会员新增'],\n      content: '韩菲诗情人节档在公众号渠道发布的跳跃类互动小游戏，将企业IP植入唯美轻松的游戏',\n      phoneImg: getAssetsFile('customize/game-case-banner_5.jpg'),\n      data: [\n        {\n          total: '55.2%',\n          name: '新用户回访率',\n          precision: 1,\n        },\n        {\n          total: '83.4%',\n          name: '会员参与激活率',\n          precision: 1,\n        },\n        {\n          total: '60%',\n          name: '入会率',\n          precision: 0,\n        },\n      ],\n    },\n  ]\n\n  const { onServiceClick, loading } = useQidianService()\n</script>\n\n<template>\n  <carousel-case :tab-list=\"tabList\" v-slot=\"slotProps\" :height=\"680\">\n    <div class=\"game-carousel\">\n      <div class=\"left-box\">\n        <div class=\"header\">\n          <div v-for=\"logo in slideList[slotProps.index]?.logo\" class=\"header-logo\" :key=\"logo\">\n            <img :src=\"logo\" />\n          </div>\n          <span class=\"header-name\">{{ slideList[slotProps.index]?.brandName }}</span>\n        </div>\n        <div class=\"main\">\n          <div class=\"main-top\">\n            <span class=\"main-title\">{{ slideList[slotProps.index]?.title }}</span>\n            <span v-for=\"tag in slideList[slotProps.index]?.tag\" :key=\"tag\" class=\"main-tag\">{{ tag }}</span>\n          </div>\n          <div class=\"main-middle\">\n            <div class=\"main-content\">{{ slideList[slotProps.index]?.content }}</div>\n          </div>\n          <div class=\"main-data\">\n            <div v-for=\"item in slideList[slotProps.index]?.data\" :key=\"item.name\" class=\"data-item\">\n              <div class=\"item-num\">\n                <a-statistic\n                  class=\"num\"\n                  :value=\"Number(item.total.substring(0, item.total.length - 1))\"\n                  :precision=\"item.precision\"\n                  :value-from=\"0\"\n                  :start=\"true\"\n                  animation\n                ></a-statistic>\n                <span class=\"unit\">{{ unitFilter(item.total) }}</span>\n              </div>\n              <div class=\"item-name\">{{ item.name }}</div>\n            </div>\n          </div>\n          <div class=\"btn\">\n            <base-btn\n              :loading=\"loading\"\n              id=\"dxhd_customer_service\"\n              :type=\"BtnType.SHOW\"\n              :color=\"ColorType.PRIMARY\"\n              @click=\"onServiceClick\"\n              >立即咨询</base-btn\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"right-box\">\n        <img src=\"@images/case/phone-bg.png\" class=\"phone\" />\n        <div class=\"content\">\n          <img :src=\"slideList[slotProps.index]?.phoneImg\" />\n        </div>\n      </div>\n    </div>\n  </carousel-case>\n</template>\n\n<style lang=\"less\" scoped>\n  :deep(.carousel-item) {\n    align-items: center;\n  }\n\n  :deep(.tab-box) {\n    margin-bottom: 40px !important;\n  }\n\n  :deep(.carousel-indicator) {\n    margin-top: 0;\n    margin-left: 30px;\n  }\n\n  .game-carousel {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    width: 100%;\n    height: 565px;\n    margin: 0 30px;\n    padding-top: 60px;\n    padding-left: 100px;\n    border-radius: 10px;\n    box-shadow: 0 8px 20px 0 rgb(161 178 219 / 30%);\n\n    .left-box {\n      width: 540px;\n\n      .header {\n        display: flex;\n        align-items: center;\n        margin-bottom: 33px;\n\n        .header-logo {\n          width: 40px;\n          height: 40px;\n          margin-right: 12px;\n          overflow: hidden;\n          border-radius: 4px;\n          box-shadow: 0 0 30px 0 rgb(161 178 219 / 30%);\n\n          img {\n            width: 100%;\n            height: 100%;\n          }\n        }\n\n        .header-name {\n          color: @black;\n          font-weight: 500;\n          font-size: 26px;\n          font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n          line-height: 37px;\n        }\n      }\n\n      .main {\n        .main-top {\n          display: flex;\n          align-items: center;\n          margin-bottom: 13px;\n\n          .main-title {\n            margin-right: 8px;\n            color: @black;\n            font-weight: 600;\n            font-size: 30px;\n            font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n            line-height: 42px;\n          }\n\n          .main-tag {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 72px;\n            height: 28px;\n            margin-right: 8px;\n            color: @primary-color;\n            font-size: 14px;\n            font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n            background: #e8f0fc;\n            border-radius: 2px;\n          }\n        }\n\n        .main-middle {\n          margin-bottom: 40px;\n          color: #3d485d;\n          font-size: 16px;\n          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n          line-height: 28px;\n        }\n\n        .main-data {\n          display: flex;\n          margin-bottom: 40px;\n\n          .data-item {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            width: 160px;\n            height: 121px;\n            margin-right: 30px;\n            background: #e8f0fc;\n            border-radius: 5px;\n\n            .item-num {\n              display: flex;\n              align-items: baseline;\n              color: @primary-color;\n\n              .num {\n                margin-right: 4px;\n\n                :deep(.arco-statistic-value) {\n                  color: @primary-color;\n                  font-weight: 500;\n                  font-size: 40px;\n                  font-family: Oswald-Medium, Oswald, sans-serif;\n                  line-height: 60px;\n\n                  .arco-statistic-value-integer,\n                  .arco-statistic-value-decimal {\n                    font-size: 40px;\n                  }\n                }\n              }\n\n              .unit {\n                font-size: 16px;\n              }\n            }\n\n            &:last-child {\n              margin-right: 0;\n            }\n          }\n        }\n      }\n    }\n\n    .right-box {\n      position: absolute;\n      top: -43px;\n      right: 120px;\n      z-index: 10;\n      width: 320px;\n      height: 648px;\n\n      img {\n        width: 100%;\n        height: 100%;\n      }\n\n      .phone {\n        position: absolute;\n        z-index: 10;\n      }\n\n      .content {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        z-index: 1;\n        width: 286px;\n        height: 618px;\n        overflow: hidden;\n        transform: translate(-50%, -50%);\n\n        img {\n          width: 100%;\n          height: 100%;\n        }\n\n        .qrcode {\n          position: absolute;\n          bottom: 0;\n          z-index: 10;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100%;\n          height: 0;\n          overflow: hidden;\n          backdrop-filter: blur(10px);\n          transition: all ease 0.5s;\n\n          img {\n            width: 100px;\n            height: 100px;\n          }\n        }\n      }\n\n      &:hover {\n        .qrcode {\n          height: 153px;\n        }\n      }\n    }\n  }\n</style>\n","<script lang=\"ts\" setup>\n  import { pageReport, useQidianService } from '@/composable'\n  import { showViewAutoPlay } from '@/composable/swiper'\n  import { BtnType, ColorType } from '@/define'\n  import { getAssetsFile } from '@/utils'\n  import BaseBtn from '@components/btn/BaseBtn.vue'\n  import SvgIcon from '@components/svgIcon/SvgIcon.vue'\n  import { useHead } from '@vueuse/head'\n  import SwiperCore, { Autoplay } from 'swiper'\n  import 'swiper/css'\n  import { Swiper as SwiperClass } from 'swiper/types'\n  import { Swiper, SwiperSlide } from 'swiper/vue'\n  import { computed, ref } from 'vue'\n  import GameCarousel from './components/GameCarousel.vue'\n\n  SwiperCore.use([Autoplay])\n\n  useHead({\n    title: '内容引擎_定制化的活动模板，轻松解决企业营销难题',\n    meta: [\n      {\n        name: 'description',\n        content:\n          '【内容引擎_定制化的活动模板，轻松解决企业营销难题】是内容引擎为您精心挑选的关于【定制化的活动模板】的相关模板资源信息，共涉及相关场景的模板资源推荐。内容引擎是一个简单高效的游戏化营销活动创建平台，提供大量免费设计素材和游戏化模板、H5、小程序，可为您提供更高效的营销活动创建，三分钟就能做出一场高转化的活动。在线即可完成制作，轻松解决企业营销问题。',\n      },\n      {\n        name: 'keywords',\n        content: '营销,游戏化,互动,H5,活动,低成本,获客,引流,裂变,留存,转化,定制',\n      },\n    ],\n  })\n  const items = ref([\n    { message: '在线咨询', messageone: '对接项目经理梳理需求明确方案', background: 'customize/ring1.png' },\n    { message: '签订合同', messageone: '签订项目方案合同', background: 'customize/ring2.png' },\n    { message: '设计出样确认', messageone: '官方设计对接服务品牌保障', background: 'customize/ring3.png' },\n    { message: '活动开发', messageone: '实际活动项目开发落地交付', background: 'customize/ring4.png' },\n    { message: '活动上线', messageone: '售后客服提供专业保障服务', background: 'customize/ring5.png' },\n  ])\n  const ranges = [\n    {\n      message: '支持答题、投票、抽奖、红包、集字助力、许愿树、孔明灯、节日头像、猜灯谜、新年签、贺卡等100多种活动玩法',\n      image: 'customize/range1.png',\n    },\n    { message: '支持会场签到、抽奖、暖场互动、趣味游戏等多种主流玩法', image: 'customize/range2.png' },\n    { message: '承办企业品牌活动、声量传播等各类整合营销活动', image: 'customize/range3.png' },\n  ]\n  const prev = () => {\n    if (currentIndex.value <= 0) {\n      currentIndex.value = 2\n    } else {\n      currentIndex.value--\n    }\n    swiperObj.value?.slideTo(currentIndex.value)\n  }\n  const next = () => {\n    if (currentIndex.value >= 2) {\n      currentIndex.value = 0\n    } else {\n      currentIndex.value++\n    }\n    swiperObj.value?.slideTo(currentIndex.value)\n  }\n\n  const currentIndex = ref(0)\n  const choose = (index: number) => {\n    swiperObj.value?.slideTo(index)\n  }\n  const onSlideChange = (swiper: SwiperClass) => {\n    currentIndex.value = swiper.activeIndex\n  }\n  const swiperObj = ref<SwiperClass>()\n  const setControllerSwiper = (swiper: SwiperClass) => {\n    swiperObj.value = swiper\n  }\n  const tabList = [\n    {\n      key: 1,\n      name: '线上活动营销',\n      noCheckImg: getAssetsFile('root/game-case-nocheck_1.png'),\n      checkImg: getAssetsFile('root/game-case-check_1.png'),\n    },\n    {\n      key: 2,\n      name: '现场大屏活动',\n      noCheckImg: getAssetsFile('root/game-case-nocheck_2.png'),\n      checkImg: getAssetsFile('root/game-case-check_2.png'),\n    },\n    {\n      key: 3,\n      name: '企业品宣',\n      noCheckImg: getAssetsFile('root/game-case-nocheck_3.png'),\n      checkImg: getAssetsFile('root/game-case-check_3.png'),\n    },\n  ]\n  const tabLength = computed(() => tabList.length)\n\n  const { onServiceClick, loading } = useQidianService()\n\n  const swiperRef = ref<HTMLElement | null>(null)\n  showViewAutoPlay(swiperRef, swiperObj)\n  pageReport({\n    page: 'pc_customized',\n  })\n</script>\n\n<template>\n  <div class=\"header\">\n    <div class=\"header-content\">\n      <div class=\"header-content-one\">\n        <div class=\"header-content-one-fontone\">游戏化互动营销 定制服务</div>\n        <div class=\"header-content-one-fonttwo\">为品牌客户打造全场景式游戏化营销解决服务</div>\n        <div style=\"margin-top: 80px; margin-left: 40px\">\n          <base-btn\n            :loading=\"loading\"\n            id=\"dxhd_customer_service\"\n            :type=\"BtnType.SHOW\"\n            :color=\"ColorType.PRIMARY\"\n            @click=\"onServiceClick\"\n            >立即咨询</base-btn\n          >\n        </div>\n      </div>\n      <video src=\"@/assets/videos/customize/customize-header.webm\" :loop=\"true\" autoplay muted></video>\n    </div>\n  </div>\n  <div class=\"case\">\n    <div class=\"case-body\">\n      <div class=\"case-body-title\">线上互动游戏案例</div>\n      <game-carousel></game-carousel>\n    </div>\n  </div>\n  <div class=\"server-range\">\n    <div class=\"server-range-child\">\n      <div class=\"server-range-title\">定制服务范围</div>\n      <div class=\"tab-box\">\n        <template v-for=\"(item, index) in tabList\" :key=\"item.key\">\n          <div class=\"tab-point\" :class=\"{ active: currentIndex === index }\" @click=\"choose(index)\">\n            <img class=\"tab-icon\" :src=\"currentIndex === index ? item.checkImg : item.noCheckImg\" />\n            <span>{{ item.name }}</span>\n            <div class=\"icon-down\" v-if=\"currentIndex === index\"></div>\n          </div>\n        </template>\n      </div>\n      <div ref=\"swiperRef\" class=\"carousel-box\">\n        <div class=\"server-range-round\" @click=\"prev\">\n          <svg-icon icon-name=\"prev\" icon-size=\"14\" :color=\"currentIndex === 0 ? '#3D485D' : '#2B84FF'\"></svg-icon>\n        </div>\n        <swiper\n          :slidesPerView=\"1\"\n          :centeredSlides=\"true\"\n          :allowTouchMove=\"false\"\n          :autoplay=\"{ pauseOnMouseEnter: true, disableOnInteraction: false, delay: 10000 }\"\n          :speed=\"600\"\n          @swiper=\"setControllerSwiper\"\n          @slideChange=\"onSlideChange\"\n          class=\"server-range-photo\"\n        >\n          <swiper-slide v-for=\"range in ranges\" :key=\"range.message\">\n            <div class=\"server-range-pag\">\n              <div class=\"server-range-left\">\n                <div class=\"server-range-pagone\">定制服务范围</div>\n                <div class=\"server-rang-divier\"></div>\n                <div class=\"server-range-pagtwo\">\n                  {{ range.message }}\n                </div>\n              </div>\n              <div class=\"server-range-right\">\n                <img :src=\"getAssetsFile(range.image)\" />\n              </div>\n            </div>\n          </swiper-slide>\n        </swiper>\n        <!-- <a-carousel class=\"server-range-photo\" indicator-type=\"never\" show-arrow=\"never\" v-model:current=\"currentIndex\">\n          <a-carousel-item v-for=\"range in ranges\" :key=\"range.message\">\n            <div class=\"server-range-pag\">\n              <div class=\"server-range-left\">\n                <div class=\"server-range-pagone\">定制服务范围</div>\n                <div class=\"server-rang-divier\"></div>\n                <div class=\"server-range-pagtwo\">\n                  {{ range.message }}\n                </div>\n              </div>\n              <div class=\"server-range-right\">\n                <img :src=\"getAssetsFile(range.image)\" />\n              </div>\n            </div>\n          </a-carousel-item>\n        </a-carousel> -->\n        <div class=\"server-range-round\" style=\"left: 1620px\" @click=\"next\">\n          <svg-icon\n            icon-name=\"next\"\n            icon-size=\"14\"\n            :color=\"currentIndex === tabLength - 1 ? '#3D485D' : '#2B84FF'\"\n          ></svg-icon>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"server-flow\">\n    <div class=\"server-flow-title\">定制服务流程</div>\n    <div class=\"server-flow-boxs\">\n      <div class=\"box-bg\" v-for=\"(item, index) in items\" :key=\"item.message\">\n        <div class=\"box\" :style=\"{ 'background-image': `url('${getAssetsFile(item.background)}')` }\">\n          <div class=\"ball-one\">{{ index + 1 }}</div>\n          <div class=\"box-content\">\n            <div class=\"box-one\">{{ item.message }}</div>\n            <div class=\"box-two\">{{ item.messageone }}</div>\n          </div>\n          <div class=\"box-arrow\">\n            <img class=\"row\" style=\"left: 493px\" src=\"@images/customize/server-flow-arrow.png\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"partner\">\n    <div class=\"partner-child\">\n      <div class=\"partner-title\">专注整合营销，与500+企业共同创造价值</div>\n      <div style=\"text-align: center\"><img src=\"@images/customize/logos.png\" alt=\"\" /></div>\n    </div>\n  </div>\n  <div class=\"marketing-box\">\n    <div class=\"marketing-box-main\">\n      <div class=\"title\">联系我们，获取专属营销定制服务</div>\n      <div class=\"btn\">\n        <base-btn\n          id=\"dxhd_customer_service\"\n          :loading=\"loading\"\n          :type=\"BtnType.SHOW\"\n          :color=\"ColorType.WHITE\"\n          :font-size=\"16\"\n          @click=\"onServiceClick\"\n          >联系客服 >></base-btn\n        >\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"less\" scoped>\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 680px;\n    background-image: url('@images/customize/header-background.png');\n    background-repeat: no-repeat;\n    background-size: cover;\n\n    .header-content {\n      display: flex;\n      width: 1440px;\n      height: 100%;\n\n      .header-content-one {\n        display: block;\n        width: 455px;\n        height: 100%;\n\n        .header-content-one-fontone {\n          width: 455px;\n          height: 160px;\n          margin-top: 150px;\n          margin-left: 40px;\n          color: #1d2129;\n          font-weight: bold;\n          font-size: 60px;\n          font-family: AlibabaPuHuiTiB, sans-serif;\n          line-height: 80px;\n        }\n\n        .header-content-one-fonttwo {\n          width: 480px;\n          height: 33px;\n          margin-left: 40px;\n          color: #3d485d;\n          font-weight: 400;\n          font-size: 24px;\n          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n          line-height: 80px;\n        }\n      }\n\n      video {\n        width: 1003px;\n        height: 596px;\n        margin-top: 44px;\n      }\n    }\n  }\n\n  .case {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    overflow: hidden;\n\n    .case-body {\n      width: 1440px;\n      height: 100%;\n      padding-bottom: 100px;\n\n      .case-body-title {\n        width: 320px;\n        height: 56px;\n        margin: auto;\n        margin-top: 100px;\n        margin-bottom: 60px;\n        color: #1d2129;\n        font-weight: 600;\n        font-size: 40px;\n        font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n        line-height: 56px;\n      }\n\n      .case-body-logos {\n        display: flex;\n        align-items: flex-end;\n        justify-content: space-between;\n        width: 480px;\n        height: 91px;\n        margin: auto;\n\n        .case-body-logo {\n          width: 60px;\n          height: 60px;\n          margin-right: 40px;\n\n          img {\n            width: 60px;\n            height: 60px;\n          }\n        }\n\n        &:nth-child(5) {\n          margin-right: 0;\n        }\n      }\n\n      .case-body-content {\n        position: relative;\n        width: 1440px;\n        height: 648px;\n        margin-top: 50px;\n      }\n    }\n  }\n\n  .server-range {\n    position: relative;\n    width: 100%;\n    height: 1052px;\n    overflow: hidden;\n    background: #3d485d;\n\n    .tab-box {\n      display: flex;\n      width: 1200px;\n      height: 124px;\n      margin-bottom: 95px;\n      border-radius: 10px;\n    }\n\n    .tab-point {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: calc(100% / 3);\n      height: 100%;\n      color: @black;\n      font-weight: 500;\n      font-size: 24px;\n      font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n      background: #fff;\n      cursor: pointer;\n\n      .tab-icon {\n        width: 60px;\n        margin-right: 14px;\n      }\n\n      .icon-down {\n        position: absolute;\n        bottom: -20px;\n        width: 0;\n        height: 0;\n        color: @primary-color;\n        border: 10px solid transparent;\n        border-top-color: white;\n      }\n\n      &:first-child {\n        border-radius: 10px 0 0 10px;\n      }\n\n      &:last-child {\n        border-radius: 0 10px 10px 0;\n      }\n    }\n\n    .active {\n      color: #fff;\n      background: @primary-color;\n\n      .icon-down {\n        border-top-color: @primary-color;\n      }\n    }\n\n    .server-range-child {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 1440px;\n      margin: 0 auto;\n    }\n\n    .carousel-box {\n      display: flex;\n      align-items: center;\n    }\n\n    .server-range-photo {\n      width: 1200px;\n      height: 527px;\n      margin: 0 60px;\n      // margin-top: 95px;\n    }\n\n    .server-range-round {\n      // position: absolute;\n      // top: 659px;\n      // left: 240px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 60px;\n      height: 60px;\n      background: #e8f0fc;\n      border-radius: 50px;\n\n      .left {\n        width: 11px;\n        height: 11px;\n        margin-top: 24px;\n        margin-left: 25px;\n        border: 2px solid #2b84ff;\n        border-top: 0;\n        border-right: 0;\n        transform: rotate(45deg);\n      }\n\n      .right {\n        width: 11px;\n        height: 11px;\n        margin-top: 24px;\n        margin-left: 22px;\n        border: 2px solid #2b84ff;\n        border-bottom: 0;\n        border-left: 0;\n        transform: rotate(45deg);\n      }\n    }\n\n    .server-range-title {\n      width: 240px;\n      height: 56px;\n      margin: auto;\n      margin-top: 100px;\n      margin-bottom: 50px;\n      color: #fff;\n      font-weight: 600;\n      font-size: 40px;\n      font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n      line-height: 56px;\n    }\n\n    .server-range-row {\n      width: 1200px;\n      height: 124px;\n      margin: auto;\n      margin-top: 50px;\n      background: #fff;\n      border-radius: 10px;\n      box-shadow: 0 0 20px 0 #d7e0ed;\n\n      .row-col {\n        position: absolute;\n        top: 48px;\n        left: 164px;\n        display: inline-block;\n        width: 144px;\n        height: 33px;\n        font-weight: 500;\n        font-size: 24px;\n        font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n        line-height: 33px;\n      }\n\n      .col-img {\n        position: absolute;\n        top: 23px;\n        left: 93px;\n        width: 52px;\n        height: 74px;\n      }\n    }\n\n    .server-range-pag {\n      position: relative;\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n      height: 100%;\n      background: #3d485d;\n\n      .server-range-left {\n        margin-top: 70px;\n      }\n\n      .server-range-right {\n        img {\n          width: 620px;\n          height: 527px;\n        }\n      }\n\n      .server-range-pagone {\n        display: inline-block;\n        width: 240px;\n        height: 56px;\n        color: #fff;\n        font-weight: 600;\n        font-size: 40px;\n        font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n        line-height: 56px;\n      }\n\n      .server-range-pagtwo {\n        display: inline-block;\n        width: 520px;\n        height: 96px;\n        color: #d3d3d3;\n        font-weight: 300;\n        font-size: 24px;\n        font-family: PingFangSC-Light, 'PingFang SC', sans-serif;\n        line-height: 48px;\n      }\n\n      .server-rang-divier {\n        width: 36px;\n        height: 6px;\n        margin-top: 24px;\n        margin-bottom: 70px;\n        background: linear-gradient(90deg, #0ce5ed 0%, #2b84ff 100%);\n        border-radius: 4px;\n      }\n    }\n  }\n\n  .server-flow {\n    position: relative;\n    width: 100%;\n    height: 690px;\n    overflow: hidden;\n\n    .server-flow-title {\n      width: 240px;\n      height: 56px;\n      margin: auto;\n      margin-top: 100px;\n      color: #1d2129;\n      font-weight: 600;\n      font-size: 40px;\n      font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n      line-height: 56px;\n    }\n\n    .server-flow-boxs {\n      display: flex;\n      width: 1460px;\n      height: 292px;\n      margin: auto;\n      margin-top: 115px;\n\n      .box {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 292px;\n        height: 292px;\n        background-size: 292px 292px;\n\n        .ball-one {\n          position: absolute;\n          top: -30px;\n          width: 60px;\n          height: 60px;\n          color: #3d485d;\n          font-weight: 600;\n          font-size: 40px;\n          font-family: Oswald-SemiBold, Oswald, sans-serif;\n          line-height: 60px;\n          text-align: center;\n          background: #d5e7ff;\n          border-radius: 50px;\n        }\n\n        .box-one {\n          width: 168px;\n          height: 40px;\n          margin: auto;\n          color: #3d485d;\n          font-weight: 600;\n          font-size: 28px;\n          font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n          line-height: 40px;\n          text-align: center;\n        }\n\n        .box-two {\n          width: 188px;\n          height: 56px;\n          margin: auto;\n          margin-top: 16px;\n          color: #7e97c6;\n          font-weight: 400;\n          font-size: 20px;\n          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n          line-height: 28px;\n          text-align: center;\n        }\n\n        .box-arrow {\n          position: absolute;\n          right: -22px;\n          z-index: 10;\n\n          .row {\n            width: 48px;\n            height: 48px;\n          }\n        }\n      }\n\n      .box-bg {\n        &:nth-child(2n) {\n          .box {\n            .ball-one {\n              top: auto;\n              bottom: -30px;\n            }\n          }\n        }\n\n        &:nth-child(5) {\n          .box {\n            .box-arrow {\n              display: none;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .partner {\n    width: 100%;\n    height: 636px;\n    background: #f7f8fa;\n\n    .partner-child {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      width: 1440px;\n      margin: 0 auto;\n    }\n\n    .partner-title {\n      padding-top: 100px;\n      color: #1d2129;\n      font-weight: 600;\n      font-size: 40px;\n      font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n      line-height: 56px;\n    }\n\n    img {\n      width: 1446px;\n      height: 320px;\n      margin: auto;\n      margin-top: 60px;\n    }\n  }\n\n  .marketing-box {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 310px;\n    background-image: url('@images/root/marketing-bg.jpg');\n    background-size: cover;\n\n    .marketing-box-main {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n\n      .title {\n        color: #fff;\n        font-weight: 500;\n        font-size: 40px;\n        font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n        line-height: 56px;\n      }\n\n      .btn {\n        margin-top: 24px;\n      }\n    }\n  }\n\n  .none {\n    display: none;\n  }\n\n  .font-color {\n    color: #fff;\n  }\n\n  .backgrond {\n    background: #2b84ff;\n  }\n</style>\n"],"names":["unitFilter","value","lastStr","tabList","getAssetsFile","slideList","onServiceClick","loading","useQidianService","SwiperCore","Autoplay","useHead","items","ref","ranges","prev","currentIndex","_a","swiperObj","next","choose","index","onSlideChange","swiper","setControllerSwiper","tabLength","computed","swiperRef","showViewAutoPlay","pageReport"],"mappings":"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"}