<template>
  <div>
    <div class="banner-box">
      <swiper :options="swiperOptions" ref="mySwiper" class="item-swiper">
        <swiper-slide>
          <img src="../../assets/img/banner.jpg" />
        </swiper-slide>
        <!-- <swiper-slide>
          <img @click="goPreview('https://zws-imgs-pub.ezijing.com/static/public/fcac7efb74162f33045f8876d28c5b12.pdf')" src="https://zws-imgs-pub.ezijing.com/static/public/8d6b2472a5091990450c34f3a9be9423.jpg"  />
        </swiper-slide>
        <swiper-slide>
          <img @click="goPage('/project')" src="https://zws-imgs-pub.ezijing.com/static/public/39f724d8000a38716b053324e5d27f3d.jpg"  />
        </swiper-slide> -->
        <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
        <div class="swiper-button-next" slot="button-next" @click="next"></div>
      </swiper>
      <ul class="nav">
        <li>
          <div class="icon">
            <img src="../../assets/img/lang/banner-i1.png" />
          </div>
          <div class="txt">报名申请</div>
          <div class="block"></div>
        </li>
        <li>
          <div class="icon">
            <img src="../../assets/img/lang/banner-i2.png" />
          </div>
          <div class="txt">招生简章</div>
        </li>
        <li @click="goPage('/project')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i3.png" />
          </div>
          <div class="txt">项目介绍</div>
        </li>
        <li @click="goPage('/recruit')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i4.png" />
          </div>
          <div class="txt">资料下载</div>
        </li>
        <li @click="goPage('/recruit', 2)">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i5.png" />
          </div>
          <div class="txt">常见问题</div>
        </li>
      </ul>
    </div>
    <div class="new-module1">
      <div class="title">项目特色</div>
      <ul>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/fb858d15ea447d84051d263ea37112d3.png" />
          <!-- <div class="p">所获学位<br />全球通行，正规硕士学位</div> -->
          <div class="p p2">全球酒店管理<br />大学的楷模</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/9237c8a37d07466b0834e68b8d5f786c.png" />
          <div class="p">星级酒店校园<br />理论与实践结合</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/ad0d5f5cfb48fa1768fcbe560395637f.png" />
          <div class="p">多国企业合作<br />就业率居第一</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/b5dd7a8549203158b19c990caf753f15.png" />
          <div class="p p2">授予国内外高度<br />认可的双学位</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/f35e8152f2c7174e75bf4c2e70188893.png" />
          <div class="p">国际教育环境<br />强大校友资源</div>
        </li>
      </ul>
    </div>
    <div class="new-module2">
      <div class="title">认 证 信 息</div>
      <ul>
        <li>
          <div class="logo">
            <img src="../../assets/img/cert_01.png" />
          </div>
          <div class="text">
            <div>中国教育部</div>
            <div>留学服务中心认证</div>
            <!-- <div class="t">认证大学</div> -->
          </div>
        </li>
        <li>
          <div class="logo">
            <img src="../../assets/img/cert_02.png" />
          </div>
          <div class="text">
            <div>瑞士联邦政府</div>
            <div>学校质量评审委员会</div>
            <!-- <div class="t">认证大学</div> -->
          </div>
        </li>
        <li>
          <div class="logo">
            <img src="../../assets/img/cert_03.png" />
          </div>
          <div class="text">
            <div>联合国</div>
            <div>世界旅游组织认证体系</div>
            <!-- <div class="t">认证大学</div> -->
          </div>
        </li>
        <li>
          <div class="logo">
            <img src="../../assets/img/cert_04.png" />
          </div>
          <div class="text">
            <div>瑞士</div>
            <div>国家旅游局合作学校</div>
            <!-- <div class="t">认证大学</div> -->
          </div>
        </li>
        <li>
          <div class="logo">
            <img src="../../assets/img/cert_05.png" />
          </div>
          <div class="text">
            <div>国际旅游</div>
            <div>与款待业联盟</div>
            <!-- <div class="t">认证大学</div> -->
          </div>
        </li>
      </ul>
      <!-- <div class="con970">
        <div class="top-con">
          <div class="text">通过FMBA课程的学习<br/><span>获得优势：</span></div>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/1b4ac75951cfe717db4916bea71603d1.png" >
        </div>
        <div class="con-txt">毕业于美国名校<br/>成长为国际化金融人才<br/>具备领军人物的创新精神<br/>数个精准的金融高端社交圈<br/>熟稔金融之术，深谙管理之道<br/>拥有与中美一流师资面对面切磋的宝贵经验<br/>成为紫荆遍布全球校友网络中的一员<br/>全新的人生轨迹</div>
      </div> -->
    </div>
    <div class="module3">
      <img src="../../assets/img/video_poster.jpg" class="bg" />
      <img src="../../assets/img/lang/m3-btn.png" class="btn" @click="videoplay" />
      <div id="videoAlert" v-if="videoShow">
        <div class="cont">
          <div class="close-box" @click="videoShow = false"></div>
          <video src="https://zws-imgs-pub.ezijing.com/pc/seg_him/video.mp4" controls autoplay ref="video"></video>
        </div>
      </div>
    </div>
    <div class="module4">
      <div class="con970 floats">
        <div class="swiper-mian" @click="goPreview('https://mp.weixin.qq.com/s/XJjmGRDArexfwVAUzgW_BA')">
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img src="https://zws-imgs-pub.ezijing.com/static/public/e34bb2b57413a02784a91140d0187b85.jpg" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn">项目介绍</div>
            <div class="txt">HIM瑞士蒙特勒酒店工商管理大学 | 酒店与旅游方向工商管理硕士（MBA）</div>
          </div>
        </div>
        <div class="swiper-mian float-r" @click="goPreview('https://mp.weixin.qq.com/s/PDSmXXkw1AE0qXGDBsvuhQ')">
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img src="https://zws-imgs-pub.ezijing.com/static/public/c5db6f01b15492a2197f945407a5bdc9.jpg" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn color">新闻活动</div>
            <div class="txt">HIM瑞士蒙特勒酒店工商管理大学 新年线下活动都分享了哪些干货？</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      swiperOptions: {
        observer: true,
        autoHeight: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptions2: {
        observer: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      videoShow: false
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.$swiper
    }
  },
  methods: {
    videoplay() {
      this.videoShow = true
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    mas() {
      this.$message('功能暂未开放')
    },
    goPage(path, type) {
      if (type === 2) {
        this.$router.push({
          path: path,
          query: {
            type: 2
          }
        })
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    goPreview(url) {
      window.open(url)
    },
    prev() {
      this.swiper.slidePrev()
    },
    next() {
      this.swiper.slideNext()
    }
  }
}
</script>
<style lang="scss" scoped>
.con970 {
  width: 970px;
  margin: 0 auto;
}
.floats {
  display: flex;
}
.banner-box {
  position: relative;
  width: 100%;
  .item-swiper {
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    .swiper-button-prev {
      position: absolute;
      top: 50%;
      left: 125px;
      -webkit-transform: translateY(-50%);
      width: 22px;
      height: 31px;
      background: url(../../assets/img/lang/banner-arl.png);
      background-size: 100% 100%;
      z-index: 9;
      margin: 0;
      &::after {
        content: '';
      }
    }
    .swiper-button-next {
      position: absolute;
      top: 50%;
      right: 125px;
      -webkit-transform: translateY(-50%);
      width: 22px;
      height: 31px;
      background: url(../../assets/img/lang/banner-arr.png);
      background-size: 100% 100%;
      z-index: 9;
      margin: 0;
      &::after {
        content: '';
      }
    }
  }
  .nav {
    position: absolute;
    bottom: -67px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    width: 970px;
    z-index: 9;
    display: flex;
    height: 134px;
    li {
      background: rgba(191, 9, 39, 0.7);
      flex: 1;
      .icon {
        width: 100%;
        position: relative;
        height: 100px;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        img {
          position: absolute;
          top: 42%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
        }
      }
      .txt {
        font-size: 19px;
        color: #fff;
        text-align: center;
        line-height: 34px;
      }
      .block {
        width: 100%;
        height: 20px;
        display: none;
      }
      &:hover {
        margin-top: -20px;
        padding-bottom: 20px;
      }
    }
  }
}
.module1 {
  padding: 127px 0 60px;
  background: #fff;
  .title {
    text-align: center;
    color: #bf0927;
    font-size: 32px;
    margin-bottom: 40px;
  }
  ul {
    width: 970px;
    margin: 0 auto;
    li {
      display: flex;
      margin-bottom: 17px;
      .txt {
        position: relative;
        padding-left: 45px;
        width: 528px;
        font-size: 18px;
        color: #717171;
        &.mar {
          margin-right: 100px;
        }
        &::after {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #717171;
          position: absolute;
          top: 50%;
          left: 20px;
          -webkit-transform: translateY(-50%);
        }
      }
    }
  }
}
.module2 {
  width: 100%;
  height: 378px;
  background: url(../../assets/img/lang/m2-bg.png);
  background-size: cover;
  .title {
    color: #fff;
    font-size: 32px;
    padding: 65px 0 25px;
    text-align: center;
  }
  .txt {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-bottom: 7px;
  }
}
.module3 {
  position: relative;
  width: 100%;
  margin-top: 60px;
  .bg {
    width: 100%;
    display: block;
  }
  .btn {
    width: 113px;
    height: 113px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
  }
}
.module4 {
  background: #fff;
  padding: 60px 0 30px;
  .item-swiper {
    width: 465px;
    height: 310px;
  }
  .float-r {
    margin-left: auto !important;
  }
  ::v-deep {
    .swiper-container {
      margin: 0;
      position: initial;
    }
    .swiper-pagination-bullets {
      bottom: -18px;
    }
    .swiper-pagination-bullet-active {
      background: #bf0927;
    }
  }
  .swiper-mian {
    position: relative;
    .written {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      z-index: 9;
      .btn {
        width: 114px;
        height: 64px;
        background: #bf0927;
        text-align: center;
        line-height: 64px;
        color: #fff;
        font-size: 18px;
        &.color {
          background: #e5b075;
        }
      }
      .txt {
        padding: 5px 10px 0;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        line-height: 26px;
      }
    }
  }
}

#videoAlert {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  // display: none;
}
// #videoAlert .cont{position: relative;}
#videoAlert .close {
  width: 50px;
  position: absolute;
  right: 0;
  top: 1%;
  max-width: 150px;
}
#videoAlert .close img {
  width: 50px;
}
#videoAlert video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  z-index: 9;
}
@media (max-width: 1400px) {
  #videoAlert video {
    width: 60%;
  }
}
#videoAlert .close-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// $type: screen;
// $proto: max-width;
// $value: 1366px;
// .content {
//   width: 100%;
//   height: 814px;
//   @media #{$type} and ($proto: $value) {
//     height: 684px;
//   }
//   overflow: hidden;
//   font-weight: 600;
//   color: #ffffff;
//   font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei';
//   background: {
//     image: url('../../assets/img/index_background.jpg');
//     size: cover;
//     position: center;
//     clip: border-box;
//     repeat: no-repeat;
//   }
//   > h3 {
//     max-width: 1200px;
//     margin: {
//       top: 310px;
//       left: auto;
//       right: auto;
//     }
//     @media #{$type} and ($proto: $value) {
//       margin-top: 180px;
//     }
//     height: 40px;
//     line-height: 40px;
//     font-size: 28px;
//     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
//   }
//   > h2 {
//     max-width: 1200px;
//     margin: 16px auto 0;
//     height: 84px;
//     font-size: 60px;
//     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
//     span {
//       font-size: 40px;
//     }
//   }
// }
// .menu {
//   max-width: 1200px;
//   margin: 400px auto 0;
//   display: flex;
//   justify-content: space-between;
//   background: url('../../assets/img/index_slogo.png') no-repeat;
//   padding-top: 200px;
//   li {
//     width: 186px;
//     height: 60px;
//     border: 2px solid #c41230;
//     line-height: 60px;
//     background-color: rgba(0, 0, 0, 0.64);
//     font-size: 18px;
//     color: #ffffff;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     img {
//       width: 40px;
//       height: 40px;
//       margin: {
//         right: 10px;
//       }
//       overflow: hidden;
//       vertical-align: middle;
//     }
//   }
//   .sign {
//     background-color: #c41230;
//     justify-content: center;
//   }
// }
.module4 {
  .swiper-slide {
    img {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      height: 100%;
    }
  }
}
.new-module1 {
  width: 1050px;
  margin: 0 auto;
  padding: 127px 0 60px;
  .title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #bf0927;
    line-height: 45px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    li {
      margin-right: -50px;
      img {
        width: 61px;
        height: 61px;
        margin: 0 auto;
        display: block;
      }
      .p {
        text-align: center;
        font-size: 18px;
        color: #222222;
        line-height: 25px;
        margin-top: 10px;
        &.p2 {
          margin-top: 20px;
        }
      }
    }
  }
}
.new-module2 {
  width: 100%;
  height: 436px;
  // background: #A4000F;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/521a97768110ae52ce07f07757c79238.png);
  background-size: cover;
  .title {
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
    padding: 62px 0 58px;
  }
  ul {
    display: flex;
    justify-content: center;
    li {
      width: 172px;
      height: 207px;
      background: #fff;
      border-radius: 10px;
      margin-right: 30px;
      &:nth-child(1) {
        .logo {
          width: 73px;
        }
      }
      &:nth-child(2) {
        .logo {
          width: 93px;
        }
      }
      &:nth-child(3) {
        .logo {
          width: 82px;
        }
      }
      &:nth-child(4) {
        .logo {
          width: 124px;
        }
      }
      &:nth-child(5) {
        margin-right: 0;
        .logo {
          width: 124px;
        }
      }
      .logo {
        margin: 30px auto 0 auto;
        height: 80px;
        display: flex;
        align-items: center;
        img {
          width: 100%;
          display: block;
        }
      }
      .text {
        padding-top: 17px;
        text-align: center;
        div {
          line-height: 100%;
          margin-bottom: 10px;
          font-size: 15px;
          color: #96203a;
          font-weight: bold;
        }
        .t {
          font-weight: normal;
        }
      }
    }
  }
}
</style>
