<template>
  <div class="consult">
    <div class="mask">
      <h2>行业资讯</h2>
      <div class="maskCore">
        <!-- <div v-swiper:mySwiper="swiperOption"
             class="swiper-container"
             ref="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="textItem">
                <img src="../images/consult1.png"
                     alt=""
                     width="369px">
                <div class="textWrap">
                  <h4>承办单位和定点机构有什么区别</h4>
                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="textItem">
                <img src="../images/consult1.png"
                     alt=""
                     width="369px">
                <div class="textWrap">
                  <h4>承办单位和定点机构有什么区别</h4>
                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="textItem">
                <img src="../images/consult1.png"
                     alt=""
                     width="369px">
                <div class="textWrap">
                  <h4>承办单位和定点机构有什么区别</h4>
                  <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>  -->
        <!-- <div @click='prev'
             class="prev"></div>
        <div @click='next'
             class="next"></div>
        <el-carousel :interval="4000"
                     type="card"
                     height="400px"
                     arrow="never"
                     ref="carousel"
                     indicator-position="none">
          <el-carousel-item>
            <div class="textItem"
                 @click="gotoDetail(1)">
              <img src="../images/consult1.png"
                   alt=""
                   width="369px">
              <div class="textWrap">
                <h4>承办单位和定点机构有什么区别</h4>
                <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="textItem"
                 @click="gotoDetail(2)">
              <img src="../images/consult2.png"
                   alt=""
                   width="369px">
              <div class="textWrap">
                <h4>乐器演奏不清晰不连贯的原因有哪些</h4>
                <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
                  答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="textItem"
                 @click="gotoDetail(3)">
              <img src="../images/consult3.png"
                   alt=""
                   width="369px">
              <div class="textWrap">
                <h4>十级琴霸的备考建议</h4>
                <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="textItem"
                 @click="gotoDetail(4)">
              <img src="../images/consult4.png"
                   alt=""
                   width="369px">
              <div class="textWrap">
                <h4>音乐等艺术等科目纳入“新中考”</h4>
                <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel> -->

        <div class="client-love-work">
          <div class="swiper">
            <swiper ref="mySwiper"
                    class="current-swiper"
                    :options="swiperOptions">
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(1)">
                  <img src="../images/consult1.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>承办单位和定点机构有什么区别</h4>
                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(2)">
                  <img src="../images/consult2.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(3)">
                  <img src="../images/consult3.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>十级琴霸的备考建议</h4>
                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(4)">
                  <img src="../images/consult4.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>音乐等艺术等科目纳入“新中考”</h4>
                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="swiper-button-next swiper-button-white"
                 @click="onNext"
                 slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white"
                 @click="onPrev"
                 slot="button-prev"></div>

            <swiper ref="leftSwiper"
                    class="left-swiper"
                    :options="leftOptions">
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(4)">
                  <img src="../images/consult4.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>音乐等艺术等科目纳入“新中考”</h4>
                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(1)">
                  <img src="../images/consult1.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>承办单位和定点机构有什么区别</h4>
                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(2)">
                  <img src="../images/consult2.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(3)">
                  <img src="../images/consult3.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>十级琴霸的备考建议</h4>
                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
                  </div>
                </div>
              </swiper-slide>
            </swiper>

            <swiper ref="rightSwiper"
                    class="right-swiper"
                    :options="rightOptions">
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(2)">
                  <img src="../images/consult2.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(3)">
                  <img src="../images/consult3.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>十级琴霸的备考建议</h4>
                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(4)">
                  <img src="../images/consult4.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>音乐等艺术等科目纳入“新中考”</h4>
                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="textItem"
                     @click="gotoDetail(1)">
                  <img src="../images/consult1.png"
                       alt=""
                       width="369px">
                  <div class="textWrap">
                    <h4>承办单位和定点机构有什么区别</h4>
                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import 'swiper/swiper.scss'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        allowTouchMove: false
      },
      leftOptions: {
        loop: true,
        allowTouchMove: false
      },
      rightOptions: {
        loop: true,
        allowTouchMove: false
      }
    }
  },
  mounted () {
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    },
    leftSwiper () {
      return this.$refs.leftSwiper.$swiper
    },
    rightSwiper () {
      return this.$refs.rightSwiper.$swiper
    }
  },
  methods: {
    onNext () {
      this.swiper.slideNext();
      this.leftSwiper.slideNext()
      this.rightSwiper.slideNext()
    },
    onPrev () {
      this.swiper.slidePrev();
      this.leftSwiper.slidePrev();
      this.rightSwiper.slidePrev();
    },
    gotoDetail (num) {
      let newpage = this.$router.resolve({
        name: `detile${num}`,
      });
      window.open(newpage.href, '_blank');
    },
    prev () {
      this.$refs.carousel.prev();
    },
    next () {
      this.$refs.carousel.next();
    }
  }
}
</script>
<style lang="less" scoped>
.consult {
  background: url("../images/consult_bg.png") no-repeat center;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  .mask {
    padding: 101px 0 252px 0;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    height: 745px;
    display: flex;
    flex-direction: column;
    align-items: center;
    h2 {
      height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 48px;
      margin-bottom: 78px;
      letter-spacing: 2px;
    }
    .maskCore {
      width: 960px;
      position: relative;
      .textItem {
        width: 369px;
        height: 414px;
        background-color: #fff;
        cursor: pointer;
        .textWrap {
          padding: 24px 24px 48px;
          h4 {
            width: 100%;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 25px;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 24px;
          }
          p {
            text-align: left;
            color: #808080;
            line-height: 20px;
            height: 63px;
            font-size: 14px;
            overflow: hidden;
          }
        }
      }
      .prev {
        position: absolute;
        width: 40px;
        height: 40px;
        background: url("../images/arrow.png") no-repeat center;
        background-size: 40px 40px;
        left: -115px;
        top: 190px;
        transform: rotate(180deg);
        cursor: pointer;
        &:hover {
          background: url("../images/active-arrow.png") no-repeat center;
          background-size: 40px 40px;
        }
      }
      .next {
        cursor: pointer;
        position: absolute;
        width: 40px;
        height: 40px;
        background: url("../images/arrow.png") no-repeat center;
        background-size: 40px 40px;
        right: -115px;
        top: 190px;
        &:hover {
          background: url("../images/active-arrow.png") no-repeat center;
          background-size: 40px 40px;
        }
      }
    }
  }
}

