naweigete-web/pages/index.vue

<template>
	<div style="height: 100%;width: 100%;">
		<!-- Swiper 容器 -->
		<swiper class="swiper-container h-full" v-bind="swiperOptions" @swiper="onSwiper" @slideChange="onSlideChange">
			<!-- 第一个滑块 -->
			<swiper-slide class="swiper-slide-a flex flex-col items-center justify-center text-white" :style="{
				backgroundImage: `url(${bgImage})`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: 'cover',
			}">
				<div class="ani md:text-xl text-base font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
					{{ locale == 'zh' ? store.tempApiData.company_name : store.tempApiData.en_company_name }}
				</div>
				<div class="ani w-[80%] md:w-[45%] h-px bg-white my-5" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				</div>
				<div class="md:text-3xl text-xl font-semibold ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">{{ locale == 'zh' ?
						top_one.home_one_text : top_one.en_home_one_text }}</div>
				<div class="w-[80%] md:w-[45%] h-px bg-white my-5 ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				<div class="md:text-lg text-base font-light ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
				<div class="array" style="margin-top: 30px; margin-bottom: 20px;">
					<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group9.png">
				</div>
				<!-- 社交图标 -->
				<div class="absolute bottom-[20px] md:bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
					<div class="flex justify-center w-full">
						<template v-for="(item, index) in store.serApiData">
							<img @click="shareToLink(item)" :src="item.img"
								class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
							<span v-if="index !== store.serApiData.length - 1"
								class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
						</template>
						<!-- <img @click="shareToYoutube" src="/images/group14.png"
							class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
						<span
							class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
						<img @click="shareToInstagram" src="/images/group13.png"
							class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
						<span
							class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
						<img @click="shareToYoutube" src="/images/group12.png"
							class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer"> -->
					</div>

					<!-- 导航链接 -->
					<div class="w-[80%] md:w-[45%] h-[2px] bg-white mx-auto my-3 md:my-5"></div>
					<div
						class="flex flex-wrap w-full md:w-1/2 justify-around px-2 md:px-0 mx-auto text-xs md:text-base">
						<NuxtLink to="/index_about/" class="text-white mb-1 md:mb-0">{{ $t('index_about') }}</NuxtLink>
						<NuxtLink to="/index_service/" class="text-white mb-1 md:mb-0">{{ $t('index_services') }}
						</NuxtLink>
						<NuxtLink to="/index_clients/" class="text-white mb-1 md:mb-0">{{ $t('index_clients') }}
						</NuxtLink>
						<NuxtLink to="/index_news/" class="text-white mb-1 md:mb-0">{{ $t('index_news') }}</NuxtLink>
						<NuxtLink to="/index_contact/" class="text-white mb-1 md:mb-0">{{ $t('index_contact') }}
						</NuxtLink>
					</div>
				</div>
			</swiper-slide>

			<!-- 第二个滑块 -->
			<swiper-slide class="swiper-slide-a text-white" :style="{
				backgroundImage: `url(${bgImage2})`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: 'cover',
				height: '100%'
			}">
				<div class="px-4 md:px-[150px]">
					<div class="flex flex-col md:flex-row items-center text-left">
						<div class="w-full md:w-1/2 mb-5 md:mb-0">
							<h2 class="text-xl md:text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ locale == 'zh' ?
									top_two.home_two_title : top_two.en_home_two_title }}</h2>
							<h4 class="text-base md:text-lg mt-5 md:mt-10 leading-[25px] md:leading-[35px] ani"
								swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
								swiper-animate-delay="0.1s">{{
									locale == 'zh' ?
										top_two.home_two_desc : top_two.en_home_two_desc }}</h4>
							<div class="w-[30%] md:w-[18%] h-[2px] bg-white my-3 md:my-5 ani"
								swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
								swiper-animate-delay="0.1s"></div>
							<div class="flex items-center ani" swiper-animate-effect="fadeInUp"
								swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
								<NuxtLink to="/index_clients" class="text-white">{{ $t('index_m3') }}</NuxtLink>
								<img src="/images/group7.png" alt="">
							</div>
						</div>
						<div class="w-full md:w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
							<img :src="top_two.home_two_img" class="w-[250px] md:w-[400px] mx-auto">
						</div>
					</div>
					<div class="w-full h-px bg-white my-5 md:my-10"></div>
				</div>

				<div class="flex flex-col md:flex-row w-full justify-center px-4 md:px-0">
					<div class="w-full md:w-[205px] mb-5 md:mb-0 ani" swiper-animate-effect="zoomIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
						<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
							top_two.home_two_left_title : top_two.en_home_two_left_title }}</h4>
						<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
							'zh' ?
							top_two.home_two_left_desc : top_two.en_home_two_left_desc }}</div>
					</div>
					<span class="hidden md:inline-block mx-[60px] -mb-3 border-r-2 border-white h-[145px] ani"
						swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s"></span>
					<div class="w-full md:w-[205px] mb-5 md:mb-0 ani" swiper-animate-effect="zoomIn"
						swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
						<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
							top_two.home_two_center_title : top_two.en_home_two_center_title }}</h4>
						<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
							'zh' ?
							top_two.home_two_center_desc : top_two.en_home_two_center_desc }}</div>
					</div>
					<span class="hidden md:inline-block mx-[60px] -mb-3 border-r-2 border-white h-[145px] ani"
						swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s"></span>
					<div class="w-full md:w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
						swiper-animate-delay="0.1s">
						<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
							top_two.home_two_right_title : top_two.en_home_two_right_title }}</h4>
						<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
							'zh' ?
							top_two.home_two_right_desc : top_two.en_home_two_right_desc }}</div>
					</div>
				</div>

				<div class="array absolute bottom-[50px]">
					<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group9.png" alt="">
				</div>

				<div v-if="!isMobile"
					class="absolute bottom-42 px-4 flex flex-col md:flex-row justify-between items-center right-2">
					<div class="float-left flex mb-3 md:mb-0">
						<img src="/images/group191.png" class="h-full mt-[10px]">
						<span class="box2ybs1">{{ $t('index_m7') }}</span>
						<span class="mx-4 box2ybs2"></span>
					</div>
					<div class="float-right text-center">
						<img @click="scrollToTop" src="/images/group97.png"
							class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
						<div class="w-[28px]  md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						<temple v-for="(item, index) in store.serApiData">
							<img @click="shareToLink(item)" :src="item.img"
								class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
							<div v-if="index !== store.serApiData.length - 1"
								class="w-[28px]  md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						</temple>
						<!-- <div class="mr-2 md:mr-0">
							<img @click="shareToInstagram" src="/images/group11.png"
								class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
							<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						</div>
						<div class="mr-2 md:mr-0">
							<img @click="shareToYoutube" src="/images/group14.png"
								class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
							<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						</div>
						<div class="mr-2 md:mr-0">
							<img @click="shareToFacebook" src="/images/group13.png"
								class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
							<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
						</div>
						<div>
							<img @click="shareToX" src="/images/group12.png"
								class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
						</div> -->
					</div>

				</div>
			</swiper-slide>

			<!-- 第三个滑块 -->
			<swiper-slide class="swiper-slide-a" :style="{
				height: '100%'
			}">
				<h3 class="t3 text-xl md:text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
					swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ locale == 'zh' ?
						top_three.home_three_title : top_three.en_home_three_title }}</h3>
				<div class="w-[90%] md:w-1/2 mt-[20px] md:mt-[30px] text-xs md:text-sm text-[#606060] text-center ani"
					swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
					{{ locale == 'zh' ? top_three.home_three_desc : top_three.en_home_three_desc }}
				</div>
				<div class="px-4 md:px-[150px] py-3 md:py-5">
					<div class="flex flex-wrap md:flex-row justify-center" v-if="top_three.home_three_img">
						<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani" swiper-animate-effect="zoomIn"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
							<img :src="top_three.home_three_img[0]" class="w-[90%] md:w-[80%] mx-auto">
						</div>
						<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani" swiper-animate-effect="zoomIn"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
							<img :src="top_three.home_three_img[1]" class="w-[90%] md:w-[80%] mx-auto">
						</div>
						<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani mx-auto" swiper-animate-effect="zoomIn"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
							<img :src="top_three.home_three_img[2]" class="w-[90%] md:w-[80%] mx-auto">
						</div>
					</div>
					<div class="w-full h-px bg-[#1C1C1C] my-3 md:my-5"></div>
				</div>

				<div class="flex items-center ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
					swiper-animate-delay="0.1s">
					<NuxtLink to="/index_clients" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
					<img src="/images/group7-1.png" alt="">
				</div>

				<div class="array absolute bottom-[50px]">
					<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group40.png" alt="">
				</div>

				<div v-if="!isMobile"
					class="absolute bottom-42 px-4 flex flex-col md:flex-row justify-between items-center right-2">
					<div class="float-left flex mb-3 md:mb-0">
						<img src="/images/group191.png" class="h-full mt-[10px]">
						<div style="width: 100px;">
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
								<NuxtLink to="/index_contact/"> {{ $t('index_contact') }}</NuxtLink>
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
								<NuxtLink to="/index_news/">{{ $t('index_news') }}</NuxtLink>
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
								<NuxtLink to="/index_about/">{{ $t('index_about') }}</NuxtLink>
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
								<NuxtLink to="/index_service/">{{ $t('index_services') }}</NuxtLink>
							</div>
							<div class="box3zx1"></div>
							<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
								<NuxtLink to="/index_clients/">{{ $t('index_clients') }}</NuxtLink>
							</div>
						</div>
						<div class="box19y">
							<span></span>
						</div>
					</div>
					<div class="float-right text-center">
						<img @click="scrollToTop" src="/images/group97-1.png" class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<template v-for="(item, index) in store.serApiData">
							<img @click="shareToLink(item)" :src="item.img_two"
								class="w-[35px] h-[35px] cursor-pointer">
							<div v-if="index !== store.serApiData.length - 1"
								class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						</template>
						<!-- <img @click="shareToInstagram" src="/images/group11-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToYoutube" src="/images/group14-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToFacebook" src="/images/group13-1.png"
							class="w-[35px] h-[35px] cursor-pointer">
						<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
						<img @click="shareToX" src="/images/group12-1.png" class="w-[35px] h-[35px] cursor-pointer"> -->
					</div>
				</div>
			</swiper-slide>

			<!-- 第四个滑块 -->
			<swiper-slide class="swiper-slide-a" :style="{
				backgroundImage: `url(${bgImage4})`,
				backgroundPosition: 'center center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: '100% 100%',
				height: '100%',
				color: '#000000',
				textAlign: 'left'
			}">
				<div class="flex justify-center">
					<div :class="isMobile ? 'w-[100%] px-[30px]' : 'w-[30%]'">
						<h2 class="ani t4 text-3xl" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s">{{ locale == 'zh'
								? top_four.home_four_title : top_four.en_home_four_title }}</h2>
						<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s"
							style="line-height: 25px;margin-top: 30px;color: #606060;font-size: 14px;">
							{{ locale == 'zh'
								? top_four.home_four_desc : top_four.en_home_four_desc }}</div>
						<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
							swiper-animate-delay="0.1s"
							style="width: 100%; height: 1px; background-color: #F1F1F1; margin: 20px auto;"></div>
						<div class="ani flex items-center justify-end" swiper-animate-effect="fadeInLeft"
							swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
							<div>
								<NuxtLink to="/index_about/" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
							</div>
							<div>
								<img src="/images/group6.png" class="w-5 ml-[5px]">
							</div>
						</div>
					</div>
					<div v-if="!isMobile" class="w-[45%]"></div>
				</div>
				<div v-if="!isMobile" class="box2yb absolute px-4 bottom-42 right-2">
					<div class="box2yb191 float-left pr-[14px] flex">
						<img src="/images/group191.png" class="h-full mt-[10px]">
						<span class="box2ybs1">{{ $t('index_m7') }}</span>
						<span class="box2ybs2 border-r-2 border-[#DEDEDE]"></span>
					</div>
					<div class="box1ybi float-right">
						<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97.png" @click="scrollToTop">
						<div class="box1ybz"></div>
						<template v-for="(item, index) in store.serApiData">
							<img @click="shareToLink(item)" :src="item.img" class="py-[6px] cursor-pointer">
							<div class="box1ybz"></div>
						</template>
					</div>
				</div>
				<div class="array absolute bottom-[50px]">
					<img class="w-[50px] h-[50px]" src="/images/group40.png">
				</div>
			</swiper-slide>
			<!--第五个滑块-->
			<swiper-slide class="swiper-slide-a">
				<div class="flex flex-col md:flex-row justify-center items-center w-full">
					<div class="w-full md:w-[40%] text-center md:text-right mb-5 md:mb-0">
						<img id="img1" :src="leftImg"
							class="w-[80%] mx-auto md:ml-auto md:mr-0 border-r-[10px] border-[#214ADB] inline-block">
					</div>
					<div class="w-full md:w-[44%] text-left md:pl-5 px-4">
						<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
						<div class="my-[20px]">{{ $t('index_n2') }}</div>
						<div class="h-[1px] w-[150px] bg-[#0c1923]"></div>
						<div class="flex mt-[10px]">
							<div>
								<NuxtLink to="/index_clients" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
							</div>
							<div>
								<img src="/images/group7-1.png" class="w-5 ml-[5px]">
							</div>
						</div>
						<div class="news_padd flex items-center">
							<img id="swipen_next" src="/images/group10.png" class="w-[30px] cursor-pointer">
							<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews"
								@slideChange="onSlideChangeNews">
								<swiper-slide v-for="(item, index) in newsList" :key="index" :virtualIndex="index"
									class="swiper-wrapper w-full">
									<!-- 这里可以使用v-for循环渲染新闻列表 -->
									<div class="swiper-slide">
										<div class="text-center">
											<h3 class="font-semibold text-2xl line-clamp-1">
												<nuxtLink :to="`/info/${item.id}`" target="_blank"
													class="text-[#0c1923]">
													{{ locale == "en" ? item.en_title : item.title }}
												</nuxtLink>
											</h3>
											<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
												<nuxtLink :to="`/info/${item.id}`" target="_blank"
													class="text-[#0c1923]">
													{{ locale == "en" ? item.en_synopsis : item.synopsis }}
												</nuxtLink>
											</h5>
										</div>
									</div>
								</swiper-slide>
							</swiper>
							<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer">
						</div>
						<div class="w-full h-[1px] bg-black mt-3"></div>
					</div>
				</div>
				<div v-if="!isMobile" class="absolute right-[10px]">
					<div class="box2yb191 float-left pr-[14px] flex">
						<img src="/images/group194.png" class="h-full mt-[10px]">
						<span class="box2ybs4 text-[#175FCB]">{{ $t('index_m7') }}</span>
						<span class="box2ybs5 border-r-[2px] border-[#A8CBFF]"></span>
					</div>
					<div class="box1ybi float-right">
						<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97-1.png"
							@click="scrollToTop">
						<div class="box1ybz2"></div>
						<template v-for="(item, index) in store.serApiData">
							<img @click="shareToLink(item)" :src="item.img_two"
								class="h-[35px] w-[35px]  cursor-pointer">
							<div v-if="index !== store.serApiData.length - 1" class="box1ybz2"></div>
						</template>
					</div>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/css/mousewheel'
