<template>
  <div style="width: 100%; height: 100%;" class="">
    <div class="banner"></div>
    <div class="default-width white-bgc px-10 my-3">
      <div class="py-15">
        <h1 class="title">公司简介</h1>
        <p class="mb-5 mt-10">门墩儿是聚焦酒店及现代服务业人力资源技术与人才数据服务的互联网科技公司。</p>
        <p>通过一体化的人力资源运营技术平台，致力于为企业提供人力资源数据服务支持，同时基于数据与技术，为企业提供线上招聘、猎头、实习生及知识付费等全方位人力资源解决方案。</p>
      </div>
      <div class="d-flex box">
        <div class="box-item" v-for="(val, i) in list" :key="i" :style="{'background-image': `url('${val.url}')`}">
          <p class="font-size-19 mb-3">{{ val.title }}</p>
          <p class="font-size-14 pt-3" style="border-top: 1px solid rgba(255, 255, 255, .5)">{{ val.desc }}</p>
        </div>
      </div>
      <div class="py-15">
        <h1 class="title">学术和行业之声</h1>
        <div class="mt-10">
          <div v-for="(val, i) in introduce" :key="i" :style="{'text-align': i % 2 === 0 ? 'left' : 'right'}" class="py-15 bole-item">
            <div class="left">
              <v-img :src="val.avatar" width="250" height="250"></v-img>
            </div>
            <div class="right" :style="{'right': i % 2 === 0 ? '0' : ''}">
              <p class="font-size-18">{{ val.name }}</p>
              <p class="font-size-14 my-1">{{ val.job }}</p>
              <p class="font-size-14">{{ val.company }}</p>
              <p class="font-size-14 mt-2">{{ val.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'about-index'})

const list = [
  { title: '公司使命', desc: '成为中国酒店行业可信赖的人力资源科技公司。', url: 'https://minio.citupro.com/dev/menduner/home/introduct-bg-01.png' },
  { title: '公司愿景', desc: '人力数据技术赋能人才发现，助力酒店企业提质增效，实现业务可持续成长。', url: 'https://minio.citupro.com/dev/menduner/home/introduct-bg-02.png' }
]

const introduce = [
  {
    name: 'Professor Kaye Chon',
    job: 'Dean and Chair Professor, and Walter Kwok Foundation Professor in International Hospitality Management,School of Hotel and Tourism Management',
    company: 'The Hong Kong Polytechnic University',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%871.png',
    desc: 'The unprecedented growth of hotel industry in China creates a huge demand for qualified workers for the industry. This platform is very much welcomed because it will provide a win-win solution to both the demand and supply side of the hospitality industry human capital.'
  },
  {
    name: 'Benjamin Yan 严竹明',
    job: 'Chairman',
    company: 'Ruiyee Hospitality',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%872.png',
    desc: '恭喜门墩儿成功上线。如何遴选优质酒店业人才一直是我们的一大难题，人才关乎企业未来，而门墩儿的人工智能、大数据等技术必将助我们一臂之力，用人问题从此迎刃而解。'
  },
  {
    name: 'Thierry Brinte',
    job: 'General Manager',
    company: 'Gran Hotel Bristol by Kempinski',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%873.png',
    desc: 'I wish to offer my congratulations to Simon and his teammates in launching this fully-dedicated talent career service and development social platform for the hotel industry in China. The platform will benefit both hotel professionals and hotel employers in their endeavors to find the right and qualified hotel talents to ensure successful hotel business operations.'
  },
  {
    name: 'Emily Zhu 竺丽萍',
    job: '总经理',
    company: '杭州新侨饭店',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%874.png',
    desc: '“有所为，有所不为”，只做专业领域，且只做专业领域的金字塔市场， 这是“门墩儿”平台的特点。既深谙买方市场的需求，又有卖方市场的广阔人脉，这是“门墩儿”平台的特长。“千军好买，一将难求”，作为酒店业主方，我们需要像“门墩儿”这样能提供“私人定制”服务的合作伙伴。我个人非常看好“门墩儿”平台的发展前景，Bravo !!'
  },
  {
    name: 'Antony Platford',
    job: 'Seasoned Hotelier',
    company: 'Hotel and Tourism Consulting',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%875.png',
    desc: 'I wish to congratulate Simon Tian on the establishment of Menduner. There is no doubt of the future success for this enterprise and its clients given the proven ability, skills and professional experience that Simon and his team can provide.'
  },
  {
    name: 'Jack Xiao 肖君',
    job: '高级副总裁',
    company: '美好生活第三方酒店管理 (深圳) 有限公司',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%876.png',
    desc: '门墩儿是专属于酒店行业的职业发展社交平台。希望能在这里携手更多志同道合的伙伴，追求我们共同的梦想。'
  },
  {
    name: 'Nelson Li 李可',
    job: '助理总经理兼武汉费尔蒙酒店业主代表',
    company: '泛海酒店投资管理有限公司',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%877.png',
    desc: '世界每时每刻都在发生变化，唯一不变的是我们对于这个行业的初心和热情。很高兴看到一群有梦想的酒店人为了遇见更好的自己，为了中国酒店业的未来勇敢的迈出了这一步…“精诚所至 金石为开”，愿“门墩儿”与中国酒店人共同成长，加油！'
  },
  {
    name: 'Gerhard H. Zimmer',
    job: 'President',
    company: 'ZYG INC.',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%878.png',
    desc: 'Simon, a very talented Hotelier who has made good use of his technical skills, combined with excellent human relations to provide a solid foundation for a most successful operation.'
  },
  {
    name: 'Ann Leung 梁旭君',
    job: '创始人',
    company: '禾禾木文化发展有限公司',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%879.png',
    desc: '找到对的门，认识对的人. 门墩儿，比酒店人更懂酒店人，从这里开启不同的圈层，打开职业生涯你不敢想象的可能！'
  },
  {
    name: 'Henry Sun 孙伟杰',
    job: '创始人',
    company: 'Mentor共享教室',
    avatar: 'https://minio.citupro.com/dev/menduner/home/about/%E5%9B%BE%E7%89%8710.png',
    desc: 'What a day and milestone for Chinese hospitality industry! Congratulations to Simon and his team on providing this great platform to hoteliers, where we will no longer feel alone when building our careers. Knowing someone experienced and knowledgeable is there for us, our fellow hoteliers, is fantastic and extremely helpful. Go Menduner!'
  }
]
</script>

<style scoped lang="scss">
.banner {
  width: 100%;
  height: 390px;
  background-image: url('https://minio.citupro.com/dev/menduner/home/about-bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title {
  font-weight: 400;
  text-align: center;
}
.box {
  width: 100%;
  &-item {
    width: 50%;
    height: 150px;
    border-radius: 8px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    color: #fff;
    &:nth-child(2n) {
      margin-left: 40px;
    }
  }
}
.bole-item {
  padding: 30px 0;
  position: relative;
}
.left {
  display: inline-block;
  width: 300px;
}
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  line-height: 2;
  text-align: center;
  vertical-align: middle;
  width: 598px;
}
</style>

