<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/da6e395d3cd95e944625ee76364045bf.png" />
        </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 @click="goPage('/my', 2)">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i2.png" />
          </div>
          <div class="txt">证书报名</div>
        </li>
        <li @click="goPreview('https://prp-learning.ezijing.com/')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i1.png" />
          </div>
          <div class="txt">课程学习</div>
          <div class="block"></div>
        </li>
        <li @click="goPage('/personal')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i3.png" />
          </div>
          <div class="txt">持证人权益</div>
        </li>
        <li @click="goPage('/showcase')">
          <div class="icon">
            <img src="../../assets/img/lang/banner-i4.png" />
          </div>
          <div class="txt">持证人展示</div>
        </li>
        <li @click="goPage('/recruit?type=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/43846f5832696866be143e4282df04fb.png" />
          <div class="p">资深专家与业内实<br />战专家共同研发</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/3b14f07dffa3f6be76e31288cea82ae9.png" />
          <div class="p">立足财富市场<br />聚焦风险管理</div>
        </li>
        <li>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/f8698b889e909a297b6ad61321f1be9a.png" />
          <div class="p">利用碎片化时间<br />学习系统源点知识</div>
        </li>
        <li class="bor-none">
          <img src="https://zws-imgs-pub.ezijing.com/static/public/acddd79e89fc4618fa8e5de64e9e6327.png" />
          <div class="p">由权威机构出品<br />促进行业发展为目标</div>
        </li>
      </ul>
    </div>
    <div class="new-module2134">
      <div class="title">培养目标</div>
      <div class="deco">未来十年私人财富市场的引领者</div>
      <div class="content">
        <div class="text">
          突破知识局限<br />
          拓展认知边界<br />
          升级心智模式<br />
          增强私人财富风险识别与管理能力<br />
          提升客层服务纬度与价值
        </div>
        <img src="https://zws-imgs-pub.ezijing.com/static/public/27362ec9f09884dde35b97e7f543dc5b.png" />
      </div>
    </div>
    <div class="module3">
      <!-- <img
        src="https://zws-imgs-pub.ezijing.com/static/public/34f0db01337e16fcbc4ee866953c843d.png"

        class="bg"
      /> -->
      <div class="bg"></div>
      <img src="../../assets/img/lang/m3-btn.png" class="btn" @click="videoplay()" />
      <img class="titles" src="https://zws-imgs-pub.ezijing.com/static/public/2836a2327a0098672e1dd4663ea27e69.png" />
      <div id="videoAlert" v-if="videoShow">
        <div class="cont">
          <div class="close-box" @click="videoShow = false"></div>
          <video
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/prp/ad_video.mp4"
            width=""
            height=""
            controls="controls"
            preload="none"
            autoplay
          ></video>
        </div>
      </div>
    </div>
    <div class="module4">
      <div class="img-box">
        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/prp/cert.png" />
        <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a539349923a397b5c55e10eb62f9b3.png"  /> -->
      </div>
      <div class="con970 floats" style="margin-top:20px;">
        <div class="swiper-mian" @click="goPage('/presence')">
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img :src="listData[0].photo_uri" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn">师生风采</div>
            <div class="txt">{{ listData[0].title }}</div>
          </div>
        </div>
        <div class="swiper-mian float-r" @click="goPage('/alumniWork')">
          <swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
            <swiper-slide>
              <img :src="listData[1].photo_uri" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="written">
            <div class="btn color">项目动态</div>
            <div class="txt">{{ listData[1].title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import cAction from '@action'
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,
      requestParam: {
        page: 1,
        per_page: 100,
        type: 58,
        project_id: 5003
      },
      listData: {
        0: {},
        1: {}
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.$swiper
    }
  },
  created() {
    this.request(0)
    this.request(1)
  },
  methods: {
    videoplay() {
      this.videoShow = true
      var video = document.querySelector('#videoAlert')
      video.play()
    },
    mas() {
      this.$message('功能暂未开放')
    },
    goPage(path, type) {
      if (path === 'no') {
        this.$message('暂未开放')
      } else {
        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()
    },
    request(index) {
      if (index === 1) {
        this.requestParam.type = 20
      }
      cAction.reportAction
        .getNews(this.requestParam)
        .then(json => {
          if (Array.isArray(json)) {
            json.length && (this.listData[index] = json[0])
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {})
    }
  }
}
</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(0, 76, 171, 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%;
    height: 300px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/34f0db01337e16fcbc4ee866953c843d.png);
    background-size: cover;
    display: block;
  }
  .titles {
    width: 541px;
    position: absolute;
    top: 179px;
    left: 50%;
    -webkit-transform: translateX(-50%);
  }
  .btn {
    width: 113px;
    height: 113px;
    position: absolute;
    top: 36px;
    left: 50%;
    -webkit-transform: translateX(-50%);
  }
}
.module4 {
  background: #fff;
  padding: 60px 0 30px;
  .img-box {
    display: flex;
    justify-content: center;
    img {
      width: 980px;
      height: 406px;
      display: block;
    }
  }
  .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.7);
      display: flex;
      align-items: center;
      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 {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.new-module1 {
  // width: 1050px;
  margin: 0 auto;
  padding: 127px 0 60px;
  .title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: rgba(0, 57, 116, 1);
    line-height: 45px;
  }
  ul {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    li {
      width: 245px;
      height: 120px;
      // margin-right: -50px;
      border-right: 1px solid #eee;
      &.bor-none {
        border: none;
      }
      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;
        }
      }
    }
  }
}
.new-module2134 {
  width: 100%;
  height: 412px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/47887060ae3710cecb5c58904e78bf44.png);
  background-size: cover;
  .title {
    padding-top: 30px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    line-height: 45px;
  }
  .deco {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 18px;
    letter-spacing: 36px;
    text-align: center;
    margin-top: 30px;
  }
  .content {
    display: flex;
    width: 784px;
    margin: 40px auto 0 auto;
    .text {
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      line-height: 43px;
    }
    img {
      width: 267px;
      display: block;
      margin-left: auto;
      margin-right: 38px;
    }
  }
}
</style>
