<template>
  <div class="home-page">
    <div class="banner-images">
      <el-carousel
        class="banner-images-inner"
        :interval="5000"
        arrow="always"
        :height="$isMobile ? '40vw' : '33.333vw'">
        <el-carousel-item v-for="(item, index) in bannerImages" :key="index">
          <img
            class="images"
            :src="item.image"
            style="width: 100vw; height: 100%; object-fit: cover" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <product-intro />
    <div class="docking-platform">
      <h2
        :style="`text-align: center; padding: 20px; font-size: ${
          $isMobile ? '18px' : '24px'
        }`">
        对接平台
      </h2>
      <div class="platforms">
        <div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
        <!-- <div class="platform-item"><img src="../../assets/logo5.jpg" /></div> -->
        <div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo7.png" /></div>
        <div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
        <div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
      </div>
    </div>
  </div>
</template>
<script>
import ProductIntro from '../../components/product-intro.vue'

export default {
  name: 'homePage',
  components: {
    ProductIntro,
  },
  data() {
    return {
      bannerImages: [
        { image: require('../../assets/banner/1.jpg') },
        { image: require('../../assets/banner/2.jpg') },
        { image: require('../../assets/banner/3.jpg') },
        { image: require('../../assets/banner/4.jpg') },
        { image: require('../../assets/banner/5.jpg') },
        { image: require('../../assets/banner/6.jpg') },
        { image: require('../../assets/banner/7.jpg') },
        { image: require('../../assets/banner/8.jpg') },
        { image: require('../../assets/banner/9.jpg') },
      ],
    }
  },
}
</script>
<style scoped>
.banner-images {
  font-size: 48px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
}

.banner-images-inner {
  width: 100%;
}

.docking-platform {
  background: url(../../assets/footer.jpg) center / cover no-repeat;
  padding: 0 100px 70px;
}

.docking-platform h2 {
  color: #fff;
}

.platforms {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(9, 1fr);
}

@media screen and (max-width: 1440px) {
  .platforms {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (max-width: 1100px) {
  .docking-platform {
    padding: 0 20px 40px;
  }

  .platforms {
    grid-template-columns: repeat(3, 1fr);
  }

  .platform-item {
    padding: 10px !important;
  }

  .home-page::v-deep .el-carousel__indicators {
    display: none;
  }
}

.platform-item {
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 6px;
}

.platforms img {
  width: 100%;
}
</style>
