nuxtProject/pages/index.vue

<template>

  <div class="client-index-page">
    <!-- 首页banner栏 -->
    <div class="client-index-banner">
      <div class="client-container">
        <!--  banner左侧区域 -->
        <div class="banner-left">
          <h4>让知识更有价值</h4>
          <p>考试平台 / 培训平台 / 课程开发</p>
        </div>
        <!--  banner右侧区域 -->
        <div class="banner-right">
          <div class="banner-tel-box">
            <img :src="bannerTelImg" />
          </div>
          <i class="banner-pie"></i>
          <div class="banner-i-run">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 认识我们 -->
    <div class="client-link-box">
      <div class="client-container">
        <ul>
          <li>
            <div class="link-left"><i></i></div>
            <h5>认识我们</h5>
            <p>数字化、信息化转型中一股逆流而上的清风</p>
          </li>
          <li>
            <div class="link-left"><i></i></div>
            <h5>新版本上线</h5>
            <p>麦塔3.9.1版本上线了，功能抢先看</p>
          </li>
          <li>
            <div class="link-left"><i></i></div>
            <h5>政府行业解决方案</h5>
            <p>助力政府企业向信息化、数字化转变，节约行业成本、提高办事效率</p>
          </li>
          <li>
            <div class="link-left"><i></i></div>
            <h5>行业新动态</h5>
            <p>时代推动企业发展，在信息化、数字化的浪潮下，不进则退</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 产品和服务 -->
    <div class="client-products-services">
      <div class="client-container">
        <h4 class="client-title">产品和服务</h4>
        <ul class="products-services-box">
          <li>
            <div class="products-services-img"><i></i></div>
            <div class="products-services-content">
              <h5>考试系统</h5>
              <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升</p>
              <a class="client-default-Btn">了解详情</a>
            </div>
          </li>
          <li>
            <div class="products-services-img"><i></i></div>
            <div class="products-services-content">
              <h5>培训系统</h5>
              <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈</p>
              <a class="client-default-Btn">了解详情</a>
            </div>
          </li>
          <li>
            <div class="products-services-img"><i></i></div>
            <div class="products-services-content">
              <h5>课件制作</h5>
              <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程</p>
              <a class="client-default-Btn">了解详情</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 行业学习需求 -->
    <div class="client-demand-box">
      <div class="client-container-middle">
        <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 :class="{'active':kaoshiClicked===index}" @click="tabSwitch(item,index)"
                  v-for="(item,index) in kaoshiLiArray"><i></i>
                <p>{{item}}</p></li>
            </ul>
            <el-collapse-transition v-for="(item,index) in kaoshiDivArray" :key="index">
              <div v-show="kaoshiClicked===index"  class="demand-content-box">
                <div class="content-top-box">
                  <h5>行业详情</h5>
                  <p>{{item.demandText}}</p>
                  <a :href="item.demandHref" class="fn-clear"><span>了解详情</span></a>
                </div>
                <div>
                  <h5>客户案例</h5>
                  <div v-for="item2 in item.demandLinkBox" class="demand-icon-box"><a><img :src="item2.img"
                                                                                           alt="客户案例"><span>{{item2.demandName}}</span></a>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </el-tab-pane>
          <el-tab-pane label="培训系统" name="second">培训系统</el-tab-pane>
        </el-tabs>
        <!--<ul class="industry-box">
          <li>
            <img :src="demandImg1" alt="政府机构" />
            <div>
              <h5>政府机构</h5>
              <p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p>
              <a @click="goThirdParty(0)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg2" alt="医药卫生" />
            <div>
              <h5>医药卫生</h5>
              <p>
                应对种类繁多的专业医疗资格考试，“三基、三严”考试，辅助人才队伍建设
              </p>
              <a @click="goThirdParty(1)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg3" alt="能源化工" />
            <div>
              <h5>能源化工</h5>
              <p>提高安全生产培训效率，分析不足、排查隐患</p>
              <a @click="goThirdParty(2)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg4" alt="信息产业" />
            <div>
              <h5>信息产业</h5>
              <p>创新学习方式，打造在线学习品牌，提高全员移动学习的积极性</p>
              <a @click="goThirdParty(3)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg5" alt="交通运输" />
            <div>
              <h5>交通运输</h5>
              <p>推动技能领域交流互鉴，进一步培养和选拔高技能人才</p>
              <a @click="goThirdParty(4)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg6" alt="机械机电" />
            <div>
              <h5>机械机电</h5>
              <p>帮助用户创建优质工程，打造一流企业的管理方针</p>
              <a @click="goThirdParty(5)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg7" alt="教育培训" />
            <div>
              <h5>教育培训</h5>
              <p>
                不受时间、地点等因素限制，学员与教师相隔万里也可以开展教学活动
              </p>
              <a @click="goThirdParty(6)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg8" alt="食品餐饮" />
            <div>
              <h5>食品餐饮</h5>
              <p>定期培训考核，严格把控服务质量、食品安全标准</p>
              <a @click="goThirdParty(7)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg9" alt="金融保险" />
            <div>
              <h5>金融保险</h5>
              <p>
                针对员工岗位性质、能力素质和业务需求，精心设计考试内容，选备了相应的题库，分岗位进行集中测试。
              </p>
              <a @click="goThirdParty(8)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg10" alt="汽车制造" />
            <div>
              <h5>汽车制造</h5>
              <p>一线门店轻量化练习，边看边练，提高工作效率、增加企业利润</p>
              <a @click="goThirdParty(9)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg11" alt="新闻出版" />
            <div>
              <h5>新闻出版</h5>
              <p>推进编辑出版专业水平提高，出版专业技术人员职业资格考试等</p>
              <a @click="goThirdParty(10)">了解更多</a>
            </div>
          </li>
          <li>
            <img :src="demandImg12" alt="更多" />
            <div>
              <h5>更多</h5>
              <p>更多行业学习需求</p>
              <a @click="goThirdParty(11)">了解更多</a>
            </div>
          </li>
        </ul>-->
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="client-industry-information">
      <h4 class="client-title">新闻资讯</h4>
      <div class="information-carousel-box">
        <el-carousel :interval="4000" arrow="always">
          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
            <div
              class="industry-img-box"
              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
            ></div>
            <div class="industry-content-box">
              <h5>{{ item.title }}</h5>
              <p>{{ item.intro }}</p>
              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 为什么选择我们 -->
    <div class="client-chose-box">
      <div class="client-container">
        <h4 class="client-title">为什么选择我们</h4>
        <ul class="chose-img-box">
          <li>
            <div><i></i></div>
            <h5>专业的顾问服务</h5>
          </li>
          <li>
            <div><i></i></div>
            <h5>完善的培训体系</h5>
          </li>
          <li>
            <div><i></i></div>
            <h5>可靠的开发技术</h5>
          </li>
          <li>
            <div><i></i></div>
            <h5>成熟的运营能力</h5>
          </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="certImg1" alt="栋科考试管理系统" /></span>
          <span><img :src="certImg2" alt="栋科精品课程管理系统" /></span>
          <span><img :src="certImg3" alt="栋科课程管理系统" /></span>
          <span><img :src="certImg4" alt="栋科用户管理系统" /></span>
        </div>
        <div class="cert-img-box">
          <span><img :src="certImg5" alt="栋科网校运营系统" /></span>
          <span><img :src="certImg6" alt="麦塔考试系统" /></span>
          <span><img :src="certImg7" alt="麦塔培训系统" /></span>
          <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
        </div>
        <a class="client-default-Btn">了解更多</a>
      </div>
    </div>

    <!-- 超过10万家客户的信任之选 -->
    <div class="client-customer-box">
      <div class="client-container">
        <h4 class="client-title">超过10万家客户的信任之选</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>
