<template>
  <div class="swiper-content">
    <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png">
          <p>
            <span>{{isEn ? '金融财经类' : '金融财经类'}}</span>
          </p>
        </div>
        <div class="swiper-slide">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png">
          <p>
            <span>{{isEn ? '数字化营销类' : '数字化营销类'}}</span>
          </p>
        </div>
        <div class="swiper-slide">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png">
          <p>
            <span>{{isEn ? '新媒体运营类' : '新媒体运营类'}}</span>
          </p>
        </div>
        <div class="swiper-slide">
          <img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png">
          <p>
            <span>{{isEn ? '品牌运营类' : '品牌运营类'}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-btn swiper-button-prev">
      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
    </div>
    <div class="swiper-btn swiper-button-next">
      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        // observer: true,
        observeParents: true,
        speed: 400,
        autoplay: true,
        delay: 3000,
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
      isEn: false
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  }
}
</script>
<style lang="scss"  scoped>
.swiper-content{
  // padding: 0 25px;
  margin-top:37px;
  position:relative;
  // overflow: auto;
  // width: 100%;
  .swiper-slide{
    position: relative;
    width: 176px;
    height: 224px;
    // margin-top: 10px;
    p{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align:center;
      background: rgba(51, 51, 51, 0.65);
      box-sizing: border-box;
      padding-top:92px;
      font-size: 20px;
      color: #FEFEFE;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      span{
        display:block;
        line-height: 40px;
        font-size:16px;
      }
    }
    img{
      width: 100%;
    }
  }
  .swiper-slide-active {
    width: 176px;
    height: 224px;
    margin-top: 0;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .swiper-btn{
    width:20px;
    height:35px;
    position:absolute;
    left:-5px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    display:none;
    img{
      width:100%;
      height:100%;
      display:block;
    }
  }
  .swiper-button-next{
    left:unset;
    right: -5px;
  }
}
</style>