<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">
         经过对中职、高职和应用型本科财税类专业教学标准的深入研究，通过与具有代表性的院校进行现场访谈，专家研讨等方式的走访调研工作，充分分析了解在书证融通方面各大院校遇到的问题，并就普遍典型问题进行梳理，对比分析2019年教育部职成司发布财经商贸大类的高等职业专业教学标准，并以中职、高职和本科三个层次对标会计专业教学标准的衔接融通方案，一共三套范例参考方案，智能财税职业技能等级标准分为初中高级，以高职为例，适用主要专业财务管理、会计、会计信息管理、审计、税务等专业。暂按16学时计为1学分，智能财税职业技能等级标准（初级）的总学时为136，其中上册40学时、中册56学时、下册40学时，完成初级阶段学习，需要完成其中两门共计96个学时，其中2册为必修，1册和3册选修。总学分为8.5。具体为：
       从形式上，我们按照智能财税职业技能等级标准中的工作领域为单位模块进行划分，经过梳理，从高职的最新会计专业教学标准分析，对应课程：财务会计基础、企业财务会计、纳税实务、会计信息系统应用、创新创业教育。对应的课程名称具体
      </div>
      <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;
  }
  .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>
