nuxtProject/pages/trainsystem/index.vue

<template>
  <div class="client-train-page">

    <!-- 培训平台页 banner栏 -->
    <div class="client-train-banner">
      <div class="client-container">
        <!--  banner文字区域 -->
        <div class="train-banner-container">
          <h4>麦塔在线培训平台</h4>
          <p>一个学习型组织的标准配置</p>
          <a href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费注册</a>
        </div>
      </div>
    </div>

    <!--  产品优势 -->
    <div class="client-container" style="margin-top: -54px">
      <h4 class="client-title">产品优势</h4>
      <ul class="train-product-advantages">
        <li><img :src="trainAdvantagesImg1" alt="课程考试相结合"><h5>课程考试相结合</h5>
          <p>视频指定时间添加试题，支持图片、PDF、音视频、office文档等</p></li>
        <li><img :src="trainAdvantagesImg2" alt="随时随地学习"><h5>随时随地学习</h5>
          <p>PC端与移动端无缝连接；支持APP和微信学习模式</p></li>
        <li><img :src="trainAdvantagesImg3" alt="稳定安全的数据保护"><h5>稳定安全的数据保护</h5>
          <p>采用多层次多安全防护措施，通过阿里渗透式测试</p></li>
        <li><img :src="trainAdvantagesImg4" alt="量身定制"><h5>量身定制</h5>
          <p>满足企业培训中的功能需求，定制企业专属功能</p></li>
      </ul>
    </div>

    <!--  产品功能 -->
    <div class="train-product-function">
      <div class="client-container">
        <h4 class="client-title">产品功能</h4>
        <ul class="product-function-box">
          <li>
            <div><i></i><h5>多层级独立管理</h5>
              <p>满足多层级的组织架构，多级子公司运营的需求，针对企业复杂的组织架构，可设置不限层级的树状管理权限</p></div>
          </li>
          <li>
            <div><i></i><h5>培训记录与监管</h5>
              <p>登陆记录、学习时长、考核记录、学习状况实时监控、督学体系、学习能力分析体系强大</p></div>
          </li>
          <li>
            <div><i></i><h5>随时随地学习</h5>
              <p>适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p></div>
          </li>
          <li>
            <div><i></i><h5>稳定安全的数据保护</h5>
              <p>采用多层次多安全防护措施，顺利通过阿里渗透式测试，使系统最大限度地不被黑客和有意破坏者攻击</p></div>
          </li>
          <li>
            <div><i></i><h5>完善的课程学习体系</h5>
              <p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p></div>
          </li>
          <li>
            <div><i></i><h5>功能丰富的在线考试</h5>
              <p>强大的题库管理和丰富的考试控制功能，随机组卷考试，稳定大并发考试</p></div>
          </li>
          <li>
            <div><i></i><h5>与第三方系统无缝集成</h5>
              <p>基于Java语言开发Springcloud框架；支持人脸识别、单点登录、组织架构及用户数据的同步；支持与EAP/EIP、OA、HR系统的集成</p></div>
          </li>
          <li>
            <div><i></i><h5>个性化定制</h5>
              <p>界面自定义主题背景、品牌、logo，搭建您的专属在线培训平台</p></div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 产品展示 -->
    <div class="train-product-show">
      <h4 class="client-title">产品展示</h4>
      <div class="product-show-container">
        <el-carousel :interval="4000" type="card" arrow="never">
          <el-carousel-item v-for="(item,index) in productShowCarousels" :key="index">
            <div class="product-show-carousel">
              <img :src="item.img">
              <h5>{{item.title}}</h5>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 应用场景 -->
    <div class="train-application-scenarios">
      <div class="client-container">
        <h4 class="client-title">应用场景</h4>
        <ul class="application-scenarios-box">
          <li>
            <div class="application-scenarios-img"><i></i></div>
            <div class="application-scenarios-content">
              <h5>新员工入职培训</h5>
              <p>在职员工可以利用零散的时间在移动终端上学习企业文化和工作职责，培训主管可以通过后台的大数据实时监控新员工的学习进度。此外，可以设置特殊考试来测试新员工的学习效果</p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-img"><i></i></div>
            <div class="application-scenarios-content">
              <h5>技能考核</h5>
              <p>组织学员通过互联网或局域网开展网上学习、培训、考试、互动问答等活动，利用考核成绩智能分析功能进行针对性的培训考核，达到快速、有效地提升员工技能的目的</p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-img"><i></i></div>
            <div class="application-scenarios-content">
              <h5>企业招聘</h5>
              <p>满足企业社招、校园招聘等需求，一个系统搞定各种行业的招聘在线测试，企业只需要将准备好的笔试题目用文档的方式，导入到考试系统当中，再创建试卷，完成后发送试卷的链接给应聘者即可完成考试。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:     'trainsystem',
    layout:   'templateB',
    asyncData({ store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/trainsystem');
    },
    data() {
      return {
        productShowCarousels: [
          { img: require(`~/static/images/client/train/product-show-img1.png`), title: '平台总览' },
          { img: require(`~/static/images/client/train/product-show-img3.png`), title: '服务管理' },
          { img: require(`~/static/images/client/train/product-show-img2.png`), title: '人员管理' },
        ],
        trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.svg`),
        trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.svg`),
        trainAdvantagesImg3:  require(`~/static/images/client/train/product-advantages-img3.svg`),
        trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.svg`),
      };
    },
    computed: {},
    methods:  {},
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>