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 { .home-carousel {
.carousel-slide { .carousel-slide {
aspect-ratio: auto; aspect-ratio: auto;
height: 365px; height: 504px;
min-height: 365px; min-height: 504px;
.carousel-banner { .carousel-banner {
height: 100%; height: 100%;
@@ -596,4 +596,13 @@
transform: translateX(0); transform: translateX(0);
} }
} }
// @media (max-width: 768px) and (min-height: 844px) {
// .home-carousel {
// .carousel-slide {
// height: 504px;
// min-height: 504px;
// }
// }
// }
</style> </style>

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

@@ -30,7 +30,7 @@
:src="backgroundImage" :src="backgroundImage"
:alt="backgroundAlt" :alt="backgroundAlt"
loading="lazy" loading="lazy"
translate-x-s="-100" translate-x-s="0"
translate-x="100" translate-x="100"
/> />
<img <img
@@ -46,12 +46,7 @@
<div class="product-feature-copy"> <div class="product-feature-copy">
<p class="product-feature-name">{{ name }}</p> <p class="product-feature-name">{{ name }}</p>
<h2 class="product-feature-title">{{ title }}</h2> <h2 class="product-feature-title">{{ title }}</h2>
<RouterLink <RouterLink class="product-feature-link" :to="to">
class="product-feature-link"
:to="to"
translate-y-s="100"
translate-y="0"
>
{{ $t('Home.viewMore') }} {{ $t('Home.viewMore') }}
</RouterLink> </RouterLink>
</div> </div>
@@ -63,12 +58,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: clamp(48px, 5.5vw, 76px); gap: clamp(48px, 5.5vw, 76px);
width: 100%;
max-width: 1440px; max-width: 1440px;
min-width: 0; min-width: 0;
min-height: 690px; min-height: 690px;
margin: 0 auto; margin: 0 auto;
padding: 100px 15px;
justify-content: center;
box-sizing: border-box;
overflow-x: hidden;
& > div { & > div {
width: 50%; // width: 50%;
box-sizing: content-box;
} }
} }
@@ -89,15 +90,17 @@
.product-feature-art { .product-feature-art {
position: relative; position: relative;
width: min(100%, 560px); width: clamp(320px, 45vw, 560px);
min-width: 0; min-width: 0;
min-height: 560px; min-height: 560px;
justify-self: start; justify-self: start;
flex: 0 1 auto;
overflow: hidden;
} }
.product-feature-bg { .product-feature-bg {
display: block; display: block;
width: min(100%, 480px); width: clamp(200px, 70%, 400px);
max-width: 100%; max-width: 100%;
height: auto; height: auto;
user-select: none; user-select: none;
@@ -105,52 +108,51 @@
.product-feature-panel { .product-feature-panel {
position: absolute; position: absolute;
right: 0; left: 15%;
bottom: 94px; top: 53.329%;
width: min(72%, 380px); max-width: 400px;
max-width: 100%; width: auto;
height: auto; height: auto;
user-select: none; user-select: none;
} }
.product-feature-reversed .product-feature-bg { .product-feature-reversed .product-feature-bg {
width: min(100%, 460px); width: 70%;
margin-left: auto; margin-left: auto;
} }
.product-feature-reversed .product-feature-panel { .product-feature-reversed .product-feature-panel {
right: auto; left: 0;
left: -88px; top: 53.329%;
bottom: 70px;
width: min(78%, 430px);
} }
.product-feature-copy { .product-feature-copy {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 590px; max-width: 450px;
min-width: 0; min-width: 0;
justify-self: start; justify-self: start;
padding-bottom: 18px; padding-bottom: 18px;
flex: 1 1 auto;
} }
.product-feature-name { .product-feature-name {
margin: 0 0 20px; margin: 0 0 20px;
color: #6e6e6e; color: #666666;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: 18px; font-size: 24px;
font-weight: 700; font-weight: 600;
line-height: 1; line-height: 1;
letter-spacing: 2px; letter-spacing: 2px;
} }
.product-feature-title { .product-feature-title {
margin: 0 0 28px; margin: 0 0 10px;
color: #252525; color: #222222;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: clamp(30px, 2.8vw, 38px); font-size: clamp(24px, 2.8vw, 39px);
font-weight: 700; font-weight: 600;
line-height: 1.16; line-height: 1.3em;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: none; text-transform: none;
overflow-wrap: break-word; overflow-wrap: break-word;
@@ -160,19 +162,17 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 152px; padding: 20px 40px;
min-height: 48px; border-radius: 40px;
padding: 0 28px;
border-radius: 999px;
color: #ffffff; color: #ffffff;
background: #a72125; background: #9a2125;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: 10px; font-size: 14px;
font-weight: 700; font-weight: 600;
line-height: 1;
letter-spacing: 2px; letter-spacing: 2px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
margin-top: 12px;
transition: transition:
background-color 0.2s ease, background-color 0.2s ease,
transform 0.2s ease; transform 0.2s ease;
@@ -180,23 +180,23 @@
.product-feature-link:hover, .product-feature-link:hover,
.product-feature-link:focus-visible { .product-feature-link:focus-visible {
background: #8e171b; background: #63504b;
transform: translateY(-1px); transform: translateY(-1px);
} }
.product-feature-link:focus-visible { .product-feature-link:focus-visible {
outline: 2px solid #a72125; outline: 2px solid #9a2125;
outline-offset: 4px; outline-offset: 4px;
} }
@media (max-width: 980px) { @media (max-width: 1024px) {
.product-feature, .product-feature,
.product-feature-reversed { .product-feature-reversed {
flex-direction: column-reverse; flex-direction: column-reverse;
gap: 24px; gap: 24px;
width: min(680px, calc(100% - 40px)); width: min(680px, calc(100% - 40px));
min-height: 0; min-height: 0;
padding: 70px 0; padding: 60px 0;
} }
.product-feature-reversed .product-feature-art, .product-feature-reversed .product-feature-art,
@@ -219,17 +219,26 @@
padding-bottom: 0; padding-bottom: 0;
} }
.product-feature-panel,
.product-feature-reversed .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,
.product-feature-reversed { .product-feature-reversed {
width: calc(100% - 32px); width: calc(100% - 32px);
gap: 28px; gap: 28px;
padding: 0 0 64px; padding: 20px 0;
} }
.product-feature-art { .product-feature-art {
@@ -244,8 +253,7 @@
} }
.product-feature-bg { .product-feature-bg {
width: 72%; width: 70%;
margin-left: 38px;
border-radius: 10px; border-radius: 10px;
} }
@@ -254,7 +262,8 @@
left: auto; left: auto;
right: 12px; right: 12px;
bottom: 22px; bottom: 22px;
width: 72%; top: auto;
max-width: 70%;
} }
.product-feature-reversed .product-feature-bg { .product-feature-reversed .product-feature-bg {
@@ -267,31 +276,31 @@
right: auto; right: auto;
left: 18px; left: 18px;
bottom: 16px; bottom: 16px;
width: 72%; top: auto;
max-width: 70%;
} }
.product-feature-name { .product-feature-name {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 18px; font-size: 24px;
font-weight: 600;
letter-spacing: 1.5px; letter-spacing: 1.5px;
} }
.product-feature-title { .product-feature-title {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin-bottom: 26px; margin-bottom: 10px;
font-size: clamp(22px, 6.1vw, 26px); font-size: 24px;
font-weight: 600;
line-height: 1.35; line-height: 1.35;
letter-spacing: 1.2px; letter-spacing: 1.2px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.product-feature-link { .product-feature-link {
min-width: 100px; font-size: 12px;
min-height: 40px; padding: 16px 32px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
} }
} }
</style> </style>

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

@@ -18,16 +18,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 435px; padding: 200px 0;
padding: 72px 20px; background: #463A37;
background: #473935;
} }
.project-cta-inner { .project-cta-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 38px; gap: 20px;
text-align: center; text-align: center;
} }
@@ -35,9 +34,9 @@
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: clamp(22px, 2vw, 27px); font-size: clamp(22px, 2vw, 29px);
font-weight: 700; font-weight: 600;
line-height: 1.35; line-height: 1.3em;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: capitalize; text-transform: capitalize;
} }
@@ -46,16 +45,14 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 158px; padding: 20px 40px;
min-height: 48px; border-radius: 40px;
padding: 0 28px;
border-radius: 999px;
color: #ffffff; color: #ffffff;
background: #ad2228; background: #9A2125;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: 10px; font-size: 14px;
font-weight: 700; font-weight: 600;
line-height: 1; line-height: 1.2em;
letter-spacing: 2px; letter-spacing: 2px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
@@ -66,7 +63,7 @@
.project-cta-link:hover, .project-cta-link:hover,
.project-cta-link:focus-visible { .project-cta-link:focus-visible {
background: #93191f; background: #000000;
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -75,14 +72,13 @@
outline-offset: 4px; outline-offset: 4px;
} }
@media (max-width: 640px) { @media (max-width: 767px) {
.project-cta { .project-cta {
min-height: 288px; padding: 100px 0;
padding: 64px 20px;
} }
.project-cta-inner { .project-cta-inner {
gap: 28px; gap: 20px;
} }
.project-cta-title { .project-cta-title {
@@ -92,11 +88,8 @@
} }
.project-cta-link { .project-cta-link {
min-width: 100px; font-size: 12px;
min-height: 40px; padding: 16px 32px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
} }
} }
</style> </style>

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

