<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="outstanding">
        <div class="alumni">
          <div class="topic">
            <h5>{{ $t("outstanding.title") }}</h5>
            <p>
              {{ $t("outstanding.content") }}
            </p>
          </div>
          <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/caas/tx-Sampson%20Chen.png",
          name: "Sampson Chen",
          post: [
            "Pizza Express 披萨连锁集团",
            "区域总监",
            "中国 香港",
            "CAAS 1999届毕业生",
          ],
        },
        {
          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/caas/tx-Meghan%20Crocker.png",
          name: "Meghan Crocker",
          post: [
            "Breads Bakery 烘焙连锁集团",
            "CPO 首席人力官",
            "美国 纽约",
            "CAAS 2016届毕业生",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/caas/tx-Dus%CC%8Can%20Polic%CC%81.png",
          name: "Dušan Polić",
          post: [
            "康帕斯餐饮集团",
            "总经理",
            "中国 上海",
            "César Ritz 2014届毕业生",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/caas/tx-Alexander%20Schijf.png",
          name: "Alexander Schijf",
          post: [
            "宝格丽酒店",
            "餐饮总监",
            "中国 北京",
            "César Ritz 2012届毕业生",
          ],
        },
        // {
        //   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/caas/tx-Ryan%20Zimmer.png",
          name: "Ryan Zimmer",
          post: [
            "马可波罗香港酒店 ",
            "行政主厨",
            "中国 香港",
            "CAAS 2002届毕业生",
          ],
        },
        {
          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-jc7.jpg",
          name: "沈冬梅",
          education: [
            "中国电信怡沁园度假村",
            "常务副总经理",
            "SHMS MBA 2021春季班",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc8.jpg",
          name: "路瑶",
          education: [
            "华为集团安朴酒店管理公司",
            "副总经理",
            "SHMS MBA 2020冬季班",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc9.jpg",
          name: "凌云",
          education: ["东呈国际集团", "集团副总裁", "SHMS MBA 2021春季班"],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc10.jpg",
          name: "宗锴",
          education: [
            "国资委甘肃文旅酒店",
            "管理有限公司",
            "常务副总经理",
            "SHMS MBA 2021春季班",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc11.jpg",
          name: "王诤言",
          education: [
            "三亚海棠湾天房洲际度假",
            "酒店总经理",
            "SHMS MBA 2021春季班",
          ],
        },
        {
          avatar:
            "https://webapp-pub.ezijing.com/project/seg-shms/alumni-jc12.jpg",
          name: "LEOW KHUN WEI",
          education: ["兰州凯悦酒店", "总经理", "SHMS MBA 2021春季班"],
        },
      ],
      frameParams: {
        banner:
          "https://webapp-pub.ezijing.com/project/caas/alumni-outstanding_banner.png",
        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>
.topic {
  margin-bottom: 40px;
}
.is-pc {
  .alumni {
    padding: 30px 74px;

    p {
      // margin-top: 22px;
      font-size: 16px;
      line-height: 34px;
      color: #424424;
    }
    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;
    p {
      font-size: 0.12rem;
      line-height: 0.24rem;
      color: #424242;
    }
    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>
