nuxtProject/pages/product/courseCustom.vue

<template>
  <div class="client-platform-page client-exam-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="platform-products-experience client-container">
      <h4> 专业团队满足客户需求 </h4>
      <p class="p1">服务企业 <i>100+</i>，累计开发课时 <i>30,000+</i></p>
      <p class="p2">青谷是国内专业、成熟的课程设计、开发团队、拥有丰富的电子课程制作经验，
        业务方向包括教学设计体验、动画设计、视频拍摄等，涉及的行业有教育培训、零售连锁、机械制造、金融保险等。</p>
        <!--  岗位职责  -->
        <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>


      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <!--  动画类课程  -->
    <div class="platform-animation-donghua client-container my-video-content">
      <h4> 动画类课程 </h4>
      <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。
        主要包含：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <!--  视频类课程  -->
    <div class="platform-animation client-container my-video-content">
      <h4> 视频类课程 </h4>
      <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
        动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
      <div class="btn-groups center">
        <applyBtn class="btn-item"  @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <!--  H5类课程  -->
    <div class="platform-animation client-container my-video-content">
      <h4> H5类课程 </h4>
      <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <!--  PPT定制及美化  -->
    <div class="platform-animation client-container my-video-content">
      <h4> PPT定制及美化 </h4>
      <p>
        现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
        青谷曾多次为客户在各种大赛中取得前三甲的优异成绩。
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
        </li>
      </ul>
      <div class="btn-groups center">
        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
        <onlineInformationBtn />
      </div>
    </div>

    <!--  新闻资讯  -->
    <newsComp2 :newsData="topCarousels"></newsComp2>

    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>

    <!--  申请方案  -->
    <applicationDialog :visible.sync="telDl"></applicationDialog>

  </div>
</template>

<script>
import applyBtn from "~/components/common/applyBtn";
import applicationDialog from "~/components/common/applicationDialog";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import chanPinTiYan from "~/components/common/chanPinTiYan";
import videoDialog from "~/components/common/videoDialog";
import videoCard from "~/components/common/videoCard"
import gangweiList from "@/components/common/layout/desComp/gangweiList";
import {BannerImgs, classifys, kechengdingzhi} from "~/defaultConfig"

/**
 * @ 产品与服务 -> 课程定制
 */
export default {
  name: "courseCustom",
  layout: 'templateB',
  components: {
    onlineInformationBtn,
    newsComp2,
    chanPinTiYan,
    videoDialog,
    videoCard,
    applyBtn,
    applicationDialog,
    gangweiList
  },
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/news/carousel`, {
        'newsClassifyId': classifys.kechengdingzhi.classify,
        'keyword': classifys.kechengdingzhi.keyword
      }),
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.kechengdingzhi}),
    ]
    const [res1, res2] = await Promise.all(arr);
    return {
      topCarousels: res1.data.data || [],
      bannerList: res2.data.data || [],
    }
  },
  head() {
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name: 'description',
          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  computed: {
    gangwei() {
      return kechengdingzhi
    }
  },
  data() {
    return {
      curVideo: '',
      visible: false,
      telDl: false,
    }
  },
  methods: {
    showVideo({url}) {
      this.curVideo = url;
      this.visible = true;
    },
    onApplyBtnActive() {
      this.telDl = true;
    },
    onApplyBtnActiveH5() {
      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/courseCustom',}});
    },
  }
}
</script>

<style lang="scss" scoped>
.platform-animation {
  ul {
    font-size: 16px;
  }
}

.platform-products-experience {
  h4 {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: #333333;
    margin-top: 74px;
    margin-bottom: 58px;
  }

  .p1 {
    font-size: 18px;
    color: #565656;
    font-weight: 800;
    text-align: center;

    i {
      font-size: 26px;
      color: #00B96B;
    }
  }

  .p2 {
    margin: 30px auto 110px;
    text-align: center;
    width: 991px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #565656;
  }

  @media (max-width: 768px) {
    h4 {
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      color: #333333;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .p1 {
      font-size: 14px;
      i {
        font-size: 14px;
        color: #565656;
        font-weight: 800;
      }
    }
    .p2 {
      font-size: 14px;
      width: 80%;
      margin-bottom: 20px;
    }
  }
}

.my-video-content {
  h4 {
    font-size: 30px;
    color: #333;
    font-weight: 800;
    margin-bottom: 70px;
    text-align: center;
  }
  >p {
    text-align: center;
    font-weight: 500;
    color: #565656;
    line-height: 24px;
    font-size: 16px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 33%;
      height: 330px;

      .my-video {
        margin: 20px;
      }
    }
  }
}

@media (max-width: 768px) {

  .my-video-content {
    h4 {
      font-size: 18px;
      color: #333;
      font-weight: 800;
      margin-bottom: 5%;
      text-align: center;
    }
    >p {
      text-align: center;
      font-weight: 500;
      color: #565656;
      line-height: 1.5;
      font-size: 14px;
      margin-bottom: 10px;
    }

    ul {
      li {
        width: 100%;
        height: 200px;
        margin-bottom: 60px;
        .my-video {
          margin: 0;
        }
        .img-box {
          width: 100%;
          height: auto;
        }
      }
    }
  }

}


</style>