<template>
  <!-- <app-frame :tabs="tabs" title="数字经济产业学院"> -->
  <div>
    <img src="https://webapp-pub.ezijing.com/www/pc/industry/img5.png" class="banner" />
    <!-- <template #article> -->
    <div class="module-2">
      <p style="color: #424242; font-size: 16px">
        依托清控紫荆教育数字经济学院特色专业优势，结合地方院校的理论教学师资与清控紫荆教育业内、国际实践师资，围绕数字经济产业链、价值链，服务地方数字经济战略，与行业龙头企业及国际跨国企业深度合作，努力将数字经济学院打造成为省市，乃至国家级的一流产业学院。
      </p>
      <p style="color: #424242; font-size: 16px; font-weight: 400; margin-top: 30px">数字经济产业学院服务项目</p>
      <p style="color: #424242; font-size: 14px; margin-top: 20px; margin-bottom: 17px">为学校、学生和企业提供长期的闭环服务</p>
      <ul>
        <li
          v-for="(item, index) in tabsList"
          :key="index"
          class="li"
          @click="tabsClick(item, index)"
          @mouseenter="handleMsEnter(index)"
          @mouseleave="handleMsLeave"
          :class="{ active: index === tabsActive, isHover: index === hoverIndex }">
          <img :src="index === tabsActive || index === hoverIndex ? item.activeImg : item.img" style="width: 43px; height: 43px" />
          <div class="name">{{ item.name }}</div>
          <p>{{ item.dec }}</p>
        </li>
      </ul>
      <div class="content-mian" style="padding-top: 10px">
        <div class="con-img-box" v-if="tabsActive === 0">
          <!-- <img src="https://webapp-pub.ezijing.com/www/pc/industry/image6.png" /> -->
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image7.png" style="width: 100%; height: 100%" />
            <p class="desc">
              面向产业转型发展和区域经济社会需求，清控紫荆教育与地方院校进行专业共建。以深化产教深度融合，创新人才培养方案、课程体系、方式方法、保障机制等。促成课程内容与技术发展衔接、教学过程与生产过程对接、人才培养与产业需求融合。达到共同建设省市乃至国家级的一流学科。
            </p>
          </div>
          <p style="font-size: 16px; color: #424242; margin-bottom: 21px">三大专业范畴，10余个特色专业方向。</p>
          <div class="parts">
            <div class="part">
              <img src="https://webapp-pub.ezijing.com/www/pc/industry/img16.png" />
              <p class="title">新文科</p>
              <p class="dec">数字金融.数字营销,商业数据分析、数字媒体技术、智能运营；…</p>
            </div>
            <div class="part">
              <img src="https://webapp-pub.ezijing.com/www/pc/industry/img17.png" />
              <p class="title">新工科</p>
              <p class="dec">人工智能方向、数据技术方向、云计算方向、网络安全方向；</p>
            </div>
            <div class="part">
              <img src="https://webapp-pub.ezijing.com/www/pc/industry/img18.png" />
              <p class="title">智能制造</p>
            </div>
          </div>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image9.png" />
        </div>
        <div class="con-img-box" v-if="tabsActive === 1">
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image10.png" style="width: 100%; height: 100%" />
            <p class="desc">
              紫荆教育数字经济产业学院SAAS平台（以下简称“ZJSAAS平台”）是由紫荆教育经过6年时间的教育科技实践，专门为与高校合作建立
              数字经济产业学院而研发，以提高教学质量为目的，以数据科技为基础，
              以学生为核心，100+功能模块涵盖信息宣传、学生管理、教师管理、教学内容管理、教学过程实施、课程实训以及实习就业等工作。
            </p>
          </div>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image11.png" />
        </div>
        <div class="con-img-box" v-if="tabsActive === 2">
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image12.png" style="width: 100%; height: 100%" />
            <p class="descc">
              清控紫荆教育针对数字经济岗位要求，以培养学生综合职业能力为导向，结合学校数字经济专业实训条件，
              提出了“引产入校、以产促教”的工学结合一体化人才培养思路，实施“边教、边做、边生产、边学习”。引
              进企业产品生产任务，将一体化课程项目教学与实际产品生产相结合，灵活调整专业教学内容，安排学生参
              与产品生产加工、市场推广运营、经营管理等环节。通过各种不同项目的教学和真实产品的生产经营，使学
              生掌握各种岗位的技能与能力，了解企业经营生产组织方式、工艺流程、产品加工技术要求、市场推广、运 营管理等，形成必备的职业核心技能和素养。<br />清控紫荆教育追求深度融合，协同创新，充分发挥企业和学校在
              产学融合中的作用，整合资源、优化结构，充分实现产学协同发展，培养高素质、高技能人才，并且形成独有的特色。
            </p>
          </div>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image13.png" />
        </div>
        <div class="con-img-box" v-if="tabsActive === 3">
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image14.png" style="width: 100%; height: 100%" />
            <p class="desc">清控紫荆教育实习就业服务以专业课程导入为前提，分为实训、就业指导与实习上岗三个层次。完成学生和用人企业的无缝对接，达成“学位即岗位”的目标。</p>
          </div>
          <p style="font-size: 18px; font-weight: 400; color: #000000; margin-bottom: 20px">企业人力资源用人模式的改变</p>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image15.png" />
          <p style="color: #777777; font-weight: 300; font-size: 14px; margin-bottom: 40px">
            清控紫荆教育的产业、企业、学校联动的方式，在降低企业人力资源成本的同时提升了学生在实战项目中的应用技能，最终达到产业人才培养的目的。
          </p>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image16.png" />
        </div>
        <div class="con-img-box" v-if="tabsActive === 4">
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image17.png" style="width: 100%; height: 100%" />
            <p class="desc">
              以新兴技术为基础，聚焦数字经济领域，清控紫荆教育汇集顶尖数字理论和应用研究专家，整合先进技术资源，通过产学研紧密
              合作，建设成具有引领作用的创新型数字经济实验室，以案例作为实验室的核心要素，旨在创新技术研发、企业培育、校企合作培养专
              业人才等方面发挥重要作用，为数字经济人才提供学习提升的平台与机会，强化产学研协作培养顶尖数字人才，助推国家人才发展战略。
            </p>
          </div>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image18.png" />
        </div>
        <div class="con-img-box" v-if="tabsActive === 5">
          <div style="position: relative; height: 262px; margin-bottom: 60px">
            <img src="https://webapp-pub.ezijing.com/www/pc/industry/image19.png" style="width: 100%; height: 100%" />
            <p class="desc">
              以新兴技术为基础，聚焦数字经济领域，清控紫荆教育汇集顶尖数字理论和应用研究专家，整合先进技术资源，通过产学研紧密
              合作，建设成具有引领作用的创新型数字经济实验室，以案例作为实验室的核心要素，旨在创新技术研发、企业培育、校企合作培养专
              业人才等方面发挥重要作用，为数字经济人才提供学习提升的平台与机会，强化产学研协作培养顶尖数字人才，助推国家人才发展战略。
            </p>
          </div>
          <img src="https://webapp-pub.ezijing.com/www/pc/industry/image20.png" /><img src="https://webapp-pub.ezijing.com/www/pc/industry/image21.png" /><img
            src="https://webapp-pub.ezijing.com/www/pc/industry/image22.png" /><img src="https://webapp-pub.ezijing.com/www/pc/industry/image23.png" />
        </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),
      tabsList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
          name: '专业共建',
          dec: '专业提升',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_01.png'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image82.png',
          name: 'SAAS软件平台',
          dec: '教学管理',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_02.png'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image83.png',
          name: '引产入校',
          dec: '实训基地',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_03.png'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image84.png',
          name: '实习就业',
          dec: '企业人力资源服务',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_04.png'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png',
          name: '数字经济实验室',
          dec: '前沿案例',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_05.png'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png',
          name: '培训证书',
          dec: '专业补充',
          activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_06.png'
        }
      ],
      tabsActive: 0,
      hoverIndex: -1
    }
  },
  methods: {
    tabsClick(item, index) {
      this.tabsActive = index
    },
    handleMsEnter(index) {
      this.hoverIndex = index
    },
    handleMsLeave() {
      this.hoverIndex = -1
    }
  }
}
</script>

