nuxtProject/pages/courseware/custom.vue

<template>
  <div class="client-course-page course-weike">
    <!--  宣传图  -->
    <div class="client-course-banner" :style="{backgroundImage:`url(${banner_image})`}" @click="goQuotation"></div>
    <!--  动画分类显示区域  -->
    <div class="client-course-classification">
      <div class="client-container">
        <courseCardTitle :title="project.title" class="classification-title"></courseCardTitle>
        <ul class="classification-items">
          <li class="classification-item" :class="{active:item.type === activeItem }" v-for="item in project.data" @click="changeItem(item)">
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!--  动画分类详情区域  -->
    <div class="client-course-classification__info">
      <div class="client-container">
        <courseCardTitle :title="curItem.title" class="classification__info-title"></courseCardTitle>
        <div class="classification__info-mainTitle">{{curItem.mainTitle}}</div>
        <div class="classification__info-subHead">{{curItem.subhead}}</div>
        <ul class="classification__info-videos">
          <li v-for="item in curItem.videos" class="classification-video-item">
            <course-video :img-url="item.imgUrl" :video-data="item" :source="item.url"></course-video>
          </li>
        </ul>
        <div class="classification-btns">
          <a class="classification-online-zixun" :href="zixunUrl">在线咨询</a>
        </div>
      </div>
    </div>
    <!--  课程报价区域  -->
    <div class="client-course-quotation" ref="quotation">
      <div class="client-container quotation-wrap">
        <div class="left-text">
          <h3>课程定制在线报价</h3>
          <p>栋科客服人员会在30分钟内与你取得联系</p>
        </div>
        <courseBaojia class="baojia-form" tag="wkl" :user-list="userList" :sum="custom_sum"></courseBaojia>
      </div>
    </div>
  </div>
</template>

