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>
    </div>

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

    <!--  企业培训痛点  -->
    <div class="client-tongdian-box">
      <div class="client-container">
      <h4 class="client-title">企业培训痛点</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>

    <!--  企业培训解决方案  -->
    <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 green" v-if="item.zixun"/>
        </div>
      </imgCardLv3>
    </div>

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

      <ul class="top-list">
        <li>
          <div>
            <p>提升培训速度</p>
            <p><i></i>95<i>%</i></p>
          </div>
        </li>
        <li>
          <div>
            <p>降低人工成本</p>
            <p><i class="icon-revent"></i>90<i>%</i></p>
          </div>
        </li>
        <li>
          <div>
            <p>降低费用成本</p>
            <p><i class="icon-revent"></i>75<i>%</i></p>
          </div>
        </li>
        <li>
          <div>
            <p>降低时间成本</p>
            <p><i class="icon-revent"></i>80<i>%</i></p>
          </div>
        </li>
      </ul>

      <ul class="bottom-list">
        <li>
          <i></i>
          <h4>云端部署</h4>
          <p>云端部署，按需配置</p>
          <p>免硬件与IT运维投入</p>
          <p>PC、H5、APP多端兼容</p>
        </li>
        <li>
          <i></i>
          <h4>AI智能学习</h4>
          <p>内容智能推荐系统</p>
          <p>大数据与学习行为分析</p>
          <p>提供个性化培训</p>
        </li>
        <li>
          <i></i>
          <h4>人才发展体系</h4>
          <p>支持复杂岗位设置</p>
          <p>职业发展与胜任力体系</p>
          <p>只能体系</p>
        </li>
        <li>
          <i></i>
          <h4>混合式培训管理</h4>
          <p>线上线下混合式培训</p>
          <p>社交学习与分享</p>
          <p>多维度洞察培训效果</p>
        </li>
        <li>
          <i></i>
          <h4>海量优质课程资源</h4>
          <p>各领域行业专家</p>
          <p>免硬件与IT运维投入</p>
          <p>全方位覆盖企业培训体系</p>
        </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: '青谷在线考试系统为企业推出在线培训考试解决方案，帮助企业分析培训痛点难点，解决一系列线上培训难题，搭建可学、可考的一体化在线培训平台，助力企业人才培养！'
        }
      ],
    }
  },
  data() {
    return {
      productList: [
        {
          content: {
            title: '一键导入组织成员名单',
            des: '支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限。',
            order: 2,
          },
          img: {
            url: require(`~/static/productImage/p20.png`),
            order: 1,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '多种课程形式及直播开展培训',
            des: 'PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习',
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p21.png`),
            order: 2,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '考、练模块提升学员培训效果',
            des: '题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果',
            order: 2,
          },
          img: {
            url: require(`~/static/productImage/p18.png`),
            order: 1,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '可视化的培训大数据展示',
            des: '直观分析学员学习时长、课程数、考试分数等数据结果，快速掌握整体学习情况',
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p17.png`),
            order: 2,
          },
          zixun: true,
          myType: 'peixun'
        },
        {
          content: {
            title: '快速搭建企业知识共享资源库库',
            des: '帮助企业搭建知识资源库，完成企业员工的知识分享',
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p19.png`),
            order: 1,
          },
          zixun: true,
          myType: 'peixun'
        }
      ],
    }
  }
}
</script>

<style lang="scss" scoped>

// banner 图
.client-banner-box {
  .banner-btn-groups.left {
    left: 110px;
    top: 467px;

    .solution-peixun {
      height: 60px;
      line-height: 60px;
      width: 210px;
      color: #fff;
      background: #d7db00;
      border-color: #d7db00;
      border-radius: 50px;
    }
  }
}

// 企业现状
.client-xianzhuang-box {
  margin-top: 120px;
  background-image: none;
  height: 230px;

  h4 {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #333;
    margin-bottom: 42px;
  }

  p {
    font-size: 18px;
    font-weight: 800;
    color: #565656;
    text-align: center;
    line-height: 30px;
  }
}

// 企业痛点
.client-tongdian-box {
  background: #f8fdf9;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    li {
      text-align: center;
      width: 33%;
      margin-bottom: 84px;

      i {
        width: 99px;
        height: 99px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin-bottom: 28px;
      }

      &:nth-child(1) {
        i {
          background-image: url("~static/gangweiIcon/z73.png");
        }
      }

      &:nth-child(2) {
        i {
          background-image: url("~static/gangweiIcon/z74.png");
        }
      }

      &:nth-child(3) {
        i {
          background-image: url("~static/gangweiIcon/z75.png");
        }
      }

      &:nth-child(4) {
        i {
          background-image: url("~static/gangweiIcon/z76.png");
        }
      }

      &:nth-child(5) {
        i {
          background-image: url("~static/gangweiIcon/z77.png");
        }
      }

      &:nth-child(6) {
        i {
          background-image: url("~static/gangweiIcon/z78.png");
        }
      }

      span {
        font-size: 20px;
        color: #565656;
        font-weight: 500;
        line-height: 30px;
        display: block;
        text-align: center;
      }
    }
  }
}

// 解决方案
.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;
    }
  }
}

// 学习平台
.client-study-box {
  h4 {
    font-size: 30px;
    color: #333;
    font-weight: 800;
    text-align: center;
    margin-bottom: 116px;
  }

  ul.top-list {
    display: flex;
    justify-content: space-between;

    li {
      width: 25%;

      div {
        border: 2px dashed #00b96b;
        box-sizing: border-box;
        margin: 20px;
        border-radius: 6px;

        p {
          text-align: center;
        }

        & > p:nth-child(1) {
          color: #00b96b;
          font-size: 24px;
          margin: 28px auto 28px;
        }

        & > p:nth-child(2) {
          color: #00b96b;
          font-size: 60px;
          margin: 0 auto 25px;


          i:nth-child(1) {
            display: inline-block;
            width: 23px;
            height: 46px;
            font-weight: 800;
            font-style: normal;
            margin-right: 10px;
            background-image: url("~static/gangweiIcon/z170.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

            &.icon-revent {
              transform: rotate(180deg);
            }
          }
          i:nth-child(2) {
            font-weight: bolder;
            font-style: normal;
            font-size: 22px;
          }
        }
      }
    }
  }

  ul.bottom-list {
    margin-top: 70px;
    display: flex;
    justify-content: space-between;

    li {
      margin: 0 auto 120px;
      text-align: center;

      i {
        width: 110px;
        height: 110px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

      &:nth-child(1) {
        i {
          background-image: url("~static/gangweiIcon/z79.png");
        }
      }

      &:nth-child(2) {
        i {
          background-image: url("~static/gangweiIcon/z80.png");
        }
      }

      &:nth-child(3) {
        i {
          background-image: url("~static/gangweiIcon/z81.png");
        }
      }

      &:nth-child(4) {
        i {
          background-image: url("~static/gangweiIcon/z82.png");
        }
      }

      &:nth-child(5) {
        i {
          background-image: url("~static/gangweiIcon/z83.png");
        }
      }

      p {
        font-size: 14px;
        font-weight: 500;
        color: #565656;
        width: 148px;
        line-height: 24px;
      }

      h4 {
        font-size: 24px;
        font-weight: 700;
        color: #565656;
        margin-top: 38px;
        margin-bottom: 28px;
      }

    }
  }
}

@media (max-width: 768px) {

  // 企业现状
  .client-xianzhuang-box {
    height: auto;
    margin-top: 3%;

    h4 {
      text-align: center;
      font-size: 18px;
      font-weight: 800;
      color: #333;
      margin-bottom: 5%;
    }

    p {
      font-size: 12px;
      font-weight: 800;
      color: #565656;
      text-align: center;
      line-height: 30px;
    }
  }

  // 企业痛点
  .client-tongdian-box {
    margin-top: 10%;

    ul {
      li {
        width: 50%;

        i {
          width: 60px;
          height: 60px;
        }

        span {
          font-size: 12px;
        }
      }
    }
  }

  // 解决方案
  .platform-products-services {
    .client-title {
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      color: #333;
      margin-top: 10%;
      margin-bottom: 10%;
    }

    .btn-groups {
      margin-top: 5%;

      .btn-item {
        margin-right: 20px;
      }
    }
  }

  .client-study-box {
    h4 {
      font-size: 18px;
      margin-bottom: 10%;
    }

    ul.top-list {
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: 50%;

        div {
          margin: 2%;

          p:nth-child(1) {
            font-size: 14px;
          }

          p:nth-child(2) {
            font-size: 18px;
          }
        }
      }
    }

    ul.bottom-list {
      margin-top: 10%;
      flex-direction: column;

      li {
        margin-bottom: 10%;
        p {
          width: auto
        }
      }
    }
  }
}

</style>