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">
            <div class="video-item-box">
              <i class="video-play-btn"></i><img :src="item.imgUrl">
              <p><span>展现：Mg动画</span><span>用途：生产工艺</span></p>
            </div>
          </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";

export default {
  name: 'weike',
  layout: 'templateB',
  head() {
    return {
      title: '微课制作_课件PPT_微课比赛_幼儿园微课_微课视频动画价格',
      meta: [
        {
          name: 'keywords',
          content: '微课,课件,课件ppt,微课制作,微课比赛,幼儿园微课,微课动画,微课视频,课件制作'
        },
        {
          name:'description',
          content:'麦塔拥有国内专业、成熟的微课制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、教学课件、微课、情景动画、幼儿园微课等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
        }
      ]
    }
  },
  components: {
    courseCardTitle,
    courseBaojia
  },
  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: '',
              },
              {
                title: '动画微课',
                purpose: '人才管理', // 用途
                imgUrl: require('~/static/images/client/course/weike/donghua02.png'),
                url: '',
              },
              {
                title: '动画微课',
                purpose: '知识解答', // 用途
                imgUrl: require('~/static/images/client/course/weike/donghua03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'shipinweike',
            title: '视频微课',
            mainTitle: '拍摄/文案/配音/制作一站式服务！',
            subhead: '追求卓越品质，用心为客户服务',
            videos: [
              {
                title: '视频微课',
                purpose: '视频微课', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin01.png'),
                url: '',
              },
              {
                title: '视频微课',
                purpose: '系统介绍', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin02.png'),
                url: '',
              },
              {
                title: '视频微课',
                purpose: '医学知识', // 用途
                imgUrl: require('~/static/images/client/course/weike/shipin03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'wentuweike',
            title: '图文微课',
            mainTitle: '长文图/文图/E-Learning/电子杂志/H5交互',
            subhead: '麦塔微课制作-灵感/经验/细节缺一不可',
            videos: [
              {
                title: '图文微课',
                purpose: '产品解读', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen01.png'),
                url: '',
              },
              {
                title: '图文微课',
                purpose: '电子课程', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen02.png'),
                url: '',
              },
              {
                title: '图文微课',
                purpose: '知识培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/tuwen03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'PPTweike',
            title: 'PPT微课',
            mainTitle: '我们只做高端原创PPT微课，坚决抵制抄袭及模板',
            subhead: '针对每一个作品，都有严格的审核机制',
            videos: [
              {
                title: 'PPT课程',
                purpose: '企业宣传', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt01.png'),
                url: '',
              },
              {
                title: 'PPT课程',
                purpose: '知识培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt02.png'),
                url: '',
              },
              {
                title: 'PPT课程',
                purpose: '企业培训', // 用途
                imgUrl: require('~/static/images/client/course/weike/ppt03.png'),
                url: '',
              }
            ]
          }
        ]
      },
      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;

    .classification-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    li{
      width: 279px;height: 333px;position:relative;background-size: cover;
      background-repeat: no-repeat;cursor: pointer;
      p{font-size: 24px;color: #333;position: absolute;bottom: 65px;left:0;right:0;text-align: center;}
    }
    li.active{
      p{color: #2770FF;}
    }

    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");
    padding-top: 84px;
    height: 843px;

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

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

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

    }

    .classification__info-videos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 122px 0 50px 0;


      .classification-video-item {
        width: 380px;height: 280px;

        .video-item-box{
          width: 352px;background: rgba(18,107,255,0.12);margin: 0;
          border: 1px solid #ffffff;border-radius: 10px;padding: 10px;
          box-sizing: border-box;position: relative;
          display: flex;align-items: center;
          img{width: 100%;border-radius: 8px;z-index: 8;}
          .video-play-btn{
            width: 70px;height: 70px;position: absolute;z-index: 10;background-size: cover;background-position: center;
            background-image: url("~static/images/client/course/animation-video-img1.png");background-repeat: no-repeat;
            right: -15px;bottom: 30px;transition: 0.5s;
          }
          .video-play-btn:hover{transform: scale(1.1);cursor: pointer;}
        }
        .video-item-box:before,.video-item-box:after{content: ' ';position: absolute;display: block;background-repeat: no-repeat;background-size: contain;}
        .video-item-box:before{width: 357px;height: 99px;background-image: url("~static/images/client/course/animation-video-img2.png");bottom: -30px;right: -44px;z-index: 9;}
        .video-item-box:after{width: 95px;height: 160px;background-image: url("~static/images/client/course/animation-video-img3.png");bottom: 20px;right: -30px;z-index: 7;transform: rotateY(180deg);}


        &:last-child {
          margin-right: 0;
        }

      }
    }

    .classification-btns {
      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: 48px;
        margin-bottom: 128px;
        width: 138px;
        height: 50px;
      }
    }
  }

  .client-course-quotation {
    background-image: url("~static/images/client/course/btns/course-bg-b1.png");
    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: 400px;
      padding-top: 35px;

      .classification-items{
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .classification-item {
        box-sizing: border-box;
        margin: 10px;
        width: calc(50% - 20px);
        height: 140px;

        &:not(:nth-child(even)) {
          margin-right: 0;
        }
        &:nth-child(n+3) {
          margin-top: 0;
        }
      }
    }

    .client-course-classification__info{
      height: auto;
      padding-top: 42px;

      .classification__info-videos {
        flex-wrap: wrap;
        flex-direction: column;
        box-sizing: border-box;
        padding: 20px;
        margin: 30px 0 0 0;

        .classification-video-item {
          height: auto;
          flex: 1;
          width: 100%;
          margin: 0 0 10px;

          img {
            height: auto;
            width: 100%;
          }
        }
      }

      .classification-btns {
        .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;
          }
        }

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

}
</style>