You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.9 KiB
134 lines
3.9 KiB
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import useStore from '@/store';
|
|
import prodImg from '@/assets/img/noImage.jpg';
|
|
import featureImg from '@/assets/img/iStock.jpg';
|
|
|
|
const { locale } = useI18n()
|
|
const store = useStore();
|
|
|
|
const { config } = storeToRefs(store);
|
|
|
|
const bannerData = computed(() => bannerRes.value.data);
|
|
const cateData = computed(() => cateRes.value.data);
|
|
const supplierData = computed(() => supplierRes.value.data);
|
|
|
|
const { data: bannerRes } = await useMyFetch('/index/getBannerList', "GET")
|
|
const { data: cateRes } = await useMyFetch('/index/getParentCateList', "GET")
|
|
const { data: supplierRes } = await useMyFetch('/index/getSupplierList', "GET")
|
|
|
|
|
|
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') }} </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">
|
|
<div class="imgCnt sm shadow">
|
|
<img :src="cate.imageurl || prodImg" alt="">
|
|
</div>
|
|
<div class="title">{{ cate.name }}</div>
|
|
</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="ck-content" v-html="config[locale].development">
|
|
</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="supplier.name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|