nuxtProject/pages/courseware/ppt.vue

<template>
  <div class="client-course-page course-ppt">
    <!--  宣传图  -->
    <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)">{{ item.title }}
          </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="ppt" :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: '课件PPT制作_PPT修改_PPT美化_PPT设计_教学微课制作_教学课件制作',
      meta: [
        {
          name: 'keywords',
          content: '课件PPT,PPT制作,课件PPT制作,教学微课,教学课件,微课课件,教学课件制作,课件制作,PPT修改,PPT美化,PPT设计'
        },
        {
          name: 'description',
          content: '麦塔拥有国内专业、成熟的课件PPT制作团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、教学课件、微课、课件PPT等，在院校教育、零售连锁行业、汽车行业、金融等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/ppt/ppt-banner.png`),
      project: {
        title: '课件PPT',
        data: [
          {
            type: 'kejianPPT',
            title: '课件PPT',
            mainTitle: '幼儿园课件/小初高课件/院校课件/培训课件',
            subhead: '专精课程类PPT制作-高效/高质/低价',
            videos: [
              {
                title: '课件PPT',
                purpose: '产品发布', // 用途
                imgUrl: require('~/static/images/client/course/ppt/jiaoxue01.png'),
                url: '',
              },
              {
                title: '课件PPT',
                purpose: '外语学习', // 用途
                imgUrl: require('~/static/images/client/course/ppt/jiaoxue02.png'),
                url: '',
              },
              {
                title: '课件PPT',
                purpose: '外语学习', // 用途
                imgUrl: require('~/static/images/client/course/ppt/jiaoxue03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'yanshiPPT',
            title: '演示PPT',
            mainTitle: '工业演示/医疗演示/建筑演示/机械演示',
            subhead: '做演示类PPT，麦塔更优秀！',
            videos: [
              {
                title: '演示PPT',
                purpose: '电子书', // 用途
                imgUrl: require('~/static/images/client/course/ppt/yanshi01.png'),
                url: '',
              },
              {
                title: '演示PPT',
                purpose: '功能演示', // 用途
                imgUrl: require('~/static/images/client/course/ppt/yanshi02.png'),
                url: '',
              },
              {
                title: '演示PPT',
                purpose: '金融制度', // 用途
                imgUrl: require('~/static/images/client/course/ppt/yanshi03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'shangyePPT',
            title: '商业PPT',
            mainTitle: '招商计划/商业活动/企业宣传/招商路演',
            subhead: '投资咨询师与营销分析师协作完成',
            videos: [
              {
                title: '商业PPT',
                purpose: '产品推广', // 用途
                imgUrl: require('~/static/images/client/course/ppt/shangye01.png'),
                url: '',
              },
              {
                title: '商业PPT',
                purpose: '数据展示', // 用途
                imgUrl: require('~/static/images/client/course/ppt/shangye02.png'),
                url: '',
              },
              {
                title: '商业PPT',
                purpose: '商业汇报', // 用途
                imgUrl: require('~/static/images/client/course/ppt/shangye03.png'),
                url: '',
              }
            ]
          },
          {
            type: 'huibaoPPT',
            title: '汇报PPT',
            mainTitle: '工作汇报/年终汇报/述职报告/护理查房/品管圈/病例讨论/PDCA',
            subhead: '精美制作-专职文案-一步到位',
            videos: [
              {
                title: '汇报PPT',
                purpose: '产品汇报', // 用途
                imgUrl: require('~/static/images/client/course/ppt/huibao01.png'),
                url: '',
              },
              {
                title: '汇报PPT',
                purpose: '企业宣传', // 用途
                imgUrl: require('~/static/images/client/course/ppt/huibao02.png'),
                url: '',
              },
              {
                title: '汇报PPT',
                purpose: '知识汇报', // 用途
                imgUrl: require('~/static/images/client/course/ppt/huibao03.png'),
                url: '',
              }
            ]
          }
        ]
      },
      zixunUrl: "https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1",
      activeItem: 'kejianPPT'
    }
  },
  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-ppt {

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

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

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

    .classification-items {
      display: flex;

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

    .classification-item {
      background-color: #cccccc;
      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;
      padding-top: 42px;

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