</template>

<script>

  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': 1 }).then(res => {
                                               return res;
                                             }),
                                           ]);
      return {
        topCarousels: res1.data.data,

      };
    },
    data() {
      return {
        topCarousels2:  [],
        // 需求img
        bannerTelImg:   require(`~/static/images/client/index/index-banner-screen.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`),
        // 证书图片
        certImg1:       require(`~/static/images/client/index/index-cert-img1.jpg`),
        certImg2:       require(`~/static/images/client/index/index-cert-img2.jpg`),
        certImg3:       require(`~/static/images/client/index/index-cert-img3.jpg`),
        certImg4:       require(`~/static/images/client/index/index-cert-img4.jpg`),
        certImg5:       require(`~/static/images/client/index/index-cert-img5.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页签
        kaoshiClicked:  0,
        kaoshiLiArray:  ['政府机构', '能源化工', '信息产业', '金融保险', '交通运输', '汽车制造'],
        kaoshiDivArray: [
          {
            demandText:    '现如今，互联网教育正以迅雷不及掩耳之势搅动市场，“智能学习”成了一个新的市场。教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，现在都可以通过选择一套合理化的方案来得到解决，麦塔不仅是考试出题软',
            demandHref:    'www.baidu.com',
            demandLinkBox: [
              {
                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
                demandName: '国家能源',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
                demandName: '营口消防',
              },
              {
                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
                demandName: '同煤社保',
              },
            ],
          },
          {
            demandText:    '23',
            demandHref:    'www.baidu.com',
            demandLinkBox: [
              {
                img:        '222',
                demandName: '2222',
              },
              {
                img:        '222',
                demandName: '222',
              },
              {
                img:        '222',
                demandName: '222',
              },
            ],
          },
        ],
      };
    },
    methods:    {
      checkInfo() {
        this.$router.push({ name: 'introduction' });
      },
      tabSwitch(data, index) {
        this.kaoshiClicked = index;

        // this.newsClassifyId = data.newsClassifyId
        // this.getMessage();

      },
    },
  };
</script>

<style></style>