nuxtProject/pages/solution/government.vue

<template>
  <div class="client-exam-page client-platform-page qg-government-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>
    </div>

    <!--  机关事业单位培训现状  -->
    <div class="client-xianzhuang-box">
      <div class="client-container">
        <h4>机关事业单位培训现状</h4>
        <p>为了适应市场经济的发展，越来越多的企业开始意识到人才选拔、培养的重要性，机关事业单位每年都要举行年度考核、党建考核等各种不同形式的培训、考试。而传统培训、考试方式，从培训、出题、组卷、印刷，到安排场地、试卷分发、监考，再到收卷、阅卷，程序繁杂，需要投入大量的时间、人力和物力，并且周期长、工作量大，成本较高，不能完全适应现代企业管理模式。
        </p>
      </div>
    </div>

    <!--  机关事业单位培训痛点  -->
    <div class="client-tongdian-box client-container">
      <h4>机关事业单位培训痛点</h4>
      <ul>
        <li>
          <div>
            <i></i>
            <p>需要学习的文件材料较多，不易把握学习要点</p>
          </div>
        </li>
        <li>
          <div>
            <i></i>
            <p>员工数量多且人员分散<br>组织困难</p>
          </div>
        </li>
        <li>
          <div>
            <i></i>
            <p>有规划但执行力差<br>造成培训流于形式</p>
          </div>
        </li>
      </ul>
    </div>

    <!--  解决方案  -->
    <div class="client-fangan-box client-container">
      <h4>青谷解决方案</h4>
      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
        <div class="btn-groups">
          <onlineInformationBtn class="online-information-btn btn-item green" v-if="item.zixun"/>
        </div>
      </imgCardLv2>
    </div>


    <!--  党建类课程案例  -->
    <div class="client-anli-box client-container" v-if="false">
      <h4>党建类课程案例</h4>
      <p>青谷软件可为机关事业单位定制电子化课程</p>
      <ul>
        <li>
          <div>
            <video-card :card-data="{title: '坚持依法治国培训课程',url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
          </div>
        </li>
        <li>
          <div>
            <video-card :card-data="{title: '全面深化改革经济制度', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
          </div>
        </li>
        <li>
          <div>
            <video-card :card-data="{title: '如何领会习近平新时代中国特色社会主义思想', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
          </div>
        </li>
      </ul>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="government"></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 {BannerImgs} from "~/defaultConfig";
import videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard";
import desWithCode from "~/components/common/layout/desComp/desWithCode";
import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";

/**
 * @ 解决方案 -> 机关事业单位
 */
export default {
  name: "government",
  layout: 'templateB',
  components: {
    chanPinTiYan,
    freeTrialBtn,
    onlineInformationBtn,
    newsComp2,
    videoDialog,
    videoCard,
    desWithCode,
    imgCardLv2
  },
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhengfujigou}),
    ];
    const [res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  head() {
    return {
      title: '政府在线考试培训系统_员工培训系统_在线考试系统',
      meta: [
        {
          name: 'keywords',
          content: '考试系统开发_定制考试系统_防作弊系统'
        },
        {
          name: 'description',
          content: '青谷在线考试培训系统经多年开发与实践，满足万人同时考试培训，员工线上完成企业考试与培训，多种线上功能。'
        }
      ],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      productList: [
        {
          content: {
            title: '私有化专属服务器部署，数据加密更安全',
            list: [
              {
                value: '将青谷考培系统部署版部署到机关事业单位内部私有云服务器中，机关事业单位完全自主掌控，数据加密更安全',
              },
              {
                value: 'PC端与移动端无缝链接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务',
              },
            ],
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p39.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '构建培训闭环，打通线上线下教学场景',
            list: [
              {
                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
              },
              {
                value: '支持线上课程、直播、线下培训等多种培训形式',
              },
              {
                value: '在线课程支持反复学习，实现从“了解”到“理解”的飞跃',
              },
              {
                value: '支持六大常用题型及批量导入题库',
              },
            ],
            order: 2,
          },
          img: {
            url: require(`~/static/productImage/p37.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '强大的AI防作弊，保障考试公平公正',
            list: [
              {
                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
              },
              {
                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监控场景',
              },
              {
                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
              },
            ],
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p40.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '智能阅卷，多维度、可视化学情分析',
            list: [
              {
                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
              },
              {
                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
              },
            ],
            order: 2,
          },
          img: {
            url: require(`~/static/productImage/p38.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        }
      ],

      // 党建类视频
      img1: require(`~/static/videoImages/v01.jpg`),
      video1: 'https://spdb.mtavip.com/93d3b7ead3634e6cb995d06dc74ffc98/846d3c9f0d414a589ed6c3456b235f43-ea296adfbbcbef1fa2c56c25dd47f9ae-fd.mp4',
      img2: require(`~/static/videoImages/v02.jpg`),
      video2: 'https://spdb.mtavip.com/830f8f8ac04046db8cead176dc481d68/c8cbb2bac1f343bbaef7eec659d3211a-440772930440cec2cabf50caa08f6d95-fd.mp4',
      img3: require(`~/static/videoImages/v03.jpg`),
      video3: 'https://spdb.mtavip.com/0135d5e9c8d44212a6bcedc0893a7e85/d0c09a604c514590bd7e30ddf447a4e6-d5116651287156c14b8fd26b143f51e1-fd.mp4',
    }
  },
  methods: {
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    }
  }
}
</script>

<style lang="scss" scoped>

.banner-btn-groups {
  left: 0;
  top: 450px !important;
  .solution-government {
      color: #00b96b;
      border-color: #fff;
      width: 190px;
      height: 60px;
      line-height: 60px;
      border-radius: 50px;
      background: #fff;
  }
}


.client-tongdian-box {
  ul {
    li {
      &:nth-child(1) {
        div {
          background-image: url("~static/gangweiIcon/z91.png");

          i {
            background-image: url('~static/gangweiIcon/z94.png');
          }
        }
      }

      &:nth-child(2) {
        div {
          background-image: url("~static/gangweiIcon/z92.png");

          i {
            background-image: url('~static/gangweiIcon/z95.png');
          }
        }
      }

      &:nth-child(3) {
        div {
          background-image: url("~static/gangweiIcon/z93.png");

          i {
            background-image: url('~static/gangweiIcon/z96.png');
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    ul {
      li {
        &:nth-child(1) {
          div {
            background-image: none;
          }
        }

        &:nth-child(2) {
          div {
            background-image: none;
          }
        }

        &:nth-child(3) {
          div {
            background-image: none;
          }
        }
      }
    }
  }
}
</style>
<style>
.qg-government-page .mta-card-lv2 .mta-card-content-pc img{max-width: 36%;}
</style>