<style lang="scss" scoped>
.module-2 {
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .li {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 130px;
      height: 132px;
      background: #f4f4f4;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.3s;
      .name {
        font-size: 16px;
        color: #424242;
        font-weight: 400;
      }
    }
    .active,
    .isHover {
      background: #a81840;
      border-top: 6px solid #a81840;
      box-shadow: 5px 5px 5px #bbb;
      .name {
        color: #fff;
      }
      p {
        color: #fff;
      }
    }
    .isHover {
      transform: translateY(-10px);
    }
  }

  .content-mian {
    .con-img-box {
      .desc {
        position: absolute;
        top: 50%;
        left: 98px;
        right: 56px;
        margin-top: -50px;
        color: #fff;
        line-height: 26px;
        font-size: 14px;
        font-weight: 300;
      }
      .descc {
        top: 35px;
        bottom: 30px;
        left: 55px;
        right: 56px;
        position: absolute;
        color: #fff;
        font-size: 14px;
        font-weight: 300;
        line-height: 26px;
      }

      img {
        display: block;
        &:nth-child(1) {
          width: 768px;
          margin-bottom: 67px;
        }
        &:nth-child(2) {
          width: 100%;
          margin-bottom: 38px;
        }
        &:nth-child(3) {
          width: 864px;
          // margin-bottom: 78px;
        }
      }
      .parts {
        // padding: 50px 36px;
        display: flex;
        justify-content: space-around;
        .part:hover {
          background-color: #fff;
        }
        .part {
          width: 286px;
          height: 380px;
          display: flex;
          flex-direction: column;
          background: #f9f8f8;
          img {
            width: 100%;
            height: 190px;
          }
          .title {
            font-size: 16px;
            font-weight: 400;
            line-height: 34px;
            color: #333333;
            opacity: 1;
            margin-left: 25px;
            margin-top: -40px;
          }
          .dec {
            font-size: 14px;
            font-weight: 300;
            line-height: 26px;
            color: #666666;
            opacity: 1;
            margin-left: 25px;
          }
        }
      }
    }
    .ul-tit {
      font-size: 22px;
      font-weight: 500;
      line-height: 100%;
      padding: 0 0 36px;
      color: #424242;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 5px;
        margin-bottom: 5px;
        width: 220px;
        height: 170px;
        position: relative;
        overflow: hidden;
        &:hover {
          img {
            transform: scale(1.06);
          }
        }
        img {
          transition: all 0.3s;
          width: 100%;
          height: 100%;
          display: block;
        }
        .pop-txt {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.3);
          .name {
            position: absolute;
            bottom: 20px;
            left: 20px;
            font-size: 16px;
            font-weight: 300;
            // line-height: 170px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
