nuxtProject/pages/courseware/custom.vue

<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>
    </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>
      </div>
      <el-button class="zixun-online" type="primary">在线咨询</el-button>
    </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>
      </div>
    </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>
    </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>
    </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>


          <p class="form-f7">
            <span class="icon-w1"><i></i>李**</span><span>125****55545</span><span>30分钟前</span>
          </p>

        </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>
export default {
  name:       'custom',
  layout:     'templateB',
  async asyncData({ $axios, store }) {
    // 设置选中菜单
    store.commit('setActiveNav', '/courseware');

    let [res1, res2] =  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
      }),
    ])
    return {
      topCarousels : res1.data.data ||[],
      custom_sum: res2.data || 0,
    }
  },
  data() {
    return {

      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/course-video-img1.png`),
      courseVideoImg2:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg3:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg4:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg5:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg6:  require(`~/static/images/client/course/course-video-img1.png`),

      //  视频类
      courseVideoImg7:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg8:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg9:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg10:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg11:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg12:  require(`~/static/images/client/course/course-video-img1.png`),

      //  H5类
      courseVideoImg13:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg14:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg15:  require(`~/static/images/client/course/course-video-img1.png`),

      //  PPT类
      courseVideoImg16:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg17:  require(`~/static/images/client/course/course-video-img1.png`),
      courseVideoImg18:  require(`~/static/images/client/course/course-video-img1.png`),

      videoArray:[
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'教育培训业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'金融保险业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'食品餐饮业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'生产制造业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'信息通讯业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
          title:'汽车销售业',
        },
        {
          url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.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年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
        }
      ],
    }
  },
  methods:    {
    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);
      }
    },

    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() {}
  },
  mounted() {
    this.getSystemWidth();
    this.sliderFun();
  },
  beforeDestroy() {
  },
};
</script>
<style lang="scss" scoped>

.course-custom {

  .top-btns-content {
    margin: 175px auto 104px;
    @media (max-width: 768px){
      margin: 30px auto 0px;
    }

    h4 {
      height: 34px;
      font-size: 36px;
      font-weight: 400;
      text-align: center;

      @media (max-width: 768px){
        font-size: 24px;
      }
    }

    .btn-group {
      margin-top: 104px;
      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;
          }
        }

        &.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;
        }
      }
    }
  }

  .course-content{
    margin: 0 auto;
    text-align: center;

    >h4 {
      text-align: center;
      height: 34px;
      font-size: 36px;
      font-weight: 400;
      margin-top: 146px;
      margin-bottom: 57px;

      @media (max-width: 768px){
        height: 19px;
        font-size: 24px;
        margin-top: 5px;
        margin-bottom: 60px;
      }
    }

    >p {
      margin: 0 20px 100px;
      height: 50px;
      font-size: 18px;
      font-weight: 400;
      text-align: center;
      color: #333333;
    }

    .video-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 70px;
      .video-box {
        width: 30%;
        margin-bottom: 79px;
        text-align: center;

        @media (max-width: 768px){
          width: 100%;
          margin-bottom: 39px;
        }

        >span {
          position: relative;
          display: inline-block;
        }

        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 {
      margin: 0 auto 128px;
      text-align: center;
      color: #ffffff;
      width: 180px;
      padding: 12px 38px;
      font-size: 24px;
      line-height: 48px;
      font-weight: 400;

      @media (max-width: 768px) {
        margin: 0 auto 60px;
        line-height: 20px;
        font-size: 16px;
      }
    }
  }

  .course-content-wrap {
    position: relative;
    height: 800px;
    width: 100%;
    margin-bottom: 256px;

    @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%);

      @media (max-width: 768px) {
        width: 80%;
        height: 600px;
      }

        >h4 {
          height: 59px;
          font-size: 61px;
          font-weight: 700;
          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;
          }
        }

      >p {
        height: 26px;
        font-size: 27px;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        margin-bottom: 41px;

        @media (max-width: 768px) {
          font-size: 16px;
        }

      }

      .baojia-form {
        background: #fff;
        border-radius: 8px;
        padding: 50px 42px 80px;
        box-shadow: 0 3px 5px 2px #ccc;

        @media (max-width: 768px) {
          padding: 25px 22px 40px;
        }
      }
    }

    .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) {
        margin-bottom: 16px;
        font-size: 12px;
      }
      }
    .form-f3 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 400;

      @media (max-width: 768px) {
        margin-bottom: 16px;
        font-size: 12px;
      }

        div.nc-container ::v-deep #nc_1_wrapper {
        width: 100%;
      }
    }
    .form-f4 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 400;

      @media (max-width: 768px) {
        margin-bottom: 16px;
        font-size: 12px;
      }

        .custom-code-btn {
          font-size: 18px;
          font-weight: 400;

          @media (max-width: 768px) {
            font-size: 12px;
            height: 40px;
          }
        }
    }
    .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;
      }
    }

    .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;
      display: flex;
      justify-content: space-between;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;

      @media (max-width: 768px) {
        bottom: 15px;
        padding: 10px 23px;
        width: 85%;
        font-size: 12px;
      }


      .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: 0 5px 0 5px;
        }
      }
    }

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

}

</style>