nuxtProject/pages/solution/financial.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>
      <h3>金融保险</h3>
      <p>青谷行业解决方案</p>
      <onlineInformationBtn />
    </div>

    <!--  金融保险培训现状  -->
    <div class="client-xianzhuang-box">
      <h4>金融保险培训现状</h4>
      <p>金融保险无处不在并已形成一个庞大体系，金融保险涉及的范畴、分支和内容非常广，如货币、证券、银行、保险、投资理财、风险管理等，
        相互来说考核点多、信息量大、对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。
      </p>
    </div>

    <!--  金融保险培训痛点  -->
    <div class="client-tongdian-box">
      <h4>金融保险培训痛点</h4>
      <ul>
        <li>
          <i></i>
          <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
        </li>
        <li>
          <i></i>
          <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
        </li>
        <li>
          <i></i>
          <p>人数太多，及时勉强组织培训考核，也很难管控</p>
        </li>
      </ul>
    </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">
                <span>01</span>
                <h5>私有化专属服务器部署，数据加密更安全</h5>
                <p class="p-before-circle">将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全</p>
                <p class="p-before-circle">PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务</p>
                <onlineInformationBtn />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <span>02</span>
                <h5>构建培训闭环，打通线上线下教学场景</h5>
                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
                <p class="p-before-circle">在线课程支持反复学习，实现从“了解”到“理解”的飞跃</p>
                <p class="p-before-circle">支持六大常用题型及批量导入题库</p>
                <onlineInformationBtn />
              </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">
                <span>03</span>
                <h5>强大的AI防作弊，保障考试公平公正</h5>
                <p class="p-before-circle">人脸识别、摄像头监控、有效防止替考代考，保障考试公平公正</p>
                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
                <onlineInformationBtn />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <span>04</span>
                <h5>智能阅卷，多维度、可视化学情分析</h5>
                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
                <onlineInformationBtn />
              </div>
              <img src="#" alt="实用便捷的判卷功能"/>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!--  金融保险类课程案例  -->
    <div class="client-anli-box">
      <h4>金融保险类课程案例</h4>
      <p>青谷软件可为金融保险行业定制电子化课程</p>
      <ul>
        <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>
        <li>
          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
    </div>


    <!--  立即咨询  -->
    <div class="client-zixun-code">
      <h4>立即扫码资讯，领取您的专属解决方案</h4>
      <img src="#" alt="">
      <p>扫码添加客服微信</p>
    </div>

    <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";

/**
 * @ 解决方案 -> 金融保险
 */
export default {
  name: "financial",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jinrongbaoxian}),
    ];
    const [res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
    }
  },
  methods: {
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    }
  }
}
</script>

<style scoped>

</style>