nuxtProject/pages/product/peixun.vue

<template>
  <div class="client-platform-page client-train-page">
    <!--  培训平台页 banner栏  -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner">
        <div class="client-container mta-hidden-xs">
          <div class="banner-btn-groups">
            <onlineInformationBtn />
          </div>
        </div>
      </div>
    </div>

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

    <!--  直播系列  -->
    <div class="platform-products-experience">
      <h4  class="client-title"> [青谷] 学测考练一站式在线培训系统 </h4>
      <img src="#">
    </div>


    <!--  功能强大的培训系统  -->
    <div class="platform-products-services client-container">
      <h4 class="client-title">功能强大的培训系统</h4>
      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
        <div class="btn-groups">
          <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>
      </imgCardLv3>
    </div>


    <!--  青谷在线培训系统四大优势  -->
    <div class="platform-four-youshi client-container">
      <h4>青谷在线培训系统四大优势</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 imgCardLv3 from "@/components/common/layout/imgDes/imgCardLv3";
import {BannerImgs , classifys} from "~/defaultConfig";

/**
 * @ 产品与服务 -> 培训系统
 */
export default {
  name: "cultivate",
  layout: 'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, imgCardLv3},
  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)
      }
    }
  },
  data() {
    return {
      productList: [
        {
          content: {
            title: '一键搭建移动端和PC端专属培训平台',
            des: '只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统,支持APP和微信H5学习模式；为学习者提供真正的随地的、个性化的、开放式的学习服务。',
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'peixun'
        },
        {
          content: {
            title: '丰富的文本/音频/视频课程内容上传服务',
            des: '全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；同时还支持视频服务器链接、第三方链接的课程内容上传服务。',
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'peixun'
        },
        {
          content: {
            title: '无延迟、高互动、全终端的线上直播学习',
            des: '线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求,播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。',
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'peixun'
        },
        {
          content: {
            title: '互动助学工具提升学员活跃度',
            des: '自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。',
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'peixun'
        }
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.banner-btn-groups {
  position: absolute;

}

.client-platform-content {
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: auto;
  height: auto;
}

.platform-products-services {

  .btn-groups {
    margin-top: 48px;
    .btn-item {
      margin-right: 20px;
    }
  }
}

.platform-four-youshi {

  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 140px;
  }

  ul {
    display: flex;
    justify-content: space-between;

    li {
      width: 273px; height: 330px;
      box-sizing: border-box;
      .card-container {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 27px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        h3 {
          text-align: center;
          font-size: 20px;
          color: #fff;
          font-weight: 800;
          margin-bottom: 27px;
        }

        i {
          width: 123px;
          height: 123px;
          display: inline-block;
          margin: 0 auto;
          text-align: center;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }

        p {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          line-height: 24px;
          text-align: center;
          margin-top: 10px;
        }
      }
      &:nth-child(1) {
        >div {
          background-image: url('~static/gangweiIcon/z91.png');
          i {
            background-image: url('~static/gangweiIcon/z112.png');
          }
        }
      }
      &:nth-child(2) {
        >div {
          background-image: url('~static/gangweiIcon/z91.png');
          i {
            background-image: url('~static/gangweiIcon/z113.png');
          }
        }
      }
      &:nth-child(3) {
        >div {
          background-image: url('~static/gangweiIcon/z91.png');
          i {
            background-image: url('~static/gangweiIcon/z114.png');
          }
        }

      }
      &:nth-child(4) {
        >div {
          background-image: url('~static/gangweiIcon/z91.png');
          i {
            background-image: url('~static/gangweiIcon/z115.png');
          }
        }
      }
    }
  }
}


@media (max-width: 768px) {

  .platform-four-youshi {
    margin-bottom: 10%;
    h4 {
      font-size: 18px;
      margin-bottom: 10%;
    }

    ul {
      flex-wrap: wrap;
      li {
        width: 50%;
        padding: 10px;
        .card-container {
          h3 {
            font-size: 14px;
          }
          i {
            width: 60px;
            height: 60px;
          }

          p {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>