<template>
  <AppCard title="$t('home.degree.title')">
    <template #title>
      <nuxt-link to="/internationalDegree">{{ $t('home.degree.title') }}</nuxt-link>
    </template>
    <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>
  </AppCard>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      degreeList: [
        {
          title: this.$t('home.degree.tabBtn1'),
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med1.png',
              desc: this.$t('home.degree.med'),
              href: 'https://cu.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_msf.png',
              desc: this.$t('home.degree.msf'),
              href: 'https://kelley.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_map.png',
              desc: this.$t('home.degree.map'),
              href: 'https://ciis.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med2.png',
              desc: this.$t('home.degree.cuw'),
              href: 'https://cuw.ezijing.com/index'
            }
          ]
        },
        {
          title: this.$t('home.degree.tabBtn2'),
          isLine: false,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba1.png',
              desc: this.$t('home.degree.mba'),
              href: 'https://marywood.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba2.png',
              desc: this.$t('home.degree.international'),
              href: 'https://shms.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba3.png',
              desc: this.$t('home.degree.caas'),
              href: 'https://caas.ezijing.com/'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
            box-sizing: border-box;
            .con_desc {
              color: #f9f8f8;
            }
          }
          .con_img {
            width: 128px;
            height: 90px;
          }
          .con_desc {
            width: 128px;
            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>