.client-love-work {
  .swiper {
    max-width: 1200px;
    margin: 0 auto 40px;
    position: relative;
    .swiper-container {
      width: 369px;
      height: 414px;
      // border-radius: 8px;
      position: relative;
      z-index: 99;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }
    .left-swiper,
    .right-swiper {
      position: absolute;
      z-index: 1;
      transform: scale(0.85);
      opacity: 0.7;
      .swiper-slide {
        .swiper-box {
          background: rgba(0, 0, 0, 0.7);
        }
      }
    }
    .left-swiper {
      left: 0;
      top: 0;
      // img {
      //     left: 0;
      // }
    }
    .right-swiper {
      top: 0;
      right: 0;
      // img {
      //     right: 0;
      // }
    }
  }
  .swiper-slide {
    position: relative;
    overflow: hidden;
    .swiper-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background: rgba(0, 92, 185, 0.7);
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    cursor: pointer;
    position: absolute;
    width: 40px;
    height: 40px;
    background: url("../images/arrow.png") no-repeat center;
    background-size: 40px 40px;
    right: -115px;
    top: 190px;
    &:hover {
      background: url("../images/active-arrow.png") no-repeat center;
      background-size: 40px 40px;
    }
    &::after {
      content: "";
    }
  }
  .swiper-button-prev {
    left: -115px;
    top: 190px;
    transform: rotate(180deg);
  }
}
</style>