nuxtProject/pages/index.vue

<template>

  <div class="client-index-page">
    <div style="display: none">
      <a :href="`${baseUrl}/dalianmaita/pcsitemap.xml`"></a>
    </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 class="client-container">
              <div class="banner-btn-groups">
                <freeTrialBtn class="free-train-btn btn-item" myType="kaoshi" :select="true" @need-select="onNeedSelect" />
                <onlineInformationBtn class="online-information-btn btn-item" />
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 发展历程-移动端隐藏-->
    <div class="client-company-history mta-hidden-xs">
      <div class="client-container">
        <ul>
          <li><img src="#">
            <div><p>在线考试系统</p><h4>让考试变得更轻松</h4></div>
          </li>
          <li><img src="#">
            <div><p>在线培训系统</p><h4>为企业解决培训痛点</h4></div>
          </li>
          <li><img src="#">
            <div><p>课程定制开发</p><h4>打造专业定制化服务</h4></div>
          </li>
          <li><img src="#">
            <div><p>通用课程资源</p><h4>企业构建自主课程体系</h4></div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 产品和服务 -->
    <div class="client-products-services client-container">
      <h4 class="client-title">产品和服务</h4>
      <imgCardLv1 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :col-h5="2">

        <div class="btn-groups">
          <applyBtn class="apply-btn btn-item" v-if="item.shenqing" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
        </div>


      </imgCardLv1>
    </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>
    <!--  新闻资讯  -->
    <newsComp :newsData="topCarousels"></newsComp>
    <!--  申请方案  -->
    <applicationDialog :visible.sync="telDl"></applicationDialog>

    <selectDialog :show.sync="show"></selectDialog>

  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import applyBtn from "~/components/common/applyBtn";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import applicationDialog from "~/components/common/applicationDialog";
import newsComp from "~/components/common/newsComp";
import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";
import selectDialog from "~/components/common/selectDialog";
import {BannerImgs, classifys} from "~/defaultConfig"

/**
 * @ 首页
 */
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}) {
    let [res1, res2] = await Promise.all([
      await $axios.$post(`/home/news/carousel`, {newsClassifyId: classifys.shouye.classify}).then(res => {
        return res;
      }),
      await $axios.$post(`/home/banner/list`, {code: BannerImgs.shouye}).then(res => {
        return res;
      }),
    ]);
    return {

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

    };
  },
  data() {
    return {
      show: false,
      productList: [
        {
          content: {
            title: '在线考试系统一建立无纸化考试通道',
            des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
            list: [
              {
                value: '试题批量导入',
              },
              {
                value: '多种题型支持',
              },
              {
                value: '随机组卷抽题',
              },
              {
                value: '考试时间设定',
              },
              {
                value: '360°防作弊监考',
              },
              {
                value: '自动阅卷判卷',
              },
              {
                value: '成绩统计查询',
              },
              {
                value: '证书颁发打印',
              },
            ],
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '在线培训系统 一 3步帮您搭建企业专属培训系统',
            des: '专注企业员工提升解决方案，不止是简单的培训系统开发，1V1部署资讯与百人课程开发团队，帮您解决后顾之忧。',
            list: [
              {
                value: '在线直播教学',
              },
              {
                value: '课后直播回放',
              },
              {
                value: '阶段测评考试',
              },
              {
                value: '课堂互动交流',
              },
              {
                value: '视频课程教学',
              },
              {
                value: '课程设置管理',
              },
              {
                value: '课程结束考试',
              },
              {
                value: '学员统计分析',
              },
            ],
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'peixun'
        },
        {
          content: {
            title: '课程定制开发一打造专业定制化服务',
            des: '百人制作团队，涉及900个行业，深入各大领域，专注课程开发9年，累积定制3万+小时课程',
            list: [
              {
                value: 'E-learning课程',
              },
              {
                value: '微课程制作',
              },
              {
                value: '宣传片制作',
              },
              {
                value: 'PPT定制',
              },
              {
                value: '情景动画开发',
              },
              {
                value: 'H5平面设计',
              },
              {
                value: '视频后期制作',
              },
            ],
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kecheng'
        },
        {
          content: {
            title: '通用课程资源一帮助企业构建自主课程体系',
            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
            list: [
              {
                value: '职业素养',
              },
              {
                value: '领导能力',
              },
              {
                value: '人力资源',
              },
              {
                value: '市场营销',
              },
              {
                value: '行政管理',
              },
              {
                value: '财务管理',
              },
              {
                value: '客服服务',
              },
              {
                value: '产品运营',
              },
              {
                value: '生产采购',
              },
            ],
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kecheng'
        }
      ],
      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: '请输入验证码'},
        ],
      },


    };


  },
  components: {
    imgCardLv1,
    applyBtn,
    freeTrialBtn,
    onlineInformationBtn,
    applicationDialog,
    newsComp,
    selectDialog
  },
  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: 'http://www.mtaclass.com/'
        }
      ]
    }
  },
  methods: {
    onNeedSelect() {
      this.show = true;
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: 'shouye',}});
    },
    clickBanner(data) {
      if (data.url) {
        window.open(data.url)
      }
    },

    // 免费试用
    FreeTrial(type) {
      var registerType = type;
      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')
        }

      }
    },

    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']),
  },
};
</script>

<style lang="scss" scoped>
.client-index-page {
  .free-train-btn,.apply-btn{margin-right: 16px;}
    .btn-groups {
      margin-top: 48px;
    }
  @media (max-width: 768px) {
    .btn-groups {
      display: flex;justify-content: center;margin-top: 30px;
    }
  }

}

.client-container {
  position: relative;
}
.banner-btn-groups {
  position: absolute;
  left: 0;
  top: 250px;
}

</style>