nuxtProject/pages/solution/erupt.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!-- 广告图位置 -->
    <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 left">
            <onlineInformationBtn class="online-information-btn btn-item solution-erupt" />
          </div>
        </div>
      </div>
    </div>


    <!--  随机组卷算法  -->
    <div class="client-suijizujuan-box client-container">
      <h4>随机组卷算法</h4>

      <imgCardLv4 :option="productList[0]">
        <onlineInformationBtn myType="2" />
      </imgCardLv4>
    </div>

    <!--  同时请求次数  -->
    <div class="client-suijizujuan-box client-container">
      <h4>同时请求次数</h4>
      <imgCardLv4 :option="productList[1]">
        <onlineInformationBtn  myType="2" />
      </imgCardLv4>
    </div>

    <!--  读写数据量大  -->
    <div class="client-suijizujuan-box client-container">
      <h4>读写数据量大</h4>
      <imgCardLv4 :option="productList[2]">
        <onlineInformationBtn myType="2" />
      </imgCardLv4>
    </div>

    <!--  描述区域  -->
    <div class="client-description-box">
      <p>青谷将持续提升“服务器性能”，使之能满足高并发大数据的多人考试解决方案，
      致力于让各企业、学校的大型考试更易于组织，真正有效！
      </p>
      <onlineInformationBtn class="solution-exam-online" />
    </div>

    <!--  客户案例  -->
    <div class="client-kehuanli-box experience-swiper-box client-container">

      <h4>客户案例</h4>

      <!--   PC   -->
      <div class="anli-box-wrap mta-hidden-xs">
        <el-carousel indicator-position="none" class="anli-box mta-hidden-xs" :interval="5000" height="200px">
          <el-carousel-item v-for="item in anliList" :key="item.iild">
            <div class="anli-content-pc">
              <img :src="item.pic">
              <div>
                <h3>{{item.title}}</h3>
                <p>{{item.intro}}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!--   H5   -->
      <div v-swiper:mySwiper="swiperOption" class="swiper-container client-container mta-hidden-sm">
        <div class="swiper-wrapper experience-content-box">
          <div class="swiper-slide" v-for="item in anliList" :key="item.iild">
            <div class="anli-content">
              <img :src="item.pic">
              <div>
                <h3>{{item.title}}</h3>
                <p>{{item.intro}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-style"></div>
        <p class="experience-swiper-tip">←左右滑动查看更多→</p>
      </div>

      <div class="left-bg mta-hidden-xs"></div>
      <div class="right-bg mta-hidden-xs"></div>
      <div class="center-bg mta-hidden-xs"></div>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="erupt"></desWithCode>
  </div>
</template>

<script>
import chanPinTiYan from "~/components/common/chanPinTiYan";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import {BannerImgs} from "~/defaultConfig";
import desWithCode from "~/components/common/layout/desComp/desWithCode";
import imgCardLv4 from "~/components/common/layout/imgDes/imgCardLv4";

/**
 * @ 解决方案 -> 万人高并发
 */
export default {
  name: "erupt",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv4},
  async asyncData({$axios, store}) {
    const opt = {
      page:           1,
      size:           5,
      newsClassifyId: 2,
    };

    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.wanrengaobingfa}),
      $axios.post('/home/news/list', opt)
    ];
    const [res2, res3] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
      anliList: res3.data.data.data || [],
    }
  },
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      productList: [
        {
          content: {
            des1: '随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。',
            des: '青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。',
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p22.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            des1: '无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因',
            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
            order: 2,
          },
          img: {
            url:  require(`~/static/productImage/p24.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            des1: '读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取',
            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率,如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
            order: 1,
          },
          img: {
            url:  require(`~/static/productImage/p23.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
          bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
          clickable: true, // 点击当前滑块切换到对应的轮播图片
        },
        autoplay: {
          delay: 5000,
        },
        paginationClickable: true,
        speed: 800,
        loop: true,
        observer: true,
        observeParents: true,
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.client-banner-box div.client-platform-banner {
  .banner-btn-groups.left {
    left: 100px;
    top: 466px;

    .solution-erupt {
      background: #eef106;
      color: #00b96b;
      width: 180px;
      height: 60px;
      line-height: 60px;
      border-radius: 50px;
      border-color: #eef106;
    }
  }
}

.client-suijizujuan-box {
  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    margin-top: 130px;
    margin-bottom: 100px;
    text-align: center;
  }
}

.client-description-box {
  width: 100%;
  height: 240px;
  background-image: url("~static/codeImage/code-bj01.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0 0 0;
  margin: 0 auto;
  text-align: center;

  p {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    width: 1000px;
    line-height: 1.5;
    margin: 0 auto 30px;
  }
}


.anli-content-pc {
  display: flex;
  padding: 40px;
  img {
    width: 409px;
    height: 225px;
    margin-right: 35px;
  }

  >div {
    h4 {
      font-size: 24px;
      color: #333;
      line-height: 36px;
      font-weight: 800;
    }

    p {
      font-size: 18px;
      color: #333;
      line-height: 30px;
      font-weight: 400;
      -webkit-line-clamp:3;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
      word-wrap: break-word;
      display: -webkit-box;
      white-space: normal !important;
      -webkit-box-orient: vertical;
    }
  }
}


.solution-exam-online {
  background: #F7DA5C;
  color: #fff;
  border-color: #F7DA5C;
}

@media (max-width: 768px) {

  .client-suijizujuan-box {
    h4 {
      font-size: 18px;
      margin-top: 10%;
      margin-bottom: 10%;
    }
  }

  .client-description-box {
    height: 140px;
    box-sizing: border-box;
    background-size: cover;
    padding-top: 10px;
    p {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      width: 80%;
      line-height: 1.5;
      margin: 0 auto 10px;
    }
  }

}

</style>