nuxtProject/pages/courseware/index.vue

<template>
  <div class="client-platform-page client-exam-page">
    <!--  广告图位置  -->
    <div
      :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
      class="client-new-platform-banner"></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: video1, imgUrl:img1}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '金融保险业', url: video2, imgUrl:img2}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video3, imgUrl:img3}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '生产制造业', url: video4, imgUrl:img4}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '信息通讯业', url: video5, imgUrl:img5}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '汽车销售业', url: video6, imgUrl:img6}"
                      @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 has-p">
      <h4> 视频类课程 </h4>
      <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
        动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '能源化工业', url: video7,  imgUrl:img7}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '金融保险业', url: video8, imgUrl:img8}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: video9, imgUrl:img9}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '管理培训业', url: video10,  imgUrl:img10}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video11,  imgUrl:img11}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '服装零售业', url: video12 , imgUrl:img12}"
                      @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 has-p">
      <h4> H5类课程 </h4>
      <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '现代制造业', url: video13,  imgUrl:img13}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: video14,  imgUrl:img14}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '物流业', url: video15,  imgUrl:img15}"
                      @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 has-p">
      <h4> PPT定制及美化 </h4>
      <p>
        现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
        青谷曾多次为客户在各种大赛中取得前三甲的优异成绩。
      </p>
      <ul>
        <li>
          <video-card class="my-video" :card-data="{title: '金融保险业', url: video16, imgUrl:'',  imgUrl:img16}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '教育培训业', url: video17, imgUrl:'',  imgUrl:img17}"
                      @card-click="showVideo"></video-card>
        </li>
        <li>
          <video-card class="my-video" :card-data="{title: '生产制造业', url: video18,  imgUrl:'',  imgUrl:img18}"
                      @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: '课件制作_视频课件制作_flash课件制作_青谷软件',
        meta: [
          {
            name: 'keywords',
            content: '课件制作,课件制作公司,课件设计,ppt课件制作'
          },
          {
            name: 'description',
            content: '青谷软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付'
          }
        ],
      }
    },
    computed: {
      gangwei() {
        return kechengdingzhi
      }
    },
    data() {
      return {
        curVideo: '',
        visible: false,
        telDl: false,

        // 动画类
        img1: require(`~/static/videoImages/v22.jpg`),
        video1: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
        img2: require(`~/static/videoImages/v23.jpg`),
        video2: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
        img3: require(`~/static/videoImages/v24.jpg`),
        video3: 'https://spdb.mtavip.com/1d97ffbafd9b480689d8325f25dd6687/741fc75193ba434ebe3d82729908b30c-5a0a871558b82ed7931a623ce567bbec-fd.mp4',
        img4: require(`~/static/videoImages/v25.jpg`),
        video4: 'https://spdb.mtavip.com/154fe0ee513c4f40959fbd257dba11c1/0c9548a50ced4655be44224201ded347-b013d93710816be6591056f4537f370f-fd.mp4',
        img5: require(`~/static/videoImages/v26.jpg`),
        video5: 'https://spdb.mtavip.com/4f9b699f109b4257912e0615b690d397/a3d8c7f257444de18bd1a34952ed072b-9f98375a54ca60f2acbb73b064ba06b2-fd.mp4',
        img6: require(`~/static/videoImages/v27.jpg`),
        video6: 'https://spdb.mtavip.com/81563222a2f34b41a59ee96d98bb573d/c07bc0c4aaad4ab7b649ff725909b485-d5359de0edbb3916ae7dd14572e67e05-fd.mp4',

        // 视频课程类
        img7: require(`~/static/videoImages/v28.jpg`),
        video7: 'https://spdb.mtavip.com/5089ca88405a4c7fba0e394086fb85f4/affd808fcf7b44989ad69e4ae4f9c284-dae0483416557d263fa2c5a8324bfb85-fd.mp4',
        img8: require(`~/static/videoImages/v29.jpg`),
        video8: 'https://spdb.mtavip.com/109a74f9316441808eba15f6ddc406fa/c622690c366341419aac39cbd6d94e65-ddd3c1bcab068e2f0ed00e01e80bf9b1-fd.mp4',
        img9: require(`~/static/videoImages/v30.jpg`),
        video9: 'https://spdb.mtavip.com/90f0af993cb84f6abcd152183f4034fd/6248e7092a394c7eb1bd63d5e748b7cb-43f729d3f2620ef3cf6fb4b911428d70-fd.mp4',
        img10: require(`~/static/videoImages/v31.jpg`),
        video10: 'https://spdb.mtavip.com/b81eec156310477c99f9769754442aa8/a335a98f2c0e4f6a961e809e30cfaa3d-1c4e98daa27d9683cb778bdfc2e40e1e-fd.mp4',
        img11: require(`~/static/videoImages/v32.jpg`),
        video11: 'https://spdb.mtavip.com/eae8071f826a4c57b5f2c933e67b0591/692213c2030340d78aafe26cbf1ee9ee-cc94cdfb48eb85919dae9ca8de2081b2-fd.mp4',
        img12: require(`~/static/videoImages/v33.jpg`),
        video12: 'https://spdb.mtavip.com/75423037de7c44da91f24a5dcffb6e1a/774aece0c6e6437ea294d29163d138ef-b028588659f56ee623807230e897aceb-fd.mp4',

        // H5 类课
        img13: require(`~/static/videoImages/v34.jpg`),
        video13: 'https://spdb.mtavip.com/b9047471e06d40a69443a1811fba0336/75daf06aacc44483be3859542160314e-691fc8a51efd7eb3c73f1826a9cba8ba-fd.mp4',
        img14: require(`~/static/videoImages/v35.jpg`),
        video14: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
        img15: require(`~/static/videoImages/v36.jpg`),
        video15: 'https://spdb.mtavip.com/5daa9a33cdf34b848ca5855aa2e57927/9b9a433072a54182870fc3cbfef8f5c1-162c78c7631b21f79645e9c5e7eaeeaf-fd.mp4',

        // PPT定制及美化
        img16: require(`~/static/videoImages/v37.jpg`),
        video16: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
        img17: require(`~/static/videoImages/v38.jpg`),
        video17: 'https://spdb.mtavip.com/067289e1287643f89b353ed7ed4c6c52/bd13014cf80d4605b093ed6e80da9e5b-475c6c45b0ddfa3407ffe9625e855f68-fd.mp4',
        img18: require(`~/static/videoImages/v39.jpg`),
        video18: 'https://spdb.mtavip.com/eb4297e8a9fc4d628cbde2ca3d6748e7/35f65074705144b9a28efc20f4154e27-0711d93d0dd6c5452e00f12479f97435-fd.mp4',

      }
    },
    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: #309336;
      }
    }

    .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;
      width: 980px;
      margin: 0 auto;
    }

    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;
        width: 100%;
      }

      ul {
        li {
          width: 100%;
          height: 200px;
          margin-bottom: 60px;

          .my-video {
            margin: 0;
          }

          .img-box {
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }

  .has-p {

    p {
      width: 990px !important;font-size: 16px;font-weight: 500;margin: 0 auto;
    }
    @media (max-width: 768px) {
      p {
        width: 100% !important; font-size: 16px;font-weight: 500;margin: 0 auto 10px;
      }
    }
  }



</style>