naweigete-web/pages/index_clients.vue

<template>
    <div class="bg-white">
        <!-- Banner section with background image -->
        <div class="aboutimgBg h-[300px] md:h-[600px]" :style="{
            backgroundImage: `url(${bgImage5})`,
            backgroundSize: 'cover',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }">
            <div class="banDes">
                <div class="clientTit text-center">
                    <h2 class="text-3xl md:text-[50px] font-bold animated fadeInLeft">{{ $t('clients_b1') }}</h2>
                </div>
            </div>
        </div>

        <!-- Clients content section -->
        <div class="mainBg pb-10 md:pb-[100px]">
            <div class="oneBox1Bg">
                <div class="container mx-auto px-4">
                    <div class="clientBox1">
                        <h3 class="animated fadeInUp text-lg md:text-2xl font-medium text-center text-[#606060] px-4 mt-[-60px] md:mt-[-120px]">{{ $t('clients_b2') }}</h3>
                    </div>
                    <div class="clientBg1 mt-12 md:mt-[100px]">
                        <div class="clientBg1img flex flex-col md:flex-row items-center justify-between">
                            <div class="clientBg1imgdx w-full md:w-[300px] mb-6 md:mb-0 flex justify-center md:justify-start">
                                <img class="oneBox1Bg1img1 w-[150px] md:w-[400px] h-[200px] md:h-[400px] object-contain" :src="info.image" alt="Client">
                            </div>
                            <div class="clientBg1imgt text-center md:text-left pl-0 md:pl-[30px]" style="flex: 1;">
                                <h3 style="display: inline-block;" class="text-2xl md:text-[40px] font-bold mb-2">{{ locale == 'zh' ?   info.name : info.en_name }}</h3>
                                <h4 class="text-base md:text-xl text-[#606060] mt-4 md:mt-[30px] px-4 md:px-0">{{ locale == 'zh' ? info.context : info.en_context }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="clientxiah1 w-full h-[1px] bg-gray-200 my-8"></div>
                    <div class="mt-8">
                        <!-- 使用 Swiper 实现左右滚动 -->
                        <Swiper
                            :modules="[SwiperAutoplay,SwiperThumbs]"
                            :slides-per-view="slidesPerView"
                            :loop="true"
                            :autoplay="{
                                delay: 3000,
                                disableOnInteraction: false
                            }"
                            class="client-swiper"
                        >
                            <swiper-slide v-for="item in list" :key="item.id" class="flex justify-center">
                                <img @click="info = item" :src="item.image" class="w-[150px] md:w-[200px] h-auto cursor-pointer" alt="Client">
                            </swiper-slide>
                        </Swiper>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
// 导入 Swiper 相关模块
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Autoplay,Thumbs } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

// 添加第五个背景图片
import bgImage5 from '../public/images/maskgroup2.png'

const { locale } = useI18n()
const SwiperNavigation = Navigation
const SwiperPagination = Pagination
const SwiperAutoplay = Autoplay
const SwiperThumbs = Thumbs

onMounted(() => {
    getList();
})
const list = ref([])
const info = ref({})

// 根据屏幕宽度计算显示的幻灯片数量
const slidesPerView = computed(() => {
    return window.innerWidth < 768 ? 2 : 5
})

const getList = () => {
	$api.get("/api/caseinfo/customer")
		.then((res: any) => {
			console.log(res)
			list.value = res.data.data
            info.value = res.data.data[0]
		})
		.catch((err) => {
			console.dir(err)
		})
}
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";

.aboutimgBg {
    position: relative;
}

.container {
    max-width: 100%;
    @media (min-width: 768px) {
        max-width: 1310px;
    }
}

.clientTit h2::after {
    content: '';
    margin: 0 auto;
    width: 180px;
    height: 20px;
    @media (min-width: 768px) {
        width: 250px;
        height: 28px;
        margin-top: -15px;
    }
    background: #A8CBFF;
    display: block;
    margin-top: -15px;
}

.clientBox1 h3 {
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    @media (min-width: 768px) {
        font-size: 24px;
        line-height: 31px;
    }
    color: #606060;
    line-height: 1.5;
}

.clientBg1imgt h3::after {
    content: '';
    width: 100%;
    height: 16px;
    @media (min-width: 768px) {
        margin-top: -10px;
        width: 100%;
        height: 20px;
        margin-left: -4px;
    }
    background: #A8CBFF;
    display: block;
    margin-top: -14px;
    margin-left: auto;
    margin-right: auto;
    @media (min-width: 768px) {
        margin-left: -4px;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .client-swiper {
        padding: 0 20px;
    }
}
</style>