<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" :style="`opacity: ${item.major === 'hide' && 0}`">{{ 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" :style="`opacity: ${item.major === 'hide' && 0}`">{{ 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.ezijing.com/project/exed/tea-drill1.png" />
        </div>
        <div class="drill-c1">
          <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill21.png" />
          <div class="drill-c1_b">
            <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill22.png" />
            <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill23.png" />
          </div>
        </div>
        <div class="drill-c2">
          <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill31.png" />
          <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill32.png" style="margin: 8px 0;" />
          <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill33.png" />
        </div>
        <div class="drill-r">
          <img src="https://webapp-pub.ezijing.com/project/exed/tea-drill41.png" style="margin-bottom: 8px;" />
          <img src="https://webapp-pub.ezijing.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.ezijing.com/project/exed/914/teacher1.png',
          name: '钱栋玉',
          major: 'hide',
          intr: '原金轮股份（002722.SZ）执行总裁<br />北京大学经济学院特聘教授<br />西安交通大学客座教授'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher2.png',
          name: '梁山',
          major: 'hide',
          intr: '成美战略定位咨询公司合伙人<br />成美战略定位咨询公司唯一指定的定位理论传播者'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher3.png',
          name: '齐昊',
          major: '财务管理专家',
          intr: '原TOM集团（2383HK）财务负责人<br/>原澳大利亚KAPB集团财务副总裁<br/>原阿里影业（01060HK）财务总监<br/>主讲：《财务管理》'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher4.png',
          name: '王立中',
          major: '院长',
          intr: '深圳格物流程研究院院长<br/>原华为流程优化经理<br/>原维也纳酒店集团副总裁<br/>主讲：《流程管理》'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher5.png',
          name: '朱冠舟',
          major: '实战专家',
          intr: '原金蝶软件副总裁兼中央大客户事业部总经理<br/>清华、北大EMBA总裁班特聘教授<br/>主讲：《大客户销售》'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher6.png',
          name: '骆欣庆',
          major: 'hide',
          intr: '原腾邦国际（SZ 300178）首席创新官<br/>美团点评（HK 3690）金牌创新顾问<br/>清华大学EMBA总裁班特聘教授'
        }
      ],
      teacherList2: [
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher21.png',
          name: '齐磊',
          major: 'hide',
          intr: '原香港彭氏集团大区经理兼培训总监<br/>中国人民大学、清华大学、浙江大学等多所大学授课教授'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher22.png',
          name: '孙涛',
          major: 'hide',
          intr: '原清华大学经济管理学院高管教育中心高级总监<br/>原格局商学院联合创始人、CEO'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher23.png',
          name: '傅飞强',
          major: 'hide',
          intr: '北京化工大学经济管理学院 副教授<br/>原华夏基石企业管理咨询公司<br/>高级合伙人<br/>中央企业的人力资源管理工作经验'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher24.png',
          name: '程显礼',
          major: '财富管理专家',
          intr: '原美国金融管理学会中国区副总裁<br/>中国民营科技实业家协会高新技术产业分会理事长<br/>主讲：《财富管理》'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher25.png',
          name: '岳三峰',
          major: '总裁教练',
          intr: '北大纵横合伙人<br/>字节跳动飞书OKR教练<br/>腾讯组织发展总监<br/>主讲：《组织发展》'
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/exed/914/teacher26.png',
          name: '赵剑海',
          major: 'hide',
          intr: '原IDG资本副总裁<br/>清华大学MBA校友理事会理事<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>
