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

<script>
export default {
  data() {
    return {
      govList: [
        {
          img: '',
          imgActive: '',
          desc: `数字人才<br />产教融合<br />实践基地`,
          isChild: false
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian_active.png',
          desc: `数字经济<br />产业学院`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan_active.png',
          desc: `数字经济 <br />实验室`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx_active.png',
          desc: `数字经济 <br />职业技能中心`,
          isChild: true
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt.png',
          imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt_active.png',
          desc: `数字经济产业& <br />人才服务平台`,
          isChild: true
        },
        {
          img: '',
          imgActive: '',
          desc: `数字化管理<br />高级培训`,
          isChild: false
        },
        {
          img: '',
          imgActive: '',
          desc: `紫荆E-SAAS <br />平台`,
          isChild: false
        },
        {
          img: '',
          imgActive: '',
          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;
      .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) {
    padding-left: 14px;
  }

  li:nth-child(2),
  li:nth-child(3),
  li:nth-child(4) {
    width: 100px;
  }
  li:nth-child(5) {
    width: 150px;
    height: 134px;
    border-right: 1px solid #dbdbdb;
  }
  li:nth-child(6),
  li:nth-child(7),
  li:nth-child(8) {
    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 {
    .con_part {
      background: #aa1941;
      .icon_active {
        display: block;
      }
      .icon {
        display: none;
      }
      .con_desc {
        color: #ffffff;
      }
    }
  }
  li:nth-child(1):hover,
  li:nth-child(6):hover,
  li:nth-child(7):hover,
  li:nth-child(8):hover {
    background: #aa1941;
    .con_desc {
      color: #ffffff;
    }
  }
}
</style>
