nuxtProject/pages/product/peixun.vue

<template>
  <div class="client-platform-page client-train-page">
    <!--  培训平台页 banner栏  -->
    <div class="client-platform-banner">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner"></div>
      <span class="client-platform-content">
         <h3>在线考试就用青谷</h3>
         <p>一款简单好用的考试系统</p>
         <onlineInformationBtn />
      </span>
    </div>

    <!--  产品体验  -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">产品体验</h4>
      <p>无序注册，即可免费体验青谷在线考试系统</p>
      <!--   多端体验   -->
      <chanPinTiYan></chanPinTiYan>
    </div>

    <!--  直播系列  -->
    <div class="platform-products-experience">
      <h4  class="client-title"> [青谷] 学测考练一站式在线培训系统 </h4>
      <img src="#">
    </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="#" alt="强大的人员和试题管理"/>
              <div class="products-services-content">
                <h5>一键搭建移动端和PC端专属培训平台</h5>
                <p>只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；
                支持APP和微信H5学习模式；为学习者提供真正的随地的、个性化的、开放式的学习服务。</p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <h5>丰富的文本/音频/视频课程内容上传服务</h5>
                <p> 全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；
                  同时还支持视频服务器链接、第三方链接的课程内容上传服务。 </p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
              <img src="#" alt="多种终端支持，随时随地考试"/>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img src="#" alt="严格的考试监控防作弊体系"/>
              <div class="products-services-content">
                <h5>无延迟、高互动、全终端的线上直播学习</h5>
                <p>
                  线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求；
                  播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。
                </p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <h5>互动助学工具提升学员活跃度</h5>
                <p>
                  自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；
                  可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。
                </p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
              <img src="#" alt="实用便捷的判卷功能"/>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!--  青谷在线培训系统四大优势  -->
    <div class="platform-products-services">
      <h4 class="client-title">青谷在线培训系统四大优势</h4>
      <ul>
        <li>
          <div class="card-container">
            <h3>课程支持</h3>
            <i></i>
            <p>提供丰富的企业通用课程资源，助力企业快速搭建企业培训体系</p>
          </div>
        </li>
        <li>
          <div class="card-container">
            <h3>服务保障</h3>
            <i></i>
            <p>完善的服务支持体系，7*12小时1对1在线为您解答指导问题</p>
          </div>
        </li>
        <li>
          <div class="card-container">
            <h3>多种部署方式</h3>
            <i></i>
            <p>公有云、私有云、本地服务器部署，根据需求随心选择</p>
          </div>
        </li>
        <li>
          <div class="card-container">
            <h3>安全保障</h3>
            <i></i>
            <p>采用多层次多安全防护措施，使系统最大限度地不被黑客和有意破坏者攻击</p>
          </div>
        </li>
      </ul>
    </div>

    <!--  新闻资讯  -->
    <newsComp2 :newsData="topCarousels"></newsComp2>

  </div>
</template>

<script>
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import chanPinTiYan from "~/components/common/chanPinTiYan";
import {BannerImgs , classifys} from "~/defaultConfig"
/**
 * @ 产品与服务 -> 培训系统
 */
export default {
  name: "cultivate",
  layout: 'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.peixunxitong.classify,'keyword': classifys.peixunxitong.keyword}),
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.peixunxitong}),
    ];
    const [res1, res2] = await Promise.all(arr);
    return {
      topCarousels: res1.data.data || [],
      bannerList: res2.data.data || [],
    }
  },
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  methods: {
    clickBanner(url) {
      if (url) {
        window.open(url)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.client-platform-page {
  margin-top: 80px;
}
.client-platform-banner {
  position: relative;
}
.client-platform-content {
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: auto;
  height: auto;
}
</style>