From a4f2353cf0b3b920186910fbff24ae3e7c26efab Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Fri, 5 Jun 2026 11:41:38 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/components/Carousel.vue | 13 +- src/pages/home/components/ProductFeature.vue | 121 ++++++++++--------- src/pages/home/components/ProjectCta.vue | 43 +++---- src/pages/home/index.vue | 61 +++++----- tsconfig.tsbuildinfo | 2 +- 5 files changed, 126 insertions(+), 114 deletions(-) diff --git a/src/pages/home/components/Carousel.vue b/src/pages/home/components/Carousel.vue index f9b44d2..cf7e682 100644 --- a/src/pages/home/components/Carousel.vue +++ b/src/pages/home/components/Carousel.vue @@ -526,8 +526,8 @@ .home-carousel { .carousel-slide { aspect-ratio: auto; - height: 365px; - min-height: 365px; + height: 504px; + min-height: 504px; .carousel-banner { height: 100%; @@ -596,4 +596,13 @@ transform: translateX(0); } } + + // @media (max-width: 768px) and (min-height: 844px) { + // .home-carousel { + // .carousel-slide { + // height: 504px; + // min-height: 504px; + // } + // } + // } diff --git a/src/pages/home/components/ProductFeature.vue b/src/pages/home/components/ProductFeature.vue index 13aef19..3b19c25 100644 --- a/src/pages/home/components/ProductFeature.vue +++ b/src/pages/home/components/ProductFeature.vue @@ -30,7 +30,7 @@ :src="backgroundImage" :alt="backgroundAlt" loading="lazy" - translate-x-s="-100" + translate-x-s="0" translate-x="100" />

{{ name }}

{{ title }}

- - {{$t('Home.viewMore')}} + + {{ $t('Home.viewMore') }} @@ -63,12 +58,18 @@ display: flex; align-items: center; gap: clamp(48px, 5.5vw, 76px); + width: 100%; max-width: 1440px; min-width: 0; min-height: 690px; margin: 0 auto; + padding: 100px 15px; + justify-content: center; + box-sizing: border-box; + overflow-x: hidden; & > div { - width: 50%; + // width: 50%; + box-sizing: content-box; } } @@ -89,15 +90,17 @@ .product-feature-art { position: relative; - width: min(100%, 560px); + width: clamp(320px, 45vw, 560px); min-width: 0; min-height: 560px; justify-self: start; + flex: 0 1 auto; + overflow: hidden; } .product-feature-bg { display: block; - width: min(100%, 480px); + width: clamp(200px, 70%, 400px); max-width: 100%; height: auto; user-select: none; @@ -105,52 +108,51 @@ .product-feature-panel { position: absolute; - right: 0; - bottom: 94px; - width: min(72%, 380px); - max-width: 100%; + left: 15%; + top: 53.329%; + max-width: 400px; + width: auto; height: auto; user-select: none; } .product-feature-reversed .product-feature-bg { - width: min(100%, 460px); + width: 70%; margin-left: auto; } .product-feature-reversed .product-feature-panel { - right: auto; - left: -88px; - bottom: 70px; - width: min(78%, 430px); + left: 0; + top: 53.329%; } .product-feature-copy { position: relative; z-index: 1; - max-width: 590px; + max-width: 450px; min-width: 0; justify-self: start; padding-bottom: 18px; + flex: 1 1 auto; } .product-feature-name { margin: 0 0 20px; - color: #6e6e6e; + color: #666666; font-family: Poppins, sans-serif; - font-size: 18px; - font-weight: 700; + font-size: 24px; + font-weight: 600; line-height: 1; letter-spacing: 2px; } .product-feature-title { - margin: 0 0 28px; - color: #252525; + margin: 0 0 10px; + color: #222222; font-family: Poppins, sans-serif; - font-size: clamp(30px, 2.8vw, 38px); - font-weight: 700; - line-height: 1.16; + font-size: clamp(24px, 2.8vw, 39px); + font-weight: 600; + line-height: 1.3em; letter-spacing: 2px; text-transform: none; overflow-wrap: break-word; @@ -160,19 +162,17 @@ display: inline-flex; align-items: center; justify-content: center; - min-width: 152px; - min-height: 48px; - padding: 0 28px; - border-radius: 999px; + padding: 20px 40px; + border-radius: 40px; color: #ffffff; - background: #a72125; + background: #9a2125; font-family: Poppins, sans-serif; - font-size: 10px; - font-weight: 700; - line-height: 1; + font-size: 14px; + font-weight: 600; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; + margin-top: 12px; transition: background-color 0.2s ease, transform 0.2s ease; @@ -180,23 +180,23 @@ .product-feature-link:hover, .product-feature-link:focus-visible { - background: #8e171b; + background: #63504b; transform: translateY(-1px); } .product-feature-link:focus-visible { - outline: 2px solid #a72125; + outline: 2px solid #9a2125; outline-offset: 4px; } - @media (max-width: 980px) { + @media (max-width: 1024px) { .product-feature, .product-feature-reversed { flex-direction: column-reverse; gap: 24px; width: min(680px, calc(100% - 40px)); min-height: 0; - padding: 70px 0; + padding: 60px 0; } .product-feature-reversed .product-feature-art, @@ -219,17 +219,26 @@ padding-bottom: 0; } + .product-feature-panel, .product-feature-reversed .product-feature-panel { - left: 0; + max-width: 60%; + } + + .product-feature-title { + font-size: 32px; + } + + .product-feature-link { + font-size: 12px; } } - @media (max-width: 640px) { + @media (max-width: 767px) { .product-feature, .product-feature-reversed { width: calc(100% - 32px); gap: 28px; - padding: 0 0 64px; + padding: 20px 0; } .product-feature-art { @@ -244,8 +253,7 @@ } .product-feature-bg { - width: 72%; - margin-left: 38px; + width: 70%; border-radius: 10px; } @@ -254,7 +262,8 @@ left: auto; right: 12px; bottom: 22px; - width: 72%; + top: auto; + max-width: 70%; } .product-feature-reversed .product-feature-bg { @@ -267,31 +276,31 @@ right: auto; left: 18px; bottom: 16px; - width: 72%; + top: auto; + max-width: 70%; } .product-feature-name { margin-bottom: 16px; - font-size: 18px; + font-size: 24px; + font-weight: 600; letter-spacing: 1.5px; } .product-feature-title { width: 100%; max-width: 100%; - margin-bottom: 26px; - font-size: clamp(22px, 6.1vw, 26px); + margin-bottom: 10px; + font-size: 24px; + font-weight: 600; 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; + font-size: 12px; + padding: 16px 32px; } } diff --git a/src/pages/home/components/ProjectCta.vue b/src/pages/home/components/ProjectCta.vue index 4f436e1..44baf14 100644 --- a/src/pages/home/components/ProjectCta.vue +++ b/src/pages/home/components/ProjectCta.vue @@ -18,16 +18,15 @@ display: flex; align-items: center; justify-content: center; - min-height: 435px; - padding: 72px 20px; - background: #473935; + padding: 200px 0; + background: #463A37; } .project-cta-inner { display: flex; flex-direction: column; align-items: center; - gap: 38px; + gap: 20px; text-align: center; } @@ -35,9 +34,9 @@ margin: 0; color: #ffffff; font-family: Poppins, sans-serif; - font-size: clamp(22px, 2vw, 27px); - font-weight: 700; - line-height: 1.35; + font-size: clamp(22px, 2vw, 29px); + font-weight: 600; + line-height: 1.3em; letter-spacing: 2px; text-transform: capitalize; } @@ -46,16 +45,14 @@ display: inline-flex; align-items: center; justify-content: center; - min-width: 158px; - min-height: 48px; - padding: 0 28px; - border-radius: 999px; + padding: 20px 40px; + border-radius: 40px; color: #ffffff; - background: #ad2228; + background: #9A2125; font-family: Poppins, sans-serif; - font-size: 10px; - font-weight: 700; - line-height: 1; + font-size: 14px; + font-weight: 600; + line-height: 1.2em; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; @@ -66,7 +63,7 @@ .project-cta-link:hover, .project-cta-link:focus-visible { - background: #93191f; + background: #000000; transform: translateY(-1px); } @@ -75,14 +72,13 @@ outline-offset: 4px; } - @media (max-width: 640px) { + @media (max-width: 767px) { .project-cta { - min-height: 288px; - padding: 64px 20px; + padding: 100px 0; } .project-cta-inner { - gap: 28px; + gap: 20px; } .project-cta-title { @@ -92,11 +88,8 @@ } .project-cta-link { - min-width: 100px; - min-height: 40px; - padding: 0 22px; - font-size: 9px; - letter-spacing: 1px; + font-size: 12px; + padding: 16px 32px; } } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 8166e3f..8459635 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -23,7 +23,7 @@ panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`, panelAlt: 'AiDA design workspace preview', reversed: false, - to:'/aida' + to: '/aida' }, { name: 'Mixi', @@ -33,7 +33,7 @@ panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`, panelAlt: 'Mixi visual search interface preview', reversed: true, - to:'/mixi' + to: '/mixi' } ] }) @@ -110,7 +110,7 @@ } .home-content { - padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px); + padding: 100px 0; background: #ffffff; } @@ -119,28 +119,29 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 0 20px clamp(92px, 10vw, 150px); + padding: 0 0 100px; text-align: center; } .ecosystem-logo { display: block; - width: clamp(146px, 15vw, 184px); + width: auto; + max-width: 100%; height: auto; - margin-bottom: 30px; + margin-bottom: 16px; user-select: none; } .ecosystem-title { width: 100%; max-width: 100%; - margin: 0 0 9px; - color: #101010; + margin: 0 0 8px; + color: #222222; font-family: Poppins, sans-serif; - font-size: clamp(18px, 1.65vw, 22px); - font-weight: 700; - line-height: 1.25; - letter-spacing: 4px; + font-size: 24px; + font-weight: 600; + line-height: 1; + letter-spacing: 2px; text-transform: uppercase; overflow-wrap: break-word; } @@ -148,51 +149,51 @@ .ecosystem-subtitle { width: 100%; margin: 0; - color: #101010; + color: #333333; font-family: Poppins, sans-serif; - font-size: clamp(13px, 1.2vw, 16px); + font-size: 18px; font-weight: 600; - line-height: 1.35; - letter-spacing: 2.5px; + line-height: 1; + letter-spacing: 2px; } - @media (max-width: 980px) { + @media (max-width: 1024px) { .home-content { - padding: 96px 0 64px; + padding: 60px 0; } .ecosystem-intro { - padding-bottom: 50px; + padding-bottom: 60px; } } - @media (max-width: 640px) { + @media (max-width: 767px) { .home-content { - padding: 52px 0 0; + padding: 40px 0; } .ecosystem-intro { - padding: 0 24px 58px; + padding: 40px 20px 40px 20px; } .ecosystem-logo { - width: 76px; - margin-bottom: 26px; + width: 100px; + margin-bottom: 54px; } .ecosystem-title { width: min(100%, 330px); max-width: none; - margin-bottom: 10px; - font-size: 18px; - letter-spacing: 1px; - line-height: 1.35; + margin-bottom: 20px; + font-size: 24px; + letter-spacing: 2px; + line-height: 1; overflow-wrap: anywhere; } .ecosystem-subtitle { - font-size: 13px; - letter-spacing: 0.8px; + font-size: 18px; + letter-spacing: 2px; } } diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 20de38a..0fb751a 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/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 +{"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/config.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"errors":true,"version":"6.0.3"} \ No newline at end of file