<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/7472ae2a061874a02e78d57f369da79a.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="title">培养目标</div>
      <div class="mian">
        <div class="txt">培养<br />国际化、产业化、科技化的复合型金融人才和领袖</div>
        <img src="https://zws-imgs-pub.ezijing.com/static/public/751bd3cfc8997722c3ee7bf1f4cef4e5.png" alt="" />
      </div>
    </div>
    <!-- <div class="module1">
      <div class="title">培养目标</div>
      <ul>
        <li>
          <div class="txt mar">具有深厚的金融学和经济学基础的复合型人才</div>
          <div class="txt">通晓国际金融规则和行业实践经验的务实人才</div>
        </li>
        <li>
          <div class="txt mar">具备金融专业能力与实践创新能力的创新人才</div>
          <div class="txt">具有国际视野的高端金融专业人才</div>
        </li>
      </ul>
      <div class="txt">具有深厚的金融学和经济学基础的复合型人才</div>
      <div class="txt">具备金融专业能力与实践创新能力的创新人才</div>
      <div class="txt">通晓国际金融规则和行业实践经验的务实人才</div>
      <div class="txt">具有国际视野的高端金融专业人才</div>
    </div> -->
    <!-- <div class="module2">
      <div class="title">项目特色</div>
      <div class="txt">学院设立金融专业硕士项目，旨在培养具有良好职业素养和国际视野，充分了解金融实践与理论发展趋势，</div>
      <div class="txt">熟练掌握金融思想方法和分析技术，能给切实满足各级各类政府部门、金融机构紧迫需要的、</div>
      <div class="txt">具有国际竞争力的高级应用型金融人才。</div>
      <div class="txt">熟练掌握金融思想方法和分析技术，能给切实满足各级各类政府部门、金融机构紧迫需要的、</div>
      <div class="txt">学院设立金融专业硕士项目，旨在培养具有良好职业素养和国际视野，充分了解金融实践与理论发展趋势，</div>
      <div class="txt">具有国际竞争力的高级应用型金融人才。</div>
    </div> -->
    <div class="module3">
      <img
        src="https://zws-imgs-pub.ezijing.com/static/public/3a2bd304a92d6d9496d2407111175b23.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/34fa19b6033f83337d96b44ab23324ea.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>
    <!-- <h3>紫荆教育联合中国产业金融菁英计划推出</h3>
    <h2>
      组织领导力
      <span>（Organizational Leadership）</span>
    </h2>-->
    <!-- <ul class="menu">
      <router-link to="/signup/index?active=center">
        <li class="sign">报名申请</li>
      </router-link>
      <router-link to="/project">
        <li>
          <img src="../../assets/img/project.png" />项目介绍
        </li>
      </router-link>
      <router-link to="/know?tag=招生简章">
        <li>
          <img src="../../assets/img/brief.png" />招生简章
        </li>
      </router-link>
      <router-link to="/know?tag=报名须知">
        <li>
          <img src="../../assets/img/know.png" />报名须知
        </li>
      </router-link>
      <router-link to="/download">
        <li>
          <img src="../../assets/img/download.png" />资料下载
        </li>
      </router-link>
    </ul> -->
  </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/8bb492052422218623723105e74eb996.png);
  background-size: 100% 100%;
  .title {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    line-height: 45px;
    padding-top: 60px;
  }
  .mian {
    display: flex;
    margin-top: 30px;
    align-items: center;
    width: 970px;
    margin: 0 auto;
    .txt {
      // width: 276px;
      font-size: 22px;
      font-weight: bold;
      color: #ffffff;
      line-height: 36px;
    }
    img {
      width: 267px;
      margin-left: auto;
    }
  }
}
</style>
