<template>
  <div>
    <div class="banner-box">
      <swiper :options="swiperOptions" ref="mySwiper" class="item-swiper">
        <swiper-slide>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/7c9656c5d5863d7900ea518aee5f2955.jpg" alt="" />
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      <ul class="nav">
        <li @click="goPage('/my')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i1.png" alt="" />
          </div>
          <div class="txt">报名申请</div>
          <div class="block"></div>
        </li>
        <li @click="goPage('/recruit')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i2.png" alt="" />
          </div>
          <div class="txt">招生简章</div>
        </li>
        <li @click="goPage('/project')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i3.png" alt="" />
          </div>
          <div class="txt">项目介绍</div>
        </li>
        <li @click="goPage('/recruit')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i4.png" alt="" />
          </div>
          <div class="txt">资料下载</div>
        </li>
        <li @click="goPage('/recruit', 2)">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i5.png" alt="" />
          </div>
          <div class="txt">常见问题</div>
        </li>
      </ul>
    </div>
    <div class="new-module1">
      <div class="title">项目特色</div>
      <ul>
        <li>
          <img src="../../assets/img/lang/home-s-icon1.png" alt="" />
          <div class="p">全方位的金融职业<br />教育课程体系</div>
        </li>
        <li>
          <img src="../../assets/img/lang/home-s-icon2.png" alt="" />
          <div class="p">专业金融<br />在线教育品牌</div>
        </li>
        <li>
          <img src="../../assets/img/lang/home-s-icon3.png" alt="" />
          <div class="p">科学成熟的<br />在线教育模式</div>
        </li>
        <li>
          <img src="../../assets/img/lang/home-s-icon4.png" alt="" />
          <div class="p">无需联考、快速入门<br />的学习体验</div>
        </li>
        <li>
          <img src="../../assets/img/lang/home-s-icon5.png" alt="" />
          <div class="p">聚焦中国实践和国际前沿<br />的最新课程</div>
        </li>
      </ul>
    </div>
    <div class="new-module2">
     <div class="con970">
      <ul>
        <li>
            <div class="title">印第安纳大学</div>
            <div class="item">
              <div class="ranking">No.11</div>
              <div class="ran-tit">全球最佳研究生院排名</div>
              <div class="ran-txt">2018《美国新闻与世界报道》</div>
            </div>
            <div class="item">
              <div class="ranking">No.21</div>
              <div class="ran-tit">全美最佳商学院研究生综合排名</div>
              <div class="ran-txt">2018《美国新闻与世界报道》</div>
            </div>
        </li>
        <li>
            <div class="title">KELLEY商学院</div>
            <div class="item">
              <div class="ranking">No.21</div>
              <div class="ran-tit">总体排名</div>
              <div class="ran-txt">2018《美国新闻与世界报道》</div>
            </div>
            <div class="item">
              <div class="ranking">No.1</div>
              <div class="ran-tit">学生满意度排名</div>
              <div class="ran-txt">2016《彭博商业周刊》</div>
            </div>
        </li>
        <li>
            <div class="title">KELLEY在线金融硕士</div>
            <div class="item">
              <div class="ranking">No.1</div>
              <div class="ran-tit">在线MBA项目排名</div>
              <div class="ran-txt">2018《普林斯顿评论》</div>
            </div>
            <div class="item">
              <div class="ranking">No.2</div>
              <div class="ran-tit">在线金融硕士课程排名</div>
              <div class="ran-txt">2018《美国新闻与世界报道》</div>
            </div>
        </li>
      </ul>
     </div>
    </div>
    <div class="module3">
      <img
        src="https://zws-imgs-pub.ezijing.com/static/public/33931e1000e38ce170782813e06dbd2d.jpg"
        alt=""
        class="bg"
      />
      <img src="../../assets/img/lang/m3-btn.png" alt="" 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/static/public/20e07479a162e0201b1ff9f626acdcd4.mp4"
            width=""
            height=""
            controls="controls"
            preload="none"
            autoplay
          ></video>
        </div>
      </div>
    </div>
    <div class="module4">
      <div class="con970 floats">
        <div class="swiper-mian" @click="goPreview('https://mp.weixin.qq.com/s/YFcZMtuykIXC9_eNyf_Ijg')">
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img src="https://zws-imgs-pub.ezijing.com/static/public/7e8d7f04e99a15bb637efa48d2c0c14d.jpg" alt="" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn">教授观点</div>
            <div class="txt">肇越：公积金制度如何改革才能让老百姓得实惠？</div>
          </div>
        </div>
        <div
          class="swiper-mian float-r"
          @click="
            goPreview(
              'https://i3jtw0.smartapps.cn/subpackage/pages/docdetails/doc-details?id=ucms_7yGhOpXQ5Ej&oauthType=search&hostname=baiduboxapp&_swebfr=1'
            )
          "
        >
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img src="https://zws-imgs-pub.ezijing.com/static/public/010f4dd0338d68dd8a0e54b46b7edb21.png" alt="" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn color">教授观点</div>
            <div class="txt">洪灝：牛市中的三大信号</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
      var video = document.querySelector('#videoAlert')
      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)
    }
  }
}
</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: 970px;
  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 {
      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;
      }
    }
  }
}
.new-module2 {
  width: 100%;
  height: 412px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/68eaae8a7f49307011beb51496518d27.png);
  background-size: cover;
  .con970{
    height: 100%;
  }
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    li{
      .title{
        font-size: 30px;
        font-weight: bold;
        color: #C7B291;
        line-height: 100%;
      }
      .item{
        margin-top: 44px;
        .ranking{
          font-size: 30px;
          color: #C7B291;
          font-weight: bold;
          line-height: 100%;
          margin-bottom: 20px;
        }
        .ran-tit{
          font-size: 18px;
          color: #fff;
          font-weight: bold;
          line-height: 100%;
          margin-bottom: 10px;
        }
        .ran-txt{
          font-size: 16px;
          color: #fff;
          line-height: 100%;
        }
      }
    }
  }
}
</style>