import 'swiper/css/navigation'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
// 新闻数据
const leftImg = ref();
const newsList = ref([])
const isMobile = ref(false)
const store = useStore()
onMounted(() => {
	//获取是在pc还是手机端
	isMobile.value = window.innerWidth < 768
	getNewsList();
	topOneList();
	topTwoList();
	topThreeList();
	topFourList();
})
const getNewsList = () => {
	$api.get("/api/article/list/1")
		.then((res: any) => {
			console.log(res)
			newsList.value = res.data.data.list
			leftImg.value = res.data.data.list[0].image_input[0]
		})
		.catch((err) => {
			console.dir(err)
		})
}
const top_one = ref({});
const top_two = ref({});
const top_three = ref({});
const top_four = ref({});
const topOneList = () => {
	$api.get("/api/sys_config?name=top_one")
		.then((res: any) => {
			console.log(res)
			top_one.value = res.data.data.config
		})
		.catch((err) => {
			console.dir(err)
		})
}
const topTwoList = () => {
	$api.get("/api/sys_config?name=top_two")
		.then((res: any) => {
			console.log(res)
			top_two.value = res.data.data.config
		})
		.catch((err) => {
			console.dir(err)
		})
}
const topThreeList = () => {
	$api.get("/api/sys_config?name=top_three")
		.then((res: any) => {
			console.log(res)
			top_three.value = res.data.data.config
		})
		.catch((err) => {
			console.dir(err)
		})
}
const topFourList = () => {
	$api.get("/api/sys_config?name=top_four")
		.then((res: any) => {
			console.log(res)
			top_four.value = res.data.data.config
		})
		.catch((err) => {
			console.dir(err)
		})
}
// 导入背景图片
const bgImage = 'images/Group157.png'

