aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhangyahui
2026-06-03 17:22:48 +08:00
parent 68087b27ac
commit 81a0a060ee
4 changed files with 120 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/aida/index.vue
View File

@@ -5,9 +5,8 @@
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import diamondIcon from '@/assets/images/aida/diamond.svg'
import industryTwo from '@/assets/images/aida/industry-2.png'
import industryThree from '@/assets/images/aida/industry-3.png'
import timeIcon from '@/assets/images/aida/time.svg'
import { IMAGE_BASE_URL } from '@/tools/config'
gsap.registerPlugin(ScrollTrigger)
@@ -15,9 +14,9 @@
const demoVideo = computed(() => {
if (locale.value === 'en') {
return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4'
return `${IMAGE_BASE_URL}/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4`
}
return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4'
return `${IMAGE_BASE_URL}/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4`
})
const keyFeatures = computed(() => {
@@ -27,17 +26,17 @@
const benefits = computed(() => {
return [
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_01.png',
image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_01.png`,
alt: 'Light bulb icon',
text: t('Aida.benefits1')
},
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_02.png',
image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_02.png`,
alt: 'Stopwatch icon',
text: t('Aida.benefits2')
},
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_03-1.png',
image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_03-1.png`,
alt: 'Drawing brush icon',
text: t('Aida.benefits3')
}
@@ -55,23 +54,23 @@
]
})
const plans = computed(() => {
const plans = computed(() => {
return [
{
icon: timeIcon,
name: t('Aida.trial'),
description: t('Aida.days'),
action: t('Aida.start'),
href: 'https://www.aida.com.hk/register'
},
{
icon: diamondIcon,
name: t('Aida.corporate'),
description: t('Aida.customised'),
action: t('Aida.contactUs'),
href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
}
]
{
icon: timeIcon,
name: t('Aida.trial'),
description: t('Aida.days'),
action: t('Aida.start'),
href: 'https://www.aida.com.hk/register'
},
{
icon: diamondIcon,
name: t('Aida.corporate'),
description: t('Aida.customised'),
action: t('Aida.contactUs'),
href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
}
]
})
const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
@@ -311,7 +310,7 @@ const plans = computed(() => {
<section class="aida-hero" aria-labelledby="aida-title">
<img
class="aida-hero-image"
src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_banner-1.jpg"
:src="`${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_banner-1.jpg`"
alt="AiDA 3.1 banner"
/>
<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
@@ -348,13 +347,13 @@ const plans = computed(() => {
<div class="feature-art">
<img
class="feature-bg"
src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png"
:src="`${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_intro_01_bg.png`"
alt="Fashion design sketches on paper"
loading="lazy"
/>
<img
class="feature-panel"
src="https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png"
:src="`${IMAGE_BASE_URL}/wp-content/uploads/2024/01/new-layout-1.png`"
alt="AiDA design workspace preview"
loading="lazy"
/>

105
src/pages/home/components/Carousel.vue
View File

@@ -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>

11
src/pages/home/index.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { watch, computed } from 'vue'
import { useHead } from '@unhead/vue'
import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
import aidaPanel from '@/assets/images/home/aida-panel.png'
import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
@@ -9,7 +8,9 @@
import HomeCarousel from './components/Carousel.vue'
import ProductFeature from './components/ProductFeature.vue'
import ProjectCta from './components/ProjectCta.vue'
import { IMAGE_BASE_URL } from '@/tools/config'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const productFeatures = computed(() => {
@@ -17,18 +18,18 @@
{
name: 'AiDA 3.1',
title: t('Home.aidaDesc'),
backgroundImage: aidaIntroBg,
backgroundImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_intro_01_bg.png`,
backgroundAlt: 'Fashion design sketches on paper',
panelImage: aidaPanel,
panelImage: `${IMAGE_BASE_URL}/wp-content/uploads/2024/01/new-layout-1.png`,
panelAlt: 'AiDA design workspace preview',
reversed: false
},
{
name: 'Mixi',
title: t('Home.mixiSlogan'),
backgroundImage: mixiIntroBg,
backgroundImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mixi_intro_01_bg.png`,
backgroundAlt: 'Layered fabric texture',
panelImage: mixiPanel,
panelImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mixi_intro_01_panel.png`,
panelAlt: 'Mixi visual search interface preview',
reversed: true
}

1
src/tools/config.ts Normal file
View File

@@ -0,0 +1 @@
export const IMAGE_BASE_URL = 'https://code-create.com.hk'