nuxtProject/pages/solution/transportation.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">
                <h5>高效智能的在线培训系统</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">
                <h5>简单易上手的在线考试系统</h5>
                <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">
                <h5>帮助企业构建自主课程体系</h5>
                <p>基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。</p>
                <p class="p-before-circle">职业素养</p>
                <p class="p-before-circle">领导能力</p>
                <p class="p-before-circle">人力资源</p>
                <p class="p-before-circle">市场营销</p>
                <p class="p-before-circle">行政管理</p>
                <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>
            </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">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
                <p class="p-before-circle">PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯</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 {BannerImgs} from "~/defaultConfig";
import videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard";

/**
 * @ 解决方案 -> 交通运输
 */
export default {
  name: "transportation",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaotongyunshu}),
    ];
    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>