| | |
| | | <script setup> |
| | | import banner from '@/assets/images/banner1@2x.png'; |
| | | import banner2 from '@/assets/images/banner2@2x.png'; |
| | | import banner from '@/assets/images/banner1.jpg'; |
| | | import banner2 from '@/assets/images/banner2.jpg'; |
| | | |
| | | const getUrl = (name) => { |
| | | // return new URL(url, import.meta.url).href; |
| | |
| | | </div> |
| | | |
| | | <div |
| | | class="relative w-full h-screen md:h-[707px] overflow-hidden bg-white group" |
| | | class="relative w-full h-[707px] md:h-[707px] overflow-hidden bg-white group" |
| | | @mouseenter="stopAutoPlay" |
| | | @mouseleave="startAutoPlay" |
| | | > |
| | |
| | | v-show="currentSlide === index" |
| | | class="absolute inset-0 w-full h-full" |
| | | > |
| | | <img |
| | | :src="banner.image" |
| | | class="slide-up-imgage w-full h-full object-cover brightness-[0.65]" |
| | | /> |
| | | <img :src="banner.image" class="slide-up-imgage w-full h-full" /> |
| | | |
| | | <div class="absolute inset-0 flex items-center px-6 md:px-30 z-20"> |
| | | <div class="text-white"> |
| | |
| | | > |
| | | <h1 |
| | | :key="`t1-${currentSlide}`" |
| | | class="slide-up-text font-bold tracking-tighter drop-shadow-2xl" |
| | | class="slide-up-text font-bold text-nowrap tracking-tighter drop-shadow-2xl" |
| | | style="animation-delay: 1.8s" |
| | | > |
| | | {{ banner.title }} |
| | | </h1> |
| | | <h2 |
| | | :key="`t2-${currentSlide}`" |
| | | class="slide-up-text font-bold tracking-tighter drop-shadow-2xl" |
| | | class="slide-up-text font-bold text-nowrap tracking-tighter drop-shadow-2xl" |
| | | style="animation-delay: 1.8s" |
| | | > |
| | | {{ banner.subtitle }} |