feat: 主页移动端

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;
+					}
 				}
 			}
 		}

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;
+					height: 102px;
-					min-height: 92px;
+					min-height: 102px;
-					padding: 16px 20px;
+					padding: 16px 15px;
+					gap: 18px;
 				}
 				.desc-line {
-					top: -28px;
+					top: -70px;
-					height: 42px;
+					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 {

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;
+			right: 12px;
-			bottom: 42px;
+			bottom: 22px;
-			width: 68%;
+			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);
+			margin-bottom: 26px;
-			line-height: 1.2;
+			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;
+		}
 	}
 </style>

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;
 		}
 	}
 </style>

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 @@
 			>
 				<img
 					class="ecosystem-logo"
-					src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/home_ai_logo.png"
+					:src="homeAiLogo"
 					alt="Code Create"
 					loading="lazy"
 					translate-y-s="-20"
@@ -164,26 +164,31 @@
 
 	@media (max-width: 640px) {
 		.home-content {
-			padding: 72px 0 36px;
+			padding: 52px 0 0;
+		}
+
+		.ecosystem-intro {
+			padding: 0 24px 58px;
 		}
 
 		.ecosystem-logo {
-			width: 138px;
+			width: 76px;
-			margin-bottom: 22px;
+			margin-bottom: 26px;
 		}
 
 		.ecosystem-title {
 			width: min(100%, 330px);
 			max-width: none;
-			font-size: 14px;
+			margin-bottom: 10px;
-			letter-spacing: 1.5px;
+			font-size: 18px;
-			line-height: 1.45;
+			letter-spacing: 1px;
+			line-height: 1.35;
 			overflow-wrap: anywhere;
 		}
 
 		.ecosystem-subtitle {
-			font-size: 12px;
+			font-size: 13px;
-			letter-spacing: 1.5px;
+			letter-spacing: 0.8px;
 		}
 	}
 </style>

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"}
+{"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"}