nuxtProject/pages/solution/peixun.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!-- 广告图位置 -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner"></div>
      <h3>企业培训</h3>
      <p>青谷帮您解决企业内外培训管理难题</p>
      <onlineInformationBtn />
    </div>

    <!--  企业培训现状  -->
    <div>
      <h3>企业培训现状</h3>
      <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼</p>
      <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效</p>
    </div>

    <!--  企业培训痛点  -->
    <div class="client-tongdian-box">
      <h4>企业培训痛点</h4>
      <ul>
        <li>
          <i></i>
          <span>受时间、场地影响</span>
          <span>无法随时随地学习</span>
        </li>
        <li>
          <i></i>
          <span>培训过度，学习不足</span>
          <span>培训课程体系设置不合理</span>
        </li>
        <li>
          <i></i>
          <span>老员工离职，带走工作经验</span>
          <span>新人需要重新摸索经验</span>
        </li>
        <li>
          <i></i>
          <span>不能快速响应业务变化</span>
        </li>
        <li>
          <i></i>
          <span>没有针对性，知识无法共享</span>
        </li>
        <li>
          <i></i>
          <span>成本高，导致企业不敢</span>
          <span>进行员工培训</span>
        </li>
      </ul>
    </div>

    <!--  企业培训解决方案  -->
    <div class="platform-products-services client-container">
      <h4 class="client-title">企业培训解决方案</h4>
      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
        <div class="btn-groups">
          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
        </div>
      </imgCardLv3>
    </div>

    <!--  如何快速学习平台  -->
    <div class="client-study-box">
      <h4>如何搭建学习平台</h4>

      <ul>
        <li>
          <span>提升培训速度</span>
          <span>↑ 95%</span>
        </li>
        <li>
          <span>提升培训速度</span>
          <span>↓ 90%</span>
        </li>
        <li>
          <span>降低费用成本</span>
          <span>↓ 75%</span>
        </li>
        <li>
          <span>降低时间成本</span>
          <span>↓ 80%</span>
        </li>
      </ul>

      <ul>
        <li>
          <i></i>
          <p>云端部署</p>
          <span>云端部署，按需配置</span>
          <span>免硬件与IT运维投入</span>
          <span>PC、H5、APP多端兼容</span>
        </li>
        <li>
          <i></i>
          <p>AI智能学习</p>
          <span>内容智能推荐系统</span>
          <span>大数据与学习行为分析</span>
          <span>提供个性化培训</span>
        </li>
        <li>
          <i></i>
          <p>人才发展体系</p>
          <span>支持复杂岗位设置</span>
          <span>职业发展与胜任力体系</span>
          <span>只能体系</span>
        </li>
        <li>
          <i></i>
          <p>混合式培训管理</p>
          <span>线上线下混合式培训</span>
          <span>社交学习与分享</span>
          <span>多维度洞察培训效果</span>
        </li>
        <li>
          <i></i>
          <p>海量优质课程资源</p>
          <span>各领域行业专家</span>
          <span>免硬件与IT运维投入</span>
          <span>全方位覆盖企业培训体系</span>
        </li>
      </ul>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="peixun"></desWithCode>
  </div>
</template>

<script>
import chanPinTiYan from "~/components/common/chanPinTiYan";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import {BannerImgs} from "~/defaultConfig";
import desWithCode from "@/components/common/layout/desComp/desWithCode";
import imgCardLv3 from "~/components/common/layout/imgDes/imgCardLv3";

/**
 * @ 解决方案 -> 企业培训
 */
export default {
  name: "peixun",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv3},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.qiyepeixun}),
    ];
    const [res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      productList: [
        {
          content: {
            title: '一键导入组织成员名单',
            des: '支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限。',
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code_jingli.png'),
            order: 1,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '多种课程形式及直播开展培训',
            des: 'PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习',
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code_jingli.png'),
            order: 2,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '考、练模块提升学员培训效果',
            des: '题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果',
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code_jingli.png'),
            order: 1,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '可视化的培训大数据展示',
            des: '直观分析学员学习时长、课程数、考试分数等数据结果，快速掌握整体学习情况',
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code_jingli.png'),
            order: 2,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '快速搭建企业知识共享资源库库',
            des: '帮助企业搭建知识资源库，完成企业员工的知识分享',
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code_jingli.png'),
            order: 2,
          },
          zixun: true,
          myType: 'peixun'
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.platform-products-services {
  .client-title {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: #333;
    margin-top: 80px;
    margin-bottom: 70px;
  }

  .btn-groups {
    margin-top: 48px;
    .btn-item {
      margin-right: 20px;
    }
  }
}
</style>