{"version":3,"file":"HomePage.4f392ade.js","sources":["../../src/display/views/root/components/CompanyTalk.vue","../../src/display/views/root/components/CoreFunction.vue","../../src/display/views/root/components/GameCase.vue","../../src/display/views/root/HomePage.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { getAssetsFile } from '@/utils'\n  import SvgIcon from '@components/svgIcon/SvgIcon.vue'\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\n  const swiperList = [\n    {\n      key: 1,\n      logo: getAssetsFile('root/company-talk-logo_1.png'),\n      name: '鸿星尔克',\n      banner: getAssetsFile('root/company-talk-banner_1.png'),\n      content:\n        '区别于传统红包、转盘等强迫分享方式，将企业营销需求皃整融入游戏化解决方案，激励用户以炫耀性分享或组队闯关对抗，不再把获得实物奖励作为分享的唯一动力。',\n    },\n    {\n      key: 2,\n      logo: getAssetsFile('root/company-talk-logo_2.png'),\n      name: '科勒',\n      banner: getAssetsFile('root/company-talk-banner_2.png'),\n      content:\n        '5年前要是有人问我们该怎么做营销?我们会回答渠道+内容。但现在，内容引擎交出了更好的答案，那便是用户+内容。驱动用户、激励用户，让用户成为我们的“玩家”，这样的营销模式非常适用于当下的新零售企业。',\n    },\n    {\n      key: 3,\n      logo: getAssetsFile('root/company-talk-logo_3.png'),\n      name: '恒安集团',\n      banner: getAssetsFile('root/company-talk-banner_3.png'),\n      content: '刚刚接触游戏化营销的人可能还不太了解它的魔力，我们多次尝试后认为它有可能为企业营销带来新的变革。',\n    },\n    {\n      key: 4,\n      logo: getAssetsFile('root/company-talk-logo_4.png'),\n      name: '韩后',\n      banner: getAssetsFile('root/company-talk-banner_4.png'),\n      content:\n        '内容引擎所供给游戏化营销模式，改变了企业与用户之间的关系。这不再是过往的单方面投放与输出，而是企业与用户互利互惠，为足够内卷的美妆行业带来了新的生机。',\n    },\n    {\n      key: 5,\n      logo: getAssetsFile('root/company-talk-logo_5.png'),\n      name: '爱逸食品',\n      banner: getAssetsFile('root/company-talk-banner_5.png'),\n      content: '通过对用户心理的拆解，游戏化营销真正做到了“用户满意”与“降本增效”的并存。',\n    },\n  ]\n  const swiperObj = ref<SwiperClass>()\n  const setControllerSwiper = (swiper: SwiperClass) => {\n    swiperObj.value = swiper\n  }\n  const isStart = computed(() => swiperObj.value?.isBeginning)\n  const isEnd = computed(() => swiperObj.value?.isEnd)\n</script>\n\n<template>\n  <div class=\"company-talk-page\">\n    <swiper\n      slidesPerView=\"auto\"\n      :spaceBetween=\"24\"\n      :slidesOffsetBefore=\"80\"\n      :slidesOffsetAfter=\"24\"\n      :centeredSlides=\"false\"\n      :allowTouchMove=\"false\"\n      @swiper=\"setControllerSwiper\"\n      class=\"company-talk-swiper\"\n    >\n      <swiper-slide v-for=\"item in swiperList\" :key=\"item.key\">\n        <div class=\"company-talk-item\">\n          <div class=\"item-top\">\n            <img :src=\"item.logo\" class=\"item-top-logo\" />\n            <span class=\"item-top-name\">{{ item.name }}</span>\n          </div>\n          <div class=\"item-middle\">\n            <img :src=\"item.banner\" />\n          </div>\n          <div class=\"item-bottom\">\n            <div class=\"item-bottom-content\">{{ item.content }}</div>\n          </div>\n        </div>\n      </swiper-slide>\n    </swiper>\n    <div class=\"controller\">\n      <div class=\"controller-item\" @click=\"swiperObj?.slidePrev()\">\n        <svg-icon icon-name=\"prev\" icon-size=\"14\" :color=\"isStart ? '#9298a4' : '#495367'\"></svg-icon>\n      </div>\n      <div class=\"controller-item\" @click=\"swiperObj?.slideNext()\">\n        <svg-icon icon-name=\"next\" icon-size=\"14\" :color=\"isEnd ? '#9298a4' : '#495367'\"></svg-icon>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"less\" scoped>\n  :deep(.swiper-slide) {\n    width: 375px;\n  }\n\n  .company-talk-page {\n    .company-talk-item {\n      box-sizing: border-box;\n      // width: 376px;\n      width: 100%;\n      height: 511px;\n      padding: 49px 20px 0;\n      background: #fff;\n      border-radius: 8px;\n      box-shadow: 0 0 10px 0 rgb(161 178 219 / 30%);\n\n      .item-top {\n        display: flex;\n        align-items: center;\n\n        .item-top-logo {\n          width: 48px;\n          margin-right: 12px;\n        }\n\n        .item-top-name {\n          color: @black;\n          font-weight: 500;\n          font-size: 24px;\n          font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n          line-height: 33px;\n        }\n      }\n\n      .item-middle {\n        width: 100%;\n        margin-top: 20px;\n\n        img {\n          width: 100%;\n        }\n      }\n\n      .item-bottom {\n        margin-top: 16px;\n        color: @black;\n        font-weight: 400;\n        font-size: 16px;\n        font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n        line-height: 28px;\n      }\n    }\n\n    .controller {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-top: 50px;\n\n      .controller-item {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 60px;\n        height: 60px;\n        margin-right: 16px;\n        background: #fff;\n        border-radius: 50%;\n        box-shadow: 0 0 20px 0 #d7e0ed;\n        cursor: pointer;\n      }\n\n      .disabled {\n        color: #9298a4;\n      }\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { eventReport, gotoHome } from '@/composable'\n  import { showViewAutoPlay } from '@/composable/swiper'\n  import { BtnType, ColorType, LinkToHomeType } from '@/define'\n  import { getAssetsFile } from '@/utils'\n  import BaseBtn from '@components/btn/BaseBtn.vue'\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 { ref } from 'vue'\n\n  SwiperCore.use([Autoplay])\n\n  const tabList = [\n    {\n      key: 1,\n      name: '极简操作',\n      content: {\n        banner: getAssetsFile('root/core-banner-1.webm', 'videos'),\n        title: '3分钟即可完成一场<br/>趣味活动的创建',\n        content: `<div><img src=\"${getAssetsFile(\n          'root/core-content-num_1.png'\n        )}\" />输入文字</div><div><img src=\"${getAssetsFile(\n          'root/core-content-num_2.png'\n        )}\" />替换图片</div><div><img src=\"${getAssetsFile('root/core-content-num_3.png')}\" />配置奖品</div>`,\n      },\n    },\n    {\n      key: 2,\n      name: '海量模板',\n      content: {\n        banner: getAssetsFile('root/core-banner-2.webm', 'videos'),\n        title: '满足不同企业、不同场景的营销诉求',\n        content: '上千种营销玩法<br/>海量游戏化营销模板<br/>正版商用素材',\n      },\n    },\n    {\n      key: 3,\n      name: '多渠道分发',\n      content: {\n        banner: getAssetsFile('root/core-banner-3.webm', 'videos'),\n        title: '让企业获客不受限',\n        content: '匹配不同流量生态<br/>支持多渠道分发',\n      },\n    },\n    {\n      key: 4,\n      name: '多维数据洞察',\n      content: {\n        banner: getAssetsFile('root/core-banner-4.webm', 'videos'),\n        title: '让活动效果可知、可控、可感',\n        content: '支持不同维度的数据监测<br/>提供用户画像数据',\n      },\n    },\n    {\n      key: 5,\n      name: '企业协作提效',\n      content: {\n        banner: getAssetsFile('root/core-banner-5.webm', 'videos'),\n        title: '让执行更流畅',\n        content: '支持多人协作<br/>告别跨应用的繁琐沟通',\n      },\n    },\n  ]\n  // const currentIndex = ref(1)\n  // const handleClick = (index: number) => {\n  //   currentIndex.value = index\n  // }\n  const currentIndex = ref(0)\n  const handleClick = (index: number, key: number) => {\n    eventReport({\n      event_id: 'pc_official_website_function_change',\n      parm: key,\n    })\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\n  const swiperRef = ref<HTMLElement | null>(null)\n  showViewAutoPlay(swiperRef, swiperObj)\n</script>\n\n<template>\n  <div ref=\"swiperRef\" class=\"core-function-page\">\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=\"handleClick(index, item.key)\">\n          <span>{{ item.name }}</span>\n          <!-- <icon-caret-right v-if=\"currentIndex === index\" class=\"icon-right\" /> -->\n        </div>\n      </template>\n    </div>\n    <!-- <a-carousel\n      v-model:current=\"currentIndex\"\n      indicator-type=\"never\"\n      direction=\"vertical\"\n      :default-current=\"1\"\n      auto-play\n      show-arrow=\"never\"\n      class=\"carousel-box\"\n    >\n      <a-carousel-item v-for=\"{ content, key } in tabList\" :key=\"key\">\n        <div class=\"carousel-item\">\n          <div class=\"left\">\n            <video :src=\"content.banner\" :loop=\"true\" autoplay muted />\n          </div>\n          <div class=\"right\">\n            <div class=\"title\" v-html=\"content.title\"></div>\n            <div class=\"content\" v-html=\"content.content\"></div>\n            <div class=\"btn\">\n              <base-btn :color=\"ColorType.PRIMARY\" :type=\"BtnType.SHOW\">同款模板 >></base-btn>\n            </div>\n          </div>\n        </div>\n      </a-carousel-item>\n    </a-carousel> -->\n    <swiper\n      :slidesPerView=\"1\"\n      :centeredSlides=\"true\"\n      :allowTouchMove=\"false\"\n      :autoplay=\"{ pauseOnMouseEnter: true, disableOnInteraction: false, delay: 10000 }\"\n      direction=\"vertical\"\n      :speed=\"600\"\n      @swiper=\"setControllerSwiper\"\n      @slideChange=\"onSlideChange\"\n      class=\"carousel-box\"\n    >\n      <swiper-slide v-for=\"{ content, key } in tabList\" :key=\"key\">\n        <div class=\"carousel-item\">\n          <div class=\"left\">\n            <video :src=\"content.banner\" :loop=\"true\" autoplay muted />\n          </div>\n          <div class=\"right\">\n            <div class=\"title\" v-html=\"content.title\"></div>\n            <div class=\"content\" v-html=\"content.content\"></div>\n            <div class=\"btn\">\n              <base-btn :color=\"ColorType.PRIMARY\" :type=\"BtnType.SHOW\" @click=\"gotoHome(LinkToHomeType.COMPETENCE)\"\n                >立即免费使用</base-btn\n              >\n            </div>\n          </div>\n        </div>\n      </swiper-slide>\n    </swiper>\n  </div>\n</template>\n\n<style lang=\"less\" scoped>\n  .core-function-page {\n    display: flex;\n    width: 100%;\n    height: 600px;\n    overflow: hidden;\n    border-radius: 10px;\n  }\n\n  .tab-box {\n    display: flex;\n    flex-direction: column;\n    width: 248px;\n    height: 100%;\n  }\n\n  .tab-point {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 20%;\n    color: @gray-4;\n    font-size: 24px;\n    font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n    line-height: 33px;\n    background: #e2eaff;\n    border-bottom: 1px solid #cdd6ee;\n    cursor: pointer;\n\n    .tab-icon {\n      width: 60px;\n      margin-right: 14px;\n    }\n\n    .icon-right {\n      position: absolute;\n      right: -15px;\n      z-index: 10;\n      color: @primary-color;\n    }\n\n    &:last-child {\n      border-bottom: none;\n    }\n  }\n\n  .active {\n    color: #fff;\n    font-weight: 600;\n    font-size: 30px;\n    font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n    line-height: 42px;\n    background: linear-gradient(90deg, #0ce5ed 0%, @primary-color 100%);\n  }\n\n  .carousel-box {\n    flex: 1;\n    height: 100%;\n\n    .carousel-item {\n      display: flex;\n      box-sizing: border-box;\n      height: 100%;\n      padding: 60px 80px 60px 70px;\n      background: #fff;\n      opacity: 1;\n\n      .left {\n        box-sizing: border-box;\n        overflow: hidden;\n        border-radius: 16px;\n\n        video {\n          width: 660px;\n          height: 480px;\n        }\n      }\n\n      .right {\n        position: relative;\n        flex: 1;\n        padding-left: 70px;\n\n        .title {\n          color: @black;\n          font-weight: 500;\n          font-size: 36px;\n          font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n          line-height: 54px;\n        }\n\n        .content {\n          margin-top: 36px;\n          color: #05c7d6;\n          font-weight: 600;\n          font-size: 24px;\n          font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n          line-height: 48px;\n\n          :deep(div) {\n            display: flex;\n            align-items: center;\n\n            img {\n              width: 30px;\n              margin-right: 8px;\n            }\n          }\n        }\n\n        .btn {\n          position: absolute;\n          bottom: 64px;\n        }\n      }\n    }\n\n    .swiper-slide {\n      &:not(:first-child) {\n        .carousel-item {\n          .left {\n            border: 2px solid #fff;\n            box-shadow: 0 0 20px 0 #d7e0ed;\n          }\n        }\n      }\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { eventReport } from '@/composable'\n  import { showViewAutoPlay } from '@/composable/swiper'\n  import { BtnType, ColorType, DeployType, Template } from '@/define'\n  import { useRootStore } from '@/store'\n  import { getAssetsFile } from '@/utils'\n  import { createScreen, linkToContent } from '@/utils/common'\n  import BaseBtn from '@components/btn/BaseBtn.vue'\n  import { openLogin } from '@components/popup/helpers'\n  import { openPreview } from '@components/popup/preview/helpers'\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 { ref } from 'vue'\n\n  SwiperCore.use([Autoplay])\n\n  const TEMPLATES_CONFIG: Record<DeployType, Template[]> = {\n    [DeployType.LOCAL]: [\n      {\n        id: 496,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 471,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'mini',\n      },\n      {\n        id: 342,\n        type: 0,\n        templateType: 'screen',\n      },\n    ],\n    [DeployType.ALPHA]: [\n      {\n        id: 496,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 471,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'mini',\n      },\n      {\n        id: 342,\n        type: 0,\n        templateType: 'screen',\n      },\n    ],\n    [DeployType.BVT]: [\n      {\n        id: 172,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 155,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'mini',\n      },\n      {\n        id: 342,\n        type: 0,\n        templateType: 'screen',\n      },\n    ],\n    [DeployType.OPERATE]: [\n      {\n        id: 17,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 269,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'mini',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'screen',\n      },\n    ],\n    [DeployType.PROD]: [\n      {\n        id: 554,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 522,\n        type: 3,\n        templateType: 'hd',\n      },\n      {\n        id: 0,\n        type: 0,\n        templateType: 'mini',\n      },\n      {\n        id: 342,\n        type: 0,\n        templateType: 'screen',\n      },\n    ],\n  }\n  const templates = TEMPLATES_CONFIG[import.meta.env.VITE_DEPLOY_TYPE]\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      content: {\n        template: templates[0],\n        banner: getAssetsFile('root/game-case-banner_1.mp4', 'videos'),\n        title: '告别“砸钱投放”<br/>游戏化营销更懂用户心理',\n        content:\n          '在韩菲诗「击鼓开运」游戏中，用户若是挑战失败，分享游戏即可获得复活机会，在「挑战心理」的驱动下，用户会主动邀请好友注册，有效降低新客注册成本',\n      },\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      content: {\n        template: templates[1],\n        banner: getAssetsFile('root/game-case-banner_2.mp4', 'videos'),\n        title: '告别“人工召回”<br/>游戏化营销更懂习惯养成',\n        content:\n          '在A1「“糕”颜值挑战」中，通过设置每日限时挑战，为排行榜TOP用户派发实物奖品，在「挑战」+「损失规避」的驱动下，用户每日这个时段都会打开商城，从而降低促活成本',\n      },\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      content: {\n        // 淘宝游戏，不支持预览\n        template: templates[2],\n        banner: getAssetsFile('root/game-case-banner_3.mp4', 'videos'),\n        title: '告别“发券入会”<br/>游戏化营销更懂用户引导',\n        content:\n          '在养成类游戏中，通过设置新手任务，引导用户入会，赠予道具奖励。在「物质激励」的驱动下，用户对入会的排斥感降低，入会意愿明显提升',\n      },\n    },\n    {\n      key: 4,\n      name: '线下活动',\n      noCheckImg: getAssetsFile('root/game-case-nocheck_4.png'),\n      checkImg: getAssetsFile('root/game-case-check_4.png'),\n      content: {\n        template: templates[3],\n        banner: getAssetsFile('root/game-case-banner_4.mp4', 'videos'),\n        title: '告别“地推获客”<br/>游戏化营销更懂用户焦点',\n        content:\n          '在线下活动中，通过放置大屏游戏，吸引用户主动驻足观看，在「好奇心理」的驱动下，用户主动参与游戏，完成注册任务，有效提升线下获客效率',\n      },\n    },\n  ]\n  const currentIndex = ref(0)\n  const handleClick = (index: number, key: number) => {\n    eventReport({\n      event_id: 'pc_official_website_solution_change',\n      parm: key,\n    })\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 onUseTemplate = (template: Template) => {\n    switch (template.templateType) {\n      case 'hd':\n        eventReport({\n          event_id: 'pc_recommend_use_same_click',\n          obj_type: 1,\n          obj_id: template.id,\n        })\n        openPreview(template.id, template.type)\n        break\n      case 'mini':\n        linkToContent('/marketTool/hd')\n        break\n      case 'screen':\n        // eventReport({\n        //   event_id: 'pc_recommend_use_same_click',\n        //   obj_type: 2,\n        //   obj_id: template.id,\n        // })\n        if (!useRootStore().isLogin) {\n          openLogin({\n            onHide: () => {\n              if (useRootStore().isLogin) {\n                createScreen(template.id)\n              }\n            },\n          })\n          return\n        }\n        createScreen(template.id)\n        break\n    }\n  }\n\n  const swiperRef = ref<HTMLElement | null>(null)\n  showViewAutoPlay(swiperRef, swiperObj)\n</script>\n\n<template>\n  <div ref=\"swiperRef\">\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=\"handleClick(index, item.key)\">\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    <swiper\n      :slidesPerView=\"1\"\n      :centeredSlides=\"true\"\n      :allowTouchMove=\"false\"\n      :autoplay=\"{ pauseOnMouseEnter: true, disableOnInteraction: false, delay: 100000 }\"\n      :speed=\"600\"\n      @swiper=\"setControllerSwiper\"\n      @slideChange=\"onSlideChange\"\n      class=\"carousel-box\"\n    >\n      <swiper-slide v-for=\"{ content, key } in tabList\" :key=\"key\">\n        <div class=\"carousel-item\">\n          <div class=\"left\">\n            <video :src=\"content.banner\" :loop=\"true\" autoplay muted></video>\n          </div>\n          <div class=\"right\">\n            <div class=\"title\" v-html=\"content.title\"></div>\n            <div class=\"divider\"></div>\n            <div class=\"content\">\n              {{ content.content }}\n            </div>\n            <div class=\"btn\">\n              <base-btn :color=\"ColorType.PRIMARY\" :type=\"BtnType.SHOW\" @click=\"onUseTemplate(content.template)\"\n                >同款模板 >></base-btn\n              >\n            </div>\n          </div>\n        </div>\n      </swiper-slide>\n    </swiper>\n  </div>\n</template>\n\n<style lang=\"less\" scoped>\n  .tab-box {\n    display: flex;\n    height: 124px;\n    margin-bottom: 39px;\n    border-radius: 10px;\n    box-shadow: 0 0 20px 0 #d7e0ed;\n  }\n\n  .tab-point {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 25%;\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  .carousel-box {\n    height: 564px;\n    overflow: hidden;\n    border-radius: 10px;\n    box-shadow: 0 0 20px 0 #d7e0ed;\n\n    .carousel-item {\n      display: flex;\n      height: 100%;\n      background: #fff;\n      opacity: 1;\n\n      .left {\n        video {\n          width: 640px;\n          height: 564px;\n        }\n      }\n\n      .right {\n        position: relative;\n        padding: 70px 60px 0 100px;\n\n        .title {\n          color: @black;\n          font-weight: 500;\n          font-size: 36px;\n          font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;\n          line-height: 54px;\n        }\n\n        .divider {\n          width: 36px;\n          height: 6px;\n          margin: 24px 0;\n          background: @primary-color;\n          border-radius: 4px;\n        }\n\n        .content {\n          color: #646d7d;\n          font-weight: 400;\n          font-size: 18px;\n          font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n          line-height: 30px;\n        }\n\n        .btn {\n          position: absolute;\n          bottom: 92px;\n        }\n      }\n    }\n  }\n</style>\n","<script lang=\"ts\" setup>\n  import { gotoHome, pageReport } from '@/composable'\n  import { BtnType, ColorType, LinkToHomeType } from '@/define'\n  import BaseBtn from '@components/btn/BaseBtn.vue'\n  import { useHead } from '@vueuse/head'\n  import CompanyTalk from './components/CompanyTalk.vue'\n  import CoreFunction from './components/CoreFunction.vue'\n  import GameCase from './components/GameCase.vue'\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\n  const isSafari = () => {\n    if (!import.meta.env.SSR) {\n      return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)\n    } else {\n      return false\n    }\n  }\n\n  pageReport({\n    page: 'pc_official_website',\n  })\n</script>\n\n<template>\n  <div class=\"home-page\">\n    <div class=\"home-header\">\n      <div class=\"home-header-box\">\n        <div class=\"left\">\n          <div class=\"title\">\n            <div>游戏化营销</div>\n            <div>企业增长新玩法</div>\n          </div>\n          <div class=\"tips\">仅需3分钟，让营销更有趣，让转化更高效</div>\n          <div class=\"btn\">\n            <base-btn :type=\"BtnType.SHOW\" :color=\"ColorType.PRIMARY\" @click=\"gotoHome(LinkToHomeType.ROOTBANER)\"\n              >立即体验</base-btn\n            >\n          </div>\n        </div>\n        <div class=\"right\">\n          <div>\n            <video\n              v-if=\"isSafari()\"\n              class=\"phone\"\n              src=\"@/assets/videos/root/header-game-safari.mp4\"\n              autoplay\n              muted\n              :loop=\"true\"\n            ></video>\n            <video v-else class=\"phone\" src=\"@/assets/videos/root/header-game.webm\" :loop=\"true\" autoplay muted></video>\n          </div>\n          <div>\n            <video\n              v-if=\"isSafari()\"\n              class=\"chart\"\n              src=\"@/assets/videos/root/header-data-safari.mp4\"\n              autoplay\n              muted\n            ></video>\n            <video v-else class=\"chart\" src=\"@/assets/videos/root/header-data.webm\" autoplay muted></video>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"game-case\">\n      <div class=\"main-title\">四大游戏化解决方案 让营销更简单</div>\n      <game-case></game-case>\n    </div>\n    <div class=\"core-function\">\n      <div class=\"core-function-main\">\n        <div class=\"main-title\" style=\"color: #fff\">五大核心能力 让营销更轻松</div>\n        <core-function></core-function>\n      </div>\n    </div>\n    <div class=\"companys\">\n      <div class=\"main-title\">上百家企业营销首选</div>\n      <div>\n        <img src=\"@images/root/companys.png\" />\n      </div>\n    </div>\n    <div class=\"company-talk\">\n      <div class=\"company-talk-main\">\n        <div class=\"main-title\">企业谈内容引擎</div>\n        <company-talk></company-talk>\n      </div>\n    </div>\n    <div class=\"data-box\">\n      <div class=\"data-box-main\">\n        <div class=\"data-box-item\">\n          <div class=\"num\">300<span class=\"unit\">万</span></div>\n          <div class=\"directions\">用户信赖之选</div>\n        </div>\n        <a-divider :margin=\"133\" direction=\"vertical\" />\n        <div class=\"data-box-item\">\n          <div class=\"num\">4380<span class=\"unit\">天</span></div>\n          <div class=\"directions\">安全运行</div>\n        </div>\n        <a-divider :margin=\"133\" direction=\"vertical\" />\n        <div class=\"data-box-item\">\n          <div class=\"num\">824<span class=\"unit\">万</span></div>\n          <div class=\"directions\">累计上线活动</div>\n        </div>\n        <a-divider :margin=\"133\" direction=\"vertical\" />\n        <div class=\"data-box-item\">\n          <div class=\"num\">5823<span class=\"unit\">万</span></div>\n          <div class=\"directions\">累计触达流量</div>\n        </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            :type=\"BtnType.SHOW\"\n            :color=\"ColorType.WHITE\"\n            :font-size=\"16\"\n            @click=\"gotoHome(LinkToHomeType.FOOTERGUIDE)\"\n            >立即体验 >></base-btn\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"less\" scoped>\n  .main-title {\n    width: 100%;\n    margin-bottom: 60px;\n    color: @black;\n    font-weight: 600;\n    font-size: 40px;\n    font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n    line-height: 56px;\n    text-align: center;\n  }\n\n  .home-page {\n    .home-header {\n      height: 680px;\n      background-image: url('@images/root/home-bg.jpg');\n      background-size: cover;\n\n      .home-header-box {\n        display: flex;\n        align-items: center;\n        width: 1440px;\n        height: 100%;\n        margin: 0 auto;\n\n        .left {\n          .title {\n            color: @black;\n            font-weight: bold;\n            font-size: 66px;\n            font-family: AlibabaPuHuiTiB, sans-serif;\n            line-height: 80px;\n          }\n\n          .tips {\n            margin-top: 30px;\n            color: @gray-5;\n            font-size: 24px;\n            font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;\n            line-height: 33px;\n          }\n\n          .btn {\n            margin-top: 86px;\n          }\n        }\n\n        .right {\n          display: flex;\n\n          .phone {\n            width: 340px;\n          }\n\n          .chart {\n            width: 590px;\n          }\n        }\n      }\n    }\n\n    .game-case {\n      width: 1440px;\n      margin: 0 auto;\n      margin-top: 90px;\n    }\n\n    .core-function {\n      margin-top: 90px;\n      padding: 90px 0 106px;\n      background-image: url('@images/root/core-bg.jpg');\n      background-size: cover;\n\n      .core-function-main {\n        width: 1440px;\n        margin: 0 auto;\n      }\n    }\n\n    .companys {\n      width: 1440px;\n      margin: 0 auto;\n      margin-top: 90px;\n\n      img {\n        width: 100%;\n      }\n    }\n\n    .company-talk {\n      width: 100%;\n      margin-top: 90px;\n      padding: 80px 0 90px;\n      background: #f5f9ff;\n\n      .company-talk-main {\n        // width: 1440px;\n        // margin: 0 auto;\n      }\n    }\n\n    .data-box {\n      .data-box-main {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 259px;\n\n        :deep(.arco-divider-vertical) {\n          height: 63px;\n        }\n\n        .data-box-item {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n\n          .num {\n            color: @primary-color;\n            font-weight: bold;\n            font-size: 36px;\n            font-family: Oswald-Bold, Oswald, sans-serif;\n            line-height: 53px;\n\n            .unit {\n              margin-left: 4px;\n              font-weight: 600;\n              font-size: 18px;\n              font-family: PingFangSC-Semibold, 'PingFang SC', sans-serif;\n              line-height: 25px;\n            }\n          }\n        }\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</style>\n"],"names":["swiperList","getAssetsFile","swiperObj","ref","setControllerSwiper","swiper","isStart","computed","_a","isEnd","SwiperCore","Autoplay","tabList","currentIndex","handleClick","index","key","eventReport","onSlideChange","swiperRef","showViewAutoPlay","templates","DeployType","onUseTemplate","template","openPreview","linkToContent","useRootStore","openLogin","createScreen","useHead","isSafari","pageReport"],"mappings":"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"}