feat: 图片地址更换为线上资源

src/pages/home/components/Carousel.vue

@@ -1,15 +1,19 @@
 <template>
 	<section
 		class="carousel-container"
+		:class="{ 'show-pagination': showPagination }"
 		aria-label="Featured content"
 		@mouseenter="pauseAutoplay"
 		@mouseleave="resumeAutoplay"
+		@click="handleCarouselClick"
+		@touchstart="handleCarouselTouch"
+		@touchmove="handleCarouselTouch"
 	>
 		<KagolCarousel
 			v-model="activePage"
 			class="home-carousel"
-			:autoplay="false"
-			:interval="1000"
+			:autoplay="isAutoplayEnabled"
+			:interval="10000"
 		>
 			<article v-for="slide in slides" :key="slide.id" ref="slideEls" class="carousel-slide">
 				<div class="mask"></div>
@@ -89,9 +93,8 @@
 	import { gsap } from 'gsap'
 	import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 	import '@kagol/vue-carousel/dist/style.css'
-	import mainBanner01 from '../../../assets/images/home/mainbanner01.jpg'
-	import mainBanner02 from '../../../assets/images/home/mainbanner02.jpg'
 	import { useI18n } from 'vue-i18n'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 
 	const { t, locale } = useI18n()
 
@@ -109,6 +112,8 @@
 	const isAutoplayEnabled = shallowRef(false)
 	const slideEls = useTemplateRef<HTMLElement[]>('slideEls')
 	const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 768)
+	const showPagination = ref(false)
+	let hideTimeout: number | null = null
 
 	const getVideoUrl = () => {
 		const isMobile = windowWidth.value < 768
@@ -129,7 +134,7 @@
 	const slides = computed<HomeSlide[]>(() => [
 		{
 			id: 'aida',
-			image: mainBanner01,
+			image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mainbanner01-2.jpg`,
 			video: '',
 			alt: t('Home.banner1slogan'),
 			title: t('Home.banner1slogan'),
@@ -138,7 +143,7 @@
 		},
 		{
 			id: 'mixi',
-			image: mainBanner02,
+			image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mainbanner02-3.jpg`,
 			video: '',
 			alt: 'Code Create product banner',
 			title: t('Home.banner2slogan'),
@@ -247,6 +252,38 @@
 		isAutoplayEnabled.value = true
 	}
 
+	function showPaginationControls() {
+		showPagination.value = true
+		
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		
+		hideTimeout = window.setTimeout(() => {
+			showPagination.value = false
+			hideTimeout = null
+		}, 3000)
+	}
+
+	function handleCarouselClick() {
+		showPaginationControls()
+	}
+
+	function handleCarouselTouch() {
+		showPaginationControls()
+	}
+
+	function handleOutsideClick(event: MouseEvent | TouchEvent) {
+		const container = document.querySelector('.carousel-container')
+		if (container && !container.contains(event.target as Node)) {
+			showPagination.value = false
+			if (hideTimeout) {
+				window.clearTimeout(hideTimeout)
+				hideTimeout = null
+			}
+		}
+	}
+
 	onMounted(() => {
 		resumeAutoplay()
 		queueDescAnimation()
@@ -256,6 +293,10 @@
 			windowWidth.value = window.innerWidth
 		}
 		window.addEventListener('resize', handleResize)
+
+		// 监听点击轮播图外部区域
+		document.addEventListener('click', handleOutsideClick)
+		document.addEventListener('touchstart', handleOutsideClick)
 	})
 
 	onBeforeUnmount(() => {
@@ -269,6 +310,13 @@
 		if (handleResize) {
 			window.removeEventListener('resize', handleResize)
 		}
+
+		// 清理定时器和事件监听
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		document.removeEventListener('click', handleOutsideClick)
+		document.removeEventListener('touchstart', handleOutsideClick)
 	})
 
 	watch(activePage, queueDescAnimation)
@@ -327,6 +375,7 @@
 				color: #ffffff;
 				background: transparent;
 				isolation: isolate;
+				pointer-events: none;
 			}
 			.desc-fill {
 				position: absolute;
@@ -337,6 +386,9 @@
 				background: #a51f24;
 				pointer-events: none;
 			}
+			.desc > * {
+				pointer-events: auto;
+			}
 
 			.desc-index-group {
 				position: relative;
@@ -408,6 +460,7 @@
 			transition: transform 0.28s ease;
 			will-change: transform;
 			z-index: 9;
+			opacity: 1;
 		}
 		.carousel-pagination-button {
 			position: relative;
@@ -425,16 +478,16 @@
 			transition: background-color 0.2s ease;
 		}
 
-		.carousel-pagination-button:hover {
-			background: rgba(255, 255, 255, 0.75);
-		}
+		// .carousel-pagination-button:hover {
+		// 	background: rgba(255, 255, 255, 0.75);
+		// }
 
-		.carousel-pagination-button:focus-visible {
-			position: relative;
-			z-index: 1;
-			outline: 2px solid #ffffff;
-			outline-offset: -6px;
-		}
+		// .carousel-pagination-button:focus-visible {
+		// 	position: relative;
+		// 	z-index: 1;
+		// 	outline: 2px solid #ffffff;
+		// 	outline-offset: -6px;
+		// }
 
 		.carousel-pagination-arrow {
 			position: absolute;
@@ -477,7 +530,7 @@
 				min-height: 365px;
 
 				.carousel-banner {
-					height: 263px;
+					height: 100%;
 				}
 
 				.banner-title {
@@ -499,6 +552,7 @@
 					min-height: 102px;
 					padding: 16px 15px;
 					gap: 18px;
+					background: transparent;
 				}
 				.desc-line {
 					top: -70px;
@@ -516,13 +570,30 @@
 			}
 
 			.carousel-pagination {
-				display: none;
+				width: 50px;
+				height: 102px;
+				transform: translateX(0);
+				opacity: 0;
+				transition: opacity 0.3s ease;
 			}
+
+			.carousel-pagination-button {
+				width: 50px;
+				height: 51px;
+			}
+		}
+
+		.carousel-container.show-pagination .carousel-pagination {
+			opacity: 1;
 		}
 
 		.carousel-pagination-arrow {
 			width: 18px;
 			height: 18px;
 		}
+
+		.carousel-container:hover .carousel-pagination {
+			transform: translateX(0);
+		}
 	}
 </style>