feat: 主页移动端
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
margin-bottom: 22px;
|
||||
width: 76px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.ecosystem-title {
|
||||
width: min(100%, 330px);
|
||||
max-width: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1.5px;
|
||||
line-height: 1.45;
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.ecosystem-subtitle {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1.5px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user