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>
    </div>

    <!--  视频餐饮培训现状  -->
    <div class="client-xianzhuang-box">
      <h4>食品餐饮培训现状</h4>
      <p>随着社会经济的不断发展，餐饮消费的方式日益多元化与现代化，品牌化、规模化、连锁式、跨区域式餐饮经营是未来的趋势，餐饮文化的传播将越来越国际化和市场化。
        如何应对蓬勃发展的餐饮形式，不仅知识餐饮企业所面对的问题，同时也是烹饪教育应该思考的问题。
      </p>
    </div>

    <!--  视频餐饮培训的痛点  -->
    <div class="client-tongdian-box client-container">
      <h4>食品餐饮培训的痛点</h4>
      <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="client-fangan-box 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 green"/>
        </div>
      </imgCardLv2>
    </div>

    <!--  食品餐饮类课程案例  -->
    <div class="client-anli-box client-container">
      <h4>食品餐饮类课程案例</h4>
      <p>青谷软件可为食品餐饮行业定制电子化课程</p>
      <ul>
        <li>
          <video-card :card-data="{title: '粮食作物营养失调',  url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '大益茶产品知识介绍',  url: video1, imgUrl:img2}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card :card-data="{title: '如果营养会说话',  url: video1, imgUrl:img3}" @card-click="showVideo"></video-card>
        </li>
      </ul>
    </div>


    <!--  立即咨询  -->
    <desWithCode source="biteAndSup"></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: "biteAndSup",
  layout: 'templateB',
  components: {
    chanPinTiYan,
    freeTrialBtn,
    onlineInformationBtn,
    newsComp2,
    videoDialog,
    videoCard,
    desWithCode,
    imgCardLv2
  },
  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 || [],
    }
  },
  head() {
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name: 'description',
          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      productList: [
        {
          content: {
            title: '强大的人员管理和培训功能',
            list: [
              {
                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
              },
              {
                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
              },
              {
                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
              },
            ],
            order: 2,
            num: '01',
          },
          img: {
            url: require(`~/static/productImage/p52.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '智能考试系统，保障考试公平公正',
            list: [
              {
                value: '考前人脸身份核酸，权威数据确保本人考试',
              },
              {
                value: '支持多种组卷模式，随机组卷每个学员不同试卷，杜绝相互抄袭',
              },
              {
                value: '系统自动阅卷，无需人工干预，节约不必要的人力资源',
              },
              {
                value: '多维度、多角度分析考试结果，掌握学员考试情况 ',
              },
            ],
            order: 1,
            num: '02',
          },
          img: {
            url: require(`~/static/productImage/p53.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '良好的高并发性，系统稳定性高',
            list: [
              {
                value: '采用的运行稳定、安全性很高的JAVA语言开发',
              },
              {
                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
              },
              {
                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
              },
              {
                value: '为企业快速、灵活构建大规模分布式服务应用提供基础',
              },
            ],
            order: 2,
            num: '03',
          },
          img: {
            url: require(`~/static/productImage/p54.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '多端口个性化设置随心选择',
            list: [
              {
                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
              },
              {
                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
              },
              {
                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
              },
            ],
            order: 1,
            num: '04',
          },
          img: {
            url: require(`~/static/productImage/p55.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        }
      ],

      // 食品餐饮
      img1: require(`~/static/videoImages/v13.jpg`),
      video1: 'https://spdb.mtavip.com/5f8f4c259f67465eafe9f315b799c4db/229b174530e142299cc3d387c9531366-4ade59f9160a3e5f6fb8a11c594f86cf-fd.mp4',
      img2: require(`~/static/videoImages/v14.jpg`),
      video2: 'https://spdb.mtavip.com/c5deff6e41434ef1b27ef76d2be34b7b/5c01fefa753c425fab6ca5247990b3bd-f2035ff58366e6ffc0edeb57ebe74aa6-fd.mp4',
      img3: require(`~/static/videoImages/v15.jpg`),
      video3: 'https://spdb.mtavip.com/dee99cbf75764346bd0337084d87d9c1/a7f474ce23e44d0b8de6812a36df09f7-7289ede2ffef7d40a2d077a3a92e1137-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-biteAndSup {
    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/z97.png');
          }
        }
      }

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

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

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

          i {
            background-image: url('~static/gangweiIcon/z101.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>