nuxtProject/pages/product/courseCustom.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>