<template>
  <div class="max-width-center">
    <card :title="$t('home.project.title')">
      <div class="card-list">
        <div class="card-item" v-for="(item, index) in listData" :key="index">
          <div class="item_media">
            <img :src="item.web_img_uri" />
          </div>
          <div class="item_desc">
            <div class="item_desc_tit">{{ item.item_desc_tit }}</div>
            <div class="item_desc_con" v-html="item.item_desc_con"></div>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
  name: 'projectFeatures',
  components: { AppLink, Card },
  data() {
    return {
      listData: [
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts1.png',
          item_desc_tit: '国家承认的正规机构',
          item_desc_con: '巴黎PAA商学院<br/>法国国家认可<br/>中国教育部认证'
        },
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts2.png',
          item_desc_tit: '申请制入学',
          item_desc_con: '学员资质审核<br/>不用参加博士考试<br/>在职学习'
        },
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts3.png',
          item_desc_tit: '学位含金量高',
          item_desc_con: '法国名校<br/>全球通用学位<br/>三年紧密团结的同窗友谊<br/>一生链接优质高端人脉'
        },
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts4.png',
          item_desc_tit: '中外资深教授',
          item_desc_con: '清华教授博导亲自授课<br/>国际高校教授联合教学<br/>业界导师拓宽实践渠道'
        },
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts5.png',
          item_desc_tit: '全球视野',
          item_desc_con: '世界紧密相连<br/>海外名校游学<br/>全球名企考察'
        },
        {
          web_img_uri: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/home-ts6.png',
          item_desc_tit: '灵活学习方式',
          item_desc_con: '动态沉浸式学习体验<br/>线上线下混合式学习<br/>实时互动、教学相长'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  .card-list {
    width: 1200px;
    position: relative;
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 30px;
    .card-item {
      height: 280px;
      position: relative;
      .item_media {
        img {
          transition: 0.3s;
          width: 100%;
          height: 100%;
        }
      }
      .item_desc {
        position: absolute;
        top: 70px;
        right: 35px;
        text-align: right;
      }
      .item_desc_tit {
        display: inline-block;
        padding-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #aa1941;
        line-height: 1;
        border-bottom: 1px solid #aa1941;
      }
      .item_desc_con {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 400;
        color: #424242;
        line-height: 32px;
      }
    }
  }

  .max-width-center {
    width: 1200px;
    margin: 64px auto 0;
  }
}
.is-h5 {
  .card-list {
    overflow-x: auto;
    position: relative;
    margin-top: 17px;
    display: flex;
    // justify-content: space-around;
    .card-item {
      margin-right: 10px;
      flex: 0 0 1.93rem;
      height: 1.4rem;
      overflow: hidden;
      position: relative;
      .item_media {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        img {
          transition: 0.3s;
          width: 100%;
          height: 100%;
        }
        &:after {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.6);
        }
      }
      .item_desc {
        position: absolute;
        left: 0;
        top: 0;

        width: 100%;
        height: 2rem;
        // background-color: #ededed;
        opacity: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 0.1rem 0.1rem 0.4rem;
        // transform-origin: bottom;
        .item_desc_tit {
          font-size: 0.16rem;
          font-weight: 500;
          color: #fff;
          line-height: 0.3rem;
          width: 100%;
          text-align: center;
          white-space: nowrap;
        }
        .item_desc_con {
          font-size: 0.12rem;
          font-weight: 400;
          color: #fff;
          // margin-top: 0.2rem;
          line-height: 0.24rem;
          text-align: justify;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
