<template>
  <div>
    <h5 class="gov_tit">院校</h5>
    <ul class="gov_con">
      <li v-for="(item, index) in schoolList" :key="index">
        <template v-if="!item.isChild">
          <div class="con_desc" v-html="item.desc"></div>
        </template>
        <template v-else>
          <div class="con_part">
            <div class="img_box">
              <img :src="item.img" class="icon" />
              <img :src="item.imgActive" class="icon_active" />
            </div>
            <div class="con_desc" v-html="item.desc"></div>
          </div>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      schoolList: [
        {
          desc: `数字经济 <br />产业学院`,
          isChild: false
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_gz.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_gz_active.png',
          desc: `数字化改造`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_sy.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_sy_active.png',
          desc: `数字经济实验室`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_yf.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_yf_active.png',
          desc: `教学研发`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_rx.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_rx_active.png',
          desc: `引产入校`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_jy.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_jy_active.png',
          desc: `实习就业`,
          isChild: true
        },
        {
          desc: `成功案例`,
          isChild: false
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.gov_tit {
  font-size: 20px;
  font-weight: 500;
  color: #333333;
  border-left: 4px solid #aa1941;
  padding-left: 6px;
  line-height: 1;
}
.gov_con {
  margin-top: 31px;
  display: flex;

  li {
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    white-space: nowrap;
    cursor: pointer;
    .con_part {
      width: 100px;
      height: 106px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .img_box {
        width: 64px;
        height: 64px;
        background: #f6f5f5;
        border-radius: 50%;
        text-align: center;
        line-height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          display: block;
        }
        .icon_active {
          display: none;
        }
      }
    }
    .con_desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: #555454;
      text-align: center;
      margin-top: 12px;
    }
  }
  li:nth-child(1) {
    width: 100px;
    height: 134px;
    border-left: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    background: #f6f5f5;
  }
  li:nth-child(2),
  li:nth-child(3),
  li:nth-child(4),
  li:nth-child(5),
  li:nth-child(6) {
    width: 138px;
  }
  li:nth-child(6) {
    border-right: 1px solid #dbdbdb;
  }
  li:nth-child(7) {
    width: 100px;
    height: 134px;
    margin-left: 20px;
    border: 1px solid #dbdbdb;
  }
  li:nth-child(2):hover,
  li:nth-child(3):hover,
  li:nth-child(4):hover,
  li:nth-child(5):hover,
  li:nth-child(6):hover {
    .con_part {
      .img_box {
        background: #aa1941;
        .icon_active {
          display: block;
        }
        .icon {
          display: none;
        }
      }
      .con_desc {
        color: #aa1941;
      }
    }
  }
  li:nth-child(1):hover,
  li:nth-child(7):hover {
    background: #aa1941;

    .con_desc {
      color: #ffffff;
    }
  }
}
</style>
