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 :interval="3333333" 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 client-container mta-hidden-xs">
      <ul>
        <li>
          <div class="company-item">
            <i></i>
            <div><p>在线考试系统</p><h4>让考试变得更轻松</h4></div>
          </div>
        </li>
        <li>
          <div class="company-item">
            <i></i>
            <div><p>在线培训系统</p><h4>为企业解决培训痛点</h4></div>
          </div>
        </li>
        <li>
          <div class="company-item">
            <i></i>
            <div><p>课程定制开发</p><h4>打造专业定制化服务</h4></div>
          </div>

        </li>
        <li>
          <div class="company-item">
            <i></i>
            <div><p>通用课程资源</p><h4>企业构建自主课程体系</h4></div>
          </div>
        </li>
      </ul>
    </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 mta-hidden-xs">
      <div class="client-container">
        <h4 class="client-title">他们都在用</h4>
        <ul class="customer-img-box">
          <div class="customer-row">
            <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>
          </div>
          <div class="customer-row">
            <li><img :src="customerImg6" alt="华发股份"/></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="astellas"/></li>
          </div>

          <div class="customer-row">
            <li><img :src="customerImg12" alt="酷狗音乐"/></li>
            <li><img :src="customerImg13" alt="伟岸纵横"/></li>
            <li><img :src="customerImg14" alt="航天信息"/></li>
            <li><img :src="customerImg15" alt="sony"/></li>
            <li><img :src="customerImg16" alt="中国海洋大学"/></li>
          </div>
        </ul>
      </div>
    </div>

    <div class="client-customer-box mta-hidden-sm">
      <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="华发股份"/></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="astellas"/></li>
          <li><img :src="customerImg12" alt="酷狗音乐"/></li>
          <li><img :src="customerImg13" alt="伟岸纵横"/></li>
          <li><img :src="customerImg14" alt="航天信息"/></li>
          <li><img :src="customerImg15" alt="sony"/></li>
          <li><img :src="customerImg16" 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/productImage/p04.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/productImage/p03.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/productImage/p01.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/productImage/p02.png`),
            order: 2,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kecheng'
        }
      ],
      SystemWidthFlag: false,// 判断是否是手机端，默认为false，默认为PC端
      topCarousels2: [],
      // 客户logo
      customerImg1: require(`~/static/gangweiIcon/z154.png`),
      customerImg2: require(`~/static/gangweiIcon/z155.png`),
      customerImg3: require(`~/static/gangweiIcon/z156.png`),
      customerImg4: require(`~/static/gangweiIcon/z157.png`),
      customerImg5: require(`~/static/gangweiIcon/z158.png`),
      customerImg6: require(`~/static/gangweiIcon/z159.png`),
      customerImg7: require(`~/static/gangweiIcon/z160.png`),
      customerImg8: require(`~/static/gangweiIcon/z161.png`),
      customerImg9: require(`~/static/gangweiIcon/z162.png`),
      customerImg10: require(`~/static/gangweiIcon/z163.png`),
      customerImg11: require(`~/static/gangweiIcon/z164.png`),
      customerImg12: require(`~/static/gangweiIcon/z165.png`),
      customerImg13: require(`~/static/gangweiIcon/z166.png`),
      customerImg14: require(`~/static/gangweiIcon/z167.png`),
      customerImg15: require(`~/static/gangweiIcon/z168.png`),
      customerImg16: require(`~/static/gangweiIcon/z169.png`),

      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;
}

.client-products-services {
  .client-title {
    font-size: 30px;
    font-weight: 800;
    color: #333;
  }
}

.banner-btn-groups {
  position: absolute;
  left: 0;
  top: 406px;
}

.banner-btn-groups.btn-0 {
  .free-train-btn {
    background: #fff;
    color: #93C751;
    border-radius: 50px;
  }

  .online-information-btn {
    background: #93C751;
    color: #fff;
    border-radius: 50px;
    border-color: #fff;
  }

}

.banner-btn-groups.btn-1 {

  .free-train-btn {
    background: #fff;
    border-radius: 50px;
    color: #40d486;
  }

  .online-information-btn {
    background: #40d486;
    color: #fff;
    border-radius: 50px;
    border-color: #fff;
  }

}

.banner-btn-groups.btn-2 {
  top: 444px;

  .apply-btn {
    background: #fff;
    border-radius: 50px;
    color: #2a846a;
  }

  .online-information-btn {
    background: #2a8469;
    color: #fff;
    border-radius: 50px;
    border-color: #fff;
  }
}

.banner-btn-groups.btn-3 {
  top: 470px;

  .apply-btn {
    background: #ffbb1a;
    border-radius: 50px;
    color: #fff;
  }

  .online-information-btn {
    background: #8ec754;
    color: #fff;
    border-color: #fff;
  }
}

.customer-img-box {
  .customer-row {
    display: flex;
    flex-direction: row;
    justify-content: center;

    img {
      width: 190px;
      height: 54px;
    }
  }
}
</style>