<script>
import courseCardTitle from "@/components/course/course-card-title";
import courseBaojia from "@/components/course/course-baojia";
import courseVideo from "@/components/course/course-video";
export default {
  name: 'weike',
  layout: 'templateB',
  head() {
    return {
      title: '微课制作_课件PPT_微课比赛_幼儿园微课_微课视频动画价格',
      meta: [
        {
          name: 'keywords',
          content: '微课,课件,课件ppt,微课制作,微课比赛,幼儿园微课,微课动画,微课视频,课件制作'
        },
        {
          name:'description',
          content:'麦塔拥有国内专业、成熟的微课制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、教学课件、微课、情景动画、幼儿园微课等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
        }
      ]
    }
  },
  components: {
    courseCardTitle,
    courseBaojia,
    courseVideo
  },
  async asyncData({$axios, store}) {
    // 设置选中菜单
    store.commit('setActiveNav', '/courseware');

    let [ res2, res3] = await Promise.all([
      $axios.$post(`/develop/sum`, {}),
      $axios.$post(`/develop/userlist`, {}),
    ])
    return {
      custom_sum: res2.data || 0,
      userList: res3.data.data || []
    }
  },
  data() {
    return {
      banner_image: require(`~/static/images/client/course/weike/weike-banner.png`),
      project: {
        title: '微课制作',
        data: [
          {
            type: 'donghuaweike',
            title: '动画微课',
            mainTitle: '百人动画微课制作团队，全国微课大赛获奖导师指导',
            subhead: '只做有灵魂的动画，只做有品质的微课',
            videos: [
              {
                title: '动画微课',
                purpose: '金融知识', // 用途
                imgUrl: require('~/static/images/client/course/weike/donghua01.png'),
                url: 'https://spdb.mtavip.com/sv/4bdd4a90-186533ac3d9/4bdd4a90-186533ac3d9.mp4',
              },
              {
                title: '动画微课',
                purpose: '人才管理', // 用途
                imgUrl: require('~/static/images/client/course/weike/donghua02.png'),
                url: 'https://spdb.mtavip.com/sv/4f14ce1b-1864e8fbc73/4f14ce1b-1864e8fbc73.mp4',
              },
              {
                title: '动画微课',
                purpose: '知识解答', // 用途
                imgUrl: require('~/static/images/client/course/weike/donghua03.png'),
                url: 'https://spdb.mtavip.com/sv/488485fb-1864e8fc2e5/488485fb-1864e8fc2e5.mp4',
              }
            ]
          },
          {
            type: 'shipinweike',
            title: '视频微课',
            mainTitle: '拍摄/文案/配音/制作一站式服务！',
            subhead: '追求卓越品质，用心为客户服务',
            videos: [
              {
                title: '视频微课',
                purpose: '船员培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin01.png'),
                url: 'https://spdb.mtavip.com/sv/109e2e75-1864e900229/109e2e75-1864e900229.mp4',
              },
              {
                title: '视频微课',
                purpose: '系统介绍', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin02.png'),
                url: 'https://spdb.mtavip.com/sv/4c894dba-1864e90057b/4c894dba-1864e90057b.mp4',
              },
              {
                title: '视频微课',
                purpose: '医学知识', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin03.png'),
                url: 'https://spdb.mtavip.com/sv/4f76dfa-1864e9096ab/4f76dfa-1864e9096ab.mp4',
              }
            ]
          },
          {
            type: 'wentuweike',
            title: '图文微课',
            mainTitle: '长文图/文图/E-Learning/电子杂志/H5交互',
            subhead: '灵感/经验/细节缺一不可',
            videos: [
              {
                title: '图文微课',
                purpose: '产品解读', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen01.png'),
                url: 'https://spdb.mtavip.com/sv/280d6bb7-1864e90a3c2/280d6bb7-1864e90a3c2.mp4',
              },
              {
                title: '图文微课',
                purpose: '电子课程', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen02.png'),
                url: 'https://spdb.mtavip.com/sv/4f01d75e-1864e90a3fb/4f01d75e-1864e90a3fb.mp4',
              },
              {
                title: '图文微课',
                purpose: '知识培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen03.png'),
                url: 'https://spdb.mtavip.com/sv/1baa56ff-1864e90dbde/1baa56ff-1864e90dbde.mp4',
              }
            ]
          },
          {
            type: 'PPTweike',
            title: 'PPT微课',
            mainTitle: '我们只做高端原创PPT微课，坚决抵制抄袭及模板',
            subhead: '针对每一个作品，都有严格的审核机制',
            videos: [
              {
                title: 'PPT课程',
                purpose: '企业宣传', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt01.png'),
                url: 'https://spdb.mtavip.com/sv/195d28af-1864e8ee5a7/195d28af-1864e8ee5a7.mp4',
              },
              {
                title: 'PPT课程',
                purpose: '知识培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt02.png'),
                url: 'https://spdb.mtavip.com/sv/393a31d6-1864e8f1f80/393a31d6-1864e8f1f80.mp4',
              },
              {
                title: 'PPT课程',
                purpose: '企业培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt03.png'),
                url: 'https://spdb.mtavip.com/sv/498c94b1-1864e8f4aa2/498c94b1-1864e8f4aa2.mp4',
              }
            ]
          }
        ]
      },
      zixunUrl: "https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1",
      activeItem: 'donghuaweike'
    }
  },
  computed: {
    curItem() {
      return this.project.data.find(item => item.type === this.activeItem)
    },

  },
  methods: {
    changeItem(item) {
      this.activeItem = item.type;
    },
    goQuotation() {
      document.documentElement.scrollTop = this.$refs.quotation.offsetTop-150;
      window.pageYOffset = this.$refs.quotation.offsetTop -150;
      document.body.scrollTop=this.$refs.quotation.offsetTop -150;
    }
  }
};
</script>

