<template>
  <div class="main_content">
    <h5 class="gov_tit">个人</h5>
    <div class="content_top">
      <h6 class="top_title">国际学位</h6>
      <div class="top_con">
        <div class="con_left" v-for="(item, index) in degreeList" :key="index">
          <div class="left_tit">{{ item.title }}</div>
          <div class="left_content">
            <ul class="left_con">
              <li v-for="(it, index) in item.children" :key="index">
                <AppLink :data="it">
                  <img :src="it.img" alt="" class="con_img" />
                  <div class="con_desc" v-html="it.desc"></div>
                </AppLink>
              </li>
            </ul>
            <div class="line" v-if="item.isLine"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_top">
      <h6 class="top_title">国际留学</h6>
      <div class="top_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>
  </div>
</template>

<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      degreeList: [
        {
          title: '— 硕士 —',
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med1.png',
              desc: '教育学硕士(儿童)<br/>MED',
              href: 'https://cu.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_msf.png',
              desc: '金融硕士<br/>MSF',
              href: 'https://kelley.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_map.png',
              desc: '应用心理学硕士<br/>MAP',
              href: 'https://ciis.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med2.png',
              desc: '教育学硕士(家庭) <br/>MED',
              href: 'https://cuw.ezijing.com/index'
            }
          ]
        },
        {
          title: '— MBA —',
          isLine: false,

          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba1.png',
              desc: '数字领导力方向<br/>MBA',
              href: 'https://marywood.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba2.png',
              desc: '酒店和旅游方向<br/>MBA',
              href: 'https://shms.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba3.png',
              desc: '餐饮管理方向<br/>MBA',
              href: 'https://caas.ezijing.com/'
            }
          ]
        }
      ],

      abroadList: [
        {
          title: '— 硕士直通车 —',
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
              desc: '纽约州立大学石溪分校<br/>金融学硕士保研项目',
              href: 'https://sbu-plus.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
              desc: '斯蒂文斯理工学院<br/>工程管理硕士保研项目',
              href: 'https://sit-plus.ezijing.com/'
            }
          ]
        },
        {
          title: '— 博士 —',
          isLine: false,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
              desc: '加州浸会大学<br/>工商管理博士项目DBA',
              href: 'https://cbu-plus.ezijing.com/'
            }
          ]
        }
      ]
    }
  }
}
</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;
}
.content_top {
  margin-top: 48px;
  .top_title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  .top_con {
    margin-top: 10px;
    display: flex;

    .con_left {
      height: 192px;
      display: flex;
      flex-direction: column;
      // align-items: center;
      .left_tit {
        font-size: 16px;
        color: #000000;
      }
      .left_content {
        display: flex;
        .left_con {
          display: flex;
          justify-content: space-around;
          margin-top: 30px;
          li {
            width: 148px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;

            &:hover {
              background: #aa1940;
              padding-top: 10px;
              padding-bottom: 14px;
              margin-top: -10px;
              .con_desc {
                color: #f9f8f8;
              }
            }
            .con_img {
              width: 128px;
              height: 90px;
            }
            .con_desc {
              text-align: center;
              margin-top: 10px;
              font-size: 14px;
              line-height: 18px;
              color: #333333;
            }
          }
          li:not(:last-child) {
            margin-right: 10px;
          }
        }
        .line {
          width: 0px;
          height: 129px;
          border: 1px dashed #c4c4c4;
          margin: 30px 25px 5px 25px;
        }

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

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