<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="outstanding">
        <div class="alumni">
          <h5>{{ $t('outstanding.title1') }}</h5>
          <ul class="card-list">
            <li v-for="(item, index) in alumniList" :key="index">
              <div class="avatar">
                <img :src="item.avatar" />
              </div>
              <div class="text">
                <h6>{{ item.name }}</h6>
                <p v-for="it in item.post" :key="it">{{ it }}</p>
              </div>
            </li>
          </ul>
          <h5>{{ $t('outstanding.title2') }}</h5>
          <ul class="card-list">
            <li v-for="item in studentList" :key="item.name">
              <div class="avatar">
                <img :src="item.avatar" />
              </div>
              <div class="text">
                <h6>{{ item.name }}</h6>
                <p v-for="it in item.education" :key="it">{{ it }}</p>
                <div v-for="it in item.post" :key="it">{{ it }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </app-frame>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      alumniList: [
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc1.jpg',
          name: 'Daniel Aylmer',
          post: ['首席运营官', '洲际酒店集团大中华区', 'César Ritz 1995届毕业生']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc2.jpg',
          name: 'Tuomas Laakso',
          post: ['欧洲发展部主管', '万豪国际酒店，丽思卡尔顿酒店', '瑞士 苏黎世', 'César Ritz 1997届毕业生']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc3.jpg',
          name: 'Edward Chan',
          post: ['高级副总裁', '亚太区首席发展官', 'Hard Rock 硬石有限公司', 'César Ritz 1987届毕业生']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc4.jpg',
          name: 'Michael Smithuis',
          post: ['总经理', '费尔蒙酒店集团蒙特勒宫', '瑞士 蒙特勒', 'HTTl 1990届毕业生']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc5.jpg',
          name: 'Philip Chong',
          post: ['F&B 副总裁', '金沙中国有限公司', 'César Ritz 1987届毕业生']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc6.jpg',
          name: 'Teik Kong Chong',
          post: ['AVP,F&B,North China', '香格里拉酒店集团', 'César Ritz 1987届毕业生']
        }
      ],
      studentList: [
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-1.jpg',
          name: '温龙',
          education: ['希尔顿欢朋快乐大学', '校长', 'SHMS MBA 2020冬季班']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-2.jpg',
          name: '史雪梅',
          education: ['华住组织人才发展中心', '总监', 'SHMS MBA 2020冬季班']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-3.jpg',
          name: '王诤言',
          education: ['三亚海棠湾天房洲际度假酒店', '总经理', 'SHMS MBA 2021春季班']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-4.jpg',
          name: '王洪岩',
          education: ['张家港万豪酒店', '业主代表 & 副总经理', 'SHMS MBA 2021春季班']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-5.jpg',
          name: '余亮',
          education: ['层到酒店管理有限公司', '董事长', 'SHMS MBA 2022春季班']
        },
        {
          avatar: 'https://webapp-pub.ezijing.com/project/seg-shms/alumni-y0402-6.jpg',
          name: '张丽霞',
          education: ['广州长隆酒店', '常务副总经理', 'SHMS MBA 2022春秋季班']
        }
      ],
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/seg-shms/project-js48-03.jpg',
        slider: [
          {
            name: this.$t('menu.alumniChild.outstanding'),
            path: '/alumni/outstanding'
          },
          {
            name: this.$t('menu.alumniChild.share'),
            path: '/alumni/sharing'
          }
        ]
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .alumni {
    padding: 30px 74px;
    h5 {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      line-height: 74px;
      color: #333333;
    }
    .card-list {
      margin-bottom: 30px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        width: 410px;
        height: 195px;
        background: #ebebeb;
        display: flex;
        margin: 0 20px 21px 0;
        transition: 0.5s ease-in-out;
        .avatar {
          width: 204px;
          height: 100%;
          img {
            width: 157px;
            height: 157px;
            margin: 20px 0 0 23px;
          }
        }
        .text {
          margin-top: 30px;
          h6 {
            font-size: 18px;
            font-family: HelveticaNeueLTPro-Md;
            line-height: 18px;
            color: #aa1941;
            margin-bottom: 10px;
          }
          p {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            line-height: 22px;
            color: #666;
          }
          div {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            line-height: 18px;
            color: #666;
          }
        }
      }
      li:nth-child(even) {
        margin-right: 0;
      }
      li:hover {
        background: #aa1941;
        .text {
          h6,
          p,
          div {
            color: #fff;
          }
        }
      }
    }
  }
}
.is-h5 {
  .alumni {
    padding: 0 0.16rem 0.35rem;
    h5 {
      font-size: 0.14rem;
      font-weight: 700;
      line-height: 100%;
      padding: 0.2rem 0;
      color: #333;
    }
    .card-list {
      margin-bottom: 0.15rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        box-sizing: border-box;
        width: 1.68rem;
        background: #ebebeb;
        padding: 0.11rem 0.05rem;
        display: flex;
        margin-bottom: 0.06rem;
        margin-left: 0.06rem;
        &:nth-child(odd) {
          margin-left: 0;
        }
        .avatar {
          // width: 204px;
          // height: 100%;
          img {
            width: 0.63rem;
            height: 0.63rem;
            display: block;
          }
        }
        .text {
          // margin-top: .3rem;
          margin-left: 0.1rem;
          h6 {
            font-size: 0.11rem;
            color: #aa1941;
            font-weight: 700;
            white-space: nowrap;
          }
          p {
            font-size: 0.1rem;
            line-height: 0.15rem;
            color: #666;
          }
          div {
            font-size: 0.07rem;
            line-height: 0.15rem;
            color: #666;
            margin-top: 0.02rem;
          }
        }
      }
      li:nth-child(even) {
        margin-right: 0;
      }
      li:hover {
        background: #aa1941;
        .text {
          h6,
          p,
          div {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
