diff --git a/src/components/PageAdvantage.vue b/src/components/PageAdvantage.vue index 2c23d11..e5b8d0c 100644 --- a/src/components/PageAdvantage.vue +++ b/src/components/PageAdvantage.vue @@ -141,6 +141,35 @@ 50% { transform: translateY(-12px); } } +@media (min-width: 1921px) { + .section-title { + margin-left: 0; + max-width: 22ch; + } + + .section-card{ + position: relative; + width: clamp(400px, 32vw, 1600px);; + height: clamp(200px, 16vw, 800px); + background: #FFFFFF; + box-shadow: 0px 39px 113px 0px rgba(2,190,172,0.2); + border-radius: 2px 100px 2px 2px; + padding: 10% ; + margin-left: -20%; + + font-size: @font-desc; + line-height: 1.8; + color: #888; + + .douhao-img{ + position: absolute; + height: 20%; + left: 40%; + top: 15%; + } +} +} + @media (max-width: 768px) { .content-wrapper { flex-direction: column-reverse; diff --git a/src/components/PageContact.vue b/src/components/PageContact.vue index 8e2a7e6..f4dc3cd 100644 --- a/src/components/PageContact.vue +++ b/src/components/PageContact.vue @@ -9,6 +9,10 @@
Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
+
@@ -66,6 +70,24 @@
line-height: 1.8;
color: #888;
max-width: 90%;
+ margin-bottom: clamp(14px, 2.2vh, 32px);
+}
+
+.download-btns {
+ display: flex;
+ gap: clamp(10px, 2vw, 30px);
+ align-items: center;
+}
+
+.store-btn-img {
+ height: clamp(36px, 6.2vh, 110px);
+ width: auto;
+ display: block;
+ transition: transform 0.3s;
+
+ &:hover {
+ transform: translateY(-2px);
+ }
}
.image-side {
@@ -142,6 +164,52 @@
}
}
+@media (min-width: 1921px) {
+ .content-wrapper {
+ max-width: 1600px;
+ width: min(86vw, 1600px);
+ gap: clamp(12px, 1.2vw, 28px);
+ justify-content: center;
+ padding: 0 clamp(36px, 3vw, 72px);
+ }
+
+ .text-side {
+ flex: 0 1 min(42vw, 760px);
+ max-width: min(42vw, 760px);
+ }
+
+ .section-title {
+ font-size: clamp(52px, 2.9vw, 82px);
+ line-height: 1.24;
+ max-width: 16ch;
+ margin-bottom: clamp(18px, 2vh, 34px);
+ }
+
+ .section-desc {
+ max-width: 34ch;
+ line-height: 1.9;
+ font-size: clamp(18px, 1.05vw, 24px);
+ }
+
+ .download-btns {
+ gap: clamp(12px, 1.4vw, 24px);
+ }
+
+ .store-btn-img {
+ height: clamp(44px, 5.8vh, 92px);
+ }
+
+ .image-side {
+ flex: 0 1 min(30vw, 520px);
+ width: min(30vw, 520px);
+ justify-content: center;
+ }
+
+ .phone-img {
+ height: min(78vh, 860px);
+ }
+}
+
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
@@ -150,6 +218,17 @@
}
.section-title { text-align: center; }
.section-desc { text-align: center; }
+ .text-side {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .download-btns {
+ justify-content: center;
+ }
+ .store-btn-img {
+ height: clamp(34px, 6vh, 56px);
+ }
.phone-img {
height: clamp(220px, 38vh, 420px);
width: auto;
diff --git a/src/components/PageProduct.vue b/src/components/PageProduct.vue
index cc23b37..cf0bb41 100644
--- a/src/components/PageProduct.vue
+++ b/src/components/PageProduct.vue
@@ -166,11 +166,42 @@ bottom: -200%;
position: absolute;
right: 8vh;
bottom: -9vh;
- height: clamp(200px, 100vh, 2000px);
+ height: clamp(200px, 100vh, 4000px);
width: auto;
pointer-events: none;
}
+@media (min-width: 1921px) {
+ .page-product {
+ padding: 8vh 5vw 10vh 5vw;
+ }
+
+ .content-wrapper {
+ max-width: none;
+ padding: 0 42vw 0 6vw;
+ }
+
+ .text-side {
+ max-width: min(46vw, 920px);
+ }
+
+ .section-title {
+ font-size: clamp(52px, 3vw, 88px);
+ line-height: 1.18;
+ }
+
+ .section-desc {
+ max-width: 34ch;
+ line-height: 1.9;
+ }
+
+ .two-phone {
+ right: 4vw;
+ bottom: -6vh;
+ height: min(92vh, 1100px);
+ }
+}
+
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;