<template>
  <div class="main_content">
    <img class="banner" src="https://webapp-pub.ezijing.com/www/pc/goverment/goverment_banner.png" />
    <div class="content_part">
      <div class="part_title">数字经济产教融合实践基地</div>
      <div class="part_desc">
        以“政、校、企、行”协同创新为引领，按照“1（政府）+1（清控紫荆）+N（周边高校）”的模式，联合高校实施“六个共同”育人模式，即共同建<br />设高水平专业、共同开发课程、共同打造师资团队、共同设立科研中心、共同开展招生就业、共同“走出去”，打造数字经济相关的现代产业学院。
      </div>
    </div>
    <div class="content_part1">
      <div class="part_title">专注专业内涵建设，全流程实现高质量人才培养闭环</div>
      <div class="part_desc">“政、校、企、行”协同创新为引领， “1（政府）+1（清控紫荆）+N（周边高校）”的模式</div>
      <img class="part_img" src="https://webapp-pub.ezijing.com/www/pc/goverment/goverment_con1.png" />
      <div class="part_zj">
        <div class="zj_tit">紫荆提供</div>
        <div class="zj_con">
          <div class="con_item" v-for="(item, index) in zjList" :key="index">
            <img :src="item.img" class="item_img" />
            <img :src="item.imgActive" class="item_imgActive" />
            <div class="item_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_part2">
      <div class="part_title">专注专业内涵建设，“六个共同” 育人</div>
      <div class="zj_con">
        <div class="con_item" v-for="(item, index) in zyList" :key="index">
          <div class="mask"></div>
          <img :src="item.img" class="item_img" />
          <img :src="item.imgActive" class="item_imgActive" />
          <div class="item_tit">{{ item.tit }}</div>
          <div class="item_desc" v-html="item.desc"></div>
          <div class="item_tips" v-html="item.tips"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zjList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj1_active.png',
          tit: '运营管理'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj2_active.png',

          tit: '专业设计'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj3_active.png',

          tit: '课程研发'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj4_active.png',

          tit: '双师授课'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj5.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj5_active.png',

          tit: '教学管理'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj6.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj6_active.png',

          tit: '双师打造'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj7.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj7_active.png',

          tit: '产教基地'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj8.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj8_active.png',

          tit: '实习就业'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj9.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj9_active.png',

          tit: '教学成果'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj10.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj10_active.png',

          tit: '其他'
        }
      ],
      zyList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy1_active.png',
          tit: '1+3+N',
          desc: '1核心：商业数据分析<br/>3基础：数字营销、数字运营、数字会计<br/>N应用：数字金融、数字贸易 、数字能源…',
          tips: '打造高水平专业集群'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy2_active.png',

          tit: '四精准、三立足',
          desc: '精准对标要求、精准开发课程、<br/>精准开展培养、精准实现就业<br/>立足商业数据分析实验室”“数字营销实验室”“云计算实验室”',
          tips: '创新人才培养模式'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy3_active.png',

          tit: '注重双能、引培结合',
          desc: '引入产业课程、打造混编教师团队<br/>校企共建“技能大师工坊”群<br/>共建教学指导委员会，引进社会化服务团队带头人',
          tips: '打造高水平教学团队'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy4_active.png',

          tit: '紧贴产业、育训结合',
          desc: '人才电子档案和能力数字画像<br/>工业级实验软件，还原真实的数字作业场景企<br/>业实践案例，满足多行业技能实验',
          tips: '共建校内实训基地'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy5.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy5_active.png',

          tit: '对标精品、注重融通',
          desc: '校企联合开发产教融合型校本教材<br/>开展“课堂革命”，创新教学方法和课堂教学<br/>建设融通多类型技能竞赛、考证培训、员工培训等课程',
          tips: '开发校企合作课程'
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy6.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy6_active.png',

          tit: '面向产业、反哺产业',
          desc: '联合开展课题联合申报<br/>联合开展技术咨询，共同组建技术专家智库<br/>联合开展技术成果转化',
          tips: '打造产学研平台'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  background: #ffff;
  width: 100%;
  .banner {
    width: 100%;
    height: 580px;
  }
  .content_part {
    width: 100%;
    height: 316px;
    background: #f9f8f8;

    padding: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .part_title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .part_desc {
      margin-top: 36px;
      font-size: 18px;
      font-weight: 400;
      line-height: 34px;
      color: #666666;
      white-space: nowrap;
      // text-align: center;
    }
  }
  .content_part1 {
    margin: 120px auto;
    text-align: center;
    .part_title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .part_desc {
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      line-height: 34px;
      margin-top: 28px;
    }
    .part_img {
      width: 533px;
      height: 587px;
      margin-top: 67px;
    }
    .part_zj {
      margin: 32px auto;
      max-width: 1200px;

      .zj_tit {
        width: 80px;
        height: 22px;
        font-size: 20px;
        font-weight: 400;
        color: #424242;
        padding-bottom: 7px;
        box-sizing: content-box;
        border-bottom: 1px solid #aa1941;
      }
      .zj_con {
        max-width: 1200px;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .con_item {
          width: 228px;
          height: 120px;
          background: #f4f4f4;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-top: 15px;
          box-sizing: border-box;
          .item_img {
            display: block;
          }
          .item_imgActive {
            display: none;
          }
          .item_tit {
            font-size: 16px;
            font-weight: 500;
            color: #424242;
            margin-top: 20px;
          }
          &:hover {
            background: #aa1941;
            .item_tit {
              color: #ffffff;
            }
            .item_img {
              display: none;
            }
            .item_imgActive {
              display: block;
            }
          }
        }
      }
    }
  }
  .content_part2 {
    width: 100%;
    height: 1167px;
    background: #f9f8f8;
    padding-top: 110px;
    .part_title {
      margin: auto;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .zj_con {
      width: 1200px;
      margin: 81px auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .con_item {
        width: 380px;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid #aa1941;
        padding: 49px 27px 57px 32px;
        position: relative;
        background: rgba(255, 255, 255, 0.39);
        box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.13);
        margin-top: 29px;
        .mask {
          position: absolute;
          background: rgba(0, 0, 0, 0);
          opacity: 1;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        .item_img {
          display: block;
        }
        .item_imgActive {
          display: none;
        }
        .item_tit {
          font-size: 22px;
          font-weight: 500;
          color: #424242;
          margin-top: 27px;
        }
        .item_desc {
          font-size: 16px;
          font-weight: 400;
          line-height: 32px;
          color: #666666;
          margin-top: 20px;
        }
        .item_tips {
          font-size: 20px;
          font-weight: 500;
          // line-height: 34px;
          color: #333333;
          margin-top: 8px;
        }
        &:hover {
          position: relative;
          border: none;
          .mask {
            position: absolute;
            background: rgba(0, 0, 0, 0.64);
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          .item_tit {
            color: #ffffff;
            z-index: 20;
          }
          .item_tips {
            z-index: 20;
            color: #ffffff;
          }
          .item_desc {
            z-index: 20;
            color: #ffffff;
          }
          .item_img {
            display: none;
          }
          .item_imgActive {
            display: block;
            z-index: 20;
          }
        }
      }
      .con_item:nth-child(1):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg1.png);
      }
      .con_item:nth-child(2):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg2.png);
      }
      .con_item:nth-child(3):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg3.png);
      }
      .con_item:nth-child(4):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg4.png);
      }
      .con_item:nth-child(5):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg5.png);
      }
      .con_item:nth-child(6):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg6.png);
      }
    }
  }
}
</style>
