<template>
  <div style="background-color: #fff;overflow: hidden;">
    <AppCard title="$t('home.degree.title')" titleAlign="center">
      <template #title>
        <nuxt-link to="/internationalDegree">{{ $t('home.degree.title') }}</nuxt-link>
      </template>
      <div class="box-row">
        <div class="box-col" v-for="(col, index) in degreeList" :key="index">
          <div class="box-col__title">{{ col.title }}</div>
          <ul class="box-wrap">
            <li v-for="(item, index) in col.children" :key="index">
              <AppLink :data="item">
                <div class="box-inner">
                  <img :src="item.img" class="box-pic" />
                  <div class="box-desc" v-html="item.desc"></div>
                </div>
              </AppLink>
            </li>
          </ul>
        </div>
      </div>
    </AppCard>
  </div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      degreeList: [
        {
          title: this.$t('home.degree.tabBtn1'),
          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'),
          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: '博士',
          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',
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/cbu-enterprise.png',
              desc: '数字领导力<br/>企业家学者DBA',
              href: 'https://dld.ezijing.com/'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.box-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  column-gap: 100px;
}
.box-col {
  position: relative;
}
.box-col:nth-child(even) {
  &::before {
    position: absolute;
    top: 42px;
    bottom: 0;
    left: -50px;
    content: '';
    width: 0;
    border: 1px dashed #c4c4c4;
  }
}
.box-col__title {
  padding-left: 10px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1;
  border-left: 1px solid var(--main-color);
}
.box-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.box-inner {
  display: flex;
  align-items: center;
  padding: 10px;
  &:hover {
    color: #fff;
    background-color: var(--main-color);
  }
  .box-pic {
    width: 120px;
    height: 80px;
  }
  .box-desc {
    flex: 1;
    text-align: center;
  }
}
</style>
