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>新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态</p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-content">
              <div class="application-scenarios-img"></div>
              <h5>岗位技能考核</h5>
              <p>企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化</p>
            </div>
          </li>
          <li>
            <div class="application-scenarios-content">
              <div class="application-scenarios-img"></div>
              <h5>企业招聘考试</h5>
              <p>满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的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>