<template>
  <div class="school-box">
    <div class="module1 content-max-width">
      <div class="title" id="points5">申报试点</div>
      <div class="p">试点申报请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-declaraPlatform）进行申请。</div>
      <img src="https://zws-imgs-pub.ezijing.com/static/public/fef814a1209bab02367cfdf8ab4f51dc.png" alt="" class="img">
      <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('https://vslc.ncb.edu.cn/csr-declaraPlatform', 1)">去申请</div>
      </div>
      <div class="p1" style="align-items: baseline;">
        <span style="white-space:nowrap;">申报审核结果：</span>
        <div class="color-c">我司会联系您，请关注校方注册网站时联系人注册手机的通知。</div>
      </div>
      <div class="content-max-width" id="points1">
        <div class="title">考点申报</div>
        <div class="p">在职业技能等级证书信息管理服务平台-试点院校业务平台-考试管理菜单中，打开申报考点栏目申报考核站点。<br/>
学校如果要组织证书的考试，需要向紫荆教育申报考点，审批通过后方可组织学生考试。<br/>
若学校不符合紫荆教育公布的考核站点建设标准要求，可以向紫荆教育申请去其他考核站点借考，借考分配由紫荆教育操作处理。</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('https://vslc.ncb.edu.cn/csr-declaraPlatform', 1)">去申请</div>
      </div>
    </div>
    <div class="module2">
      <div class="content-max-width" id="points2">
        <!-- <div class="p">
          <div class="title tnew">集中报名师训</div>
          <div class="p">有关单位意向申报成为1+X职业技能等级证书考核站点，请按要求登录政府网站申请试点院校业务平台（网址： https://vslc.ncb.edu.cn ）输入试点学校管理员的账号密码，在考试管理菜单中，打开申报考点栏目，即可自主申报考核站点</div>
          <div class="all-btn" @click="goPage('/school/form')">去申请</div>
        </div> -->
        <!-- <div class="title">组织老师培训</div>
        <div class="p">根据紫荆教育发布的师资培训方案，学校组织符合条件的专业老师参加师资培训。</div>
        <div class="p1">
          <span>通知关注：</span>
          <div class="all-btn con-btn" @click="goPage('/news')">看通知</div>
        </div>
        <div class="p1">
          <span>报名入口：</span>
          <div class="all-btn con-btn" @click="goPage('/train')">去报名</div>
        </div> -->
        <!-- <div class="all-btn con-btn" @click="goPage('/train')">去报名</div>
        <div class="all-btn con-btn" @click="goPage('/news')">看通知</div> -->
        <div class="title mar-t36" id="points3">统一实施教学</div>
        <div class="item">
          <div class="content" style="margin-left:0px;">
            <div class="text">
              学校可统一组织开班授课。线上课程可使用我司学习系统的辅助教学功能。<br/>
支持视频课程教学播放、PPT课程讲义播放。<br/>
管理班级学员和开班课，了解各班学习进度
            </div>
            <div class="all-btn" @click="goPage('https://x-learning.ezijing.com/', 1)">进入系统</div>
          </div>
        </div>
        <img style="margin: 0 auto;display:block;" src="https://zws-imgs-pub.ezijing.com/static/public/5bc16cb6a3a5cda51df669315991a69a.png" alt="">
      </div>
    </div>
    <div class="module3 content-max-width">
      <div class="title" id="points4">批量报名考试</div>
      <div class="text-box" style="display:block">
        <div class="text">成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-scoreCertificate）进行查询。</div>
        <!-- <div class="text">1、设置考场信息：考核站点申请后，需要在职业技能等级证书信息管理服务平台-试点院校业务平台-考场管理栏目中为考核站点设置考场信息，考场信息每次考试均需设置一次。</div> -->
        <!-- <div class="text">2、为学生报考：请在职业技能等级证书信息管理服务平台-试点院校业务平台-报考管理功能中为学生进行报考。</div> -->

        <!-- <div class="text">成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-scoreCertificate）进行查询。</div> -->
        <div class="all-btn" style="margin-left:0px;" @click="goPage('https://vslc.ncb.edu.cn/csr-scoreCertificate', 1)">进入系统</div>
      </div>
      <div class="img-box">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/182e9ee4459c70648ddd626075d666a8.png" alt="">
        <!-- <img style="height:188px;" src="https://zws-imgs-pub.ezijing.com/static/public/94d7bf72697b2b6e452e93b555b50038.png" alt=""> -->
      </div>
    </div>
  </div>
</template>
<script>
import action from '@action'
export default {
  mounted() {
    // this.newsList()
    if (this.$route.query.point) {
      setTimeout(() => {
        this.pointScroll()
      }, 500)
    }
  },
  methods: {
    pointScroll(){
      if (this.$route.query.point !== undefined) {
        const element = document.getElementById(`point${this.$route.query.point}`);
        if (element) {
          element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      }
    },
    goPage(path, n) {
      if (n) {
        window.open(path)
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    newsList() {
      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.data = 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;
}
.title{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  line-height: 33px;
}
.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;
  &.autos{
    margin: 0 auto;
  }
}
.school-box{
  background: #F8F8F9;
  .module1{
    padding: 36px 0;
    .dosc{
      // padding-bottom: 32px;
    }
    .p{
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin: 16px 0;
    }
    .img{
      width: 600px;
      margin: 0 auto;
      display: block;
    }
    .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;
        &.text-index-2em{
          text-indent: 2em;
        }
      }
    }
  }
  .module2{
    padding: 36px 0;
    background: #fff;
    .mar-t36{
      margin-top: 36px;
    }
    .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;
        &.text-index-2em{
          text-indent: 2em;
        }
      }
    }
    .p{
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin: 16px 0;
    }
    .con-btn{
      // margin: 0 auto;
      // margin-bottom: 16px;
    }
    .item{
      display: flex;
      margin-top: 16px;
      img{
        width: 326px;
        height: 180px;
        margin-left: 47px;
      }
      .content{
        margin-left: 40px;
        .text{
          font-size: 18px;
          color: #666666;
          line-height: 36px;
        }
        .all-btn{
          margin-top: 16px;
        }
      }
    }
  }
  .module3{
    padding: 46px 0 36px;
    .text-box{
      display: flex;
      // align-items: center;
      margin: 24px 0 16px;
      .text{
        font-size: 18px;
        color: #666666;
        line-height: 36px;
      }
      .all-btn{
        margin-left: 25px;
      }
    }
    .img-box{
      display: flex;
      justify-content: center;
      img{
        &:nth-child(1){
          margin-right: 74px;
        }
        &:nth-child(2){
          margin-top: 16px;
        }
      }
    }
  }
}
</style>
