<template>
  <div class="teacher-box">
    <div class="module1 content-max-width">
      <img src="https://zws-imgs-pub.ezijing.com/static/public/895216245db6e0fa6551d61a3a5de958.png" alt="">
      <img class="mar-t16" src="https://zws-imgs-pub.ezijing.com/static/public/1b9f08b595bc674a2f26f58a14b7c974.png" alt="">
      <!-- <div class="title">师资培训报名</div>
      <div class="p">紫荆教育计划2021年共开展9期针对“金融产品数字化营销职业技能等级证书”的师资培训，具体安排如下：</div>
      <img style="width:30%;display:block;margin:0 auto;" src="https://zws-imgs-pub.ezijing.com/static/public/50ce208136ab7e9c023450940d94fb14.png" alt="">
      <p class="p">注：以上安排供参考，具体计划以紫荆教育官方通告为准。</p> -->
      <!-- <div class="p1">
        <span>培训报名对象：</span>
        <div class="color-c">
          相关对口金融专业的老师
        </div>
      </div> -->
      <div class="new-liu">
        <div class="title">五、培训费用</div>
        <div class="new-p">详见每期师资培训通知。</div>
        <!-- <div class="new-p"> 1.金融产品数字化营销职业技能等级证书信息管理服务平台<span @click="goPage('https://vslc.ncb.edu.cn/childIndex?orgCode=330220946', 1)">（https://vslc.ncb.edu.cn/childIndex?orgCode=330220946）</span></div> -->
        <!-- <div class="new-p">2.紫荆教育官网<span>（https://x.ezijing.com/news?type=0）</span></div> -->
      </div>
      <div class="p1">
        <span>通知关注：</span>
        <div class="all-btn" @click="goPage('/news')">通知</div>
      </div>
      <div class="p1">
        <span>报名入口：</span>
        <div class="all-btn" @click="goPage('/train')">报名</div>
      </div>
      <!-- <div class="p1">
        <span>金融产品数字化营销师资培训（第一期）</span>
      </div>
      <div style="margin-left:36px">
        <div class="p1">
          <span>培训类型：</span>
          <div class="color-c">
            初级
          </div>
        </div>
        <div class="p1">
          <span>培训地点：</span>
          <div class="color-c">
            深圳 
          </div>
        </div>
        <div class="p1">
          <span>培训起始时间：</span>
          <div class="color-c">
            2021年3月22日-26日（3月21日报到） 
          </div>
        </div>
        <div class="p1">
          <span>联系人：</span>
          <div class="color-c">
            王老师
          </div>
        </div>
      </div> -->
      <div class="title mar-t36-b26" id="pointt1">师资学习平台</div>
      <div class="item">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/0e01f2de1b44db0e612e1638cc087517.png" alt="">
        <div class="content">
          <div class="text">
            紫荆教育为师生精心打造综合一体化学习平台，可实现考核体系的标准化，数据资源的统一化，师资学习的多元化，以及学习管理的系统化，最终形成学、练、训、考、评、管一体的数字化营销学习平台。
          </div>
          <div class="all-btn" @click="goPage('https://x-learning.ezijing.com/', 1)">进入系统</div>
        </div>
      </div>
    </div>
    <div class="module2">
      <div class="content-max-width">
        <!-- <div class="title" id="pointt1">师训结业测评</div>
        <div class="p">老师参加完师资培训之后，需要从培训内容、教学设计、教授方法等方面进行全面测评，测评形式不限于小组讨论、个人答辩、试卷考试等，具体测评形式以当期师资培训方案为准。</div> -->
        <!-- <div class="p1">
          <span>通知关注：</span>
          <div class="all-btn" @click="goPage('/news')">看通知</div>
        </div> -->
        <div class="title mar-t36-b16" id="pointt2">授权师资名单</div>
        <div class="cert-box">
          <img style="margin: 0 16px" src="https://zws-imgs-pub.ezijing.com/static/public/0b0412a8f5673b0bde98a2c57949f641.png" alt="">
          <div class="content">
            <div class="text">
              紫荆教育1+X金融产品数字化营销职业技能等级证书师资培训为期3天，培训结束后一周内，公布授权师资名单。随后将结业证书邮寄到老师所在院校。
            </div>
            <div class="all-btn" style="margin-left: 80px;margin-top: 20px;">查询名单</div>
          </div>
          <div class="text"></div>
        </div>
      </div>
      <div class="module3">
        <div class="content-max-width">
          <div class="title">开班授课</div>
          <div class="item">
            <div class="item">
              <img src="https://zws-imgs-pub.ezijing.com/static/public/4da0818309b5b8f6ff494ae428dd24e0.png" alt="">
              <div class="content">
                <div class="text">
                  获得培训资质后，老师可使用紫荆教育学习系统的辅助教学功能，完成对学生的授课教学。学习系统支持视频课程教学播放、PPT课程讲义播放、管理班级学员和开班课、了解进度等功能。
                </div>
                <div id="pointt3" class="all-btn" @click="goPage('https://x-learning.ezijing.com/', 1)">进入系统</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import action from '@action'
