<template>
  <div class="thumb-example">
    <swiper
      class="top-swiper"
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff'
      }"
      :modules="modules"
      :space-between="10"
      :navigation="true"
      :thumbs="{ swiper: thumbsSwiper }"
    >
      <swiper-slide v-for="index in 8" :key="index" class="slide">
        {{index+1}}
      </swiper-slide>
    </swiper>
    <swiper
      class="thumbs-swiper"
      :modules="modules"
      :space-between="10"
      :slides-per-view="4"
      :watch-slides-progress="true"
      :prevent-clicks="false"
      :prevent-clicks-propagation="false"
      @swiper="setThumbsSwiper"
    >
      <swiper-slide v-for="index in 8" :key="index" class="slide">
        {{index+10}}
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup>

import { Navigation, Thumbs } from 'swiper'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import { ref } from 'vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/thumbs'


const thumbsSwiper = ref(null)
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper
}

const modules = ref([Navigation, Thumbs])

</script>

<style scoped lang="scss">
  img.more{width: 85px;}
  .photoSwiper{background: url("@/assets/images/bg02@2x.png") no-repeat center;background-size: auto 100%;
    .box{display: flex;}
    .leftFixed{width: 40%;
      h2{font-size: 48px;}
    }
    .swiper-slide{height: 480px;box-sizing: border-box;}
    .swiperbaba{
      h3{font-size: 30px;}
      p{font-size: 18px;
        font-weight: 400;
        color: #4C5359;
        line-height: 30px;}
    }
  }
  .serverRow {background: url("@/assets/images/bg1@2x.png") no-repeat center;background-size: cover;padding: 75px 0;
    .box{display: flex;justify-content: space-between;}
    .item{width: 260px;height: 300px;text-align: center;cursor:pointer;
      &>a{}
      h3{color: #FFFFFF;font-size: 36px;margin-top: 40%;}
      h3+a{color:#254385;
        width: 200px;
        line-height: 35px;
        background: #FFFFFF;
        border-radius: 18px;
        display: inline-block;
        height: 35px;}
    }
    .item:hover{
      a{color: #BF3031;}
    }
    .item:nth-child(1){background: url("@/assets/images/tu01@2x.png") no-repeat center;}
    .item:nth-child(2){background: url("@/assets/images/tu02@2x.png") no-repeat center;}
    .item:nth-child(3){background: url("@/assets/images/tu03@2x.png") no-repeat center;}
    .item:nth-child(4){background: url("@/assets/images/tu04@2x.png") no-repeat center;}
    .item:nth-child(5){background: url("@/assets/images/tu05@2x.png") no-repeat center;}
    .item:nth-child(1):hover{background: url("@/assets/images/tu01_dwn@2x.png") no-repeat center;}
    .item:nth-child(2):hover{background: url("@/assets/images/tu02_dwn@2x.png") no-repeat center;}
    .item:nth-child(3):hover{background: url("@/assets/images/tu03_dwn@2x.png") no-repeat center;}
    .item:nth-child(4):hover{background: url("@/assets/images/tu04_dwn@2x.png") no-repeat center;}
    .item:nth-child(5):hover{background: url("@/assets/images/tu05_dwn@2x.png") no-repeat center;}
  }

  .noticeRow{padding: 60px 0;
    h2{margin: 0 0 35px;
      font-size: 48px;}
    .box{display: flex;    justify-content: space-between;}
    .item{position: relative;width: 32%;padding: 30px;
      background: #FFFFFF;overflow: hidden;
      height: 215px;border-bottom: 3px solid #AD181F;    box-shadow: 0 0 15px 0 #d1d1d1;
      &:hover{
        .info{
          p{color: #fff;
            span{color: #fff;}
          }
          h3{color: #fff;}
          a{color: #fff;border-color: #fff;}
        }
        .hoverBg{top: 0;}
      }
    }
    .info{position: relative;z-index: 2;
      p{color: #EEEEEE; margin: 0;font-size: 14px;}
      .type{color: #AD181F;}
      .time{color: #4C5359;}
      h3{height: 60px;display: -webkit-box;
        -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
        -webkit-line-clamp: 2; /* 限制文本的行数，表示文本第多少行省略 */
        text-overflow: ellipsis;/*  打点展示 */
        overflow: hidden;/*超出部分进行隐藏*/
        line-height: 30px;
        font-size: 20px;}
      a{padding-bottom: 6px;cursor: pointer;
        font-size: 14px;border-bottom: 1px solid #AD181F;
        color: #95A1A6;}
    }

    .hoverBg{position: absolute;top: 215px;left: 0;width: 100%;transition: top 0.2s;}
  }
  .centerAD{
    img{width: 100%;height: 100%;object-fit: contain;object-position: center;    display: block;}
  }
  .qqEnter{position: relative;cursor: pointer;
    .bg{width: 100%;display: block;}
    h3{position: absolute;font-size: 48px;color: #FFFFFF;    top: 15%;margin: 0;left: 5%;}
    .more{left: 6%;position: absolute;top: 45%;}
    &:hover{filter: brightness(1.5)}
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery-top .swiper-slide {
    height: 200px;
    width: 100%;
  }
  .gallery-thumbs {
    margin-top: 20px;
  }
  .gallery-thumbs .swiper-slide {
    height: 60px;
    width: 25%;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide.slide-thumb-active{/*注意，这里不同了*/
    opacity: 1
  }

  .slide{height: 100px;background: #1ab394}
</style>