<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">
          <div class="line" v-if="item.isLine"></div>
          <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>
      </div>
    </div>
  </AppCard>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      degreeList: [
        {
          title: this.$t('home.degree.tabBtn1'),
          isLine: false,
          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: true,
          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/'
            }
          ]
        },
        {
          title: '— 博士 —',
          isLine: false,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/cbu-online.png',
              desc: '加州浸会大学<br/>在线工商管理博士DBA',
              href: 'https://cbu-online.ezijing.com/'
            }
          ]
        },
        {
          title: '— 企业家学者DBA —',
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/cbu-enterprise.png',
              desc: '数字领导力<br/>企业家学者DBA',
              href: 'https://cbu-enterprise.ezijing.com/'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.content_con {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  padding: 40px 32px;
  background: #ffffff;

  .con_left {
    height: 192px;
    .left_tit {
      font-size: 16px;
      color: #000000;
      text-align: center;
    }
    .left_content {
      display: flex;
      margin-top: 20px;
      .left_con {
        display: flex;
        justify-content: space-around;
        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;
        border: 1px dashed #c4c4c4;
        margin: 0 30px;
      }
    }
  }
}
</style>
