nuxtProject/pages/courseware/animation.vue

<template>
  <div class="client-course-page course-animation">
    <!--  宣传图  -->
    <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="dhl" :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: 'animation',
  layout: 'templateB',
  head() {
    return {
      title: '动画制作_mg动画_flash动画_an动画_二维动画_三维动画视频短片制作公司',
      meta: [
        {
          name: 'keywords',
          content: '动画制作,mg动画制作,flash动画制作,flash制作,an动画制作,二维动画制作,三维动画制作,动画短片制作,动画制作公司'
        },
        {
          name:'description',
          content:'麦塔拥有国内专业、成熟的动画制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、mg动画、flash动画、an动画、二维动画、三维动画、动画短片等，在院校教育、零售连锁行业、汽车行业、金融等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/animation/donghua-banner.png`),
      project: {
        title: '高端动画',
        data: [
          {
            type: 'qingjingdonghua',
            title: '情景动画',
            mainTitle: '每年产出高端精品情景动画500+部',
            subhead: 'mg动画/flash动画/二维动画/三维动画',
            videos: [
              {
                title: '情景动画',
                purpose: '宣传营销', // 用途
                imgUrl: require('~/static/images/client/course/animation/animation-01.png'),
                url: 'https://spdb.mtavip.com/sv/443e4168-18561fbbaa4/443e4168-18561fbbaa4.mp4',
              },
              {
                title: '情景动画',
                purpose: '知识分享', // 用途
                imgUrl: require('~/static/images/client/course/animation/animation-02.png'),
                url: '',
              },
              {
                title: '情景动画',
                purpose: '动画微课', // 用途
                imgUrl: require('~/static/images/client/course/animation/animation-03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'piantoudonghua',
            title: '片头动画',
            mainTitle: '创意片头动画设计，考究到每一帧每一秒',
            subhead: '只做对的，不做贵的',
            videos: [
              {
                title: 'AE制作',
                purpose: '片头动画', // 用途
                imgUrl: require('~/static/images/client/course/animation/piantou-01.png'),
                url: '',
              },
              {
                title: 'AE制作',
                purpose: '片头动画', // 用途
                imgUrl: require('~/static/images/client/course/animation/piantou-02.png'),
                url: '',
              },
              {
                title: 'AE制作',
                purpose: '片头动画', // 用途
                imgUrl: require('~/static/images/client/course/animation/piantou-03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'donghuaduanpian',
            title: '动画短片',
            mainTitle: '专业剧本文案老师指导沟通，打造客户满意的短片画风',
            subhead: '做专业动画，对妥协说“不”',
            videos: [
              {
                title: '二维动画',
                purpose: '幼儿教学微课', // 用途
                imgUrl: require('~/static/images/client/course/animation/duanpian-01.png'),
                url: '',
              },
              {
                title: '二维动画',
                purpose: '安全培训微课', // 用途
                imgUrl: require('~/static/images/client/course/animation/duanpian-02.png'),
                url: '',
              },
              {
                title: '二维动画',
                purpose: '直播违规微课', // 用途
                imgUrl: require('~/static/images/client/course/animation/duanpian-03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'xuanchuandonghua',
            title: '宣传动画',
            mainTitle: '麦塔动画制作-专业定制各类宣传动画！',
            subhead: '1V1文案指导，专业配音老师',
            videos: [
              {
                title: 'mg动画',
                purpose: '生产工艺', // 用途
                imgUrl: require('~/static/images/client/course/animation/xuanchuan-01.png'),
                url: '',
              },
              {
                title: 'mg动画',
                purpose: '企业宣传', // 用途
                imgUrl: require('~/static/images/client/course/animation/xuanchuan-02.png'),
                url: '',
              },
              {
                title: '情景动画',
                purpose: '动画微课', // 用途
                imgUrl: require('~/static/images/client/course/animation/xuanchuan-03.png'),
                url: '',
              }
            ]
          }
        ]
      },
      zixunUrl: "https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1",
      activeItem: 'qingjingdonghua'
    }
  },
  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" scoped>
.course-animation {

  .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/gd-img3.png");
    }
    li.active:nth-child(3){
      background-image: url("~static/images/client/course/animationCard/gd-img3-active.png");
    }
    li:nth-child(4){
      background-image: url("~static/images/client/course/animationCard/gd-img4.png");
    }
    li.active:nth-child(4){
      background-image: url("~static/images/client/course/animationCard/gd-img4-active.png");
    }


    .classification-title {
      margin-bottom: 144px;
    }

    .classification-items {
      display: flex;

      justify-content: space-between;
      align-items: center;
    }

    .classification-item {
      width: 250px;
      height: 280px;
    }

  }

  .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-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-title {
        margin-bottom: 42px;
      }
      .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;background-repeat: no-repeat;
      background-size: cover;padding-top: 42px;
      .classification__info-mainTitle{
        font-size: 15px;color: #333;margin-bottom: 16px;
      }
      .classification__info-subHead{
        font-size: 13px;color: #555;margin-bottom: 16px;
      }

      .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>