<template>
  <div class="home-box">
    <div class="banner"><img src="/images/banner.png" style="width: 100%" /></div>
    <div class="pt-80 content-max-width">
      <h1>证书简介</h1>
      <p class="describe">
        为推动工业和信息化人才培养工程高质量发展，扎实培养大批高素质技术技能人才。清控紫荆教育统筹各方优势资源，组织行业专家、教育专家向工信部教育考试中心申报了商务数据分析师-智能数据分析与实战应用（初级）培训项目并成功进入《工业和信息化职业技能提升培训项目》。
      </p>
      <img class="describe-img" src="/images/home_0.png" />
    </div>
    <div class="pt-80 content-max-width">
      <h1>实训平台</h1>
      <p class="describe">
        真场景 · 真环境 · 真项目 · 真案例<br />
        实现“贯通”专业集群底层逻辑，融合商务数据分析服务能力，实现工作实践和教学场景的一体化无缝衔接，融合海量结构化数据集，多行业综合案例集，打造全国影响力的的数字经济核心能力实践教学平台。
      </p>
      <img class="describe-img" src="/images/home_1.png" />
    </div>
    <div class="pt-80 train-box content-max-width" v-if="false">
      <h1>技能培训</h1>
      <p class="describe">
        紫荆教育服务超过1000家政府机关、大型央企、金融机构和行业龙头企业，提供从员工到高管的人才培养服务和在线教育解决方案，拥有完善的培训体系，丰富的行业、岗位培训课程资源、一流的师资团队、强大的设施条件，可以为院校教师提供多样化的技能培训、人员互聘、企业实践机会。
      </p>
      <img class="describe-img" src="https://webapp-pub.ezijing.com/project/x-new/train-img.png" />
      <div class="img-group">
        <div class="img-group_item">
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i1.png" />
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i2.png" />
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i3.png" />
        </div>
        <div class="img-group_item" style="margin-top: 30px">
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i4.png" />
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i5.png" />
          <img src="https://webapp-pub.ezijing.com/project/x-new/train-group-i6.png" />
        </div>
      </div>
    </div>
    <div class="pt-80 content-max-width">
      <h1>教科研服务介绍</h1>
      <p class="describe">
        清控紫荆教育和学校共同成立“科研创新”专家组，由教科研专家、行业/企业资深人士、学校骨干教师等组成，专门承接教育科研项目的选题、申报，研究与实施等。
      </p>
      <img class="describe-img" src="/images/home_2.png" />
    </div>
    <div class="pt-80 content-max-width">
      <h1>通知公告</h1>
      <notice hasTabs></notice>
    </div>
  </div>
</template>

<script>
import notice from '@/components/notice.vue'
export default {
  components: { notice },
}
</script>
<style lang="scss" scoped>
.content-max-width {
  width: 1200px;
  margin: 0 auto;
}
.home-box {
  background: #f8f8f8;
  padding-bottom: 80px;
  .home-head {
    img {
      width: 100%;
      display: block;
      // height: 240px;
    }
  }
  .home-office-hall {
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #444444;
      line-height: 33px;
      padding: 36px 0 16px;
    }
    .office-mian {
      display: flex;
    }
    .tab-btn-box {
      padding-top: 24px;
      li {
        width: 96px;
        height: 40px;
        background: none;
        border-radius: 23px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #444444;
        cursor: pointer;
        &.active {
          color: #fff;
          background: #a81a42;
          border-radius: 23px;
        }
      }
    }
    .item-box {
      display: flex;
      margin-left: 7px;
      li {
        width: 168px;
        height: 168px;
        background: #ffffff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
        border-radius: 4px;
        margin-left: 16px;
        transition: all 0.5s;
        &:hover {
          background: #a81a42;
          transform: translateY(-10px);
          .img {
            display: none;
            margin: 43px auto 15px auto;
          }
          .img-active {
            display: block;
          }
          .text {
            color: #fff;
            .span1 {
              display: none;
            }
            .span2 {
              display: block;
            }
          }
        }
        img {
          height: 50px;
          display: block;
          margin: 43px auto 20px auto;
        }
        .img-active {
          display: none;
        }
        .text {
          text-align: center;
          font-size: 16px;
          color: #444444;
          line-height: 18px;
          .span2 {
            display: none;
          }
          .span1 {
            display: block;
          }
        }
      }
    }
  }
}

.train-box {
  .img-group {
    padding-top: 60px;
    .img-group_item {
      display: flex;
      justify-content: space-between;
    }
  }
}
.pt-80 {
  padding-top: 80px;
}
h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  line-height: 34px;
  text-align: center;
  margin-bottom: 50px;
}
.describe {
  font-size: 18px;
  color: #666666;
  line-height: 36px;
  margin-bottom: 50px;
}
.describe-img {
  width: 100%;
  display: block;
}
</style>
