<template>
  <div class="max-width-center teacher-box">
    <card title="优秀师资">
      <div style="margin-top: 50px;">
        <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in teacherList1">
              <img :src="item.img" />
              <div class="name">{{ item.name }}</div>
              <div class="zc">{{ item.major }}</div>
              <div class="dec" v-html="item.intr"></div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px;">
        <div v-swiper:mySwiper2="swiperOption2" ref="mySwiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in teacherList2">
              <img :src="item.img" />
              <div class="name">{{ item.name }}</div>
              <div class="zc">{{ item.major }}</div>
              <div class="dec" v-html="item.intr"></div>
            </div>
          </div>
        </div>
      </div>
    </card>
    <card title="练：全程学习安排" class="max-width-center" style="margin-top: 95px;">
      <div class="drill-box">
        <div class="drill-l">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill1.png" />
        </div>
        <div class="drill-c1">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill21.png" />
          <div class="drill-c1_b">
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill22.png" />
            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill23.png" />
          </div>
        </div>
        <div class="drill-c2">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill31.png" />
          <img
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill32.png"
            style="margin: 8px 0;"
          />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill33.png" />
        </div>
        <div class="drill-r">
          <img
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill41.png"
            style="margin-bottom: 8px;"
          />
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/tea-drill42.png" />
        </div>
      </div>
    </card>
  </div>
</template>
<script>
import Card from '@/components/Card'
export default {
  name: 'teacher',
  components: {
    Card
  },
  data() {
    return {
      teacherList1: [
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher1.png',
          name: '刘玲玲',
          major: '教授',
          intr: '清华大学教授<br/>主讲：《宏观经济》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher2.png',
          name: '陈晋蓉',
          major: '教授',
          intr: '清华大学教授<br/>主讲：《资本运营》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher3.png',
          name: '肇越',
          major: '首席经济学家',
          intr: '香港致富证券有限公司首席经济学家<br/>清华大学五道口金融学院硕士导师<br/>主讲：《金融投资》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher4.png',
          name: '王赛',
          major: '合伙人',
          intr: '科特勒咨询集团（KMG）管理合伙人<br/>清华大学商业模式研究中心<br/>增长实验室主任<br/>主讲：《增长五线》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher5.png',
          name: '郑永强',
          major: '首席财务官',
          intr:
            '三井住友海上火灾保险(中国)公司CFO<br/>国际注册专业会计师协会<br/>全球董事会董事<br/>主讲：《企业数字化》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher6.png',
          name: '朱冠舟',
          major: '实战专家',
          intr: '原金蝶软件副总裁兼中央大客户事业部总经理<br/>清华、北大EMBA总裁班特聘教授<br/>主讲：《大客户销售》'
        }
      ],
      teacherList2: [
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher21.png',
          name: '夏惊鸣',
          major: '合伙人',
          intr: '华夏基石高级合伙人<br/>中国科学院大学实践导师<br/>主讲：《领导力》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher22.png',
          name: '徐怀玉',
          major: '院长',
          intr: '西姆国有经济研究院院长<br/>大连理工大学兼职教授<br/>主讲：《股权设计》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher23.png',
          name: '程显礼',
          major: '财富管理专家',
          intr: '原美国金融管理学会中国区副总裁<br/>中国民营科技实业家协会高新技术产业分会理事长<br/>主讲：《财富管理》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher24.png',
          name: '郝启东',
          major: '合伙人',
          intr: '品类咨询联合创始人<br/>北大创业训练营导师<br/>黑马学院常驻导师<br/>主讲：《品类定位升级》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher25.png',
          name: '齐昊',
          major: '财务管理专家',
          intr:
            '原TOM集团（2383HK）财务负责人<br/>原澳大利亚KAPB集团财务副总裁<br/>原阿里影业（01060HK）财务总监<br/>主讲：《财务管理》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher26.png',
          name: '岳三峰',
          major: '总裁教练',
          intr: '北大纵横合伙人<br/>字节跳动飞书OKR教练<br/>腾讯组织发展总监<br/>主讲：《组织发展》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher31.png',
          name: '赵剑海',
          major: '博士',
          intr:
            '海朋资本创始人<br/>原IDG资本副总裁<br/>清华大学MBA校友理事会理事<br/>央视《创业英雄汇》投资人嘉宾<br/>主讲：《创业战略》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher32.png',
          name: '贾奕琛',
          major: '股权激励专家',
          intr: '国牛投资董事长<br/>清华大学五道口金融学院特聘教授<br/>主讲：《股权激励》'
        },
        {
          img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/exed/teacher33.png',
          name: '王立中',
          major: '院长',
          intr: '深圳格物流程研究院院长<br/>原华为流程优化经理<br/>原维也纳酒店集团副总裁<br/>主讲：《流程管理》'
        }
      ],
      swiperOption: {
        speed: 400,
        autoplay: true,
        loop: true,
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 50
      },
      swiperOption2: {
        speed: 400,
        autoplay: true,
        loop: true,
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 50
      }
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.teacher-box {
  padding-top: 95px;
}
.max-width-center {
  width: 1200px;
  margin: 0 auto;
}
.swiper-slide {
  width: 260px;
  height: 400px;
  // padding: 30px 30px 0;
  background-color: #fff;
  box-sizing: border-box;
  img {
    width: 200px;
    margin: 30px auto 0;
    display: block;
  }
  .name {
    font-size: 16px;
    font-weight: bold;
    color: #666666;
    line-height: 100%;
    margin-top: 15px;
    text-align: center;
  }
  .zc {
    font-size: 16px;
    font-weight: bold;
    color: #666666;
    line-height: 100%;
    margin-top: 5px;
    text-align: center;
  }
  .dec {
    color: #666666;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
  }
}
.drill-box {
  display: flex;
  margin-top: 77px;
  img {
    width: 100%;
    display: block;
  }
  .drill-l {
    width: 233px;
  }
  .drill-c1 {
    width: 475px;
    margin-left: 8px;
    .drill-c1_b {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      img {
        width: 233px;
      }
    }
  }
  .drill-c2 {
    width: 233px;
    margin-left: 8px;
  }
  .drill-r {
    width: 233px;
    margin-left: 8px;
  }
}
</style>
