nuxtProject/pages/index.vue

<template>

  <div class="client-index-page">
    <div style="display: none">
      <a :href="`${baseUrl}/pcdituye.html`"></a>
      <a :href="`${baseUrl}/pcsitemap.xml`"></a>
    </div>

    <h1 style='display:none;'>在线考试系统在线培训系统在线答题系统在线学习系统</h1>
    <div style='display:none;'>
      大连麦塔软件服务有限公司是专业的在线考试系统教育软件与在线培训系统数字化资源服务供应商，创立于2007年，总部位于大连软件园。在线考试系统公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。“共同成长、相伴一生”是麦塔软件始终不渝的核心价值观。麦塔软件在线培训系统将一如既往，持续创新、创造价值，与客户、合作伙伴共享共赢。
      在线培训系统MTA是Master of Training Administration的缩写，含义是培训管理专家，麦塔在线答题系统致力于为客户提供专业的在线教育方案，打造企业核心竞争力。麦塔在线培训系统品牌诞生于2009年，在线考试系统公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。研发团队集结了来自互联网、科技、教育等多个领域专家级研发工程师，在线考试系统率先实现了移动化、平台化、知识化、智能化的学习管理模式。麦塔在线学习系统肩负着“改变互联网教育未来”的使命，持续创新、创造价值，在线答题系统与客户和合作伙伴共享共赢。
    </div>

    <!-- 首页banner栏 -->
    <div class="client-banner-box">
      <el-carousel trigger="click">
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
            <div @click="clickBanner(item)" :style="{backgroundImage: 'url(' + item.pic + ')'}" class="index-carousel-box"></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 发展历程-移动端隐藏-->
    <div class="client-company-history mta-hidden-xs">
      <div class="client-container">
        <ul>
          <li><div><p>2008<span>年</span></p><h4>公司创立于2008年</h4></div></li>
          <li><div><p>3000<span>+</span></p><h4>已与3000多家企业建立了合作关系</h4></div></li>
          <li><div><p>124,799<span>+</span></p><h4>平台用户已达到124799</h4></div></li>
          <li><div><p>30,000<span>+</span></p><h4>课件开发超30000课时</h4></div></li>
        </ul>
      </div>
    </div>

    <!-- 产品和服务 -->
    <div class="client-products-services">
      <div class="client-container">
        <h4 class="client-title">产品和服务</h4>
        <div class="products-services-box">
          <img :src="productsImg1" alt="易用/稳定/高效的在线考试系统" />
          <div class="products-services-content">
              <h5>更智能/更专业/更稳定的在线考试系统</h5>
              <i></i>
              <p class="p-before-circle">拥有灵活的出题策略，满足各种组卷需求</p>
              <p class="p-before-circle">支持使用电脑、手机、Pad参加考试，可与微信公众号、钉钉无缝集成</p>
              <p class="p-before-circle">支持考试防作弊、试题乱序、试题保护、人脸识别等参数设置</p>
              <p class="p-before-circle">拥有灵活的出题策略、多样化的参数设置，能够随机应变适应不同的考场环境</p>
              <p class="p-before-circle">系统支持大并发，万人以上同时在线考试也能轻松应对无压力</p>
              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(1)">免费试用</div><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
          </div>
        </div>
        <div class="products-services-box products-contrary-box">
            <img :src="productsImg2" alt="高灵活/多种学习场景的在线培训学习系统" />
            <div class="products-services-content">
              <h5>高灵活/多种学习场景的在线培训学习系统</h5>
              <i></i>
              <p class="p-before-circle">碎片化学习，学员可以随时随地通过手机、PC进行在线学习，高效便捷</p>
              <p class="p-before-circle">支持课件录播在线学习、讲师直播课程、互动知识问答等多种学习形式</p>
              <p class="p-before-circle">灵活的课件结构设计，可以自定义课程章节，助力企业不同的人才培养需要</p>
              <p class="p-before-circle">智能统计学习情况，通过在线学习和考试相结合，双向考核学员的学习能力</p>
              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(2)">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
            </div>
        </div>
        <div class="products-services-box">
            <img :src="productsImg3" alt="数字课程开发服务" />
            <div class="products-services-content">
              <h5>数字课程开发服务</h5>
              <i></i>
              <p>在线培训学习离不开优秀的课程，麦塔软件汇聚优质的课程开发团队，在开发课程中不断更新适应社会、文化、科学等最新变化，让课程与时俱进。截止目前已为企事业单位、医疗行业、教育培训行业、金融行业、煤炭化工行业等12大行业定制开发了超过30000课时。</p>
              <div class="client-btn-box"><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
            </div>
        </div>
      </div>
    </div>

    <!-- 行业学习需求 -->
    <div class="client-demand-box">
      <div class="client-container">
        <h4 class="client-title">满足不同行业学习需求</h4>
        <el-tabs v-model="activeName" type="card" class="demand-box-tab">
          <el-tab-pane label="考试系统" name="first">
            <ul class="demand-tab-list demand-kaoshi-list">
              <li v-for="item in kaoshiLiArray">
                <div class="demand-content-box">{{item.demandNumber}}</div>
                <a class="demand-onclick-btn mta-hidden-sm" @click="goDetailsPage(item.demandHref)"></a>
                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                <div class="demand-mask-box">
                  <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
                  <p :title="item.demandText">{{item.demandText}}</p>
                  <div class="demand-icon-box">
                    <a v-for="item2 in item.demandLinkBox" :href="`${baseUrl}/${item2.href}`"><img :src="item2.img" alt="客户案例"></a>
                  </div>
                </div>
              </li>
            </ul>
            <div rel="nofollow" class="free-trial-default-btn" @click="FreeTrial(1)">免费试用</div>
          </el-tab-pane>
          <el-tab-pane label="培训系统" name="second">
            <ul class="demand-tab-list demand-peixun-list">
              <li v-for="item in peixunLiArray">
                <div class="demand-content-box">{{item.demandNumber}}</div>
                <a class="demand-onclick-btn mta-hidden-sm" :href="`${baseUrl}/${item.demandHref}`"></a>
                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                <div class="demand-mask-box">
                  <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
                  <p :title="item.demandText">{{item.demandText}}</p>
                  <div class="demand-icon-box">
                    <a v-for="item2 in item.demandLinkBox" :href="`${baseUrl}/${item2.href}`"><img :src="item2.img" alt="客户案例"></a>
                  </div>
                </div>
              </li>
            </ul>
            <div rel="nofollow" class="free-trial-default-btn"  @click="FreeTrial(2)">免费试用</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 您坚决选择我们的理由 -->
    <div class="client-chose-box">
      <div class="client-container">
        <h4 class="client-title">您坚决选择我们的理由</h4>
        <ul class="chose-img-box">
          <li>
            <div>
              <span><img :src="choseImg1" alt="1v1专属顾问服务" /></span>
              <h5>1v1专属顾问服务</h5>
            </div>
          </li>
          <li>
            <div>
              <span><img :src="choseImg3" alt="完善智能的培训体系" /></span>
              <h5>完善智能的培训体系</h5>
            </div>
          </li>
          <li>
            <div>
              <span><img :src="choseImg2" alt="可靠领先的开发技术"/></span>
              <h5>可靠领先的开发技术</h5>
            </div>
          </li>
          <li>
            <div>
              <span><img :src="choseImg4" alt="成熟的运营支持团队" /></span>
              <h5>成熟的运营支持团队</h5>
            </div>
          </li>
        </ul>
        <div rel="nofollow" class="free-trial-default-btn" @click="FreeTrial(1)">免费试用</div>
      </div>
    </div>

    <!-- 新闻资讯 PC-->
    <div class="client-news-information mta-hidden-xs">
      <h4 class="client-title">麦塔资讯</h4>
      <div class="client-container">
          <div class="industry-information-box">
            <div class="industry-information-left">
                <img :src="topCarousels[0].pic" alt="麦塔资讯" />
                <h4 @click="checkInfo(topCarousels[0])">{{ topCarousels[0].title }}<i></i></h4>
                <div><b>{{ topCarousels[0].yyyy }}</b><span>{{ topCarousels[0].mmdd }}</span></div>
                <p>{{ topCarousels[0].intro }}</p>
            </div>
            <div class="industry-information-right">
              <ul>
                <li v-for="(item, index) in topCarousels" v-if="index >= 1">
                  <h4 @click="checkInfo(item)">
                    <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
                    <span>{{ item.yyyy }}</span>{{ item.title }}
                  </h4>
                  <p><span>{{ item.mmdd}}</span>{{ item.intro }}</p>
                </li>
              </ul>
            </div>
          </div>
      </div>

    </div>

    <!-- 新闻资讯 手机-->
    <div class="client-newsInfo-phone mta-hidden-sm">
      <h4 class="client-title">新闻资讯</h4>
      <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
        <el-carousel-item v-for="(item,index) in topCarousels" :key="index" class="el-row">
          <img :src="item.pic" alt="新闻资讯"  @click="checkInfo(item)"/>
          <div class="newsInfo-card-content"  @click="checkInfo(item)">
            <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
            <h4>{{ item.title }}<i></i></h4>
            <span>{{ item.yyyy }}-{{ item.mmdd }}</span>
            <p>{{ item.intro }}</p>
          </div>

        </el-carousel-item>
      </el-carousel>

    </div>

    <!-- 超过10万家客户的信任之选 -->
    <div class="client-customer-box">
      <div class="client-container">
        <h4 class="client-title">他们都在用</h4>
        <ul class="customer-img-box">
          <li><img :src="customerImg1" alt="中国人民银行" /></li>
          <li><img :src="customerImg2" alt="汇丰" /></li>
          <li><img :src="customerImg3" alt="中国银行" /></li>
          <li><img :src="customerImg4" alt="中信银行" /></li>
          <li><img :src="customerImg5" alt="中国民生银行" /></li>
          <li><img :src="customerImg6" alt="astellas" /></li>
          <li><img :src="customerImg7" alt="今日头条" /></li>
          <li><img :src="customerImg8" alt="华图教育" /></li>
          <li><img :src="customerImg9" alt="步步高" /></li>
          <li><img :src="customerImg10" alt="小天才" /></li>
          <li><img :src="customerImg11" alt="华发股份" /></li>
          <li><img :src="customerImg12" alt="上海航空" /></li>
          <li><img :src="customerImg13" alt="中国国际航空公司" /></li>
          <li><img :src="customerImg14" alt="中国东方航空" /></li>
          <li><img :src="customerImg15" alt="深圳航空" /></li>
          <li><img :src="customerImg16" alt="中建八局" /></li>
          <li><img :src="customerImg17" alt="SANOFI" /></li>
          <li><img :src="customerImg18" alt="大连海事大学" /></li>
          <li><img :src="customerImg19" alt="南京银行" /></li>
          <li><img :src="customerImg20" alt="中国人民银行" /></li>
        </ul>
      </div>
    </div>

    <!-- 我们始终专注教育系统研发更懂用户需求 -->
    <div class="client-cert-box">
      <div class="client-container">
        <h4 class="client-title">多年专业累积，更懂您的需求</h4>
        <div class="cert-img-box">
          <span><img :src="certImg3" alt="麦塔课程管理系统" /></span>
          <span><img :src="certImg4" alt="麦塔用户管理系统" /></span>
          <span><img :src="certImg7" alt="麦塔培训系统" /></span>
          <span><img :src="certImg6" alt="麦塔考试系统" /></span>
          <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
        </div>
        <a class="client-default-Btn" :href="`${baseUrl}/introduction`">了解更多</a>
      </div>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="telDl"
      @close="delDlClose"
      class="application-scheme-dialog"
      center>
      <i></i>
      <p>免费获得课程开发解决方案</p>
      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
        <el-form-item  prop="tel">
          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
        </el-form-item>
        <div id="your-dom-id" class="nc-container"></div>
        <el-form-item prop="verification">
          <div class="verification">
            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
            <el-button  @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{btnText}}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
      <span>免费热线：400-052-2130</span><a href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011" target="_blank">在线客服</a>
    </el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name:       'index',
    layout:     'templateA',
    watchQuery: true,
    async fetch({ $axios, store, query }) {
      try {
        const { data } = await $axios.post('/home/links/list');
        store.commit('SetFooterYouQingLianJie', data.data.data);
      } catch (e) {

      }

    },
    async asyncData({ $axios, store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/');

      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/home/banner/list`, { 'code': 1 }).then(res => {
                                               return res;
                                             }),
                                           ]);
      return {

         topCarousels: res1.data.data||[],
         bannerList: res2.data.data||[],

      };
    },
    data() {
      return {
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        topCarousels2:  [],
        // 产品和服务
        productsImg1:   require(`~/static/images/client/index/index-products-kaoshi.png`),
        productsImg2:   require(`~/static/images/client/index/index-products-peixun.png`),
        productsImg3:   require(`~/static/images/client/index/index-products-kejian.png`),
        // 您坚决选择我们的理由
        choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
        choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),
        choseImg3:   require(`~/static/images/client/index/index-chose-tech-icon.png`),
        choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
        // 客户logo
        customerImg1:   require(`~/static/images/client/index/index-customer-img1.png`),
        customerImg2:   require(`~/static/images/client/index/index-customer-img2.png`),
        customerImg3:   require(`~/static/images/client/index/index-customer-img3.png`),
        customerImg4:   require(`~/static/images/client/index/index-customer-img4.png`),
        customerImg5:   require(`~/static/images/client/index/index-customer-img5.png`),
        customerImg6:   require(`~/static/images/client/index/index-customer-img6.png`),
        customerImg7:   require(`~/static/images/client/index/index-customer-img7.png`),
        customerImg8:   require(`~/static/images/client/index/index-customer-img8.png`),
        customerImg9:   require(`~/static/images/client/index/index-customer-img9.png`),
        customerImg10:  require(`~/static/images/client/index/index-customer-img10.png`),
        customerImg11:  require(`~/static/images/client/index/index-customer-img11.png`),
        customerImg12:  require(`~/static/images/client/index/index-customer-img12.png`),
        customerImg13:  require(`~/static/images/client/index/index-customer-img13.png`),
        customerImg14:  require(`~/static/images/client/index/index-customer-img14.png`),
        customerImg15:  require(`~/static/images/client/index/index-customer-img15.png`),
        customerImg16:  require(`~/static/images/client/index/index-customer-img16.png`),
        customerImg17:  require(`~/static/images/client/index/index-customer-img17.png`),
        customerImg18:  require(`~/static/images/client/index/index-customer-img18.png`),
        customerImg19:  require(`~/static/images/client/index/index-customer-img19.png`),
        customerImg20:  require(`~/static/images/client/index/index-customer-img20.png`),
        // 证书图片
        certImg3:       require(`~/static/images/client/index/index-cert-img3.jpg`),
        certImg4:       require(`~/static/images/client/index/index-cert-img4.jpg`),
        certImg6:       require(`~/static/images/client/index/index-cert-img6.jpg`),
        certImg7:       require(`~/static/images/client/index/index-cert-img7.jpg`),
        certImg8:       require(`~/static/images/client/index/index-cert-img8.jpg`),
        activeIndex:    '首页',
        activeName:     'first',// tab页签
        kaoshiLiArray: [
          {
            demandNumber:'01',
            demandTitle:'企事业单位',
            demandHref:  'government',
            demandText:    '无论是企业单位还是事业单位，都少不了要进行胜任力考核、年度考核、党建考核、晋升考核等不同形式的考试。而传统的考核方式，在时间和金钱的耗费上成本都较高，不再适应现代的企业管理模式。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon1-1.png`),
                href: 'government',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon1-2.png`),
                href: 'government',
              },
            ],
          },
          {
            demandNumber:'02',
            demandTitle:'信息产业',
            demandHref:  'information',
            demandText:    '互联网经济在中国GDP中占比持续攀升，面对日益庞大和复杂的业务需求，也渐渐将业务重心向“盈利”为核心的网络游戏、网上交易、网络广告、网络教育、网络短信等产业转移，驱动互联网行业加速创新，推动中国互联网的发展与进步。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon2-1.png`),
                href: 'information',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon2-2.png`),
                href: 'information',
              },
            ],
          },
          {
            demandNumber:'03',
            demandTitle:'能源化工',
            demandHref:  'energy',
            demandText:    '“十三五”规划中明确指出：积极构建智慧能源系统，推进能源与信息等领域新技术深度融合。以互联网创新思维为依托，以先进的技术为手段，深度推进能源化工与互联网融合发展。我国能源化工企业在信息化改革势在必行。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon3-1.png`),
                href: 'energy',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon3-3.png`),
                href: 'energy',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon3-4.png`),
                href: 'energy',
              },
            ],
          },
          {
            demandNumber:'04',
            demandTitle:'金融保险',
            demandHref:  'financial',
            demandText:    '当今世界经济发展呈一体化趋势，顺应这一潮流中国进一步加大了对外开放的步伐，也就是说金融业是在竞争中壮大的，这样的竞争压力对于企业而言就要求有过硬的知识储备和优秀的职业技能，这些都需要考核来托底，用考核数据作为指导依据，帮助业务能力的提升。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon4-1.png`),
                href: 'financial',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon4-2.png`),
                href: 'financial',
              },
            ],
          },
          {
            demandNumber:'05',
            demandTitle:'交通运输',
            demandHref:  'traffic',
            demandText:    '交通运输行业是国民经济发展的基础，交通运输网络的完善和服务水平的提高,推动了经济运行的同时，科学技术的进步又能反向推动运输业的发展，每次技术革命和技术进步都对交通运输业的发展起到了推动作用。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon5-1.png`),
                href: 'traffic',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon5-2.png`),
                href: 'traffic',
              },
            ],
          },
          {
            demandNumber:'06',
            demandTitle:'教育培训',
            demandHref:  'education',
            demandText:    '教育培训机构教师的用工形式较为灵活，这也就导致教师的教学水平参差不齐，给人员管理上带来了一定的难度。为了提高教学质量，要定期对员工及教师进行培训及考试，优胜劣汰。麦塔学独特的教育教培训考试工具能有效帮助教育培训机构实现教师的资格审查，提升教学水平。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon6-1.png`),
                href: 'education',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon6-2.png`),
                href: 'education',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon6-3.png`),
                href: 'education',
              },
            ],
          },
        ],
        peixunLiArray: [
          {
            demandNumber:'01',
            demandTitle:'食品餐饮',
            demandHref:  'restaurant',
            demandText:    '经济的不断发展也让餐饮文化的传播越来越国际化和市场化，餐饮业在市场的扩张下，门店普遍较多，一线工作人员一般都随门店呈散点状分布在全国，甚至全球。但是由于培训成本较高，导致服务规范、操作流程、售后体系等方面都不能够统一，如何应对蓬勃发展的餐饮形势，是餐饮业所面临的问题。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon7-1.png`),
                href: 'restaurant',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon7-2.png`),
                href: 'restaurant',
              },
            ],
          },
          {
            demandNumber:'02',
            demandTitle:'教育培训',
            demandHref:  'trainEducation',
            demandText:    '教育培训机构教师的用工形式较为灵活，这也就导致教师的教学水平参差不齐，给人员管理上带来了一定的难度。为了提高教学质量，要定期对员工及教师进行培训及考试，优胜劣汰。麦塔学独特的教育教培训考试工具能有效帮助教育培训机构实现教师的资格审查，提升教学水平。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon8-1.png`),
                href: 'trainEducation',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon8-2.png`),
                href: 'trainEducation',
              },
            ],
          },
          {
            demandNumber:'03',
            demandTitle:'医疗行业',
            demandHref:  'medical',
            demandText:    '随着现代医学模式的转变和医疗需求的变化，医疗的知识面变得越来越宽泛，医务人员的素质、技术服务水平、设施环境条件、医疗费用高低、管理水平都被纳入了考核标准，这些考核标准在实务中都得到了综合的体现。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon9-1.png`),
                href: 'medical',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon9-2.png`),
                href: 'medical',
              },
            ],
          },
          {
            demandNumber:'04',
            demandTitle:'企事业单位',
            demandHref:  'trainGovernment',
            demandText:    '无论是企业单位还是事业单位，都少不了要进行胜任力考核、年度考核、党建考核、晋升考核等不同形式的考试。而传统的考核方式，在时间和金钱的耗费上成本都较高，不再适应现代的企业管理模式。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon10-1.png`),
                href: 'trainGovernment',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon10-2.png`),
                href: 'trainGovernment',
              },
            ],
          },
          {
            demandNumber:'05',
            demandTitle:'能源化工',
            demandHref:  'trainEnergy',
            demandText:    '“十三五”规划中明确指出：积极构建智慧能源系统，推进能源与信息等领域新技术深度融合。以互联网创新思维为依托，以先进的技术为手段，深度推进能源化工与互联网融合发展。我国能源化工企业在信息化改革势在必行。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon11-1.png`),
                href: 'trainEnergy',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon11-2.png`),
                href: 'trainEnergy',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon11-3.png`),
                href: 'trainEnergy',
              },
            ],
          },
          {
            demandNumber:'06',
            demandTitle:'制造行业',
            demandHref:  '#',
            demandText:    '工业制造行业一般都是人才密集型企业，工作人员一部分具有分布广、分布散、岗位跨度大的特点，另一部分具有集中、体量大、学习能力参差不齐的特点。且由于行业特性，对“安全生产”尤为看重，急需考核学习来进行业务支撑。',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon12-1.png`),
                href: '#',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon12-2.png`),
                href: '#',
              },
            ],
          },
        ],

        btnTextDisabled: false,
        telDl: false,
        btnText:         '获取验证码',
        countdown:       60, // 60秒倒计时
        sliderData:      {},
        appKey:          'FFFF0N00000000007EC0',
        telChangeDate:   {},
        telRules:        {
          tel:          [
            { trigger: 'blur', required: true, message: '请输入手机号' },
          ],
          verification: [
            { trigger: 'blur', required: true, message: '请输入验证码' },
          ],
        },


      };


    },

    head(){
      return {
        title: '在线考试系统_在线培训系统_组卷答题系统_考试软件',
        meta: [
          {
            name: 'description',
            content: '麦塔在线考试系统和在线培训系统拥有完全自主知识产权，专注于解决在线考试、在线培训难题，拥有防作弊系统，支持试题乱序、试题保护、人脸识别等参数设置；致力于高质量完成培训、考试任务，麦塔10余年专注打造多学习场景、安全稳定易用的在线考试系统、在线培训系统，能为企业节省30%的学习费用！'
          },
          {
            name: 'keywords',
            content: '考试系统,培训系统,答题系统,组卷系统,考试管理系统'
          },
        /*  {
            name: 'mobile-agent',
            content: 'format=html5;url=https://m.mtavip.com'
          },*/
          {
            name: 'bytedance-verification-code',
            content: 'EoTQ4NuK4pxkCu7efFJH'
          },
          {
            'http-equiv': 'Cache-Control',
            content: 'no-transform'
          },
        ],
        link:[
         /* {
            rel:'alternate',
            media:'only screen and(max-width: 640px)',
            href:'https://m.mtavip.com'
          },*/
          {
            rel:'canonical',
            href:'https://www.mtavip.com/'
          }
        ]
      }
    },
    methods:    {
      // 移动端跳转详情页
      goDetailsPage(data){
        this.$router.push({ name: data});
      },
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }

      },
      clickBanner(data){
      /*  console.log(data);

*/      if(data.url){
          window.open(data.url)
        }
        // this.$router.push({ name: 'indexEducation' });
      },

      // 免费试用
      FreeTrial(type){
        var registerType = type;
        this.getSystemWidth();
        if(this.SystemWidthFlag){
          if(registerType===1) {
            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
          }else {
            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
          }
        }else{
          if(registerType===1){
            window.open('https://cdnks.mtavip.com/a/register?flug=1')
          }else{
            window.open('https://cdnks.mtavip.com/a/register?flug=2')
          }

        }
      },
      // 申请方案
      applyFun() {
        this.getSystemWidth();
        if(this.SystemWidthFlag){
          this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'shouye',} });
        }else{
          this.telDl = true;
          this.sliderFun();
        }

      },

      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              phone:  this.telChangeDate.tel,
              code: this.telChangeDate.verification,
            };

            this.$axios.$post('/develop/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.telDl = false;
                this.$message.success('申请成功');
              } else {
                this.$message.error('申请失败');
              }
            });
          }
        });

      },


      delDlClose(){
        this.telDl  =false;
        this.countdown = -1;
        this.$refs.ruleTelForm.resetFields();
        __nc.reset();


      },

      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @param array|string 指定的脚本们
       * @param function 成功后回调的函数
       * @return array 所有生成的脚本元素对象数组
       * 异步加载js后运行回调函数callback / scripts 为数组或字符串
       */
      seriesLoadScripts(scripts, callback) {
        if (typeof (scripts) != 'object') {
          var scripts = [scripts];
        }
        var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
        var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
          s[i] = document.createElement('script');
          s[i].setAttribute('type', 'text/javascript');
          s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
            if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
              this.onload = this.onreadystatechange = null;
              this.parentNode.removeChild(this);
              if (i != last) {
                recursiveLoad(i + 1);
              } else if (typeof (callback) == 'function') {
                callback();
              }
            }
          };
          s[i].setAttribute('src', scripts[i]);
          HEAD.appendChild(s[i]);
        };
        recursiveLoad(0);
      },
      // 滑块
      sliderFun() {
        const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
        console.log(nc_token);
        const NC_Opt = {
          //声明滑动验证需要渲染的目标元素ID。
          renderTo:    '#your-dom-id',
          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey:      this.appKey,
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene:       'nc_message',
          //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
          token:       nc_token,
          //滑动条的宽度。
          customWidth: 300,
          //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
          trans:       { 'key1': 'code0' },
          //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
          elementID:   ['usernameID'],
          //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
          is_Opt:      0,
          //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
          language:    'cn',
          //是否启用。一般情况，保持默认值（true）即可。
          isEnabled:   true,
          //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
          timeout:     3000,
          //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
          times:       5,
          //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
          apimap:      {
            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
            // 'get_captcha': '//b.com/get_captcha/ver3',
            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
            // 'get_img': '//c.com/get_img',
            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
            // 'umid_serUrl': 'https://g.com/service/um.json'
          },
          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          callback:    (data) => {
            this.sliderData = Object.assign({}, data, {
              appkey: NC_Opt.appkey,
              scene:  NC_Opt.scene,
            });
            console.log( this.sliderData);
          },
        };
        let date11 = () => {

          let _date = new Date();
          let year = _date.getFullYear().toString();
          let month = _date.getMonth().toString();
          let day = _date.getDate().toString();
          let a = _date.getHours().toString();
          let b = _date.getMinutes().toString();
          let c = _date.getSeconds().toString();

          return year + month + day + a + b + c;
        };
        let c = date11();
        const scripts = [
          `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
        ];
        this.seriesLoadScripts(scripts, function () {
          var nc = new noCaptcha(NC_Opt);
          nc.upLang('cn', {
            _startTEXT:    '请按住滑块，拖动到最右边',
            _yesTEXT:      '验证通过',
            _error300:     '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
            _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
          });
        });

      },

      // 倒计时60秒
      setTime() {
        if (this.countdown === 0) {
          this.btnTextDisabled = false;
          this.btnText = '获取验证码';
          this.countdown = 60;
        }else if(this.countdown === -1){
          this.btnTextDisabled = false;
          this.btnText = '获取验证码';
          this.countdown = 60;
        }else {
          this.btnTextDisabled = true;
          this.btnText = '重新发送(' + this.countdown + 's)';
          this.countdown--;
          setTimeout(() => {
            this.setTime();
          }, 1000);
        }
      },
      // 验证码
      checkVerification() {
        if (this.sliderData.appkey === undefined) {
          this.$message.error('请先通过滑块校验');
          return;
        }
        this.$axios.$post(`/develop/exists`,{  phone: this.telChangeDate.tel}).then(res=>{

          if (res.code === 0 && res.data) {

            let req = {
              'appkey':    this.sliderData.appkey,
              'phone':     this.telChangeDate.tel,
              'scene':     this.sliderData.scene,
              'sessionid': this.sliderData.csessionid,
              'sig':       this.sliderData.sig,
              'token':     this.sliderData.token,
              'type':      0,
            }
            this.$axios.$post('/sendCode',req).then(res=>{
              if (res.code === 0 && res.data) {
                this.setTime();
              }else {
                this.$message.error(res.msg||'手机号已存在');
              }
            })
          } else {
            this.$message.error(res.msg||'手机号已存在');
            return false;
          }

        })
      },




      goExamPage(){
        this.$router.push({ name: 'examsystem' });
      },
      goPeixunPage(){
        this.$router.push({ name: 'trainsystem' });
      },
      goKechengPage(){
        this.$router.push({ name: 'courseware' });
      },
      checkInfo(data) {
        const opt = {
          id: data.code,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
    mounted() {
      this.getSystemWidth();
    }
  };
</script>

<style></style>