<template>
  <div class="layout_com_page_banner major-kc-wm" :style="{ 'min-height': 700 + 'px' }">
    <div class="pop"></div>
    <h3 style="padding-top:30px;">
      <span>师资介绍</span>
    </h3>
    <div class="major-kc-wm-body" @mouseover="mouseOver" @mouseleave="mouseLeave">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in wmList" :key="index">
          <div>
            <div class="major-kc-wm-list" v-for="(cItem, cIndex) in item" :key="cIndex + 's'">
              <div class="list-img">
                <img :src="cItem.img" style="width: 162px" />
              </div>
              <div class="list-body">
                <span class="font-size-18 nowrap title">{{ cItem.title }}</span>
                <span class="font-size-14 wm-red zs">{{ cItem.label }}</span>
                <span v-for="sItem in cItem.main" :key="sItem" class="font-size-14 mian-txt">{{ sItem }}</span>
              </div>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  data() {
    return {
      wmList: [
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher10.png',
            title: 'Dr.Christ Speicher',
            label: '',
            main: [
              '玛丽伍德大学商业与全球创新学院',
              '执行院长',
              '创新创业学副教授',
              '全球最大无人机培训公司',
              '「DARTdrones」创始人',
              '玛丽伍德大学EMBA，天普大学博士'
            ]
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher11.png',
            title: 'Dr.Rex Dumdum',
            label: '',

            main: ['玛丽伍德大学管理与领导力副教授', '美国东部大学计算机大会联席主席', '纽约州立大学宾汉姆顿分校博士']
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher9.png',
            title: 'Dr. Art Comstock',
            label: '',
            main: ['玛丽伍德大学金融学副教授', 'Pacer投资基金董事总经理', '里海大学商业和经济学博士']
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher12.png',
            title: 'Michelle Pannone',
            label: '',
            main: ['玛丽伍德大学助理教授', '「匠·中国」项目总监', '作品存于北京、杭州等城市']
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/515/teacher1.png',
            title: '章铮',
            label: '',
            main: [
              '北京大学光华管理学院副教授',
              '北京大学管理科学中心环境经济研究室主任',
              '中国环境与发展国际合作委员会“环境经济专家组”专家'
            ]
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher2.png',
            title: '高远洋',
            label: '',
            main: [
              '北京航空航天大学',
              '经济管理学员副教授',
              '美国加州大学伯克利分校',
              'Haas商学院访问学者',
              '北京航空航天大学管理学博士'
            ]
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher4.png',
            title: '吕景胜',
            label: '',
            main: ['中国人民大学商学院教授', 'EMBA最佳教师，博士生导师', '美的集团特聘法律顾问', '中国人民大学法学博士']
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/515/teacher2.png',
            title: '苏文平',
            label: '',
            main: [
              '北京航空航天大学',
              '经济管理学院教授，博士，硕士生导师',
              '北航生涯规划教学团队召集人',
              '中国教育发展战略学会生涯教育专委会',
              '学术委员会委员',
              '北航MBA中心主任2008-2012'
            ]
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher5.png',
            title: '欧阳桃花',
            label: '',
            main: [
              '北京航空航天大学经济管理学员工商学科',
              '责任教授博士生导师',
              '教育部学位中心首席案例专家',
              '日本神户大学管理学博士',
              '清华大学经济管理学院博士后'
            ]
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher7.png',
            title: '王小华',
            label: '',
            main: ['北京师范大学心理学院副教授', '加拿大西安大略大学工业与组织', '心理学博士']
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher6.png',
            title: '孙昂',
            label: '',
            main: ['中国人民大学经济学教授', '斯坦福大学博士后、研究员', '布朗大学经济学博士']
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher8.png',
            title: '张恩忠',
            label: '',
            main: ['中国人民大学商学院副教授', '《市场营销学教程》第六版教材主要编写者', '美国普渡大学消费者行为学博士']
          }
        ],
        [
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/515/teacher3.png',
            title: '商有光',
            label: '',
            main: [
              '中央财经大学',
              '金融学院金融工程系副教授',
              '金融创新与财富管理中心主任',
              '中央财经大学证券期货研究所研究员'
            ]
          },
          {
            img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/515/teacher4.png',
            title: 'Lijun Zhu 朱丽君',
            label: '',
            main: [
              '玛丽伍德大学商业与全球创新学院国际教育项目管理协调员',
              '玛丽伍德大学国际商务授课老师',
              '玛丽伍德大学MBA',
              '世界五百强供应链国际采购企业服务十年，热衷教育事业'
            ]
          }
        ]
      ],
      swiperOptions: {
        observer: true,
        autoHeight: true,
        slidesPerView: this.isMobile() ? 2 : 3,
        // paginationClickable: true,
        spaceBetween: 0,
        freeMode: true,
        autoplay: {
          delay: 2000
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      }
    }
  },
  methods: {
    mouseOver() {
      this.swiper.autoplay.stop()
    },
    mouseLeave() {
      this.swiper.autoplay.start()
    },
    isMobile() {
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.major-kc-wm {
  padding-bottom: 20px;
  background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/new-marywood/teacher_bg.png) no-repeat center;
  background-size: cover;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  .pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.53);
  }
  &.bg2 {
    background: url('~@/assets/images/major-set/teacher_bg22.jpg') no-repeat bottom;
    background-size: cover;
  }
  h3 {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 40px;
    color: rgba(255, 255, 255, 1);
    span {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        bottom: -8px;
        width: 100%;
        height: 3px;
        background: #ffffff;
      }
    }
  }
  .major-kc-wm-body {
    ::v-deep .swiper-container {
      .swiper-pagination-bullet {
        opacity: 1;
        background: #fff;
      }
      .swiper-pagination-bullet-active {
        background: rgb(174, 14, 63);
      }
    }
    width: 80%;
    display: flex;
    justify-content: center;
    h3 {
      color: #ffffffff;
    }
    .major-kc-wm-list {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 20px 30px;
      width: 300px;
      margin: 110px auto 0;
      .list-img {
        z-index: 3;
        position: relative;
        position: absolute;
        left: 50%;
        background: #fff;
        border-radius: 50%;
        top: 7%;
        overflow: hidden;
        transform: translate(-50%, -50%);
        img {
          transition: all 0.5s;
          transform: scale(0.9);
          cursor: pointer;
          &:hover {
            transform: scale(1);
          }
        }
      }
      .list-body {
        display: flex;
        position: relative;
        // align-items: center;
        flex-direction: column;
        background: #fff;
        border-radius: 26px;
        width: 300px;
        padding: 100px 0px 30px 0px;
        height: 185px;
        .max-width-180 {
          max-width: 180px;
        }
        span {
          padding: 5px 15px 0 40px;
          color: #222222ff;
          line-height: 20px;
        }
        &::before {
          content: '';
          position: absolute;
          height: 90%;
          width: 90%;
          top: 5%;
          border: 1px solid rgba(151, 151, 151, 1);
          border-radius: 26px;
          border-style: dashed;
        }
        .mian-txt {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            left: 22px;
            top: 10px;
            // -webkit-transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border: 2px solid #e27f4d;
            border-radius: 50%;
          }
        }
        .title {
          padding: 0;
          display: block;
          width: 100%;
          text-align: center;
        }
        .zs {
          padding: 5px 0 0 0;
          display: block;
          width: 100%;
          text-align: center;
          color: #e27f4d;
        }
        &::before {
          content: '';
          position: absolute;
          height: 90%;
          width: 90%;
          top: 5%;
          left: 50%;
          -webkit-transform: translateX(-50%);
          border: 1px solid rgba(151, 151, 151, 1);
          border-radius: 26px;
          border-style: dashed;
        }
      }
    }
  }
}
.swiper-container {
  padding-top: 20px;
  padding-bottom: 40px;
}
</style>
