prodio/web/pages/index.vue

<script setup>
import { onMounted } from 'vue';
import useStore from '@/store';
import prodImg from '@/assets/img/s4.jpg';
import featureImg from '@/assets/img/feature.jpg';

const { locale } = useI18n()
const store = useStore();

const { config } = storeToRefs(store);

const bannerData = ref([]);
const cateData = ref([]);
const supplierData = ref([]);

const { data: bannerRes } = await useMyFetch('/index/getBannerList', "GET")

if (bannerRes.value.code === 200) {
  bannerData.value = bannerRes.value.data
}

const { data: cateRes } = await useMyFetch('/index/getParentCateList', "GET")

if (cateRes.value.code === 200) {
  cateData.value = cateRes.value.data
}

const { data: supplierRes } = await useMyFetch('/index/getSupplierList', "GET")

if (supplierRes.value.code === 200) {
  supplierData.value = supplierRes.value.data
}

onMounted(async () => {
  let swiper1 = new Swiper(".banner .swiper", {
    slidesPerView: 1,
    // effect : 'fade',
    loop: true,
    speed: 2500,
    parallax: true,
    autoplay: {
      delay: 5500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

  let swiper2 = new Swiper(".supplier .swiper", {
    slidesPerView: 1.8,
    // effect : 'fade',
    spaceBetween: 50,
    speed: 2500,
    autoplay: {
      delay: 5500,
      disableOnInteraction: false,
    },
    breakpoints: {
      480: {
        slidesPerView: 2.4,
      },
      768: {
        slidesPerView: 3.6,
      },
      1024: {
        slidesPerView: 4.8,
      },
    },
  });

})
</script>

<template>
  <div>
    <div class="main index">
      <section class="section banner">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in bannerData" :key="index">
              <div class="imgCnt d-none d-lg-block"><img :src="banner.imageurl1" alt=""></div>
              <div class="imgCnt d-block d-lg-none"><img :src="banner.imageurl2" alt=""></div>
              <div class="article right">
                <h2 class="title text-white" data-swiper-parallax="-300">
                  {{ banner.slogon }}
                </h2>
                <h5 class="subtitle text-white" data-swiper-parallax="-200">
                  {{ banner.describe }}
                </h5>
                <!-- <h6 class="text text-white" data-swiper-parallax="-100">Activate your life,<br>is our mission statement.</h6> -->
              </div>
            </div>
          </div>
          <!-- <div class="swiper-pagination"></div> -->
        </div>
      </section>

      <section class="section products">
        <div class="container">
          <div class="content mb-4">
            <div class="secTitle mb-4">{{ $t('productandservice') }} <span>Products</span></div>
            <div class="secDesc">
              {{ config[locale].products }}
            </div>
          </div>
          <div class="content shadow p-4">
            <div class="row">
              <div class="col-6 col-lg-3" v-for="(cate,index) in cateData" :key="index">
                <NuxtLink :to="'/products/list/' + cate.id" class="item">
                  <div class="imgCnt sm shadow">
                    <img :src="cate.imageurl" alt="">
                  </div>
                  <div class="title">{{ cate.name }}</div>
                </NuxtLink>
              </div>
            </div>
          </div>
          <!-- <div class="moreBtn">MORE</div> -->
        </div>
      </section>

      <section class="section concept">
        <div class="bg"><img :src="featureImg" alt=""></div>
        <div class="container">
          <div class="content">
            <div class="secTitle mb-4">{{ $t('development') }}</div>
            <div class="secDesc">
              {{ config[locale].development }}
            </div>
            <!-- <div class="moreBtn">MORE</div> -->
          </div>
        </div>
      </section>

      <section class="section supplier">
        <div class="container-fluid">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(supplier, index) in supplierData" :key="index">
                <div class="imgCnt"><img :src="supplier.imageurl" alt=""></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>