// 添加第二个背景图片
const bgImage2 = 'images/Group157.png'

// 添加第四个背景图片
const bgImage4 = 'images/group159.png'

// Swiper实例
let swiperInstance: any = null

// 新闻轮播实例
let newsSwiper: any = null
// Swiper配置
const swiperOptions = {
	direction: 'vertical',
	slidesPerView: 1,
	mousewheel: true,
	speed: 800,
	modules: [Mousewheel, Navigation],
	// 添加断点配置，在小屏幕上调整行为
	on: {
		init: function () {
			swiperAnimateCache(this);
			swiperAnimate(this);
		},
		slideChangeTransitionEnd: function () {
			swiperAnimate(this);
		},
	},
}
// Swiper配置
const swiperOptionsNews = {
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 700,
	loop: false,
	modules: [Navigation],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}
const onSlideChangeNews = (swiper: any) => {
	console.log(newsList.value[swiper.activeIndex]);
	leftImg.value = newsList.value[swiper.activeIndex].image_input[0]

}
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const onSwiper = (swiper: any) => {
	swiperInstance = swiper
	// 初始化完成开始动画
	nextTick(() => {
		swiperAni.swiperAnimateCache(swiper); // 隐藏动画元素
		swiperAni.swiperAnimate(swiper); // 初始化完成开始动画
	})
}

