<template>
  <div>
    <haedBanner></haedBanner>
    <ul class="service-tab content-max-width">
      <template v-for="(item, index) in tabData">
        <li @click="tabChange(index)" :key="index" :class="index == tabIndex && 'active'">{{ item }}</li>
      </template>
    </ul>
    <div class="moudel1 content-max-width" v-if="tabIndex == 0 && !isBuyShow">
      <div class="title">“1+X”教材简介</div>
      <div class="con-text">
        <div class="p">半年来针对“金融产品数字化营销职业技能等级证书”教材开发、师资培训、实训系统的开发，紫荆教育组织20余次研讨会，各位专家不仅有清北人等高校的金融和营销的教授学者，职业教育的双高院校的学科带头人，更有银证保等行业的经济学家、业务和人力的负责人，知名咨询机构的金融条线的合伙人一起群策群力，希望能为结合中职、高职和应用型本科的学生特点，共享自己的智慧和经验。</div>
        <div class="p">在探讨教材设置中的项目导学、学习目标、任务导入、任务实施、知识链接、项目测评等版块。各板块间，以思维导图的形式勾勒出每个任务的核心知识点，便于学生整体把握项目的主要知识内容和学习要求。基于工作领域职业能力分析，精心设计典型工作任务，明确提出任务要求，引导学生开展典型、真实的职业实践。围绕学习目标，针对“任务实施”所需知识，以“必需、够用”为原则，选取核心知识点。设计“想一想”“读一读”“练一练”等小栏目，增加教材的互动性，鼓励学生“做中学”。依据金融产品数字化营销职业技能等级标准实务考核要求，设计重要知识点测评试题，方便学生及时检验项目实务知识学习效果。</div>
        <!-- <div class="p">
          金融产品数字化营销职业技能等级证书是第四批X证书之一。该职业技能等
级证书以金融行业企业岗位群需求和职业技能等级标准为依据，证书职业技能等
级划分为三个等级：初级、中级和高级，三个级别依次递进，高级别涵盖低级别
职业技能要求。为了让广大师生更好地把握金融产品数字化营销职业技能等级认
证要求，清控紫荆（北京）教育科技股份有限公司对中职、高职和应用型本科金
融、营销类专业人才培养方案、教学标准和教学内容进行深入研究，通过与多家
国家示范性院校进行专家研讨等广泛调研工作和意见征询，撰写对应的金融产品
数字化营销系列教材。
        </div>
        <div class="p">
          本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求，
随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。为深化
产教融合，促进专业对接产业、职业岗位，教材内容对接职业标准，以职业技能
实践流程为导向，涵盖职业岗位典型工作任务，培养学生具备核心技能与素养。
推进“1”和“X”的有机衔接，提升职业教育质量和学生就业能力。
        </div>
        <div class="p">
          教材设置了思维导图、学习目标、案例实践、问题思考等板块，以职业技能
