<template>
  <div class="candida-box">
    <div class="module1 content-max-width">
      <div class="title" id="point5">考生报名</div>
      <div class="dosc">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/0718c8ea2386caafca53c4a74abc5c69.png" alt="">
        <div class="cursor" @click="goPage('https://vslc.ncb.edu.cn/child-orgInfo?orgCode=330220946', 1)"></div>
        <div class="cursor2" @click="goPage('https://vslc.ncb.edu.cn/child-orgInfo?orgCode=330220946', 1)"></div>
        <div class="btn1" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/c1c74b9c5bf6b2f51d7b5545a9a963ef.docx', 1)"></div>
        <div class="btn2" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/3a959d34c5af16299d64841bf5ca542c.docx', 1)"></div>
        <div class="btn3" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/7585d6fd4f13ce6551820ae272c12ca1.docx', 1)"></div>
      </div>
      <!-- <div class="p">
        <span>考试报名对象：</span>
        已申报1+X证书试点并通过考核站点验收的学校
      </div>
      <div class="p2">
        <span>考试计划：</span>
        <img src="https://zws-imgs-pub.ezijing.com/static/public/6e74b2e552bc3a2bf00062e3af03fe7b.png" alt="">
      </div>
      <div class="p2">
        <span>考试计划：</span>
        <div>请各试点院校根据学生学习情况，灵活选择考试时间，组织考试。<br/>
2021年1月份的1+X考试需在12月20日完成报名，报名后不能做任何变更，请各试点院校提前做好相关计划。<br/>
请在每场考试报名截止日期之前完成报名，并于考试当天准时参加考试。因个人原因导致的缺考，不予重新免费安排考试。<br/>
请在每场考试缴费截止日期之前完成缴费，并确保缴费人数与报名人数一致，否则不予安排考试。</div>
      </div>
      <div class="bm-btn">去报名</div>
      <div class="p2 padd-b-36">
        <span>缴费流程：</span>
        <div class="process">
          <span class="order">①</span>
          <div class="text">学生</div>
          <div class="border"></div>
          <span class="order">②</span>
          <div class="text">试点学校</div>
          <div class="border"></div>
          <span class="order">③</span>
          <div class="text">培训评价组织</div>
        </div>
      </div> -->
    </div>
    <div class="module2">
      <div class="content-max-width" id="point1">
        <div class="dosc">
          <div id="point2" class="cursor" @click="goPage('https://x-learning.ezijing.com/', 1)"></div>
          <div class="cursor2" @click="goPage('https://vslc.ncb.edu.cn/childIndex?orgCode=330220946', 1)"></div>
          <div class="cursor3" @click="goPage('https://x.ezijing.com/news?type=0', 1)"></div>
          <div class="cursor4" @click="goPage('https://vslc.ncb.edu.cn/ncb_admin/#/login?systemType=3', 1)"></div>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/94b18249a87c56e05b620eafbcdb41c7.png" alt="">
          <div class="all-btn mar-at16-ab36" @click="goPage('https://x-exam.ezijing.com/login/6753212536302075904', 1)">参加考试</div>
        </div>
        <!-- <div class="title" id="point1">学习课程</div>
        <div class="item flex">
          <img class="img" src="https://zws-imgs-pub.ezijing.com/static/public/dc31668fb1d44405ad8b52c94d9c5e3b.png" alt="">
          <div class="content-text">
            <div class="text">
              学习系统以学习课程和做题练题为主要功能。学习课程以视频展示，清晰、流畅且稳定。视频播放支持倍速、全屏切换、课程讲义和视频双频同步播放；视频章节中插入试卷随学随考；支持视频课程及PDF、PPT等文本课程学习（学生)。做题练题区分模拟测试和错题、收藏功能。模拟测试模拟真考流程，熟悉考试做题方式并评估成绩给定参考答案；错题练习系统自动记录错题，针对薄弱环节使学员多次加强练习。收藏试题主动添加试题。学习系统以帮助所有学员取得最好的成绩为目标，可随时联系客服反馈意见。
            </div>
            <div class="run-btn" @click="goPage('https://x-learning.ezijing.com/', 1)">进入系统</div>
          </div>
        </div>
        <div class="title">参加考试</div>
        <div class="process">
          <div class="item">
            <div class="icon-box">
              <img src="https://zws-imgs-pub.ezijing.com/static/public/417180cc1fdf4078b26478923f1552de.png" alt="" class="icon">
            </div>
            <div class="name">关注考点通知</div>
          </div>
          <div class="border"></div>
          <div class="item">
            <div class="icon-box">
              <img src="https://zws-imgs-pub.ezijing.com/static/public/df4fd1064d73a099666f3ba38fe106cd.png" alt="" class="icon">
            </div>
            <div class="name">考试报名</div>
          </div>
          <div class="border"></div>
          <div class="item">
            <div class="icon-box">
              <img src="https://zws-imgs-pub.ezijing.com/static/public/a3ac60aa76afa4306d9d52e0693ad86f.png" alt="" class="icon">
            </div>
            <div class="name">打印准考证</div>
          </div>
          <div class="border"></div>
          <div class="item">
            <div class="icon-box">
              <img src="https://zws-imgs-pub.ezijing.com/static/public/3319cf892c2535c1963ec8daef711264.png" alt="" class="icon">
            </div>
            <div class="name">参加考试</div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="module3 content-max-width" id="point3">
      <div class="docs">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/dfaae45f0a5ed31c281f42e6de54f706.png" alt="">
        <div class="cursor" @click="goPage('https://vslc.ncb.edu.cn/csr-scoreCertificate', 1)"></div>
        <div id="point4" class="all-btn mar-at16" @click="goPage('https://vslc.ncb.edu.cn/csr-verification', 1)">证书查询</div>
      </div>
      <!-- <div class="title mar-t36">成绩查询</div>
      <div class="p">成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-scoreCertificate）进行查询。</div>
      <img src="https://zws-imgs-pub.ezijing.com/static/public/e2c0c840ca551e344ffff6c03775030c.png" class="img1" alt="">
      <div class="btn" @click="goPage('https://vslc.ncb.edu.cn/csr-scoreCertificate', 1)">去查询</div>
      <div class="title">证书查询</div>
      <div class="p">证书查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-verification）进行查询。</div>
      <img src="https://zws-imgs-pub.ezijing.com/static/public/8176a5a1080aeb1e67240d85d12ef468.png" alt="" class="img2">
      <div class="btn" @click="goPage('https://vslc.ncb.edu.cn/csr-verification', 1)">去查询</div> -->
    </div>
  </div>