const onSlideChange = () => {
	// 处理滑块切换
	if (swiperInstance) {
		//console.log('slide change')
		setTimeout(() => {
			swiperAni.swiperAnimate(swiperInstance); // 每个slide开始切换时也运行当前slide动画
		}, 300)
	}
}

// 社交分享功能
const shareToLink = (item) => {
	// 实现Instagram分享
	window.open(item.link, '_blank');
}
// 添加回到顶部功能
const scrollToTop = () => {
	if (swiperInstance) {
		swiperInstance.slideTo(0)
	}
}
</script>

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

.swiper-slide-a {
	text-align: center;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.box2ybs2 {
	margin-left: -14px;
	border-right: 2px solid #ffffff;
	display: inline-block;
	height: 224px;
	margin-top: 10px;
}

.box2ybs1 {
	writing-mode: vertical-rl;
	transform: rotate(360deg);
	padding-right: 20px;
	padding-left: 5px;
	color: #DEDEDE;
	letter-spacing: 2px;
	text-align: center;
}

.t1::after {
	content: '';
	margin-top: -13px;
	width: 205px;
	height: 20px;
	background: #175FCB;
	display: block;
}

.t2::after {
	content: '';
	width: 100px;
	height: 20px;
	background: #175FCB;
	display: block;
	margin: 0 auto;
	margin-top: -13px;
}

// 添加媒体查询，针对手机端优化
@media (max-width: 768px) {
	.t1::after {
		width: 150px;
		height: 15px;
	}

	.t2::after {
		width: 80px;
		height: 15px;
	}

	.t3::after {
		width: 250px;
		height: 15px;
	}

	.t4::after {
		width: 80px;
		height: 15px;
	}

	.t5::after {
		width: 80px;
		height: 15px;
	}



	.box2ybs3 {
		height: 180px;
	}
}
.t4::after {
		content: '';
		width: 120px;
		height: 20px;
		background: #A3C8FF;
		display: block;
		margin-top: -13px;
	}
.box19y {
	padding-right: 10px;
}

.box19y span {
	margin-left: 0.1rem;
	border-right: 2px solid #A8CBFF;
	display: inline-block;
	height: 224px;
	margin-top: 10px;
}

.box3zx1 {
	width: 33px;
	height: 2px;
	border-top: solid #A8CBFF;
	margin: 15px auto
}

.box2ybs4 {
	writing-mode: vertical-rl;
	transform: rotate(360deg);
	padding-right: 10px;
	padding-left: 5px;
	color: #175FCB;
	letter-spacing: 2px;
	text-align: center;
}

.array {
	-webkit-animation: start 1.5s infinite ease-in-out;
}

@keyframes start {

	0%,
	30% {
		opacity: 0;
		transform: translate(0, -8px);
	}

	60% {
		opacity: 1;
		transform: translate(0, 0);
	}

	100% {
		opacity: 0;
		transform: translate(0, 10px);
	}
}

.box1ybz {
	width: 33px;
	border-top: 1px solid #DEDEDE;
}

.box1ybz2 {
	padding-top: 10px;
	width: 33px;
	border-top: 1px solid #a8cbff;
}
</style>