nuxtProject/pages/trainsystem/index.vue

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

    <!-- 培训平台页 banner栏 -->
    <div class="client-platform-banner">
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/train/train-banner-background.png`)})`}" class="client-platform-banner"></div>
      <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
    </div>
    <!--  产品试用 -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">产品试用</h4>
      <p>免注册，立即试用麦塔在线培训系统</p>
      <ul class="experience-ul-box mta-hidden-xs">
        <li>
          <div @mouseenter="enterCode" @mouseleave="leaveCode" >
            <i></i><h5>手机前台学员端</h5>
            <p>手机扫描二维码</p>
            <p>免登录想学就学</p>
            <a style="cursor: default">扫码试用</a>
            <span ref="codeBtn" v-if="youkeFlag"><em class="px-img-box"></em></span>
            <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
          </div>
        </li>
        <li><div><i></i><h5>电脑前台学员端</h5><p>学练考评测一站式解决</p><p>适用各类企业培训场景</p><a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a></div></li>
        <li><div><i></i><h5>电脑后台管理端</h5><p>丰富的学习功能设置</p><p>多终端进行培训考核</p><a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div></li>
        <li><div><i></i><h5>更新日志</h5><p>麦塔，只想给你更好的</p><p>我们愿和您一起进步</p><a class="client-default-Btn" @click="goCheckLog">点击查看</a></div></li>
      </ul>
      <!-- 手机轮播 -->
      <div class="experience-swiper-box mta-hidden-sm">
        <div v-swiper:mySwiper="swiperOption" class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="experience-content-box">
                <i class="sjxyd-icon"></i>
                <h5>手机前台学员端</h5>
                <p>点击立即体验按钮，免登录想学就学</p>
                <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="experience-content-box">
                <i  class="dnxyd-icon"></i>
                <h5>电脑前台学员端</h5>
                <p>学练考评测一站式解决</p>
                <p>适用各类企业培训场景</p>
                <a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="experience-content-box">
                <i class="dngld-icon"></i>
                <h5>电脑后台管理端</h5>
                <p>丰富的学习功能设置</p>
                <p>多终端进行培训考核</p>
                <a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div>
            </div>
            <!--<div class="swiper-slide">
              <div class="experience-content-box">
                <i class="skrz-icon"></i>
                <h5>更新日志</h5>
                <p>麦塔，只想给你更好的</p>
                <p>我们愿和您一起进步</p>
                <a  class="client-default-Btn" @click="goCheckLog">点击查看</a>
              </div>
            </div>-->
          </div>
          <div class="swiper-pagination swiper-pagination-style"></div>
          <p class="experience-swiper-tip">←左右滑动查看更多→</p>
        </div>
      </div>
    </div>
    <!--  产品特性 -->
      <div class="platform-products-services">
      <h4 class="client-title">产品特性</h4>
      <ul>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img :src="trainAdvantagesImg1" alt="全流程课程学习体系" />
              <div class="products-services-content">
                <h5>全流程课程学习体系</h5>
                <i></i>
                <p>录题组卷，发布考试，阅卷分析，检验培训效果，自动生成能力模型，一整套完整的学习流程，助力线上培训服务。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="trainAdvantagesImg2" alt="随时随地学习" />
              <div class="products-services-content">
                <h5>随时随地学习</h5>
                <i></i>
                <p>支持PC、移动多端联动，高频互动培训，可集成微信、钉钉、飞书、OA等多终端，让学员能有效利用碎片化时间，随时随地参与学习答题。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img :src="trainAdvantagesImg3" alt="线上线下融合，自动记录学习轨迹" />
              <div class="products-services-content">
                <h5>线上线下融合<br>自动记录学习轨迹</h5>
                <i></i>
                <p>实时跟踪进度，通过在线学习的便捷，充分发挥讲师的引导、监控教学作用，及学员学习过程中的能动性，多种课程完成条件设置，适应于不同的在线培训需求，多元化管理培训项目。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="trainAdvantagesImg4" alt="学，测，考，练，评一站式解决企业培训问题" />
              <div class="products-services-content">
                <h5>学，测，考，练，评一站式解决企业培训问题</h5>
                <i></i>
                <p>包含在线考试系统题库——组卷——考试——练习的全部功能；支持个性化为学员定制培训方案，设计岗位学习地图，学习过程中自动触发练习题，边学边练检验成果。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
              </div>
            </div>
          </div>
        </li>
      </ul>

    </div>

    <!--  产品功能 -->
    <div class="platform-product-function">
      <div class="client-container">
        <h4 class="client-title">产品功能</h4>
        <ul class="product-function-box mta-hidden-xs">
          <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端，能根据实际培训场景，提供满足员工多场景下的学习方式，多端学习数据即时同步，轻量化课程体系，学练结合， 每日自动推送轻量化学习内容和练习题</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 class="experience-swiper-box mta-hidden-sm">
          <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon1"></i><h5>用户体系构建</h5>
                  <p>支持分层级管理权限，用户信息多端集成同步，能满足多层级组织架构，多级子公司运营的独立管理需求</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon2"></i><h5>督学与监管记录</h5>
                  <p>先学习后考试，巩固培训效果，不断提升行业竞争力，形成培训记录数据，为管理提供数据证明，强大的督学分析体系让培训易于组织、真正有效</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon3"></i><h5>随时随地想学就学</h5>
                  <p>适配PC端、手机端、PAD端，能根据实际培训场景，提供满足员工多场景下的学习方式，多端学习数据即时同步，轻量化课程体系，学练结合， 每日自动推送轻量化学习内容和练习题</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon4"></i><h5>稳定安全的数据保护</h5>
                  <p>采用多种手段、多种安全防护措施保护数据不被黑客和有意破坏者攻击，强大的数据备份恢复功能，保证考试和学习的顺利进行</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon5"></i><h5>完善的课程学习体系</h5>
                  <p>任意组合培训功能模块搭建学习项目，学员进度可见，报名、身份验证、培训、考试、获取证书整个组织流程一气呵成，每当学员满足预设条件时即触发下一环节，形成完整的培训流程闭环</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon6"></i><h5>功能丰富的在线考试</h5>
                  <p>强大的题库管理和丰富的考试控制功能，灵活的出题策略，标准化的全功能在线考试系统，让考务工作更轻松</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon7"></i><h5>与第三方系统无缝集成</h5>
                  <p>基于Java语言开发Springcloud框架，稳定安全，高性价比；支持微信、钉钉、EAP/EIP、OA、HR系统的多端无缝连接，及用户数据同步</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box">
                  <i class="product-function-icon8"></i><h5>个性化定制</h5>
                  <p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</p>
                </div>
              </li>
            </ul>
            <div class="swiper-pagination swiper-pagination-style"></div>
            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
          </div>
        </div>
        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
      </div>
    </div>

    <!-- 为不同行业场景提供解决方案 -->
    <div class="platform-application-scenarios train-application-scenarios">
      <div class="client-container">
        <h4 class="client-title">为不同行业场景提供解决方案</h4>
        <ul class="application-scenarios-box mta-hidden-xs">
          <li>
            <div class="application-scenarios-content">
              <div class="application-scenarios-img"></div>
              <h5>新员工入职培训</h5>
              <p :title="`新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态`">
                新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态
              </p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-content">
              <div class="application-scenarios-img"></div>
              <h5>岗位技能考核</h5>
              <p :title="`企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化`">
                企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化
              </p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-content">
              <div class="application-scenarios-img"></div>
              <h5>企业招聘考试</h5>
              <p :title="`满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。`">
                满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。
              </p>
            </div>
          </li>
        </ul>
        <!-- 手机轮播 -->
        <div class="experience-swiper-box mta-hidden-sm">
          <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <div class="experience-content-box scenarios-gwks-box">
                  <i class="product-function-icon1"></i><h5>新员工入职培训</h5>
                  <p>新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box scenarios-dxjs-box">
                  <i class="product-function-icon2"></i><h5>岗位技能考核</h5>
                  <p>企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化</p>
                </div>
              </li>
              <li class="swiper-slide">
                <div class="experience-content-box scenarios-zgks-box">
                  <i class="product-function-icon3"></i><h5>企业招聘考试</h5>
                  <p>满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。</p>
                </div>
              </li>
            </ul>
            <div class="swiper-pagination swiper-pagination-style"></div>
            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
          </div>
        </div>
        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="platform-news-information mta-hidden-xs">
      <div class="client-container">
        <h4 class="client-title">新闻资讯</h4>
        <ul>
          <li style="font-size: 16px" v-for="(item, index) in topCarousels">
            <div>
              <img :src="item.pic" alt="新闻资讯" />
              <h4 @click="checkInfo(item)">{{ item.title }}</h4>
              <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
              <p>{{ item.intro }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 系统维护-->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
  </div>
</template>

<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'trainsystem',
    layout:   'templateB',
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/trainsystem');


      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
                                               return res;
                                             })
                                           ]);
      return {
        bannerList: res1.data.data||[],
        topCarousels: res2.data.data||[],

      };
    },
    data() {
      return {
        trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.png`),
        trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.png`),
        trainAdvantagesImg3:  require(`~/static/images/client/train/product-advantages-img3.png`),
        trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.png`),
        youkeFlag:false,// 控制游客系统是否维护中
        systemMaintainDl:false,// 系统维护弹窗
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
            clickable: true, // 点击当前滑块切换到对应的轮播图片
          },
          autoplay: {
            delay: 5000,
          },
          paginationClickable: true,
          speed: 800,
          loop: true,
          observer: true,
          observeParents: true,
        },
        swiperOptionGn: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
            clickable: true, // 点击当前滑块切换到对应的轮播图片
          },
          autoplay: {
            delay: 5000,
          },
          paginationClickable: true,
          speed: 800,
          loop: true,
          observer: true,
          observeParents: true,
        },
        swiperOptionCj: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
            clickable: true, // 点击当前滑块切换到对应的轮播图片
          },
          autoplay: {
            delay: 100000,
          },
          paginationClickable: true,
          speed: 800,
          loop: true,
          observer: true,
          observeParents: true,
          autoplayDisableOnInteraction: false,
        },
      };
    },
    head(){
      return {
        title: '在线培训平台_在线培训软件_培训软件系统',
        meta: [
          {
            name: 'keywords',
            content: '培训平台,培训软件'
          },
          {
            name:'description',
            content:'麦塔培训系统特点具有全流程课程学习体系、随时随地学习、线上线下融合自动记录学习轨迹、学测考练评一站式解决企业培训问题。'
          }
        ],
      }
    },
    computed: {},
    methods:  {
      // 游客系统试用
      ykFreeTrial(){
        if(this.youkeFlag){
          // 没升级
          window.open('https://youkepxc.mtavip.com/pxcmdist/#/youke')
        }else{
          // 升级中
          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
        }
      },
      // 免费试用
      FreeTrial(){
          // 没升级
          this.getSystemWidth();
          if(this.SystemWidthFlag){
            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
          }else{
            window.open('https://cdnks.mtavip.com/a/register?flug=2')
          }
      },
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }
      },
      // 培训学员端体验
      pxTyBtn(btnUrl){
        this.getSystemWidth();
        if(this.youkeFlag) {
          if(this.SystemWidthFlag){
            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
          }else {
            window.open(btnUrl);
          }
        }else{
          if(this.SystemWidthFlag){
            // 升级中
            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
          }else{
            this.systemMaintainDl = true;
          }

        }
      },
      //  describe: 点击查看 author: Wgy date:6/8/21
      goCheckLog(){
        this.$router.push({ name: 'checkLogPeixun' });
      },
      // 鼠标移入
      enterCode(){
        if(this.youkeFlag){
        this.$refs.codeBtn.style.bottom ='90px';
        }else{
          this.$refs.codeBtn.style.bottom ='0';
        }
      },

      // 鼠标移出
      leaveCode(){
        this.$refs.codeBtn.style.bottom ='305px';
      },
      checkInfo(data) {
        const opt = {
          id: data.code,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
      clickBanner(data){
        if(data){
          window.open(data)
        }
      },
    },
    created() {
      // 页面初始化
      this.$axios.$post('/home/youke/stop').then(res=>{
        if (res.data === '1') {
          this.youkeFlag = false;
        }else{
          this.youkeFlag = true;
        }
      });
    },
    mounted() {
      this.getSystemWidth();
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>