<style lang="scss">
.course-weike {

  .client-course-banner {
    cursor: pointer;
  }

  .client-course-classification {
    box-sizing: border-box;
    text-align: center;
    height: 737px;
    padding-top: 135px;

    li:nth-child(1){
      background-image: url("~static/images/client/course/animationCard/kc-img1.png");
    }
    li.active:nth-child(1){
      background-image: url("~static/images/client/course/animationCard/kc-img1-active.png");
    }
    li:nth-child(2){
      background-image: url("~static/images/client/course/animationCard/kc-img2.png");
    }
    li.active:nth-child(2){
      background-image: url("~static/images/client/course/animationCard/kc-img2-active.png");
    }
    li:nth-child(3){
      background-image: url("~static/images/client/course/animationCard/kc-img3.png");
    }
    li.active:nth-child(3){
      background-image: url("~static/images/client/course/animationCard/kc-img3-active.png");
    }
    li:nth-child(4){
      background-image: url("~static/images/client/course/animationCard/kc-img4.png");
    }
    li.active:nth-child(4){
      background-image: url("~static/images/client/course/animationCard/kc-img4-active.png");
    }

  }

  .client-course-classification__info {
    box-sizing: border-box;
    background-image: url("~static/images/client/course/animation/course-bg-01.png");
    background-position-x: center;
    background-repeat: no-repeat;
    padding-top: 84px;
    height: 843px;

    .classification__info-title {
      margin-bottom: 57px;
    }

    .classification__info-mainTitle {
      text-align: center;
      font-weight: normal;
      color: #333333;
      margin-bottom: 24px;
      font-size: 24px;
      letter-spacing: 2px;
    }

    .classification__info-subHead {
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      color: #333333;
      letter-spacing: 2px;
    }


    .classification-btns {
      margin-top: 80px;
      text-align: center;
      .classification-online-zixun {
        display: inline-block;
        background: #0065cd;
        border-radius: 6px;
        text-align: center;
        color: #ffffff;
        font-weight: 400;
        font-size: 16px;
        line-height: 50px;
        margin-bottom: 128px;
        width: 138px;
        height: 50px;
      }
    }
  }

  .client-course-quotation {
    background-image: url("~static/images/client/course/btns/course-bg-b1.png");
    background-position-x: center;
    background-repeat: no-repeat;
    height: 637px;

    .quotation-wrap {
      display: flex;
      justify-content: space-between;

      .left-text {
        margin-top: 282px;

        h3 {
          font-size: 48px;
          font-weight: 700;
          text-align: left;
          color: #fefefe;
          letter-spacing: 1.2px;
          margin-bottom: 33px;
          width: 410px;
          height: 47px;
        }

        p {
          font-size: 20px;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          width: 364px;
          height: 20px;
        }
      }

      .baojia-form {
        margin-top: 82px;
        margin-right: 120px;
      }
    }

  }


  @media (max-width: 768px){
    .client-course-classification {
      box-sizing: border-box;
      text-align: center;
      height: unset;
      padding: 35px 0;
    }

    .client-course-classification__info{
      height: auto;background-repeat: no-repeat;
      background-size: cover;padding-top: 42px;

      .classification__info-mainTitle{
        font-size: 15px;color: #333;margin-bottom: 16px;letter-spacing:0;
      }
      .classification__info-subHead{
        font-size: 13px;color: #555;margin-bottom: 16px;letter-spacing:0;
      }

      .classification-btns {
        margin-top: 20px;
        .classification-online-zixun {
          margin-bottom: 60px;
        }
      }
    }



    .client-course-quotation {
      margin-bottom: 200px;
      height: 400px;

      .quotation-wrap {
        flex-direction: column;

        .left-text {
          margin: 40px auto 0;

          h3 {
            text-align: center;
            font-size: 20px;
            margin-bottom: 10px;
            width: 100%;
          }

          p {
            text-align: center;
            width: 100%;
            font-size: 16px;
            margin: -10px 0 20px 0;
          }
        }

        .baojia-form {
          margin: 0 auto;
        }
      }
    }
  }

}
</style>