From 2a1ed3d9e55d927c1feb6cb66a764082c8ec3ada Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Wed, 3 Jun 2026 16:42:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A1=B5=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main-footer.vue | 24 +++++++++- src/pages/home/components/Carousel.vue | 46 +++++++++++++++----- src/pages/home/components/ProductFeature.vue | 45 +++++++++++++++---- src/pages/home/components/ProjectCta.vue | 21 ++++++++- src/pages/home/index.vue | 27 +++++++----- tsconfig.tsbuildinfo | 2 +- 6 files changed, 131 insertions(+), 34 deletions(-) diff --git a/src/components/main-footer.vue b/src/components/main-footer.vue index 3a2927d..484451a 100644 --- a/src/components/main-footer.vue +++ b/src/components/main-footer.vue @@ -80,12 +80,34 @@ } } @media (max-width: 800px) { - padding: 15px 20px; + min-height: 155px; + padding: 20px 14px 18px; flex-direction: column; align-items: center; + justify-content: center; + gap: 28px; + + > .left { + order: 1; + font-size: 11px; + line-height: 1.4; + } + > .right { + order: 2; + width: 100%; + justify-content: space-around; + gap: 10px; > div { border-left: none; + margin-left: 0; + padding-left: 0; + + > .link { + font-size: 11px; + line-height: 1.4; + white-space: nowrap; + } } } } diff --git a/src/pages/home/components/Carousel.vue b/src/pages/home/components/Carousel.vue index 35b89f5..6cdc95b 100644 --- a/src/pages/home/components/Carousel.vue +++ b/src/pages/home/components/Carousel.vue @@ -407,6 +407,7 @@ transform: translateX(100%); transition: transform 0.28s ease; will-change: transform; + z-index: 9; } .carousel-pagination-button { position: relative; @@ -469,31 +470,54 @@ } @media (max-width: 768px) { - .carousel-slide { - min-height: 320px; - } - .home-carousel { .carousel-slide { + aspect-ratio: auto; + height: 365px; + min-height: 365px; + + .carousel-banner { + height: 263px; + } + + .banner-title { + top: 86px; + right: auto; + left: 30px; + width: min(220px, calc(100% - 60px)); + font-size: 28px; + font-weight: 700; + line-height: 1.35; + letter-spacing: 2px; + transform: none; + } + .desc { width: 100%; min-width: 0; - height: auto; - min-height: 92px; - padding: 16px 20px; + height: 102px; + min-height: 102px; + padding: 16px 15px; + gap: 18px; } .desc-line { - top: -28px; - height: 42px; + top: -70px; + height: 45px; } .desc-index { - font-size: 40px; + font-size: 32px; } .desc-copy { max-width: none; - font-size: 12px; + font-size: 11px; + font-weight: 600; + line-height: 1.45; } } + + .carousel-pagination { + display: none; + } } .carousel-pagination-arrow { diff --git a/src/pages/home/components/ProductFeature.vue b/src/pages/home/components/ProductFeature.vue index 9bed164..f72545f 100644 --- a/src/pages/home/components/ProductFeature.vue +++ b/src/pages/home/components/ProductFeature.vue @@ -191,7 +191,7 @@ @media (max-width: 980px) { .product-feature, .product-feature-reversed { - grid-template-columns: 1fr; + flex-direction: column-reverse; gap: 24px; width: min(680px, calc(100% - 40px)); min-height: 0; @@ -227,11 +227,12 @@ .product-feature, .product-feature-reversed { width: calc(100% - 32px); - padding: 52px 0; + gap: 28px; + padding: 0 0 64px; } .product-feature-art { - min-height: clamp(300px, 82vw, 430px); + min-height: clamp(280px, 82vw, 360px); } .product-feature-copy, @@ -242,28 +243,54 @@ } .product-feature-bg { - width: 78%; + width: 72%; + margin-left: 38px; + border-radius: 10px; } .product-feature-panel, .product-feature-reversed .product-feature-panel { left: auto; - right: 0; - bottom: 42px; - width: 68%; + right: 12px; + bottom: 22px; + width: 72%; } .product-feature-reversed .product-feature-bg { + width: 70%; + margin-right: 16px; + margin-left: auto; + } + + .product-feature-reversed .product-feature-panel { + right: auto; + left: 18px; + bottom: 16px; width: 72%; } + .product-feature-name { + margin-bottom: 16px; + font-size: 18px; + letter-spacing: 1.5px; + } + .product-feature-title { width: 100%; max-width: 100%; - font-size: clamp(26px, 7.2vw, 30px); - line-height: 1.2; + margin-bottom: 26px; + font-size: clamp(22px, 6.1vw, 26px); + line-height: 1.35; letter-spacing: 1.2px; overflow-wrap: anywhere; } + + .product-feature-link { + min-width: 100px; + min-height: 40px; + padding: 0 22px; + font-size: 9px; + letter-spacing: 1px; + } } diff --git a/src/pages/home/components/ProjectCta.vue b/src/pages/home/components/ProjectCta.vue index dc5a9a1..5d19821 100644 --- a/src/pages/home/components/ProjectCta.vue +++ b/src/pages/home/components/ProjectCta.vue @@ -77,7 +77,26 @@ @media (max-width: 640px) { .project-cta { - min-height: 340px; + min-height: 288px; + padding: 64px 20px; + } + + .project-cta-inner { + gap: 28px; + } + + .project-cta-title { + font-size: 22px; + line-height: 1.4; + letter-spacing: 1.2px; + } + + .project-cta-link { + min-width: 100px; + min-height: 40px; + padding: 0 22px; + font-size: 9px; + letter-spacing: 1px; } } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 1bfd82d..636ab57 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -17,9 +17,9 @@ { name: 'AiDA 3.1', title: t('Home.aidaDesc'), - backgroundImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/aida_intro_01_bg.png', + backgroundImage: aidaIntroBg, backgroundAlt: 'Fashion design sketches on paper', - panelImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2024/01/new-layout-1.png', + panelImage: aidaPanel, panelAlt: 'AiDA design workspace preview', reversed: false }, @@ -62,7 +62,7 @@ > diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 01fb3eb..20de38a 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/index.ts","./src/directives/myevents.ts","./src/directives/scroll-progress.ts","./src/directives/tween-animation.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/contactview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/events/index.vue","./src/pages/events/swiper.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/register.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"} \ No newline at end of file +{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/email-box.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/main-menu-dialog.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/custom-show.js","./src/directives/index.ts","./src/directives/scroll-progress.ts","./src/directives/tween.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/contact-us/index.vue","./src/pages/events/all-events.vue","./src/pages/events/index.vue","./src/pages/events/list-en.js","./src/pages/events/list-zh-cn.js","./src/pages/events/list-zh-tw.js","./src/pages/events/swiper.vue","./src/pages/events-detail/index.vue","./src/pages/events-detail/list-en.js","./src/pages/events-detail/list-zh-cn.js","./src/pages/events-detail/list-zh-tw.js","./src/pages/help-centre/faq.vue","./src/pages/help-centre/index.vue","./src/pages/help-centre/title.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/media/index.vue","./src/pages/media/list-en.js","./src/pages/media/list-zh-cn.js","./src/pages/media/list-zh-tw.js","./src/pages/mixi/index.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/address.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/payment-methods.vue","./src/pages/my-account/register.vue","./src/pages/my-account/subscriptions.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/pages/others/disclaimer.vue","./src/pages/others/not-found-404.vue","./src/pages/others/others-header.vue","./src/pages/others/privacy-policy.vue","./src/pages/others/site-map.vue","./src/pages/others/terms-of-use.vue","./src/pages/user-stories/index.vue","./src/pages/user-stories/user-list.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"errors":true,"version":"6.0.3"} \ No newline at end of file