nuxtProject/pages/solution/education.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">
            <onlineInformationBtn class="online-information-btn btn-item" />
          </div>
        </div>
      </div>
    </div>

    <!--  教育机构培训现状  -->
    <div class="client-xianzhuang-box">
      <h4>教育机构培训现状</h4>
      <p>
        教育机构的学员来自社会各界，学习的内容也各不相同，因此要像普通学校一般按照班级进行统一管理难如登天。
        青谷已具备完善的培训学习与考试功能，支持电子课件、在线直播、在线考试、智能阅卷、统计分析等高效、全面的服务，是教育机构办学不可或缺的利器。
      </p>
    </div>

    <!--  教育机构培训痛点  -->
    <div class="client-tongdian-box client-container">
      <ul>
        <li>
          <div>
            <i></i>
            <p>学员分散，来源各异，组织通过的学习与考试非常困哪</p>
          </div>

        </li>
        <li>
          <div>
            <i></i>
            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
          </div>

        </li>
        <li>
          <div>
            <i></i>
            <p>老师与学员之间缺乏有效的沟通，教学成果较难把控</p>
          </div>
        </li>
      </ul>
    </div>

    <!--  青谷解决方案  -->
    <div class="platform-products-services client-container">
      <h4 class="client-title">青谷解决方案</h4>
      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
        <div class="btn-groups">
          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
        </div>
      </imgCardLv2>
    </div>


    <!--  教育培训类型课程案例  -->
    <div class="client-anli-box client-container">
      <h4>教育培训类课程案例</h4>
      <p>青谷软件可为教育培训行业定制电子化课程</p>
      <ul>
        <li>
          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="education"></desWithCode>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>

  </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 videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard";
import {BannerImgs} from "~/defaultConfig";
import desWithCode from "~/components/common/layout/desComp/desWithCode";
import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";

/**
 * @ 解决方案 -> 教育机构
 */
export default {
  name: "education",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
  async asyncData({$axios}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaoyujigou}),
    ];
    const [res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      productList: [
        {
          content: {
            title: '强大的人员管理和培训功能',
            list: [
              {
                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
              },
              {
                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
              },
              {
                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
              },
            ],
            order: 2,
            num: '01',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '强大的AI防作弊，保障考试公平公正',
            list: [
              {
                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
              },
              {
                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
              },
              {
                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
              },
            ],
            order: 1,
            num: '02',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '多端口个性化设置随心选择',
            list: [
              {
                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
              },
              {
                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
              },
              {
                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
              },
            ],
            order: 2,
            num: '03',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '智能阅卷，多维度、可视化学情分析',
            list: [
              {
                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
              },
              {
                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
              },
            ],
            order: 1,
            num: '04',
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        }
      ],
    }
  },
  methods: {
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    }
  }
}
</script>

<style lang="scss" scoped>

  .client-xianzhuang-box {
  background-image: url("~static/gangweiIcon/z90.png");
  width: 100%;
  height: 560px;
  margin-top: 150px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

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

  p {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 36px;
    width: 1000px;
    margin: 0 auto;
  }
}

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

    ul {
      display: flex;
      justify-content: center;

      li {
        div {
          margin: 0 51px 0 0;
          width: 380px;
          height: 280px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          text-align: center;

          i {
            width: 110px;
            height: 88px;
            margin-top: 50px;
            display: inline-block;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }

          p {
            text-align: center;
            color: #fffefe;
            font-size: 18px;
            font-weight: 800;
            line-height: 30px;
            width: 220px;
            margin: 20px auto 0;
          }
        }
        &:nth-child(1) {
          div {
            background-image: url("~static/gangweiIcon/z91.png");

            i {
              background-image: url('~static/gangweiIcon/z97.png');
            }
          }
        }
        &:nth-child(2) {
          div {
            background-image: url("~static/gangweiIcon/z92.png");
            i {
              background-image: url('~static/gangweiIcon/z103.png');
            }
          }
        }
        &:nth-child(3) {
          div {
            background-image: url("~static/gangweiIcon/z93.png");
            i {
              background-image: url('~static/gangweiIcon/z104.png');
            }
          }
        }
      }
    }
  }

  .platform-products-services {
      h4 {
        font-size: 30px;
        font-weight: 800;
        color: #333;
        margin-top: 140px;
        margin-bottom: 120px;
      }
    .btn-groups {
      margin-top: 50px;
    }
  }

  @media (max-width: 768px) {

    .client-xianzhuang-box {
      background-image: none;
      width: 100%;
      height: 30%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      h4 {
        font-size: 18px;
        color: #333;
        margin-top: 10%;
        margin-bottom: 40px;
        font-weight: 800;
        text-align: center;
      }

      p {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.5;
        width: 100%;
        margin: 0 auto;
      }
    }

    .client-tongdian-box {
      h4 {
        font-size: 18px;
        color: #333;
        margin-top: 10%;
        margin-bottom: 3%;
        font-weight: 800;
        text-align: center;
      }

      ul {
        display: flex;
        flex-direction: column;

        li {
          div {
            margin: 0 20px 0 0;
            width: 100%;
            height: auto;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text-align: center;
            display: flex;
            justify-content: flex-start;

            i {
              width: 90px;
              height: 90px;
              margin-top: 3%;
              background-color: #ccc;
              display: inline-block;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
            }

            p {
              text-align: left;
              color: #333;
              font-size: 14px;
              font-weight: 500;
              line-height: 1.5;
              width: 80%;
              margin: 20px 0 0 20px;
            }
          }
          &:nth-child(1) {
            div {
              background-image: none;

              i {
                background-image: url('~static/gangweiIcon/z97.png');
              }
            }
          }
          &:nth-child(2) {
            div {
              background-image: none;
              i {
                background-image: url('~static/gangweiIcon/z103.png');
              }
            }
          }
          &:nth-child(3) {
            div {
              background-image: none;
              i {
                background-image: url('~static/gangweiIcon/z104.png');
              }
            }
          }
        }
      }
    }

  }
</style>