<template>
  <AppCard :title="$t('home.abroad.title')">
    <template #title>
      <nuxt-link to="/studyAbroad">{{ $t('home.abroad.title') }}</nuxt-link>
    </template>

    <div class="content_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>
  </AppCard>
</template>

<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      abroadList: [
        {
          title: this.$t('home.degree.tabBtn1'),
          isLine: true,
          children: [
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
              desc: this.$t('home.abroad.sbu'),
              href: 'https://sbu-plus.ezijing.com/'
            },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
              desc: this.$t('home.abroad.sit'),
              href: 'https://sit-plus.ezijing.com/'
            }
          ]
        },
        {
          title: this.$t('home.abroad.tabBtn2'),
          isLine: false,
          children: [
            // {
            //   img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
            //   desc: this.$t('home.abroad.cbu_online'),
            //   href: 'https://cbu-online.ezijing.com/'
            // },
            {
              img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
              desc: this.$t('home.abroad.cbu_plus'),
              href: 'https://cbu-plus.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 {
    .left_tit {
      font-size: 16px;
      color: #000000;
      text-align: center;
    }
    .left_content {
      display: flex;
      margin-top: 20px;

      .left_con1 {
        display: flex;

        li {
          width: 260px;
          height: 120px;
          background: #f9f8f8;
          box-sizing: border-box;
          .con {
            width: 260px;
            height: 120px;
            display: flex;
            align-items: center;
            padding: 10px;
          }
          &:hover {
            background: #aa1940;
            .con_desc {
              color: #f9f8f8;
            }
          }
          .con_img {
            width: 128px;
            height: 90px;
          }
          .con_desc {
            margin-left: 4px;
            text-align: left;
            width: 95px;
            font-size: 14px;
            line-height: 18px;
            color: #333333;
            // white-space: nowrap;
          }
        }
        li:nth-child(2) {
          margin-left: 20px;
        }
      }
      .line1 {
        width: 0px;
        border: 1px dashed #c4c4c4;
        margin: 0 30px;
      }
    }
  }
  .con_left:nth-child(1) {
    .left_tit {
      margin-left: 275px;
    }
  }
  .con_left1:nth-child(1) {
    .left_tit {
      margin-left: 226px;
    }
  }
  .con_left:nth-child(2) {
    align-items: center;
  }
}
</style>
