<template>
  <div>
    <div class="banner-top">
      <div class="max-width-auto">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/9931abadf2c7559a6550d43bec908f3f.png" alt="">
        <div class="text-box">
          <div class="title">金融产品数字化营销</div>
          <div class="tit-m2">职业技能等级证书</div>
        </div>
      </div>
    </div>
    <div class="model1">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/23f41572138217b62e6fdd68ab6064a3.png" alt="">
    </div>
    <div class="model2">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/f8d7213088d1b7713172f931d0a7cf12.png" alt="">
    </div>
    <div class="model3">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/691b2914a112e8c22b05d63bd93dd9ca.png" alt="">
    </div>
    <div class="model4">
      <div class="title">Project Description</div>
      <div class="title2">项目内容</div>
      <div class="text">此项目由清北人等知名院校导师及中国特色高水平高职学校等学术专家，联合金融行业数字化营销领域专家、银 证保等金融机构业务高管等实线导师共同整体设计。内容涵盖：</div>
      <div class="swiper-box">
        <swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
          <swiper-slide v-for="(item, index) in swiperList" :key="index">
            <div class="dosc">{{ item }}</div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <div class="model5">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/e1676483b830f3f07e708770dcab14bd.png" alt="">
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    const _this = this
    return {
      swiperList: [
        '（一）教材研发。研发团队：清北人知名院校教授领衔主编，双高院校学科带头人和业界到导师团队主编。内容设计：以工作过程为导向，以实践结果为考核标准。',
        '（二）师资培训。双师型数字营销教师培训，课堂教学和企业数字营销任务实践紧密结合，做中学，学中做，新型产教融合模式。训练”以学员为中心”引导式教学技能。',
        '（三）考试考核。众多金融机构合作资源，提供数字营销岗位的实习机会，专业团队远程指导。证书技能聚焦岗位群精准且广泛，无缝连接就业。（一）全覆盖。金融产品数字化营销职业技能等级标准设计场景涵盖了中职、高职和应用型本科三个层次，有效服务于“1+X”制度改革全覆盖。（二）补充性。金融产品数字化营销职业技能等级标准总课时约为280课时，采用精准对岗既解决培训资源先进性、实时性和好用性问题，也优化课程资源和金融和营销的新业态，充分体现“X”对“1”补充作用和不可替代性。（三）多样性。金融产品数字化营销职业技能等级标准鉴定立足于与学历教育有效衔接，设计了课程置换、学分置换、实践置换、新职业等级置换等“X”与“1”完全融合的多样性。（四）无缝性。金融产品数字化营销职业技能等级标准培训教材所选取典型工作领域，遵循岗位群对接既精准又广泛，即持证就能上岗，达到无缝对接效果。',
        '（四）学习系统。既对技能标准、培训教材、考核平台、考核大纲等培训资源进行一体化开发。对培训指导方法、培训评价站点、培训评价办法等培训条件和制度办法进行系统设计。',
        '（五）实训系统。全业务场景数字化销售赋能，打造闭环销售链路技能。产教研深度融合的数字营销实训平台。包括大数据、营销自动化、社交媒体营销、移动营销等。',
        '（六）就业安排。众多金融机构合作资源，提供数字营销岗位的实习机会，专业团队远程指导。证书技能聚焦岗位群精准且广泛，无缝连接就业。'
      ],
      swiperOptions: {
        on: {
          slideChangeTransitionStart: function() {
            // _this.swiperIndex = this.activeIndex
          }
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        autoHeight: true
        // loop:true,
        // autoplay: {
        //   delay: 2000,
        //   disableOnInteraction: false
        // }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  }
}
</script>
<style lang="scss" scoped>
.banner-top{
  position: relative;
  width: 100%;
  height: 610px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/1541ea20b9066ab0cb8dec36ea4088f6.png);
  background-size: cover;
  .max-width-auto{
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 1081px;
    display: flex;
    align-items: center;
    .text-box{
      padding-left: 90px;
    }
    .title{
      font-size: 47px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 71px;
    }
    .tit-m2{
      font-size: 26px;
      color: #FFFFFF;
      line-height: 39px;
      margin-top: 31px;
    }
  }
}
.model1{
  width: 100%;
  background: #fff;
  padding: 200px 0 100px 0;
  img{
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
}
.model2{
  width: 100%;
  background: #F8F8F9;
  padding: 100px 0 100px 0;
  img{
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
}
.model3{
  width: 100%;
  background: #fff;
  padding: 100px 0 100px 0;
  img{
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
}
.model4{
  background: #F8F8F9;
  padding: 100px 0 120px 0;
  .title{
    text-align: center;
    font-size: 16px;
    color: #797979;
    line-height: 24px;
  }
  .title2{
    text-align: center;
    font-size: 26px;
    color: #626262;
    line-height: 39px;
    margin: 20px 0;
  }
  .text{
    width: 616px;
    font-size: 14px;
    color: #888888;
    line-height: 24px;
    margin: 0 auto;
  }
  .swiper-box{
    padding-top: 60px;
    width: 1200px;
    margin: 0 auto;
    .dosc{
      width: 800px;
      margin: 0 auto;
      text-align: center;
      font-size: 18px;
      color: #444444;
      line-height: 36px;
      letter-spacing: 1px;
    }
    .swiper-button-prev{
      color: #D8D8D8;
      // height: 60px;
      // background: url(https://zws-imgs-pub.ezijing.com/static/public/0ec9d99a7350896c087766175ce65f89.png);
    }
    .swiper-button-next{
      color: #D8D8D8;
      // height: 60px;
    }
  }
}
.model5{
  width: 100%;
  background: #fff;
  padding: 100px 0 100px 0;
  img{
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
}
</style>