export default {
  data() {
    return {
      articleClassify: this.$store.state.classify,
      datas: ''
    }
  },
  mounted() {
    if (this.$route.query.point) {
      setTimeout(() => {
        this.pointScroll()
      }, 500)
    }
  },
  methods: {
    pointScroll(){
      $('html, body').animate({ 
        scrollTop: $(`#point${this.$route.query.point}`).offset().top
      }, 500)
    },
    goPage(path, n) {
      if (n) {
        window.open(path)
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    newsList() {
      debugger
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        const findId = this.articleClassify[0].children.find(item => {
          return item.display_name === '我是老师'
        })
        action.articleAction.getArticle({ category_id: findId.id }).then(res => {
          this.datas = res.data.list[0].content
        })
      }
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal){
        this.pointScroll()
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}
.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;
}
.mar-t16{
  margin-top: 16px;
}
.teacher-box{
  .module1{
    padding: 36px 0;
    .new-liu{
      padding-top: 16px;
      .title{
        font-size: 18px;
        color: rgba(63, 63, 63, 1);
      }
      .new-p{
        line-height: 36px;
        color: rgba(157, 157, 157, 1);
        font-size: 18px;
        span{
          color: rgba(0, 133, 232, 1);
          cursor: pointer;
        }
      }
    }
    .title{
      font-weight: bold;
      color: #333333;
      line-height: 33px;
      font-size: 24px;
      &.mar-t36-b26{
        margin: 36px 0 26px;
      }
    }
    .p{
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin: 16px 0;
    }
    .p1{
      margin: 16px 0;
      display: flex;
      align-items: center;
      .color-c{
        line-height: 30px;
        color: #666666;
        font-size: 18px;
      }
      span{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 30px;
      }
    }
    .item{
      display: flex;
      img{
        width: 326px;
        height: 180px;
      }
      .content{
        margin-left: auto;
        width: 790px;
        .text{
          font-size: 18px;
          color: #666666;
          line-height: 36px;
        }
        .all-btn{
          margin-top: 16px;
        }
      }
    }
  }
  .module2{
    background: #fff;
    padding: 36px 0;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
      &.mar-t36-b16{
        margin: 0px 0 16px;
      }
    }
    .p{
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin: 16px 0;
    }
    .p1{
      margin: 16px 0;
      display: flex;
      align-items: center;
      .color-c{
        line-height: 30px;
        color: #666666;
        font-size: 18px;
      }
      span{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 30px;
      }
    }
    .cert-box{
      display: flex;
      align-items: center;
      img{
        // width: 230px;
        // height: 145px;
      }
      .text{
        font-size: 18px;
        color: #666666;
        margin-left: 80px;
      }
    }
  }
  .module3{
    padding: 72px 0;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
    }
    .item{
      margin-top: 20px;
      display: flex;
      img{
        width: 326px;
        height: 180px;
      }
      .content{
        margin-left: 76px;
        .text{
          font-size: 18px;
          color: #666666;
          line-height: 36px;
        }
        .all-btn{
          margin-top: 16px;
        }
      }
    }
  }
}
</style>