等级标准为依据，结合行业企业用人技能要求的紧迫程度，设计教材内容和框架
体系。确定教材各案例实践涵盖的职业技能等级工作任务与就业面向相匹配，以
真实案例实践为驱动，促进学生深刻掌握先进技术能力。
        </div> -->
      </div>
      <!-- <img style="margin: 0 auto; width:30%; display:block;" src="https://zws-imgs-pub.ezijing.com/static/public/50ce208136ab7e9c023450940d94fb14.png" alt=""> -->
      <div class="buy-box">
        <div class="name">立即购买：</div>
        <span @click="isBuyShow = true">《金融产品数字化营销初级》</span>
        <!-- <span @click="isBuyShow = true">《金融产品数字化营销职业技能等级认证教材》（中级）</span> -->
        <!-- <span @click="isBuyShow = true">《金融产品数字化营销职业技能等级认证教材》（高级）</span> -->
      </div>
    </div>
    <!-- <div class="moudel2 content-max-width" v-if="tabIndex == 1 && !isBuyShow">
      <div class="con-text">
         经过对中职、高职和应用型本科财税类专业教学标准的深入研究，通过与具有代表性的院校进行现场访谈，专家研讨等方式的走访调研工作，充分分析了解在书证融通方面各大院校遇到的问题，并就普遍典型问题进行梳理，对比分析2019年教育部职成司发布财经商贸大类的高等职业专业教学标准，并以中职、高职和本科三个层次对标会计专业教学标准的衔接融通方案，一共三套范例参考方案，智能财税职业技能等级标准分为初中高级，以高职为例，适用主要专业财务管理、会计、会计信息管理、审计、税务等专业。暂按16学时计为1学分，智能财税职业技能等级标准（初级）的总学时为136，其中上册40学时、中册56学时、下册40学时，完成初级阶段学习，需要完成其中两门共计96个学时，其中2册为必修，1册和3册选修。总学分为8.5。具体为：
       从形式上，我们按照智能财税职业技能等级标准中的工作领域为单位模块进行划分，经过梳理，从高职的最新会计专业教学标准分析，对应课程：财务会计基础、企业财务会计、纳税实务、会计信息系统应用、创新创业教育。对应的课程名称具体
      </div>
      <div class="down-btn-box">
        <div class="all-btn">下载文件1</div>
        <div class="all-btn">下载文件2</div>
      </div>
      <div class="pdf">教学资源.pdf</div>
    </div> -->
    <buy v-if="isBuyShow"/>
  </div>
</template>
<script>
import haedBanner from '@/components/headBanner'
import buy from './components/buy'
export default {
  components: {
    haedBanner,
    buy
  },
  data() {
    return{
      isBuyShow: false,
      tabIndex: 0,
      tabData: ['教材中心', '教学资源(老师)', '课程学习(学生)', '实操学习']
    }
  },
  methods: {
    tabChange(n) {
      this.isBuyShow = false
      if (n === 1) {
        window.location.href = 'https://login.ezijing.com/xlearn/register'
      }
      if (n === 2) {
        window.location.href = 'https://login.ezijing.com/xlearn/register'
      }
      if (n === 3) {
        window.location.href = 'http://xtraining.ezijing.com/'
      }
      console.log(n)
      this.tabIndex = n
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}
.service-tab{
  display: flex;
  padding: 36px 0 24px;
  li{
    cursor: pointer;
    padding: 0 16px;
    height: 34px;
    border-radius: 27px;
    line-height: 34px;
    font-size: 14px;
    color: #444444;
    text-align: center;
    &.active{
      background: #A81A41;
      color: #fff;
    }
  }
}
.all-btn{
  width: 104px;
  height: 40px;
  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.moudel1{
  .title{
    font-size: 24px;
    color: #C01540;
    line-height: 33px;
    margin-bottom: 16px;
    text-align: center;
  }
  .con-text{
    font-size: 14px;
    color: #717171;
    line-height: 36px;
    // padding-bottom: 32px;
    .p{
      text-indent: 2em;
    }
  }
  .buy-box{
    padding-bottom: 36px;
    display: flex;
    align-items: center;
    margin-top: 16px;
    .name{
      font-size: 18px;
      font-weight: bold;
      color: #222222;
    }
    span{
      font-size: 14px;
      color: #0053C6;
      cursor: pointer;
    }
    .con-text{
      font-size: 14px;
      color: #717171;
      line-height: 36px;
    }
  }
}
.moudel2{
  .con-text{
    font-size: 14px;
    color: #717171;
    line-height: 36px;
  }
  .down-btn-box{
    display: flex;
    .all-btn{
      margin: 24px 0;
      &:nth-child(1){
        margin-right: 16px;
      }
    }
  }
  .pdf{
    font-size: 14px;
    color: #0053C6;
    line-height: 20px;
    padding-bottom: 36px;
    cursor: pointer;
  }
}
</style>
