<template>
  <app-frame :tabs="tabs" title="数字经济产业学院">
    <img src="https://webapp-pub.ezijing.com/www/pc/college-m1-banner.jpg" class="banner" />
    <template #article>
      <div class="content-mian module-1">
        <img src="https://webapp-pub.ezijing.com/www/pc/industry/image2.png" />
        <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>
  </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>
.module-1 {
  .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.1);
          }
        }
      }
      .right-box {
        width: 329px;
        margin-left: 4px;
        .items {
          position: relative;
          width: 100%;
          height: 190px;
          margin-bottom: 4px;
          overflow: hidden;
          &:hover {
            .bg {
              transform: scale(1.1);
            }
          }
        }
        .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;
      .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>
