提交3个页面

components/course/course-baojia.vue

@@ -0,0 +1,539 @@
+<template>
+  <div class="course-baojia">
+    <!--  第一行报价人数  -->
+    <div class="baojia-counts">
+      <i></i><span>已有 {{ sum }} 位客户成功报价</span>
+    </div>
+    <!--  手机号  -->
+    <div class="baojia-phone">
+      <el-input class="phone-input" v-model="baojia.phone" placeholder="请输入手机号(必填)"></el-input>
+    </div>
+    <!--  进度条  -->
+    <div class="baojia-nc">
+      <div id="baojiaId" class="nc-container"></div>
+    </div>
+    <!--  验证码+按钮  -->
+    <div class="baojia-btns-code">
+      <el-input v-model="baojia.code" placeholder="请输入验证码"/>
+      <el-button class="code-btn" :disabled="btnTextDisabled" @click="checkVerification">{{ btnText }}</el-button>
+    </div>
+    <!--  称呼  -->
+    <div class="baojia-custom-name">
+      <el-input v-model="baojia.name" placeholder="请输入您的称呼(必填)"/>
+    </div>
+    <!--  按钮  -->
+    <div class="baojia-btn">
+      <el-button type="primary" @click="handleBaojia">预约咨询顾客</el-button>
+    </div>
+    <!--  底部滚动  -->
+    <div class="baojia-bottom" v-if="userData.length">
+      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide div-row" v-for="(d,index) in userData" :key="index">
+            <span class="icon-w1">
+              <i></i>
+              <span>{{ d.chenghu }}</span>
+            </span>
+            <span>{{ d.phone }}</span>
+            <span>{{ d.timer }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "course-baojia",
+  props: {
+    sum: {
+      type: Number,
+      default: 0
+    },
+    tag: {
+      type: String,
+      default: 'dhl'
+    },
+    userList: {
+      type: Array,
+      default: [],
+    }
+  },
+  computed: {
+    curTag() {
+      const tag = {
+        'wkl': 1,
+        'dhl': 2,
+        'ppt': 3,
+      }
+      return tag[this.tag]
+    },
+    userData() {
+      const userList = this.userList.filter(user => user.chenghu)
+      return userList.map(user => {
+        const chenghu = user.chenghu.length > 2 ? `${user.chenghu[0]}**` : `${user.chenghu[0]}*`;
+        const ps = user.phone.split('');
+        const phone = `${ps[0]}${ps[1]}${ps[2]}****${ps[7]}${ps[8]}${ps[9]}${ps[10]}`;
+        return {chenghu, phone, timer: this.getTimeString(user['endSecond'])}
+      })
+    },
+  },
+  data() {
+    return {
+      baojia: {
+        phone: '',
+        code: '',
+        name: ''
+      },
+      btnTextDisabled: false,
+      btnText: '获取验证码',
+      countdown: 60, // 60秒倒计时
+      swiperOption: {},
+      appKey: 'FFFF0N00000000007EC0',
+    }
+  },
+  methods: {
+    getTimeString(timer) {
+      let m10 = 10 * 60 * 1000;
+      let m30 = 30 * 60 * 1000;
+      let h1 = 60 * 60 * 1000;
+      let h6 = 6 * 60 * 60 * 1000;
+      let d1 = 24 * 60 * 60 * 1000;
+      let z1 = 7 * 24 * 60 * 60 * 1000;
+      let M1 = 30 * 24 * 60 * 60 * 1000;
+
+      if (timer > M1) {
+        return `1个月前`
+      }
+
+      if (timer > z1) {
+        return `1周前`
+      }
+
+      if (timer > d1) {
+        return `1天前`
+      }
+
+      if (timer > h6) {
+        return `6小时前`
+      }
+
+      if (timer > h1) {
+        return `1小时前`
+      }
+
+      if (timer > m30) {
+        return `30分钟前`
+      }
+
+      if (timer > m10) {
+        return `10分中前`
+      }
+
+      return `刚刚`;
+    },
+    // 倒计时60秒
+    setTime() {
+      if (this.countdown === 0) {
+        this.btnTextDisabled = false;
+        this.btnText = '获取验证码';
+        this.countdown = 60;
+      } else if (this.countdown === -1) {
+        this.btnTextDisabled = false;
+        this.btnText = '获取验证码';
+        this.countdown = 60;
+      } else {
+        this.btnTextDisabled = true;
+        this.btnText = '重新发送(' + this.countdown + 's)';
+        this.countdown--;
+        this.countTimer = setTimeout(() => this.setTime(), 1000);
+      }
+    },
+    /**
+     * 串联加载指定的脚本
+     * 串联加载[异步]逐个加载，每个加载完成后加载下一个
+     * 全部加载完成后执行回调
+     * @param array|string 指定的脚本们
+     * @param function 成功后回调的函数
+     * @return array 所有生成的脚本元素对象数组
+     * 异步加载js后运行回调函数callback / scripts 为数组或字符串
+     */
+    seriesLoadScripts(scripts, callback) {
+      if (typeof (scripts) != 'object') {
+        var scripts = [scripts];
+      }
+      var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
+      var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
+        s[i] = document.createElement('script');
+        s[i].setAttribute('type', 'text/javascript');
+        s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
+          if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
+            this.onload = this.onreadystatechange = null;
+            this.parentNode.removeChild(this);
+            if (i != last) {
+              recursiveLoad(i + 1);
+            } else if (typeof (callback) == 'function') {
+              callback();
+            }
+          }
+        };
+        s[i].setAttribute('src', scripts[i]);
+        HEAD.appendChild(s[i]);
+      };
+      recursiveLoad(0);
+    },
+    // 滑块
+    sliderFun() {
+      const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
+      const NC_Opt = {
+        //声明滑动验证需要渲染的目标元素ID。
+        renderTo: '#baojiaId',
+        //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+        appkey: this.appKey,
+        //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
+        scene: 'nc_message',
+        //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
+        token: nc_token,
+        //滑动条的宽度。
+        customWidth: 300,
+        //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
+        trans: {'key1': 'code0'},
+        //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
+        elementID: ['usernameID'],
+        //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
+        is_Opt: 0,
+        //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
+        language: 'cn',
+        //是否启用。一般情况，保持默认值（true）即可。
+        isEnabled: true,
+        //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
+        timeout: 3000,
+        //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
+        times: 5,
+        //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
+        apimap: {
+          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
+          // 'get_captcha': '//b.com/get_captcha/ver3',
+          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
+          // 'get_img': '//c.com/get_img',
+          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
+          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
+          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
+          // 'umid_serUrl': 'https://g.com/service/um.json'
+        },
+        //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+        callback: (data) => {
+          this.sliderData = Object.assign({}, data, {
+            appkey: NC_Opt.appkey,
+            scene: NC_Opt.scene,
+          });
+          console.log(this.sliderData);
+        },
+      };
+      let date11 = () => {
+
+        let _date = new Date();
+        let year = _date.getFullYear().toString();
+        let month = _date.getMonth().toString();
+        let day = _date.getDate().toString();
+        let a = _date.getHours().toString();
+        let b = _date.getMinutes().toString();
+        let c = _date.getSeconds().toString();
+
+        return year + month + day + a + b + c;
+      };
+      let c = date11();
+      const scripts = [
+        `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
+      ];
+      this.seriesLoadScripts(scripts, function () {
+        var nc = new noCaptcha(NC_Opt);
+        nc.upLang('cn', {
+          _startTEXT: '请按住滑块，拖动到最右边',
+          _yesTEXT: '验证通过',
+          _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
+          _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
+        });
+      });
+
+    },
+    // 验证码
+    checkVerification() {
+      if (this.sliderData.appkey === undefined) {
+        this.$message.error('请先通过滑块校验');
+        return;
+      }
+      this.$axios.$post(`/develop/exists`, {phone: this.baojia.phone}).then(res => {
+
+        if (res.code === 0 && res.data) {
+
+          let req = {
+            'appkey': this.sliderData.appkey,
+            'phone': this.baojia.phone,
+            'scene': this.sliderData.scene,
+            'sessionid': this.sliderData.csessionid,
+            'sig': this.sliderData.sig,
+            'token': this.sliderData.token,
+            'type': 0,
+          }
+          this.$axios.$post('/sendCode', req).then(res => {
+            if (res.code === 0 && res.data) {
+              this.setTime();
+            } else {
+              this.$message.error(res.msg || '手机号已存在');
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '手机号已存在');
+          return false;
+        }
+
+      })
+    },
+    // 申请报价
+    handleBaojia() {
+      const opt = {
+        type: this.curTag,
+        phone: this.baojia.phone,
+        code: this.baojia.code,
+        chenghu: this.baojia.name
+      }
+
+      if (!this.baojia.phone) {
+        this.$message.error("请填写手机号");
+        return;
+      }
+      if (!this.baojia.code) {
+        this.$message.error("验证码不能为空");
+        return;
+      }
+      if (!this.baojia.name) {
+        this.$message.error("请输入您的称呼");
+        return;
+      }
+
+      this.confirmTl(opt)
+    },
+    confirmTl(options){
+      // 请求后台
+      this.$axios.$post('/develop/add',options).then(res=>{
+        if (res.code === 0 && res.data) {
+          this.$message.success('申请成功');
+          this.resetCode();
+        } else {
+          this.$message.error('申请失败');
+          this.resetCode();
+        }
+      });
+    },
+    resetCode() {
+      this.btnTextDisabled = false;
+      this.btnText = '获取验证码';
+      this.countdown = 60; // 60秒倒计时
+      this.swiperOption = {};
+      this.countTimer && clearTimeout(this.countTimer);
+    }
+  },
+  mounted() {
+    this.sliderFun();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.course-baojia {
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: -8px 0px 35px 8px rgba(196, 198, 200, 0.34);
+  overflow: hidden;
+  position: relative;
+  width: 379px;
+  height: 471px;
+  padding: 34px 22px;
+
+  .baojia-counts {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: rgba(73, 172, 252, 0.08);
+    border-radius: 6px;
+    margin-bottom: 22px;
+    width: 335px;
+    height: 44px;
+
+    > i {
+      display: inline-block;
+      background-image: url("~static/images/client/course/animation/fire.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      margin: 0 5px 0 14px;
+      width: 19px;
+      height: 22px;
+    }
+
+    > span {
+      font-size: 14px;
+      font-weight: 400;
+      text-align: left;
+      color: #2779f7;
+    }
+  }
+
+  .baojia-phone {
+    margin-bottom: 17px;
+
+    .phone-input {
+      border: 1px solid #d3d3d3;
+      border-radius: 6px;
+      width: 335px;
+      height: 50px;
+
+      ::v-deep .el-input__inner {
+        border: none;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+  }
+
+  .baojia-nc {
+    background: #f7f7f7;
+    margin-bottom: 22px;
+    width: 335px;
+    height: 30px;
+
+    .nc-container {
+      ::v-deep .nc_wrapper {
+        // 此处id会随机生成 借用class + important 冲掉 id权重
+        width: 100% !important;
+      }
+    }
+
+
+  }
+
+  .baojia-btns-code {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+
+    ::v-deep .el-input {
+      border: 1px solid #d3d3d3;
+      border-radius: 6px;
+      width: 200px;
+      height: 50px;
+    }
+
+    ::v-deep .el-input__inner {
+      border: none;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    .code-btn {
+      background: linear-gradient(to right, #247bfa 0%, #4baffc 100%);
+      border-radius: 6px;
+      box-shadow: 0 0 0px 0 #257df9;
+      border: none;
+      width: 123px;
+      height: 50px;
+      margin-left: 10px;
+
+      ::v-deep span {
+        color: #fff;
+      }
+    }
+  }
+
+  .baojia-custom-name {
+    border: 1px solid #d3d3d3;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    width: 335px;
+    height: 50px;
+
+    ::v-deep .el-input__inner {
+      border: none;
+      height: 50px;
+      line-height: 50px;
+    }
+  }
+
+  .baojia-btn {
+
+    ::v-deep .el-button {
+      background: linear-gradient(to right, #247bfa 0%, #4baffc 100%);
+      border-radius: 6px;
+      box-shadow: 0 0 0px 0 #257df9;
+      width: 335px;
+      height: 50px;
+
+      span {
+        font-size: 16px;
+        font-weight: 400;
+        text-align: left;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .baojia-bottom {
+    background: rgba(39, 127, 250, 0.07);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 379px;
+    height: 36px;
+
+    .icon-w1 {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      i {
+        background-image: url('~static/images/client/course/animation/yinling.png');
+        display: inline-block;
+        width: 13px;
+        height: 14px;
+        margin: 13px 15px 0 28px;
+
+      }
+
+      span {
+        margin-top: 13px;
+      }
+
+    }
+
+    .swiper-slide {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      > span {
+        font-size: 14px;
+        font-weight: 400;
+        text-align: left;
+        color: #2779f7;
+
+        &:nth-child(2), &:nth-child(3) {
+          margin-top: 13px;
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
+
+  @media (max-width: 768px){
+    & {
+      transform: scale(0.8);
+    }
+  }
+
+}
+</style>

components/course/course-card-title.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="classification-title">
+    <i class="left"></i>
+    <h3>{{ title }}</h3>
+    <i class="right"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "course-card-title",
+  props: {
+    title: ''
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classification-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    display: inline-block;
+    width: 67px;
+    height: 26px;
+  }
+
+  i.left {
+    transform: rotate(-180deg);
+    background-image: url("~static/images/client/course/animation/title-line.png");
+  }
+
+  i.right {
+    background-image: url("~static/images/client/course/animation/title-line.png");
+  }
+
+  h3 {
+    font-size: 36px;
+    font-weight: 400;
+    color: #333333;
+    margin: 0 45px;
+  }
+
+  @media (max-width: 768px){
+
+    i {
+      display: inline-block;
+      width: 50px;
+      height: 22px;
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #333333;
+      margin: 0 15px;
+    }
+  }
+}
+</style>

nuxt.config.js

@@ -7,7 +7,7 @@ const pro = {
 
 }
 // build 改为true
-const isPro = true;
+const isPro = false;
 
 export default {
   /*

pages/courseware/animation.vue

@@ -1,13 +1,450 @@
 <template>
-    <div>高端动画</div>
+  <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" 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">
+            <img :src="item.imgUrl" />
+          </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>
-    export default {
-        name: 'animation',
-    };
+import courseCardTitle from "@/components/course/course-card-title";
+import courseBaojia from "@/components/course/course-baojia";
+
+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
+  },
+  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: '',
+              },
+              {
+                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 scoped>
+<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;
+
+    .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__info-videos {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 122px 0 50px 0;
+
+
+      .classification-video-item {
+        background-color: #ccc;
+        margin-right: 20px;
+        width: 380px;
+        height: 280px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        img {
+          width: 380px;
+          height: 280px;
+        }
+      }
+    }
+
+    .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__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>

pages/courseware/custom.vue

@@ -1,1172 +1,450 @@
 <template>
-  <div class="client-course-page course-custom">
-    <!-- 课程开发页 banner栏 -->
-    <div :style="{backgroundImage: `url(${defaultImg})`}" class="client-course-banner"></div>
-
-    <div class="top-btns-content client-container">
-      <h4>课程定制类型</h4>
-      <div class="btn-group">
-        <div class="dingzhi-card" :class="{active: active==='dhl'}" @click="changeCardActive('dhl')">
-          <i></i>
-          <p>动画类课程</p>
-          <span class="jiao"></span>
-        </div>
-        <div class="dingzhi-card" :class="{active: active==='spl'}" @click="changeCardActive('spl')">
-          <i></i>
-          <p>视频类课程</p>
-          <span class="jiao"></span>
-        </div>
-        <div class="dingzhi-card" :class="{active: active==='h5l'}" @click="changeCardActive('h5l')">
-          <i></i>
-          <p>H5类课程</p>
-          <span class="jiao"></span>
-        </div>
-        <div class="dingzhi-card" :class="{active: active==='ppt'}" @click="changeCardActive('ppt')">
-          <i></i>
-          <p>PPT定制及美化</p>
-          <span class="jiao"></span>
-        </div>
+  <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" v-for="item in project.data" @click="changeItem(item)">{{ item.title }}</li>
+        </ul>
       </div>
     </div>
-
-    <div class="course-content client-container" v-if="active === 'dhl'">
-      <h4>动画类课程</h4>
-      <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。主要包含有：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
-      <div class="video-container">
-        <div class="video-box">
-          <span><img :src="courseVideoImg1" alt="教育培训业"><i @click="playVideo(0)"></i></span>
-          <p>教育培训业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg2" alt="金融保险业"><i @click="playVideo(1)"></i></span>
-          <p>金融保险业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg3" alt="食品餐饮业"><i @click="playVideo(2)"></i></span>
-          <p>食品餐饮业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg4" alt="生产制造业"><i @click="playVideo(3)"></i></span>
-          <p>生产制造业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg5" alt="信息通讯业"><i @click="playVideo(4)"></i></span>
-          <p>信息通讯业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg6" alt="汽车销售业"><i @click="playVideo(5)"></i></span>
-          <p>汽车销售业</p>
+    <!--  动画分类详情区域  -->
+    <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">
+            <img :src="item.imgUrl" />
+          </li>
+        </ul>
+        <div class="classification-btns">
+          <a class="classification-online-zixun" :href="zixunUrl">在线咨询</a>
         </div>
       </div>
-      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
     </div>
-
-    <div class="course-content client-container" v-if="active === 'spl'">
-      <h4>视频类课程</h4>
-      <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：</p>
-      <div class="video-container">
-        <div class="video-box">
-          <span><img :src="courseVideoImg7" alt="能源化工业"><i @click="playVideo(6)"></i></span>
-          <p>能源化工业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg8" alt="金融保险业"><i @click="playVideo(7)"></i></span>
-          <p>金融保险业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg9" alt="教育培训业"><i @click="playVideo(8)"></i></span>
-          <p>教育培训业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg10" alt="管理培训业"><i @click="playVideo(9)"></i></span>
-          <p>管理培训业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg11" alt="食品餐饮业"><i @click="playVideo(10)"></i></span>
-          <p>食品餐饮业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg12" alt="服务零售业"><i @click="playVideo(11)"></i></span>
-          <p>服务零售业</p>
+    <!--  课程报价区域  -->
+    <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>
-      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
-
-
     </div>
-
-    <div class="course-content client-container" v-if="active === 'h5l'">
-      <h4>H5类课程</h4>
-      <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。</p>
-      <div class="video-container">
-        <div class="video-box">
-          <span><img :src="courseVideoImg13" alt="现代制造业"><i @click="playVideo(12)"></i></span>
-          <p>现代制造业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg14" alt="教育培训业"><i @click="playVideo(13)"></i></span>
-          <p>教育培训业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg15" alt="物流业"><i @click="playVideo(14)"></i></span>
-          <p>物流业</p>
-        </div>
-      </div>
-      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
-
-
-    </div>
-
-    <div class="course-content client-container" v-if="active === 'ppt'">
-      <h4>PPT定制及美化</h4>
-      <p>现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。麦塔曾多次为客户在各种大赛中取得前三甲的优异成绩。</p>
-      <div class="video-container">
-        <div class="video-box">
-          <span><img :src="courseVideoImg16" alt="金融保险业"><i @click="playVideo(15)"></i></span>
-          <p>金融保险业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg17" alt="教育培训业"><i @click="playVideo(16)"></i></span>
-          <p>教育培训业</p>
-        </div>
-        <div class="video-box">
-          <span><img :src="courseVideoImg18" alt="生产制造业"><i @click="playVideo(17)"></i></span>
-          <p>生产制造业</p>
-        </div>
-      </div>
-      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
-
-
-    </div>
-
-    <div class="course-content-wrap">
-
-      <div class="course-form-bg"></div>
-
-      <div class="form-wrap">
-        <h4>课程定制在线报价</h4>
-        <p>栋科客服人员会在30分钟内与你取得联系</p>
-        <div class="baojia-form">
-
-          <p class="form-f1"><i></i>已有 {{ custom_sum }} 位客户成功报价</p>
-
-          <div class="form-f2">
-            <el-input v-model="custom_phone" placeholder="请输入手机号" class="dialog-input-tel height-63 form-input"></el-input>
-          </div>
-
-          <div class="form-f3">
-            <div id="your-dom-id" class="nc-container"></div>
-          </div>
-
-          <div class="form-row-col form-f4">
-            <el-input v-model="custom_code" placeholder="请输入验证码" class="dialog-input-code height-63 form-input"></el-input>
-            <el-button  @click="checkVerification" :disabled="btnTextDisabled" class="custom-code-btn" >{{btnText}}</el-button>
-          </div>
-
-          <div class="form-f5">
-            <el-input v-model="custom_name" placeholder="请输入您的称呼(必填)" class="dialog-input-tel height-63 form-input"></el-input>
-          </div>
-
-          <el-button class="form-f6" type="primary" @click="handleYuyue">预约咨询顾客</el-button>
-
-        </div>
-        <div class="form-f7" v-if="userList.length">
-          <div v-swiper:mySwiper="swiperOption" class="swiper-container">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide div-row" v-for=" (d,index) in userData" :key="index">
-                <span class="icon-w1"><i></i><span>{{d.chenghu}}</span></span><span>{{d.phone}}</span><span>{{d.timer}}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!--  视频播放弹窗 -->
-    <el-dialog
-      :title="title"
-      :visible.sync="videoDialogFlag"
-      @close="closeVideoDialog"
-      class="course-video-dialog"
-      center>
-      <video controls :src="source" class="course-video-box"></video>
-    </el-dialog>
   </div>
-
-
 </template>
 
 <script>
-import Swiper, {Autoplay} from 'swiper';
-Swiper.use([Autoplay]);
+import courseCardTitle from "@/components/course/course-card-title";
+import courseBaojia from "@/components/course/course-baojia";
+
 export default {
-  name:       'custom',
-  layout:     'templateB',
-  async asyncData({ $axios, store }) {
+  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 [res1, res2, res3] =  await Promise.all([
-      await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
-        return res
-      }),
-      await $axios.$post(`/develop/sum`,{}).then(res=>{
-        return res
-      }),
-      await $axios.$post(`/develop/userlist`,{}).then(res=>{
-        return res
-      }),
+    let [ res2, res3] = await Promise.all([
+      $axios.$post(`/develop/sum`, {}),
+      $axios.$post(`/develop/userlist`, {}),
     ])
     return {
-      topCarousels : res1.data.data ||[],
       custom_sum: res2.data || 0,
       userList: res3.data.data || []
     }
   },
-  components: {
-    mySwiper: Swiper
-  },
   data() {
     return {
-
-      swiperOption: {
-        autoplay: {
-          delay: 2000,
-        },
-        height: 25,
-        direction: 'vertical',
-        paginationClickable: true,
-        speed: 800,
-        loop: true,
-        observer: true,
-        observeParents: true,
-        autoplayDisableOnInteraction: false,
-        allowTouchMove: false,
+      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: '',
+              }
+            ]
+          }
+        ]
       },
-
-      userData: [],
-
-      videoDialogFlag:false,
-      source:'',
-      footerText:'',
-      title:'',
-
-      custom_phone: '',
-      custom_code: '',
-      custom_name: '',
-
-      bannerList: [],
-      defaultImg: require(`~/static/images/client/course/course-banner-background-dingzhi.jpg`),
-      active: 'dhl',
-
-      // 动画类
-      courseVideoImg1:  require(`~/static/images/client/course/videoImgs/dh06.jpg`),
-      courseVideoImg2:  require(`~/static/images/client/course/videoImgs/dh05.jpg`),
-      courseVideoImg3:  require(`~/static/images/client/course/videoImgs/dh02.jpg`),
-      courseVideoImg4:  require(`~/static/images/client/course/videoImgs/dh03.jpg`),
-      courseVideoImg5:  require(`~/static/images/client/course/videoImgs/dh01.jpg`),
-      courseVideoImg6:  require(`~/static/images/client/course/videoImgs/dh04.jpg`),
-
-      //  视频类
-      courseVideoImg7:  require(`~/static/images/client/course/videoImgs/sp02.jpg`),
-      courseVideoImg8:  require(`~/static/images/client/course/videoImgs/sp05.jpg`),
-      courseVideoImg9:  require(`~/static/images/client/course/videoImgs/sp06.jpg`),
-      courseVideoImg10:  require(`~/static/images/client/course/videoImgs/sp04.jpg`),
-      courseVideoImg11:  require(`~/static/images/client/course/videoImgs/sp01.jpg`),
-      courseVideoImg12:  require(`~/static/images/client/course/videoImgs/sp07.jpg`),
-
-      //  H5类
-      courseVideoImg13:  require(`~/static/images/client/course/videoImgs/h501.jpg`),
-      courseVideoImg14:  require(`~/static/images/client/course/videoImgs/h503.jpg`),
-      courseVideoImg15:  require(`~/static/images/client/course/videoImgs/h502.jpg`),
-
-      //  PPT类
-      courseVideoImg16:  require(`~/static/images/client/course/videoImgs/ppt02.jpg`),
-      courseVideoImg17:  require(`~/static/images/client/course/videoImgs/ppt03.jpg`),
-      courseVideoImg18:  require(`~/static/images/client/course/videoImgs/ppt01.jpg`),
-
-      videoArray:[
-        // 动画类
-        {
-          url:'https://spdb.mtavip.com/sv/27efd842-18561fc1359/27efd842-18561fc1359.mp4',
-          title:'教育培训业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/42dd80cd-18561fc4473/42dd80cd-18561fc4473.mp4',
-          title:'金融保险业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/523e5af9-18561fd1e6e/523e5af9-18561fd1e6e.mp4',
-          title:'食品餐饮业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/4d636497-18561fcd419/4d636497-18561fcd419.mp4',
-          title:'生产制造业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/18668c2a-18561fd26d5/18668c2a-18561fd26d5.mp4',
-          title:'信息通讯业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/e229e54-18561fca834/e229e54-18561fca834.mp4',
-          title:'汽车销售业',
-        },
-
-        // 视频类
-        {
-          url:'https://spdb.mtavip.com/sv/41cf4d2a-18561fe04f9/41cf4d2a-18561fe04f9.mp4',
-          title:'能源化工业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/5c0f0385-18561fdeb92/5c0f0385-18561fdeb92.mp4',
-          title:'金融保险业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/197050f3-18561fda180/197050f3-18561fda180.mp4',
-          title:'教育培训业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/ab98bc0-18561fd9278/ab98bc0-18561fd9278.mp4',
-          title:'管理培训业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/cf564e1-18561fea3c8/cf564e1-18561fea3c8.mp4',
-          title:'食品餐饮业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/c0acb47-18561fd277e/c0acb47-18561fd277e.mp4',
-          title:'服装零售业',
-        },
-
-        // h5 类
-        {
-          url:'https://spdb.mtavip.com/sv/443e4168-18561fbbaa4/443e4168-18561fbbaa4.mp4',
-          title:'现代制造业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/70cd938-18561fbba23/70cd938-18561fbba23.mp4',
-          title:'教育培训业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/3e031aef-18561fbba3e/3e031aef-18561fbba3e.mp4',
-          title:'物流业',
-        },
-
-        // PPT
-        {
-          url:'https://spdb.mtavip.com/sv/3c6f248b-18561fbba53/3c6f248b-18561fbba53.mp4',
-          title:'金融保险业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/1afd4571-18561fbba37/1afd4571-18561fbba37.mp4',
-          title:'教育培训业',
-        },
-        {
-          url:'https://spdb.mtavip.com/sv/5fe3406b-18561fc1222/5fe3406b-18561fc1222.mp4',
-          title:'生产制造业',
-        },
-
-      ],
-
-      btnTextDisabled: false,
-      btnText:         '获取验证码',
-      countdown:       60, // 60秒倒计时
-      sliderData:      {},
-      appKey:          'FFFF0N00000000007EC0',
-    };
-  },
-  head(){
-    return {
-      SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
-      title: '多媒体课件制作_视频课件制作_flash课件制作_【栋科课程开发团队】',
-      meta: [
-        {
-          name: 'keywords',
-          content: '课件制作,课件制作公司,课件设计,ppt课件制作'
-        },
-        {
-          name:'description',
-          content:'栋科软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、情景动漫、AR/VR演示等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过10年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
-        }
-      ],
+      zixunUrl: "https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1",
+      activeItem: 'donghuaweike'
     }
   },
-  methods:    {
-    getName() {},
-    getTel() {},
-    getTime() {},
-    gozixun() {
-      window.href = "https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd";
-    },
-    closeVideoDialog() {
-      this.videoDialogFlag = false;
-      this.source = '';
-      this.footerText = '';
-      this.title = '';
-    },
-    /**
-     * 串联加载指定的脚本
-     * 串联加载[异步]逐个加载，每个加载完成后加载下一个
-     * 全部加载完成后执行回调
-     * @param array|string 指定的脚本们
-     * @param function 成功后回调的函数
-     * @return array 所有生成的脚本元素对象数组
-     * 异步加载js后运行回调函数callback / scripts 为数组或字符串
-     */
-    seriesLoadScripts(scripts, callback) {
-      if (typeof (scripts) != 'object') {
-        var scripts = [scripts];
-      }
-      var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
-      var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
-        s[i] = document.createElement('script');
-        s[i].setAttribute('type', 'text/javascript');
-        s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
-          if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
-            this.onload = this.onreadystatechange = null;
-            this.parentNode.removeChild(this);
-            if (i != last) {
-              recursiveLoad(i + 1);
-            } else if (typeof (callback) == 'function') {
-              callback();
-            }
-          }
-        };
-        s[i].setAttribute('src', scripts[i]);
-        HEAD.appendChild(s[i]);
-      };
-      recursiveLoad(0);
-    },
-    // 滑块
-    sliderFun() {
-      const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
-      console.log(nc_token);
-      const NC_Opt = {
-        //声明滑动验证需要渲染的目标元素ID。
-        renderTo:    '#your-dom-id',
-        //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
-        appkey:      this.appKey,
-        //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
-        scene:       'nc_message',
-        //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
-        token:       nc_token,
-        //滑动条的宽度。
-        customWidth: 300,
-        //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
-        trans:       { 'key1': 'code0' },
-        //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
-        elementID:   ['usernameID'],
-        //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
-        is_Opt:      0,
-        //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
-        language:    'cn',
-        //是否启用。一般情况，保持默认值（true）即可。
-        isEnabled:   true,
-        //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
-        timeout:     3000,
-        //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
-        times:       5,
-        //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
-        apimap:      {
-          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
-          // 'get_captcha': '//b.com/get_captcha/ver3',
-          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
-          // 'get_img': '//c.com/get_img',
-          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
-          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
-          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
-          // 'umid_serUrl': 'https://g.com/service/um.json'
-        },
-        //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
-        callback:    (data) => {
-          this.sliderData = Object.assign({}, data, {
-            appkey: NC_Opt.appkey,
-            scene:  NC_Opt.scene,
-          });
-          console.log( this.sliderData);
-        },
-      };
-      let date11 = () => {
-
-        let _date = new Date();
-        let year = _date.getFullYear().toString();
-        let month = _date.getMonth().toString();
-        let day = _date.getDate().toString();
-        let a = _date.getHours().toString();
-        let b = _date.getMinutes().toString();
-        let c = _date.getSeconds().toString();
-
-        return year + month + day + a + b + c;
-      };
-      let c = date11();
-      const scripts = [
-        `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
-      ];
-      this.seriesLoadScripts(scripts, function () {
-        var nc = new noCaptcha(NC_Opt);
-        nc.upLang('cn', {
-          _startTEXT:    '请按住滑块，拖动到最右边',
-          _yesTEXT:      '验证通过',
-          _error300:     '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
-          _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
-        });
-      });
-
-    },
-    // 验证码
-    checkVerification() {
-      if (this.sliderData.appkey === undefined) {
-        this.$message.error('请先通过滑块校验');
-        return;
-      }
-      this.$axios.$post(`/develop/exists`,{  phone: this.custom_phone}).then(res=>{
-
-        if (res.code === 0 && res.data) {
-
-          let req = {
-            'appkey':    this.sliderData.appkey,
-            'phone':     this.custom_phone,
-            'scene':     this.sliderData.scene,
-            'sessionid': this.sliderData.csessionid,
-            'sig':       this.sliderData.sig,
-            'token':     this.sliderData.token,
-            'type':      0,
-          }
-          this.$axios.$post('/sendCode',req).then(res=>{
-            if (res.code === 0 && res.data) {
-              this.setTime();
-            }else {
-              this.$message.error(res.msg||'手机号已存在');
-            }
-          })
-        } else {
-          this.$message.error(res.msg||'手机号已存在');
-          return false;
-        }
-
-      })
-    },
-    // 倒计时60秒
-    setTime() {
-      if (this.countdown === 0) {
-        this.btnTextDisabled = false;
-        this.btnText = '获取验证码';
-        this.countdown = 60;
-      }else if(this.countdown === -1){
-        this.btnTextDisabled = false;
-        this.btnText = '获取验证码';
-        this.countdown = 60;
-      } else {
-        this.btnTextDisabled = true;
-        this.btnText = '重新发送(' + this.countdown + 's)';
-        this.countdown--;
-        setTimeout(() => {
-          this.setTime();
-        }, 1000);
-      }
+  computed: {
+    curItem() {
+      return this.project.data.find(item => item.type === this.activeItem)
     },
 
-    handleYuyue() {
-      const tag = {
-        'dhl':1,
-        'spl':2,
-        'h5l':3,
-        'ppt':4,
-      }
-      const opt = {
-        type: tag[this.active],
-        phone: this.custom_phone,
-        code: this.custom_code,
-        chenghu: this.custom_name
-      }
-
-      if (!this.custom_phone) {
-        this.$message.error("请填写手机号");
-        return;
-      }
-      if (!this.custom_code) {
-        this.$message.error("验证码不能为空");
-        return;
-      }
-      if (!this.custom_name) {
-        this.$message.error("请输入您的称呼");
-        return;
-      }
-
-      this.confirmTl(opt)
-    },
-    playVideo(index) {
-      this.videoDialogFlag = true
-      this.source = this.videoArray[index].url
-      this.title = this.videoArray[index].title
-    },
-    changeCardActive(code) {
-      this.active = code;
-    },
-    // 判断是否为移动端
-    getSystemWidth(){
-      var browserWidth=document.documentElement.clientWidth;
-      if(browserWidth <= 768){
-        this.SystemWidthFlag = true;
-      }else{
-        this.SystemWidthFlag = false;
-      }
-
-    },
-    confirmTl(options){
-      // 请求后台
-      this.$axios.$post('/develop/add',options).then(res=>{
-        if (res.code === 0 && res.data) {
-          this.$message.success('申请成功');
-        } else {
-          this.$message.error('申请失败');
-        }
-      });
-
-    },
-    clickBanner() {},
-    formatUserData() {
-      const userList = this.userList.filter(user => user.chenghu)
-      const newUserList = userList.map(user => {
-        const chenghu = user.chenghu.length > 2 ? `${user.chenghu[0]}**`: `${user.chenghu[0]}*`;
-        const ps = user.phone.split('');
-        const phone = `${ps[0]}${ps[1]}${ps[2]}****${ps[7]}${ps[8]}${ps[9]}${ps[10]}`;
-        return {
-          chenghu: chenghu,
-          phone,
-          timer: this.getTimeString(user.endSecond)
-        }
-      })
-      this.userData = newUserList;
+  },
+  methods: {
+    changeItem(item) {
+      this.activeItem = item.type;
     },
-
-    getTimeString(timer) {
-      let m10 = 10 * 60  * 1000;
-      let m30 = 30 * 60 * 1000;
-      let h1 = 60 * 60 * 1000 ;
-      let h6 = 6 * 60 * 60 * 1000;
-      let d1 = 24 * 60 * 60 * 1000;
-      let z1 = 7 * 24 * 60 * 60 * 1000;
-      let M1  = 30 * 24 * 60 * 60 * 1000;
-
-      if (timer > M1) {
-        return `1个月前`
-      }
-
-      if(timer > z1) {
-        return `1周前`
-      }
-
-      if(timer > d1) {
-        return `1天前`
-      }
-
-      if (timer > h6) {
-        return `6小时前`
-      }
-
-      if (timer > h1) {
-        return `1小时前`
-      }
-
-      if(timer > m30) {
-        return `30分钟前`
-      }
-
-      if(timer > m10) {
-        return `10分中前`
-      }
-
-      return `刚刚`;
+    goQuotation() {
+      document.documentElement.scrollTop = this.$refs.quotation.offsetTop-150;
+      window.pageYOffset = this.$refs.quotation.offsetTop -150;
+      document.body.scrollTop=this.$refs.quotation.offsetTop -150;
     }
-  },
-  mounted() {
-    this.getSystemWidth();
-    this.sliderFun();
-    this.formatUserData();
-  },
-  beforeDestroy() {
-  },
+  }
 };
 </script>
-<style lang="scss" scoped>
 
-.course-custom {
+<style lang="scss" scoped>
+.course-weike {
 
-  .top-btns-content {
-    margin: 175px auto 104px;
-    @media (max-width: 768px){
-      margin: 37px auto 0px;
-    }
+  .client-course-banner {
+    cursor: pointer;
+  }
 
-    h4 {
-      height: 34px;
-      font-size: 36px;
-      font-weight: 400;
-      text-align: center;
+  .client-course-classification {
+    box-sizing: border-box;
+    text-align: center;
+    height: 737px;
+    padding-top: 135px;
 
-      @media (max-width: 768px){
-        font-size: 24px;
-      }
+    .classification-title {
+      margin-bottom: 144px;
     }
 
-    .btn-group {
-      margin-top: 104px;
+    .classification-items {
       display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-
-      @media (max-width: 768px) {
-        flex-wrap: wrap;
-        margin: 50px;
-      }
-
-      .dingzhi-card {
-            width: 231px;
-            height: 270px;
-            border: 1px solid #126bff;
-            border-radius: 10px;
-            background: #fff;
-            text-align: center;
-            position: relative;
-
-          @media (max-width: 768px) {
-            width: 116px;
-            margin-bottom: 40px;
-            height: 135px;
 
-            >p {
-              font-size: 12px;
-              font-weight: 400;
-              text-align: center;
-              color: #333333;
-            }
-          }
-
-        &.active {
-          background: linear-gradient(0deg,#c5deff 0%, #ffffff 99%);
-        }
-
-        > i {
-          margin: 69px auto 0;
-          display: block;
-          height: 118px;
-          width: 87px;
-          background-repeat: no-repeat;
-
-          @media (max-width: 768px) {
-            margin: 30px auto 0;
-            height: 80px;
-            width: 60px;
-          }
-        }
-
-        &:nth-child(1) {
-          i {
-            background-image: url("~static/images/client/course/btns/dingzhi-bt1.png");
-            background-size: contain;
-          }
-        }
-        &:nth-child(2) {
-          i {
-            background-image: url("~static/images/client/course/btns/dingzhi-bt2.png");
-            background-size: contain;
-          }
-        }
-        &:nth-child(3) {
-          i {
-            background-image: url("~static/images/client/course/btns/dingzhi-bt3.png");
-            background-size: contain;
-          }
-        }
-        &:nth-child(4) {
-          i {
-            background-image: url("~static/images/client/course/btns/dingzhi-bt4.png");
-            background-size: contain;
-          }
-        }
+      justify-content: space-between;
+      align-items: center;
+    }
 
-        &.active .jiao {
-          position: absolute;
-          bottom: -10px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 0;
-          height: 0;
-          border-top: 10px solid #126bff;
-          border-right: 10px solid transparent;
-          border-left: 10px solid transparent;
-        }
-      }
+    .classification-item {
+      background-color: #cccccc;
+      width: 250px;
+      height: 280px;
     }
+
   }
 
-  .course-content{
-    margin: 0 auto;
-    text-align: center;
+  .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;
 
-    >h4 {
-      text-align: center;
-      height: 34px;
-      font-size: 36px;
-      font-weight: 400;
-      margin-top: 146px;
+    .classification__info-title {
       margin-bottom: 57px;
+    }
 
-      @media (max-width: 768px){
-        height: 19px;
-        font-size: 24px;
-        margin-top: 5px;
-        margin-bottom: 60px;
-      }
+    .classification__info-mainTitle {
+      text-align: center;
+      font-weight: normal;
+      color: #333333;
+      margin-bottom: 16px;
+      font-size: 24px;
     }
 
-    >p {
-      margin: 0 20px 100px;
-      height: 50px;
+    .classification__info-subHead {
+      text-align: center;
       font-size: 18px;
       font-weight: 400;
-      text-align: center;
       color: #333333;
+
     }
 
-    .video-container {
+    .classification__info-videos {
       display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin-bottom: 70px;
+      justify-content: center;
+      align-items: center;
+      margin: 122px 0 50px 0;
 
-      @media (max-width: 768px){
-        margin-bottom: 20px;
-      }
 
-      .video-box {
-        width: 30%;
-        margin-bottom: 79px;
-        text-align: center;
+      .classification-video-item {
+        background-color: #ccc;
+        margin-right: 20px;
+        width: 380px;
+        height: 280px;
 
-        @media (max-width: 768px){
-          width: 100%;
-          margin-bottom: 39px;
+        &:last-child {
+          margin-right: 0;
         }
 
-        >span {
-          position: relative;
-          display: inline-block;
+        img {
+          width: 380px;
+          height: 280px;
         }
-
-        p {
-          margin-top: 28px;
-          height: 23px;
-          font-size: 24px;
-          font-weight: 400;
-          color: #333333;
-
-          @media (max-width: 768px){
-            font-size: 16px;
-          }
-        }
-
-        i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
-
-        i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
-          left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
-        img{transition: all 0.5s;}
-
-        span:hover{img{transform: scale(1.1);}}
       }
     }
 
-    .zixun-online {
-      display: inline-block;
-      width: 138px;
-      height: 50px;
-      background: #0065cd;
-      border-radius: 6px;
+    .classification-btns {
       text-align: center;
-      color: #ffffff;
-      line-height: 48px;
-      font-weight: 400;
-      font-size: 16px;
-      margin-bottom: 128px;
-
-      @media (max-width: 768px) {
-        margin: 0 auto 60px;
-        line-height: 52px;
+      .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;
       }
     }
   }
 
-  .course-content-wrap {
-    position: relative;
-    height: 800px;
-    width: 100%;
-    margin-bottom: 256px;
+  .client-course-quotation {
+    background-image: url("~static/images/client/course/btns/course-bg-b1.png");
+    height: 637px;
 
-    @media (max-width: 768px) {
-      margin-bottom: -100px;
-    }
-
-    .course-form-bg {
-      height: 655px;
-      background-image: url("~static/images/client/course/btns/course-bg-b1.png");
-        @media (max-width: 768px) {
-          height: 455px;
-        }
-    }
-
-    .form-wrap {
-      width: 540px;
-      height: 800px;
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+    .quotation-wrap {
+      display: flex;
+      justify-content: space-between;
 
-      @media (max-width: 768px) {
-        width: 80%;
-        height: 600px;
-      }
+      .left-text {
+        margin-top: 282px;
 
-        >h4 {
-          height: 59px;
-          font-size: 61px;
+        h3 {
+          font-size: 48px;
           font-weight: 700;
+          text-align: left;
           color: #fefefe;
-          letter-spacing: 1.53px;
-          text-align: center;
-          margin-top: 73px;
-          margin-bottom: 23px;
-
-          @media (max-width: 768px) {
-            font-size: 20px;
-            margin-bottom: 10px;
-            margin-top: 30px;
-          }
+          letter-spacing: 1.2px;
+          margin-bottom: 33px;
+          width: 410px;
+          height: 47px;
         }
 
-      >p {
-        height: 26px;
-        font-size: 27px;
-        font-weight: 400;
-        text-align: center;
-        color: #ffffff;
-        margin-bottom: 41px;
-
-        @media (max-width: 768px) {
-          font-size: 16px;
+        p {
+          font-size: 20px;
+          font-weight: 400;
+          text-align: left;
+          color: #ffffff;
+          width: 364px;
+          height: 20px;
         }
-
       }
 
       .baojia-form {
-        background: #fff;
-        border-radius: 8px;
-        padding: 50px 42px 80px;
-        box-shadow: 0 3px 5px 2px #ccc;
-        position: relative;
-
-        @media (max-width: 768px) {
-          padding: 25px 22px 40px;
-        }
+        margin-top: 82px;
+        margin-right: 120px;
       }
     }
 
-    .form-row-col {
-      display: flex;
-      justify-content: space-between;
-
-      .dialog-input-code {
-        flex:1;
-      }
-
-      .custom-code-btn {
-        width: 164px;
-        height:63px;
-        margin-left: 17px;
-
-        @media (max-width: 768px) {
-          height: 32px;
-          width: auto;
-        }
-      }
-    }
-
-    .height-63 {
-      ::v-deep.el-input__inner {
-        height: 63px;
-
-        @media (max-width: 768px) {
-          height: 40px;
-        }
-      }
-    }
-
-
-    .form-f1 {
-      background-color: #ffebeb;
-      margin-bottom: 20px;
-      height: 17px;
-      font-size: 16px;
-      font-weight: 400;
-      color: #FF0000;
-      padding: 11px;
+  }
 
-      @media (max-width: 768px) {
-        font-size: 12px;
-        margin-bottom: 10px;
-      }
 
-        > i {
-        width: 15px;
-        height: 15px;
-        display: inline-block;
-        background-image: url("~static/images/client/course/btns/course-icon-fire.png");
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin: 0 11px 0 11px;
-      }
-    }
-    .form-f2 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 400;
+  @media (max-width: 768px){
+    .client-course-classification {
+      box-sizing: border-box;
+      text-align: center;
+      height: 400px;
+      padding-top: 35px;
 
-      @media (max-width: 768px) {
-        margin-bottom: 16px;
-        font-size: 12px;
-      }
+      .classification-title {
+        margin-bottom: 42px;
       }
-    .form-f3 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 400;
-
-      @media (max-width: 768px) {
-        margin-bottom: 16px;
-        font-size: 12px;
+      .classification-items{
+        flex-wrap: wrap;
+        justify-content: space-around;
       }
+      .classification-item {
+        box-sizing: border-box;
+        margin: 10px;
+        width: calc(50% - 20px);
+        height: 140px;
 
-        div.nc-container ::v-deep #nc_1_wrapper {
-        width: 100%;
+        &:not(:nth-child(even)) {
+          margin-right: 0;
+        }
+        &:nth-child(n+3) {
+          margin-top: 0;
+        }
       }
     }
-    .form-f4 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 400;
 
-      @media (max-width: 768px) {
-        margin-bottom: 16px;
-        font-size: 12px;
-      }
+    .client-course-classification__info{
+      height: auto;
+      padding-top: 42px;
 
-        .custom-code-btn {
-          font-size: 18px;
-          font-weight: 400;
+      .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;
 
-          @media (max-width: 768px) {
-            font-size: 12px;
-            height: 40px;
+          img {
+            height: auto;
+            width: 100%;
           }
         }
-    }
-    .form-f5 {
-      margin-bottom: 40px;
-      font-size: 18px;
-      font-weight: 400;
-
-      @media (max-width: 768px) {
-      font-size: 12px;
       }
 
-      }
-    .form-f6 {
-      width: 100%;
-      margin-bottom: 40px;
-      height: 63px;
-      font-size: 24px;
-      font-weight: 400;
-
-      @media (max-width: 768px) {
-        margin-bottom: 20px;
-        font-size: 12px;
-        height: 40px;
+      .classification-btns {
+        .classification-online-zixun {
+          margin-bottom: 60px;
+        }
       }
     }
 
-    .form-wrap .form-f7 {
-      position: absolute;
-      bottom: -40px;
-      left: 0;
-      width: 446px;
-      padding: 20px 47px;
-      background-color: #ffebeb;
-      height: 15px;
-      font-size: 16px;
-      font-weight: 400;
-      text-align: left;
-      color: #ff0000;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
+    .client-course-quotation {
+      margin-bottom: 200px;
+      height: 400px;
 
-      @media (max-width: 768px) {
-        width: 100%;
-        padding: 12px 0;
-        bottom: 18px;
-      }
+      .quotation-wrap {
+        flex-direction: column;
 
-      .hidden {
-        display: none;
-      }
-      .swiper-wrapper {
-        height: 25px;
-      }
+        .left-text {
+          margin: 40px auto 0;
 
+          h3 {
+            text-align: center;
+            font-size: 20px;
+            margin-bottom: 10px;
+            width: 100%;
+          }
 
-      .div-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .icon-w1 {
-          display: flex;
-          align-items: center;
-          i {
-            width: 15px;
-            height: 15px;
-            display: inline-block;
-            background-image: url("~static/images/client/course/btns/course-icon-laba.png");
-            background-size: contain;
-            background-repeat: no-repeat;
-            margin-right: 5px;
+          p {
+            text-align: center;
+            width: 100%;
+            font-size: 16px;
           }
         }
-        @media (max-width: 768px) {
-          bottom: 15px;
-          line-height: 25px;
-          padding: 13px 23px;
-          width: 85%;
-          font-size: 12px;
-        }
-      }
-    }
 
-    .form-input {
-      ::v-deep.el-input__inner {
-        font-size: 18px;
-        font-weight: 400;
-        color: #999999;
-        line-height: 53px;
-
-        @media (max-width: 768px) {
-          font-size: 12px;
-          line-height: 30px;
+        .baojia-form {
+          margin: 0 auto;
         }
       }
     }
   }
 
 }
-
 </style>

pages/courseware/ppt.vue

@@ -1,13 +1,450 @@
 <template>
-    <div>课件PPT</div>
+  <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" 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">
+            <img :src="item.imgUrl" />
+          </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>
-    export default {
-        name: 'ppt',
-    };
+import courseCardTitle from "@/components/course/course-card-title";
+import courseBaojia from "@/components/course/course-baojia";
+
+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
+  },
+  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 scoped>
+<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__info-videos {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 122px 0 50px 0;
+
+
+      .classification-video-item {
+        background-color: #ccc;
+        margin-right: 20px;
+        width: 380px;
+        height: 280px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        img {
+          width: 380px;
+          height: 280px;
+        }
+      }
+    }
+
+    .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__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>