<template>
  <div class="main_content">
    <h5 class="gov_tit">国际学位</h5>
    <div class="content_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>
</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/'
            }
          ]
        }
      ]
    }
  }
}
</script>

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

  .content_con {
    margin-top: 20px;
    display: flex;
    padding: 59px 40px 49px 32px;
    background: #ffffff;

    .con_left {
      height: 192px;
      display: flex;
      flex-direction: column;
      .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_left:nth-child(2) {
      align-items: center;
    }
  }
}
</style>
