diff --git a/src/App.vue b/src/App.vue index 72bb27e..645ec8a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,22 @@ + + diff --git a/src/assets/images/android-two.png b/src/assets/images/android-two.png new file mode 100644 index 0000000..122f060 Binary files /dev/null and b/src/assets/images/android-two.png differ diff --git a/src/assets/images/android.png b/src/assets/images/android.png new file mode 100644 index 0000000..49c205d Binary files /dev/null and b/src/assets/images/android.png differ diff --git a/src/assets/images/appStore-two.png b/src/assets/images/appStore-two.png new file mode 100644 index 0000000..e196256 Binary files /dev/null and b/src/assets/images/appStore-two.png differ diff --git a/src/assets/images/appStore.png b/src/assets/images/appStore.png new file mode 100644 index 0000000..4d527f7 Binary files /dev/null and b/src/assets/images/appStore.png differ diff --git a/src/assets/images/two-1.png b/src/assets/images/two-1.png new file mode 100644 index 0000000..d58f9e3 Binary files /dev/null and b/src/assets/images/two-1.png differ diff --git a/src/assets/images/two-2.png b/src/assets/images/two-2.png new file mode 100644 index 0000000..f2f4bd3 Binary files /dev/null and b/src/assets/images/two-2.png differ diff --git a/src/assets/images/two-3.png b/src/assets/images/two-3.png new file mode 100644 index 0000000..d344d42 Binary files /dev/null and b/src/assets/images/two-3.png differ diff --git a/src/assets/images/two-phone.png b/src/assets/images/two-phone.png new file mode 100644 index 0000000..4ef7ae8 Binary files /dev/null and b/src/assets/images/two-phone.png differ diff --git a/src/assets/variables.less b/src/assets/variables.less index 85b6818..bed72c6 100644 --- a/src/assets/variables.less +++ b/src/assets/variables.less @@ -3,9 +3,9 @@ // clamp(min, preferred, max) 在 1280px~3840px 间线性缩放 // 字体 -@font-hero: clamp(28px, 2.5vw, 64px); // 首页大标题 +@font-hero: clamp(22px, 2.7vw, 72px); // 首页大标题 @font-title: clamp(24px, 2.2vw, 52px); // 各页标题 -@font-desc: clamp(13px, 0.9vw, 20px); // 描述文字 +@font-desc: clamp(13px, 1.3vw, 30px); // 描述文字 @font-nav: clamp(12px, 1vw, 18px); // 导航文字 @font-btn: clamp(12px, 1vw, 18px); // 按钮文字 @font-small: clamp(11px, 0.65vw, 15px); // 小字 diff --git a/src/components/PageHome.vue b/src/components/PageHome.vue index b696161..de69fa7 100644 --- a/src/components/PageHome.vue +++ b/src/components/PageHome.vue @@ -3,17 +3,6 @@ - -
@@ -22,12 +11,8 @@ giving meaning to every click
- - ▶ Android - - - 🍎 App Store - + +
@@ -71,8 +56,8 @@ bottom: 0; left: 50%; transform: translateX(-50%); - width: 90%; - height: 90%; + width: 96%; + height: 96%; object-fit: contain; z-index: 1; pointer-events: none; @@ -150,10 +135,20 @@ .hero-buttons { display: flex; - gap: clamp(10px, 1vw, 24px); + gap: clamp(10px, 3vw, 35px); justify-content: center; } +.btn-img { + height: clamp(36px, 6.6vh, 120px); + width: auto; + display: block; + transition: transform 0.3s; + &:hover { + transform: translateY(-2px); + } +} + .btn { display: inline-flex; align-items: center; @@ -195,7 +190,7 @@ } .phone-main { - height: clamp(320px, 52vh, 680px); + height: clamp(330px, 58vh, 780px); width: auto; display: block; } diff --git a/src/components/PageProduct.vue b/src/components/PageProduct.vue index 80327b0..0971c3e 100644 --- a/src/components/PageProduct.vue +++ b/src/components/PageProduct.vue @@ -1,21 +1,36 @@ @@ -27,31 +42,80 @@ .page-product { width: 100%; height: 100vh; - background: #00BFA5; - color: #fff; + background: #ffffff; display: flex; align-items: center; justify-content: center; + padding: 10vh 6vw 12vh 6vw; + box-sizing: border-box; position: relative; +} + +.card { + width: 100%; + height: 100%; + background: #02BEAC; + border-radius: clamp(16px, 2vw, 40px); + display: flex; + align-items: center; overflow: hidden; + position: relative; } .content-wrapper { display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; gap: @gap-section; max-width: @content-max; width: 100%; - padding: 0 @gap-content; + padding: 0 clamp(30px, 3vw, 100px); } -.text-side { flex: 1; } +.text-side { flex: 1; max-width: clamp(300px, 38vw, 680px); } + +.title-wrap { + position: relative; + display: inline-block; +} + +.desc-wrap { + position: relative; +} + +.btns-wrap { + position: relative; + display: inline-block; +} + +.deco-1 { + position: absolute; + bottom: 0; + right: -10%; + width: clamp(40px, 6vw, 140px); + pointer-events: none; +} + +.deco-2 { + position: absolute; +bottom: -200%; + right: -10%; + width: clamp(50px, 14vw, 400px); + pointer-events: none; +} + +.deco-3 { + position: absolute; + bottom: -200%; + left: 0; + width: clamp(50px, 8vw, 200px); + pointer-events: none; +} .section-title { - font-size: @font-title; + font-size: clamp(30px, 3.4vw, 170px); font-weight: 800; - line-height: 1.25; + line-height: 1.2; margin-bottom: clamp(12px, 1.2vh, 28px); color: #fff; } @@ -59,8 +123,21 @@ .section-desc { font-size: @font-desc; line-height: 1.8; - color: rgba(255, 255, 255, 0.85); - max-width: clamp(260px, 22vw, 480px); + color: rgb(255, 255, 255); + margin-bottom: clamp(16px, 5vh, 60px); +} + +.download-btns { + display: flex; + gap: clamp(10px, 3vw, 35px); +} + +.btn-img { + height: clamp(36px, 6.6vh, 120px); + width: auto; + display: block; + transition: transform 0.3s; + &:hover { transform: translateY(-2px); } } .image-side { @@ -82,19 +159,13 @@ background: rgba(255, 255, 255, 0.08); } -.deco { +.two-phone { position: absolute; - font-size: clamp(24px, 2.5vw, 60px); - opacity: 0.3; - animation: float 3.5s ease-in-out infinite; -} - -.deco-1 { top: 12%; right: 10%; animation-delay: 0s; } -.deco-2 { bottom: 15%; left: 8%; animation-delay: 1s; } - -@keyframes float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-12px); } + right: 8vh; + bottom: -9vh; + height: clamp(200px, 100vh, 2000px); + width: auto; + pointer-events: none; } @media (max-width: 768px) { @@ -106,5 +177,6 @@ .section-title { text-align: center; } .section-desc { text-align: center; } .phone-placeholder { width: 180px; height: 333px; } + }