<template>
  <div
    style="
      padding: 100px 0 40px;
      background: url(https://webapp-pub.ezijing.com/www/pc/240531/lx-bg.png);
      background-size: cover;
    ">
    <AppCard title="$t('home.abroad.title')" titleAlign="center" style="margin: 0 auto">
      <template #title>
        <nuxt-link to="/studyAbroad">{{ $t('home.abroad.title') }}</nuxt-link>
      </template>
      <div class="box-row">
        <div class="box-l">
          <div class="box-red_title">学历项目</div>
          <div class="box-l_master" v-for="(item, index) in abroadList" :key="index">
            <div class="box-col__title" style="margin-top: 35px">{{ item.title }}</div>
            <div class="box-l_list">
              <div class="box-l_item" v-for="(cItem, cIndex) in item.children" :key="cIndex">
                <a :href="cItem.href" target="_blank">
                  <div class="box-item_title">{{ cItem.title }}</div>
                  <img :src="cItem.img" class="box-item_logo" />
                  <div class="box-item_btns">
                    <span v-for="(btn, btnIndex) in cItem.btn" :key="btnIndex">
                      <div class="box-item_btn" v-html="btn.name"></div>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="box-r">
          <div class="box-red_title">非学历项目</div>
          <div class="box-block" style="margin: 75px 0 30px">
            <img src="https://webapp-pub.ezijing.com/www/pc/fxl-img1.png" />
            <div style="margin-left: 10px" class="btn">交换生项目</div>
          </div>
          <div class="box-block">
            <img src="https://webapp-pub.ezijing.com/www/pc/fxl-img2.png" />
            <div style="margin-left: 10px" class="btn">教师访学项目</div>
          </div>
        </div>
      </div>
    </AppCard>
  </div>
</template>

<script setup>
const abroadList = [
  {
    title: '硕士',
    children: [
      {
        title: '雪城大学',
        href: 'https://syracuse-plus.ezijing.com/',
        img: 'https://webapp-pub.ezijing.com/www/pc/918/m1.png',
        btn: [{ name: '计算机工程硕士' }, { name: '计算机科学硕士' }, { name: '电气工程硕士' }],
      },
      {
        title: '斯蒂文斯理工学院',
        href: 'https://sit-plus.ezijing.com/',
        img: 'https://webapp-pub.ezijing.com/www/pc/918/m3.png',
        btn: [{ name: '工程管理硕士' }],
      },
      {
        title: '纽约州立大学石溪分校',
        href: 'https://sbu-plus.ezijing.com/',
        img: 'https://webapp-pub.ezijing.com/www/pc/918/m2.png',
        btn: [{ name: '金融学硕士' }],
      },
      {
        title: '德保罗大学',
        href: 'https://depaul-plus.ezijing.com/',
        img: 'https://webapp-pub.ezijing.com/www/pc/918/m4.png',
        btn: [{ name: '金融学硕士' }, { name: '北理工金融学硕士' }],
      },
    ],
  },
]
</script>

<style lang="scss" scoped>
.box-row {
  display: flex;
  justify-content: space-between;
  .box-l {
    width: 810px;
  }
  .box-r {
    width: 300px;
    .box-block {
      width: 300px;
      height: 106px;
      // background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px 12px 12px 12px;
      img {
        width: 150px;
        height: 80px;
        object-fit: cover;
      }
      &:hover {
        background-color: #aa1941;
        .btn {
          color: #fff;
        }
      }
      .btn {
        min-width: 120px;
        // line-height: 30px;
        padding: 6px 0;
        text-align: center;
        font-size: 12px;
        color: #333333;
        // border: 1px solid #d5d5d5;
        cursor: pointer;
        &:hover {
          // background-color: #aa1941;
          // border: 1px solid #aa1941;
          color: #fff;
        }
      }
    }
  }
  .box-red_title {
    line-height: 35px;
    background-color: #aa1941;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .box-l_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  .box-l_item {
    margin-bottom: 30px;
    // min-width: 180px;
    // height: 230px;
    // background-color: #fff;
    padding: 14px 15px 0;
    border-radius: 12px 12px 12px 12px;
    &:hover {
      background: #aa1941;
      .box-item_title {
        color: #fff;
      }
      .box-item_btn {
        color: #fff !important;
      }
    }
    .box-item_title {
      font-size: 15px;
      font-weight: bold;
      color: #aa1941;
      line-height: 100%;
      margin-bottom: 10px;
      text-align: center;
    }
    .box-item_btns {
      width: 150px;
      // border-top: 1px dashed #f47524;
      // margin-top: 10px;
      padding-top: 10px;
      padding-bottom: 20px;
      // height: 140px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      // align-items: center;
      .box-item_btn {
        min-width: 120px;
        // line-height: 30px;
        padding: 6px 0;
        // margin-bottom: 8px;
        text-align: center;
        font-size: 12px;
        color: #333333;
        // border: 1px solid #d5d5d5;
        cursor: pointer;
        &:hover {
          // background-color: #aa1941;
          // border: 1px solid #aa1941;
          color: #fff;
        }
      }
    }
  }
}
.box-col__title {
  padding-left: 10px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1;
  border-left: 1px solid var(--main-color);
}
.box-item_logo {
  width: 150px;
  height: 80px;
  object-fit: cover;
}
</style>
