<template>
  <!-- <app-frame :tabs="tabs" title="数字经济产业学院"> -->
  <div class="main_content">
    <img src="https://webapp-pub.ezijing.com/www/pc/college-m1-banner.jpg" class="banner" />
    <!-- <template #article> -->
    <div class="content-mian module-1">
      <p style="font-size: 16px; color: rgb(85, 85, 85); margin-bottom: 20px">
        清控紫荆教育的数字经济产业学院主要分为新文科，新工科和智能制造三大方向，以数字科技为基础，形成了商业数据分析、数字营销、数字运营、数字媒体技术、数字金融；网络安全、物联网技术、云计算、人工智能；智能制造、软件应用技术、智能驾驶、智能家电、工业机器人等三大专业群。同时，基于数字经济典型应用场景，以数字化改造和专业升级为关键，围绕数字金融、数字智能制造、数字贸易、数字医疗、数字农业管理、数字能源等核心行业应用方向，进行“数字＋全行业”的专业建设。
      </p>
      <p style="font-size: 16px; color: rgb(85, 85, 85); margin-bottom: 20px">
        清控紫荆教育自2018年以来，调研了业内600+数字化和数字化转型企业实体，了解企业用人需求、梳理数字人才岗位能力模型；举办了100+场次的以行业专家、高职本科学科带头人、重点本科学者为主的研讨会；分析了近三年超过180万+从业岗位需求；走访200+院校，进行对比分析数字经济相关专业的人才培养方案。
      </p>
      <p style="font-size: 16px; color: rgb(85, 85, 85); margin-bottom: 20px">
        目前，清控紫荆教育已经与国内100多所高等院校达成合作意向，落地共建数字经济产业学院，形成了以“学校—紫荆—产业”的联动人才培养模式，未来三年将落地超过100所数字经济产业学院，培养的数字经济人才超过10万人。
      </p>
      <p style="font-size: 18px; font-weight: 400; color: #a81840; margin-bottom: 33px">依托数字经济人才需求-能力模型</p>
      <img src="https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png" />
      <div>
        <p style="font-size: 18px; font-weight: 400; color: #000000; margin-bottom: 20px">国际化引领新时代高校拔尖创新人才培养</p>
        <p style="font-size: 16px; font-weight: 400; color: #555; margin-bottom: 20px">
          依托清控紫荆教育长期所积累的专业化研发能力，科技研发能力以及国际化能力，我们对共建数字经济产业学院提出了“五个一流”的建设目标，力争和全国各类院校一起，从实际情况出发培养产业所急需的初、中、高等各级别专业化岗位人才。
        </p>

        <img style="margin-bottom: 0" src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png" />
        <p style="font-size: 18px; font-weight: 400; color: #000000; margin-bottom: 20px">紫荆数字经济产业学院有以下主要特点</p>
        <ul>
          <li v-for="(item, index) in navList" :key="index" class="li" :class="{ active: index === tabActive }" @mouseover="navActive(item, index)">
            <img :src="index === tabActive ? item.activeImg : item.img" style="width: 43px; height: 43px" />
            <div class="name">{{ item.name }}</div>
          </li>
        </ul>
        <div class="img-content">
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" v-if="false" />
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" v-if="tabActive === 0" />
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" v-if="tabActive === 1" />
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" v-if="tabActive === 2" />
        </div>
        <div v-if="false" class="part">
          <ul>
            <li>数字经济人才国家战略</li>
            <li>企业人才需求强劲</li>
          </ul>
          <p class="desc">
            “加快数字化发展，建设数字中国” 国家推进数字化转型的认识和决心不断强化，不断出台支持政策，数字化转型的发展化境不断优化。
            <br />
            <br />
            预计2035年中国整体数字经济规模将近16万亿，总就业容量达到4.15亿人，从目前存量看，中国国高技能人才仅占整体劳动力市场的4%，数字经济类人才缺口巨大。
          </p>
        </div>
        <div v-if="tabActive === 0" class="part">
          <ul>
            <li>专业能力提升</li>
            <li>解决实习就业</li>
            <li>提升院校专业影响力</li>
          </ul>
          <p class="desc">
            依据数字经济岗位胜任力模型，有针对性的制定人才培养计划，全面提升人才的数字专项技能。引产入校，充分解决学生实习就业的问题，做好学员从学生到职业人的角色转化工作。产学研的融合，进一步提升院校的专业影响力。
          </p>
        </div>
        <div v-if="tabActive === 1" class="part">
          <ul>
            <li>学生：学-用-就业</li>
            <li>学校：招生-教学-师资-实习-就业</li>
            <li>企业：人才培养-岗位培训-实习-招聘</li>
          </ul>
          <p class="desc">
            学生，学以致用，从学习技能到实际使用技能为企业创造价值，得到社会企业的认可，达到就业的目的。<br /><br />
            学校，以产业发展为方向，以科研为先导，以选拔招生为前提，以教学为根本，以实习为抓手，以学生就业为目的，使学校全栈得到综合提升。<br /><br />
            企业，从企业发展的角度，对人才进行前置性储备，建立人才培养体系，引进实习实训，发现人才、培养人才、留住人才，形成企业的核心竞争力。
          </p>
        </div>
        <div v-if="tabActive === 2" class="part">
          <ul>
            <li>贯穿整个教学周期</li>
            <li>服务院校长期专业发展目标</li>
            <li>多种产品提供给学校、学生</li>
          </ul>
          <p class="desc">
            从人才培养方案咨询、课程体系建设、教师培训、线上线下授课、落地实习实训、指导学生就业，全方位贯彻整个教学周期。<br /><br />
            以省市乃至国家一流产业学院为目标，服务院校长期专业发展。<br /><br />
            从国内外，从线上线下，从产学研，从校师生，多个层面提供服务。<br /><br />
          </p>
        </div>
      </div>
    </div>
    <!-- </template> -->
  </div>
  <!-- </app-frame> -->
