<template>
  <div class="main_content">
    <h5 class="gov_tit">留学深造</h5>
    <div class="content_con">
      <div class="con_left con_left1" v-for="(item, index) in abroadList" :key="index">
        <div class="left_tit">{{ item.title }}</div>
        <div class="left_content">
          <ul class="left_con1">
            <li v-for="(it, index) in item.children" :key="index">
              <AppLink :data="it">
                <div class="con">
                  <img :src="it.img" alt="" class="con_img" />
                  <div class="con_desc" v-html="it.desc"></div>
                </div>
              </AppLink>
            </li>
          </ul>
          <div class="line1" v-if="item.isLine"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      abroadList: [
        {
          title: '— 硕士 —',
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
              desc: '纽约州立大学<br/>石溪分校<br/>金融学硕士<br/>保研项目NSF',
              href: 'https://sbu-plus.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
              desc: '斯蒂文斯理工学院<br/>工程管理硕士<br/>保研项目MEM',
              href: 'https://sit-plus.ezijing.com/'
            }
          ]
        },
        {
          title: '— 博士 —',
          isLine: false,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
              desc: '加州浸会大学<br/>在线工商管理<br/>博士项目DBA',
              href: 'https://cbu-online.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
              desc: '加州浸会大学<br/>全日制工商管理<br/>博士项目DBA',
              href: 'https://cbu-plus.ezijing.com/'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  width: 1200px;
  margin: 66px auto;
  .gov_tit {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
  }

  .content_con {
    margin-top: 21px;
    display: flex;
    background: #ffffff;
    padding: 43px 30px 50px 30px;

    .con_left {
      height: 192px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      .left_tit {
        font-size: 16px;
        color: #000000;
      }
      .left_content {
        display: flex;

        .left_con1 {
          display: flex;
          margin-top: 30px;

          li {
            width: 260px;
            height: 110px;
            background: #f9f8f8;
            box-sizing: border-box;
            .con {
              width: 260px;
              height: 110px;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 10px 25px 10px 10px;
            }
            &:hover {
              background: #aa1940;
              .con_desc {
                color: #f9f8f8;
              }
            }
            .con_img {
              width: 128px;
              height: 90px;
            }
            .con_desc {
              margin-left: 8px;
              text-align: center;
              width: 84px;
              font-size: 14px;
              line-height: 18px;
              color: #333333;
              white-space: nowrap;
            }
          }
          li:nth-child(2) {
            margin-left: 20px;
          }
        }
        .line1 {
          width: 0px;
          height: 110px;
          border: 1px dashed #c4c4c4;
          margin: 30px 30px;
        }
      }
    }
    .con_left:nth-child(1) {
      .left_tit {
        margin-left: 275px;
      }
    }
    .con_left1:nth-child(1) {
      .left_tit {
        margin-left: 226px;
      }
    }
    .con_left:nth-child(2) {
      align-items: center;
    }
  }
}
</style>
