nuxtProject/pages/solution/biteAndSup.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>
          <span>人力成本过大，员工素质普遍较低</span>
        </li>
        <li>
          <i></i>
          <span>连锁餐饮企业学习资源共享困难，造成浪费</span>
        </li>
        <li>
          <i></i>
          <span>餐饮卫生安全隐患问题严重，员工意识不强</span>
        </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">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</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>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>良好的高并发性，系统稳定性高</h5>
                <p class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</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: "biteAndSup",
  layout:   'templateB',
  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shipincanyin}),
    ];
    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>