</template>

<script>
import AppFrame from '@/components/AppFrame'
import navList from '@/assets/servicesCollegeNavList.js'

export default {
  components: { AppFrame },
  data() {
    return {
      tabs: navList(this),
      navList: [
        // {
        //   name: '需求强劲',
        //   img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png',
        //   activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_01.png'
        // },
        {
          name: '瞄准痛点',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_02.png'
        },
        {
          name: '闭环服务',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_03.png'
        },
        {
          name: '长期共赢',
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_04.png'
        }
      ],
      tabActive: 0
    }
  },
  methods: {
    navActive(item, index) {
      this.tabActive = index
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  width: 1200px;
  margin: 30px auto;
  .banner {
    width: 100%;
  }
}
.module-1 {
  margin-top: 20px;
  .desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    color: #444;
    opacity: 1;
  }

  .m1-new-item {
    .title {
      font-size: 22px;
      font-weight: bold;
      line-height: 100%;
      color: #424242;
      padding-top: 53px;
      padding-bottom: 20px;
    }
    .tips {
      font-size: 16px;
      line-height: 32px;
      color: #424242;
      font-weight: 300;
      padding: 20px 0 50px;
    }
    .item-box {
      display: flex;
      .left-box {
        width: 562px;
        height: 385px;
        position: relative;
        .bg {
          width: 100%;
          height: 100%;
          display: block;
          transition: all 0.5s;
        }
        .txt {
          position: absolute;
          top: 50%;
          left: 19px;
          transform: translateY(-50%);
          width: 155px;
        }
        .img1 {
          width: 155px;
        }
        .img11 {
          width: 415px;
        }
        overflow: hidden;
        &:hover {
          .bg {
            transform: scale(1.06);
          }
        }
      }
      .right-box {
        width: 329px;
        margin-left: 4px;
        .items {
          position: relative;
          width: 100%;
          height: 190px;
          margin-bottom: 4px;
          overflow: hidden;
          &:hover {
            .bg {
              transform: scale(1.06);
            }
          }
        }
        .bg {
          width: 100%;
          height: 100%;
          display: block;
          transition: all 0.5s;
        }
        .txt {
          position: absolute;
          top: 50%;
          left: 19px;
          transform: translateY(-50%);
          &.t1 {
            width: 109px;
          }
          &.t11 {
            width: 253px;
          }
          &.t2 {
            width: 181px;
          }
          &.t22 {
            width: 303px;
          }
        }
      }
    }
  }
  img {
    width: 100%;
    display: block;
    &:nth-child(1) {
      margin-bottom: 18px;
    }
    &:nth-child(2) {
      margin-bottom: 22px;
    }
    &:nth-child(3) {
      width: 874px;
      margin-bottom: 54px;
    }
    &:nth-child(4) {
      margin-bottom: 12px;
    }
    &:nth-child(5) {
      width: 863px;
      margin-bottom: 50px;
    }
  }

  ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 32px;
    // li {
    //   // padding: 15px;
    //   margin-left: 25px;

    // }
    .li {
      list-style-type: disc;
      color: #333;
      font-size: 18px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 146px;
      height: 146px;
      opacity: 1;
      background: #f4f4f4;
      cursor: pointer;
      .name {
        font-size: 16px;
        color: #424242;
        font-weight: 400;
      }
    }
    .active {
      background-color: #a81840;
      border-bottom: 6px solid #a81840;
      .name {
        color: #fff;
      }
    }
  }
  .img-content {
    height: 280px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    img {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
  }
  .part {
    li {
      list-style-type: disc;
      color: #333;
      font-size: 18px;
      margin-left: 25px;
      padding: 15px;
    }
  }
}
</style>
