naweigete-web/pages/index.vue

<template>
	<div style="height: 100%;width: 100%;">
		<!-- Swiper 容器 -->
		<swiper class="swiper-container h-full" :direction="'vertical'" :slides-per-view="1" :speed="700"
			:mousewheel="true" :allow-touch-move="false" @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: '100% 100%',
			}">
				<div class="text-xl tracking-wider font-light animate-fadeInUp">{{ $t('index_name') }}</div>
				<div class="w-[45%] h-px bg-white my-5 animate-fadeInUp"></div>
				<div class="text-3xl font-semibold animate-fadeInUp">{{ $t('index_main') }}</div>
				<div class="w-[45%] h-px bg-white my-5 animate-fadeInUp"></div>
				<div class="text-lg font-light animate-fadeInUp">{{ $t('index_get_to') }}</div>
				<div class="array" style=" margin-top: 50px;">
					<img style="width: 50px;height: 50px;" src="/images/group9.png">
				</div>
				<!-- 社交图标 -->
				<div class="absolute bottom-[42px] w-full">
					<div class="flex justify-center w-full">
						<img @click="shareToInstagram" src="/images/group11.png"
							class="w-[30px] h-[30px] cursor-pointer">
						<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
						<img @click="shareToYoutube" src="/images/group14.png" class="w-[30px] h-[30px] cursor-pointer">
						<!-- 按相同方式添加其他社交图标 -->
					</div>

					<!-- 导航链接 -->
					<div class="w-[45%] h-[2px] bg-white mx-auto my-5"></div>
					<div class="flex w-1/2 justify-around mx-auto">
						<NuxtLink to="/about" class="text-white">{{ $t('index_about') }}</NuxtLink>
						<NuxtLink to="/services" class="text-white">{{ $t('index_services') }}</NuxtLink>
						<NuxtLink to="/clients" class="text-white">{{ $t('index_clients') }}</NuxtLink>
						<NuxtLink to="/news" class="text-white">{{ $t('index_news') }}</NuxtLink>
						<NuxtLink to="/contact" class="text-white">{{ $t('index_contact') }}</NuxtLink>
					</div>
				</div>
			</swiper-slide>

			<!-- 按相同方式添加其他滑块 -->

		</swiper>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'

// 导入背景图片
const bgImage = 'images/Group157.png'

// Swiper实例
let swiperInstance: any = null

const onSwiper = (swiper: any) => {
	swiperInstance = swiper
}

const onSlideChange = () => {
	// 处理滑块切换
}

// 社交分享功能
const shareToInstagram = () => {
	// 实现Instagram分享
}

const shareToYoutube = () => {
	// 实现YouTube分享
}

const shareToFacebook = () => {
	// 实现Facebook分享
}

const shareToX = () => {
	// 实现X/Twitter分享
}
</script>

<style lang="scss" scoped>
.swiper-slide-a {
	text-align: center;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.animate-fadeInUp {
	animation: fadeInUp 0.5s ease-out forwards;
}

.array {
	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);
	}
}
</style>