2025-03-12 14:18:25 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div style="height: 100%;width: 100%;">
|
|
|
|
|
|
<!-- Swiper 容器 -->
|
2025-03-13 14:15:31 +08:00
|
|
|
|
<swiper class="swiper-container h-full" v-bind="swiperOptions" @swiper="onSwiper" @slideChange="onSlideChange">
|
2025-03-12 14:18:25 +08:00
|
|
|
|
<!-- 第一个滑块 -->
|
|
|
|
|
|
<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%',
|
|
|
|
|
|
}">
|
2025-03-13 14:15:31 +08:00
|
|
|
|
<div class="ani text-xl font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
|
|
|
|
|
{{ $t('index_name') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ani 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="text-3xl font-semibold ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.4s">{{ $t('index_main') }}</div>
|
|
|
|
|
|
<div class="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="text-lg font-light ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
|
2025-03-12 14:18:25 +08:00
|
|
|
|
<div class="array" style=" margin-top: 50px;">
|
|
|
|
|
|
<img style="width: 50px;height: 50px;" src="/images/group9.png">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 社交图标 -->
|
2025-03-13 14:15:31 +08:00
|
|
|
|
<div class="absolute bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
2025-03-12 14:18:25 +08:00
|
|
|
|
<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">
|
2025-03-13 14:15:31 +08:00
|
|
|
|
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
|
|
|
|
|
<img @click="shareToInstagram" src="/images/group13.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/group12.png" class="w-[30px] h-[30px] cursor-pointer">
|
2025-03-12 14:18:25 +08:00
|
|
|
|
</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>
|
|
|
|
|
|
|
2025-03-13 14:15:31 +08:00
|
|
|
|
<!-- 第二个滑块 -->
|
|
|
|
|
|
<swiper-slide class="swiper-slide-a text-white" :style="{
|
|
|
|
|
|
backgroundImage: `url(${bgImage2})`,
|
|
|
|
|
|
backgroundPosition: 'center center',
|
|
|
|
|
|
backgroundRepeat: 'no-repeat',
|
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
|
height: '100%'
|
|
|
|
|
|
}">
|
|
|
|
|
|
<div class="px-[150px]">
|
|
|
|
|
|
<div class="flex items-center text-left">
|
|
|
|
|
|
<div class="w-1/2">
|
|
|
|
|
|
<h2 class="text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m1') }}</h2>
|
|
|
|
|
|
<h4 class="text-lg mt-10 leading-[35px] ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m2') }}</h4>
|
|
|
|
|
|
<div class="w-[18%] h-[2px] bg-white 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="/content" class="text-white">{{ $t('index_m3') }}</NuxtLink>
|
|
|
|
|
|
<img src="/images/group7.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
|
|
|
|
|
<img src="/images/maskgroup.png" class="w-[400px] mx-auto">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full h-px bg-white my-10"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex w-full justify-center">
|
|
|
|
|
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m4') }}</h4>
|
|
|
|
|
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m4_1') }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
|
|
|
|
|
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s"></span>
|
|
|
|
|
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m5') }}</h4>
|
|
|
|
|
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m5_1') }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
|
|
|
|
|
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s"></span>
|
|
|
|
|
|
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<h4 class="t2 text-xl font-semibold">{{ $t('index_m6') }}</h4>
|
|
|
|
|
|
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m6_1') }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="array absolute bottom-[50px]">
|
|
|
|
|
|
<img class="w-[50px] h-[50px]" src="/images/group9.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2 ">
|
|
|
|
|
|
<div class="float-left flex">
|
|
|
|
|
|
<img src="/images/group191.png" class="h-full mt-[10px]">
|
|
|
|
|
|
<span class="ml-2 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-[35px] h-[35px] cursor-pointer">
|
|
|
|
|
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
|
|
|
|
|
<img @click="shareToInstagram" src="/images/group11.png"
|
|
|
|
|
|
class="w-[35px] h-[35px] cursor-pointer">
|
|
|
|
|
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
|
|
|
|
|
<img @click="shareToYoutube" src="/images/group14.png" class="w-[35px] h-[35px] cursor-pointer">
|
|
|
|
|
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
|
|
|
|
|
<img @click="shareToFacebook" src="/images/group13.png"
|
|
|
|
|
|
class="w-[35px] h-[35px] cursor-pointer">
|
|
|
|
|
|
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
|
|
|
|
|
<img @click="shareToX" src="/images/group12.png" class="w-[35px] h-[35px] cursor-pointer">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 第三个滑块 -->
|
|
|
|
|
|
<swiper-slide class="swiper-slide-a" :style="{
|
|
|
|
|
|
height: '100%'
|
|
|
|
|
|
}">
|
|
|
|
|
|
<h3 class="t3 text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_s1') }}</h3>
|
|
|
|
|
|
<div class="w-1/2 mt-[30px] text-sm text-[#606060] text-center ani" swiper-animate-effect="fadeInUp"
|
|
|
|
|
|
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
|
|
|
|
|
{{ $t('index_s2') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="px-[150px] py-5">
|
|
|
|
|
|
<div class="flex">
|
|
|
|
|
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<img src="/images/group160.png" class="w-[80%] mx-auto">
|
|
|
|
|
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
|
|
|
|
|
{{ $t('index_s3') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<img src="/images/group161.png" class="w-[80%] mx-auto">
|
|
|
|
|
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
|
|
|
|
|
{{ $t('index_s4') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">
|
|
|
|
|
|
<img src="/images/group162.png" class="w-[80%] mx-auto">
|
|
|
|
|
|
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
|
|
|
|
|
{{ $t('index_s5') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full h-px bg-[#1C1C1C] 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="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
|
|
|
|
|
<img src="/images/group7-1.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="array absolute bottom-[50px]">
|
|
|
|
|
|
<img class="w-[50px] h-[50px]" src="/images/group40.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2">
|
|
|
|
|
|
<div class="float-left flex">
|
|
|
|
|
|
<img src="/images/group194.png" class="h-full mt-[10px]">
|
|
|
|
|
|
<div style="width: 100px;">
|
|
|
|
|
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_contact') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box3zx1"></div>
|
|
|
|
|
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_news') }}</div>
|
|
|
|
|
|
<div class="box3zx1"></div>
|
|
|
|
|
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_about') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box3zx1"></div>
|
|
|
|
|
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_services') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box3zx1"></div>
|
|
|
|
|
|
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_clients') }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="mx-4 box2ybs3"></span>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<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('/images/group159.png')`,
|
|
|
|
|
|
backgroundPosition: 'center center',
|
|
|
|
|
|
backgroundRepeat: 'no-repeat',
|
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
color: '#000000',
|
|
|
|
|
|
textAlign: 'left'
|
|
|
|
|
|
}">
|
|
|
|
|
|
<div class="flex justify-center">
|
|
|
|
|
|
<div class="w-[30%]">
|
|
|
|
|
|
<h2 class="ani t4 text-3xl" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
|
|
|
|
|
swiper-animate-delay="0.1s">{{ $t('index_a1') }}</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;">{{ $t('index_a2')
|
|
|
|
|
|
}}
|
|
|
|
|
|
</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="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<img src="/images/group6.png" class="w-5 ml-[5px]">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-[45%]"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div 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>
|
|
|
|
|
|
<img @click="shareToInstagram" src="/images/group11.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToYoutube" src="/images/group14.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToFacebook" src="/images/group13.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToX" src="/images/group12.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
</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 justify-center items-center w-full">
|
|
|
|
|
|
<div class="w-[40%] text-right">
|
|
|
|
|
|
<img id="img1" src="/images/Group157.png" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-[44%] text-left pl-5">
|
|
|
|
|
|
<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="/content" 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" @click="nextNews">
|
|
|
|
|
|
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews" >
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<h5 class="text-[#606060] mt-[25px] leading-[25px]">
|
|
|
|
|
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
|
|
|
|
|
{{ item.description }}
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
|
</swiper>
|
|
|
|
|
|
<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full h-[1px] bg-black mt-10"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div 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]">Navigation</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="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToInstagram" src="/images/group11-1.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToYoutube" src="/images/group14-1.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToFacebook" src="/images/group13-1.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
<div class="box1ybz"></div>
|
|
|
|
|
|
<img @click="shareToX" src="/images/group12-1.png" class="py-[6px] cursor-pointer">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</swiper-slide>
|
2025-03-12 14:18:25 +08:00
|
|
|
|
</swiper>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
2025-03-13 14:15:31 +08:00
|
|
|
|
import { nextTick, ref } from 'vue'
|
2025-03-12 14:18:25 +08:00
|
|
|
|
import 'swiper/css'
|
2025-03-13 14:15:31 +08:00
|
|
|
|
import { Mousewheel, Navigation } from 'swiper/modules'
|
|
|
|
|
|
import 'swiper/css/mousewheel'
|
|
|
|
|
|
import 'swiper/css/navigation'
|
|
|
|
|
|
import * as swiperAni from '@/assets/animate/animate.js'
|
2025-03-12 14:18:25 +08:00
|
|
|
|
|
|
|
|
|
|
// 导入背景图片
|
|
|
|
|
|
const bgImage = 'images/Group157.png'
|
|
|
|
|
|
|
2025-03-13 14:15:31 +08:00
|
|
|
|
// 添加第二个背景图片
|
|
|
|
|
|
const bgImage2 = '/images/Group157.png'
|
|
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
// Swiper实例
|
|
|
|
|
|
let swiperInstance: any = null
|
|
|
|
|
|
|
2025-03-13 14:15:31 +08:00
|
|
|
|
// 新闻轮播实例
|
|
|
|
|
|
let newsSwiper: any = null
|
|
|
|
|
|
|
|
|
|
|
|
// 新闻数据
|
|
|
|
|
|
const newsList = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '新闻标题1',
|
|
|
|
|
|
description: '新闻描述内容1，这里是新闻的简短描述。',
|
|
|
|
|
|
url: '/news/1'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '新闻标题2',
|
|
|
|
|
|
description: '新闻描述内容2，这里是新闻的简短描述。',
|
|
|
|
|
|
url: '/news/2'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '新闻标题3',
|
|
|
|
|
|
description: '新闻描述内容3，这里是新闻的简短描述。',
|
|
|
|
|
|
url: '/news/3'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '新闻标题4',
|
|
|
|
|
|
description: '新闻描述内容4，这里是新闻的简短描述。',
|
|
|
|
|
|
url: '/news/4'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '新闻标题5',
|
|
|
|
|
|
description: '新闻描述内容5，这里是新闻的简短描述。',
|
|
|
|
|
|
url: '/news/5'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
// 新闻轮播控制
|
|
|
|
|
|
const nextNews = () => {
|
|
|
|
|
|
if (newsSwiper) {
|
|
|
|
|
|
newsSwiper.slideNext()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const prevNews = () => {
|
|
|
|
|
|
if (newsSwiper) {
|
|
|
|
|
|
newsSwiper.slidePrev()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Swiper配置
|
|
|
|
|
|
const swiperOptions = {
|
|
|
|
|
|
direction: 'vertical',
|
|
|
|
|
|
slidesPerView: 1,
|
|
|
|
|
|
speed: 700,
|
|
|
|
|
|
mousewheel: true,
|
|
|
|
|
|
loop: false,
|
|
|
|
|
|
modules: [Mousewheel],
|
|
|
|
|
|
}
|
|
|
|
|
|
// Swiper配置
|
|
|
|
|
|
const swiperOptionsNews = {
|
|
|
|
|
|
direction: 'horizontal',
|
|
|
|
|
|
slidesPerView: 1,
|
|
|
|
|
|
speed: 700,
|
|
|
|
|
|
mousewheel: true,
|
|
|
|
|
|
loop: false,
|
|
|
|
|
|
modules: [Mousewheel, Navigation],
|
|
|
|
|
|
navigation: {
|
|
|
|
|
|
nextEl: '#swipen_next',
|
|
|
|
|
|
prevEl: '#swipen_prev',
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
const onSwiperNews = (swiper: any) => {
|
|
|
|
|
|
newsSwiper = swiper
|
|
|
|
|
|
}
|
2025-03-12 14:18:25 +08:00
|
|
|
|
const onSwiper = (swiper: any) => {
|
|
|
|
|
|
swiperInstance = swiper
|
2025-03-13 14:15:31 +08:00
|
|
|
|
// 初始化完成开始动画
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
swiperAni.swiperAnimateCache(swiper); // 隐藏动画元素
|
|
|
|
|
|
swiperAni.swiperAnimate(swiper); // 初始化完成开始动画
|
|
|
|
|
|
})
|
2025-03-12 14:18:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
|
// 处理滑块切换
|
2025-03-13 14:15:31 +08:00
|
|
|
|
if (swiperInstance) {
|
|
|
|
|
|
//console.log('slide change')
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
swiperAni.swiperAnimate(swiperInstance); // 每个slide开始切换时也运行当前slide动画
|
|
|
|
|
|
}, 300)
|
|
|
|
|
|
}
|
2025-03-12 14:18:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 社交分享功能
|
|
|
|
|
|
const shareToInstagram = () => {
|
|
|
|
|
|
// 实现Instagram分享
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const shareToYoutube = () => {
|
|
|
|
|
|
// 实现YouTube分享
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const shareToFacebook = () => {
|
|
|
|
|
|
// 实现Facebook分享
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const shareToX = () => {
|
|
|
|
|
|
// 实现X/Twitter分享
|
|
|
|
|
|
}
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
|
|
|
|
|
// 添加回到顶部功能
|
|
|
|
|
|
const scrollToTop = () => {
|
|
|
|
|
|
if (swiperInstance) {
|
|
|
|
|
|
swiperInstance.slideTo(0)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-03-12 14:18:25 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2025-03-13 14:15:31 +08:00
|
|
|
|
@import "@/assets/animate/animate.min.css";
|
|
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
.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 {
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
0%,
|
|
|
|
|
|
30% {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: translate(0, -8px);
|
|
|
|
|
|
}
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
60% {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: translate(0, 0);
|
|
|
|
|
|
}
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
2025-03-12 14:18:25 +08:00
|
|
|
|
100% {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: translate(0, 10px);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-03-13 14:15:31 +08:00
|
|
|
|
|
|
|
|
|
|
@keyframes zoomIn {
|
|
|
|
|
|
from {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.animate-zoomIn {
|
|
|
|
|
|
animation: zoomIn 0.5s ease-out forwards;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box2ybs1 {
|
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
|
color: #DEDEDE;
|
|
|
|
|
|
letter-spacing: 5px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box2ybs2 {
|
|
|
|
|
|
margin-left: -14px;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 224px;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
border-right: 2px solid #DEDEDE;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box2ybs3 {
|
|
|
|
|
|
margin-left: -7px;
|
|
|
|
|
|
border-right: 2px solid #A8CBFF;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 224px;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box2ybs4 {
|
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
|
letter-spacing: 5px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box2ybs5 {
|
|
|
|
|
|
margin-left: -14px;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 224px;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box3zx1 {
|
|
|
|
|
|
width: 33px;
|
|
|
|
|
|
height: 2px;
|
|
|
|
|
|
border-top: solid #A8CBFF;
|
|
|
|
|
|
margin: 15px auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.t3::after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
width: 350px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
background: #A8CBFF;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
margin-top: -13px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.t4::after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
background: #A3C8FF;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin-top: -13px;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 如果你有其他需要不同延迟的元素，可以添加更多类
|
|
|
|
|
|
.delay-700 {
|
|
|
|
|
|
animation-delay: 700ms;
|
|
|
|
|
|
}
|
|
|
|
|
|
.t5::after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
width: 100px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
background: #214ADB;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin-top: -13px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.box1ybz {
|
|
|
|
|
|
width: 33px;
|
|
|
|
|
|
height: 2px;
|
|
|
|
|
|
background-color: #A8CBFF;
|
|
|
|
|
|
margin: 2px auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.news_padd {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
}
|
2025-03-12 14:18:25 +08:00
|
|
|
|
</style>
|
