<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 studentList" :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>
        </div>
      </div>
    </app-frame>
  </div>
</template>

<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      studentList: [
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t1.png',
          name: '甄清波',
          post: ['上海洛安资产管理集团有限公司', '创始人/总裁']
        },
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t2.png',
          name: '张志刚',
          post: ['抚州市临川区第一文化馆', '白浒窑陶瓷非遗传承人']
        },
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t3.png',
          name: '纪元明',
          post: ['华景川集团有限公司', '联合创始人/总裁']
        },
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t4.png',
          name: '廖述斌',
          post: ['简道众创投资股份有限公司', '创始人/总裁']
        },
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t5.png',
          name: '孙元欣',
          post: ['橫琴元博文创资本管理中心', '西安中星量子科技产业园有限公司', '董事长']
        },
        {
          avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t6.png',
          name: '马波',
          post: ['上海广播电视台（集团）兰馨文化', '副总经理']
        }
      ],
      frameParams: {
        banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/alumni_banner.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: .2rem .16rem .35rem;
    h5 {
      font-size: .14rem;
      font-weight: 700;
      line-height: 100%;
      padding: .2rem 0;
      color: #333;
    }
    .card-list {
      margin-bottom: .15rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        box-sizing: border-box;
        width: 1.68rem;
        background: #ebebeb;
        padding: .11rem .05rem;
        display: flex;
        margin-bottom: .06rem;
        margin-left: .06rem;
        &:nth-child(odd){
          margin-left: 0;
        }
        .avatar {
          // width: 204px;
          // height: 100%;
          img {
            width: .63rem;
            height: .63rem;
            display: block;
          }
        }
        .text {
          // margin-top: .3rem;
          margin-left: .1rem;
          h6 {
            font-size: .11rem;
            color: #aa1941;
            font-weight: 700;
            white-space: nowrap;
          }
          p {
            font-size: .1rem;
            line-height: .15rem;
            margin-top: .05rem;
            color: #666;
          }
          div {
            font-size: .07rem;
            line-height: .15rem;
            color: #666;
            margin-top: .02rem;
          }
        }
      }
      li:nth-child(even) {
        margin-right: 0;
      }
      li:hover {
        background: #aa1941;
        .text {
          h6,
          p,
          div {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

