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

style: 首页样式

Browse Source
This commit is contained in:
zhangyahui
2026-06-05 11:41:38 +08:00
parent db607ded0d
commit a4f2353cf0
5 changed files with 126 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

121
src/pages/home/components/ProductFeature.vue
View File

@@ -30,7 +30,7 @@
:src="backgroundImage"
:alt="backgroundAlt"
loading="lazy"
translate-x-s="-100"
translate-x-s="0"
translate-x="100"
/>
<img
@@ -46,13 +46,8 @@
<div class="product-feature-copy">
<p class="product-feature-name">{{ name }}</p>
<h2 class="product-feature-title">{{ title }}</h2>
<RouterLink
class="product-feature-link"
:to="to"
translate-y-s="100"
translate-y="0"
>
{{$t('Home.viewMore')}}
<RouterLink class="product-feature-link" :to="to">
{{ $t('Home.viewMore') }}
</RouterLink>
</div>
</section>
@@ -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;
}
}
</style>

43
src/pages/home/components/ProjectCta.vue
View File

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

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

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

2
tsconfig.tsbuildinfo
View File

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