@@ -110,7 +110,7 @@
} }
.home-content { .home-content {
padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px); padding: 100px 0;
background: #ffffff; background: #ffffff;
} }
@@ -119,28 +119,29 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 20px clamp(92px, 10vw, 150px); padding: 0 0 100px;
text-align: center; text-align: center;
} }
.ecosystem-logo { .ecosystem-logo {
display: block; display: block;
width: clamp(146px, 15vw, 184px); width: auto;
max-width: 100%;
height: auto; height: auto;
margin-bottom: 30px; margin-bottom: 16px;
user-select: none; user-select: none;
} }
.ecosystem-title { .ecosystem-title {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin: 0 0 9px; margin: 0 0 8px;
color: #101010; color: #222222;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: clamp(18px, 1.65vw, 22px); font-size: 24px;
font-weight: 700; font-weight: 600;
line-height: 1.25; line-height: 1;
letter-spacing: 4px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@@ -148,51 +149,51 @@
.ecosystem-subtitle { .ecosystem-subtitle {
width: 100%; width: 100%;
margin: 0; margin: 0;
color: #101010; color: #333333;
font-family: Poppins, sans-serif; font-family: Poppins, sans-serif;
font-size: clamp(13px, 1.2vw, 16px); font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 1.35; line-height: 1;
letter-spacing: 2.5px; letter-spacing: 2px;
} }
@media (max-width: 980px) { @media (max-width: 1024px) {
.home-content { .home-content {
padding: 96px 0 64px; padding: 60px 0;
} }
.ecosystem-intro { .ecosystem-intro {
padding-bottom: 50px; padding-bottom: 60px;
} }
} }
@media (max-width: 640px) { @media (max-width: 767px) {
.home-content { .home-content {
padding: 52px 0 0; padding: 40px 0;
} }
.ecosystem-intro { .ecosystem-intro {
padding: 0 24px 58px; padding: 40px 20px 40px 20px;
} }
.ecosystem-logo { .ecosystem-logo {
width: 76px; width: 100px;
margin-bottom: 26px; margin-bottom: 54px;
} }
.ecosystem-title { .ecosystem-title {
width: min(100%, 330px); width: min(100%, 330px);
max-width: none; max-width: none;
margin-bottom: 10px; margin-bottom: 20px;
font-size: 18px; font-size: 24px;
letter-spacing: 1px; letter-spacing: 2px;
line-height: 1.35; line-height: 1;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.ecosystem-subtitle { .ecosystem-subtitle {
font-size: 13px; font-size: 18px;
letter-spacing: 0.8px; letter-spacing: 2px;
} }
} }
</style> </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"}