vava_buy_official/src/views/Home/modules/Brands/index.vue

<template>
  <!-- 品牌商标 -->
  <section class="brands">
    <div class="brands__head">
      <div class="brands__title">
        <span>{{ $t('system["可以在数千家商店购物和支付"]') }}</span>
      </div>
    </div>
    <div class="swiper brands__swiper swiper_box_01">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="@/public/images/brands/1.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/2.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/3.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/4.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/5.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/6.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/7.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/8.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/9.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/10.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/11.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/12.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/13.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/14.png" /></div>
      </div>
    </div>
    <div class="swiper brands__swiper swiper_box_02">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="@/public/images/brands/15.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/16.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/17.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/18.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/19.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/20.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/21.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/22.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/23.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/24.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/25.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/26.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/27.png" /></div>
        <div class="swiper-slide"><img src="@/public/images/brands/28.png" /></div>
      </div>
    </div>
  </section>
</template>



<script setup lang="ts">
import { onMounted } from 'vue'
import Swiper from 'swiper'

onMounted(() => {
  new Swiper('.swiper_box_01', {
    observer: true,
    observeParents: true,
    speed: 4000,
    loop: true,
    // loopAdditionalSlides: 13,
    slidesPerView: 'auto',
    freeMode: true,
    loopPreventsSlide: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
      stopOnLastSlide: false,
    },
    grabCursor: true,
  })

  new Swiper('.swiper_box_02', {
    // noSwiping: true,
    observer: true,
    observeParents: true,
    speed: 4000,
    loop: true,
    // loopAdditionalSlides: 13,
    slidesPerView: 'auto',
    freeMode: true,
    slidesOffsetBefore: 60,
    loopPreventsSlide: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
      stopOnLastSlide: false,
      // reverseDirection: true,
    },
    grabCursor: true,
  })
})
</script>



<style lang="less" scoped>
.brands {
  position: relative;
  padding: 50px 0;
  padding: 3.125rem 0;
  width: 100%;
  height: auto;

  .brands__head {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    mask-border: 1.875rem;
  }

  .brands__title {
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: bold;
    text-align: center;
    color: #111827;
  }

  .swiper-wrapper {
    transition-timing-function: linear !important;
    -webkit-transition-timing-function: linear !important;
    -moz-transition-timing-function: linear !important;
    -ms-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }

  .swiper-container-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }

  .brands__swiper {
    overflow: hidden;
    width: 100%;
    height: auto;

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      font-size: 1.125rem;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 140px;
      width: 8.75rem;
      height: 140px;
      height: 8.75rem;
      padding: 20px;
      padding: 1.25rem;
      border: 1px solid #c9d1d7;
      border-right: 0;

      img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }

    .swiper-slide:last-child {
      border: 1px solid #c9d1d7;
    }
  }

  .swiper_box_01 {
    .swiper-slide {
      border-bottom: 0;
    }
  }
}
</style>


<style lang="less" scoped>
@import url(./css/styles@1200.less);
@import url(./css/styles@1024.less);
@import url(./css/styles@768.less);
</style>