</template>
<script>
import action from '@action'
export default {
  mounted() {
    // this.newsList()
    if (this.$route.query.point) {
      this.pointScroll()
    }
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      data: ''
    }
  },
  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() {
      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;
}
.candida-box{
  .module1{
    padding-top: 37px;
    position: relative;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
    }
    .dosc{
      padding-bottom: 32px;
      padding-top: 25px;
      position: relative;
      font-size: 18px;
      color: #666666;
      line-height: 36px;
      margin-top: 16px;
      .cursor{
        position: absolute;
        bottom: 200px;
        right: 300px;
        width: 500px;
        height: 30px;
        // background: rgba(0,0,0,0.3);
        cursor: pointer;
      }
      .cursor2{
        position: absolute;
        bottom: 140px;
        right: 300px;
        width: 500px;
        height: 30px;
        // background: rgba(0,0,0,0.3);
        cursor: pointer;
      }
      .btn1{
        position: absolute;
        top: 250px;
        left: 170px;
        width: 70px;
        height: 30px;
        // background: rgba(0,0,0,0.3);
        cursor: pointer;
      }
      .btn2{
        position: absolute;
        top: 285px;
        left: 170px;
        width: 70px;
        height: 30px;
        // background: rgba(0,0,0,0.3);
        cursor: pointer;
      }
      .btn3{
        position: absolute;
        top: 325px;
        left: 170px;
        width: 70px;
        height: 30px;
        // background: rgba(0,0,0,0.3);
        cursor: pointer;
      }
    }
    .p{
      font-size: 18px;
      font-weight: bold;
      color: #666666;
      line-height: 30px;
      margin-top: 16px;
      span{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 30px;
      }
    }
    .p2{
      font-size: 18px;
      font-weight: bold;
      color: #666666;
      line-height: 30px;
      margin-top: 16px;
      span{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 30px;
      }
      display: flex;
      margin-top: 16px;
    }
    .bm-btn{
      cursor: pointer;
      width: 104px;
      height: 40px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      margin-left: 90px;
      margin-top: 16px;
    }
    .process{
      display: flex;
      align-items: center;
      
      .order{
        color: #CCCCCC;
        margin-right: 10px;
      }
      .text{
        font-size: 18px;
        color: #222222;
        margin-right: 10px;
      }
      .border{
        width: 100px;
        height: 1px;
        background: #ccc;
        margin-right: 10px;
      }
    }
    .padd-b-36{
      padding-bottom: 36px;
    }
  }
  .module2{
    background: #fff;
    padding: 24px 0 29px;
    .dosc{
      // padding-bottom: 32px;
      // padding-top: 25px;
      position: relative;
      // font-size: 18px;
      // color: #666666;
      // line-height: 36px;
      // margin-top: 16px;
      .cursor{
        position: absolute;
        top: 660px;
        left: 555px;
        width: 104px;
        height: 40px;
        // background: rgba(0,0,0,0.1);
        cursor: pointer;
      }
      .cursor2{
        position: absolute;
        top: 1050px;
        left: 25px;
        width: 250px;
        height: 40px;
        // background: rgba(0,0,0,0.1);
        cursor: pointer;
      }
      .cursor3{
        position: absolute;
        top: 1125px;
        left: 25px;
        width: 200px;
        height: 40px;
        // background: rgba(0,0,0,0.1);
        cursor: pointer;
      }
      .cursor4{
        position: absolute;
        top: 1000px;
        left: 330px;
        width: 230px;
        height: 40px;
        // background: rgba(0,0,0,0.1);
        cursor: pointer;
      }
    }
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
      margin-bottom: 25px;
    }
    .process{
      display: flex;
    }
    .item{
      &.flex{
        display: flex;
      }
      .img{
        width: 326px;
        height: 180px;
      }
      .content-text{
        margin-left: auto;
        width: 793px;
        .text{
          color: #666666;
          font-size: 18px;
          line-height: 36px;
        }
        .run-btn{
          width: 104px;
          height: 40px;
          background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
          border-radius: 4px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          margin-top: 16px;
          cursor: pointer;
          margin-bottom: 36px;
        }
      }
    }
    .process{
      display: flex;
      justify-content: center;
      .item{
        .icon-box{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 74px;
          height: 74px;
          background: #FFFFFF;
          box-shadow: 0px 1px 4px 0px rgba(153, 153, 153, 0.3);
          border-radius: 50%;
          margin: 0 auto;
          img{
            width: 40px;
            display: block;
          }
        }  
        .name{
          font-size: 18px;
          font-weight: bold;
          color: #222222;
          line-height: 25px;
          margin-top: 20px;
          &.mar-10{
            margin-top: 10px;
          }
        }
      }
      .border{
        width: 120px;
        height: 2px;
        background: #CCCCCC;
        border-radius: 1px;
        margin: 36px 30px 0;
      }
    }
  }
  .module3{
    padding-bottom: 36px;
    .docs{
      // padding-bottom: 32px;
      padding-top: 36px;
      position: relative;
      // font-size: 18px;
      // color: #666666;
      // line-height: 36px;
      // margin-top: 16px;
      .cursor{
        position: absolute;
        top: 405px;
        left: 550px;
        width: 104px;
        height: 40px;
        // background: rgba(0,0,0,0.1);
        cursor: pointer;
      }
    }
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
      margin-bottom: 16px;
    }
    .p{
      font-size: 18px;
      color: #666666;
      line-height: 36px;
    }
    .img1{
      width: 600px;
      display: block;
      margin: 16px auto;
    }
    .img2{
      width: 609px;
      display: block;
      margin: 16px auto;
    }
    .btn{
      cursor: pointer;
      margin: 0 auto;
      width: 104px;
      height: 40px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 40px;
    }
  }
}
.mar-t36{
  margin-top: 36px;
}
.all-btn{
  width: 104px;
  // padding: 0 24px;
  height: 40px;
  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  // font-weight: bold;
  margin-top: 16px;
  cursor: pointer;
  margin-bottom: 36px;
  margin: 0 auto;
  &.mar-at16-ab36{
    margin: 16px 0 36px 528px;
  }
  &.mar-at16{
    margin: 16px 0 36px 528px;
  }
}
</style>
