diff --git a/src/App.vue b/src/App.vue index 440c6a9..3081f24 100644 --- a/src/App.vue +++ b/src/App.vue @@ -62,7 +62,7 @@ function handleNavigate(index) { align-items: center; gap: clamp(6px, 0.5vw, 12px); .logo-img { - height: clamp(28px, 2.5vh, 52px); + height: clamp(28px, 5vh, 52px); width: auto; } } diff --git a/src/assets/images/logo-top.png b/src/assets/images/logo-top.png index e11d73b..c62e575 100644 Binary files a/src/assets/images/logo-top.png and b/src/assets/images/logo-top.png differ diff --git a/src/components/PageAdvantage.vue b/src/components/PageAdvantage.vue index e5b8d0c..ed46d56 100644 --- a/src/components/PageAdvantage.vue +++ b/src/components/PageAdvantage.vue @@ -142,32 +142,46 @@ } @media (min-width: 1921px) { + .content-wrapper { + max-width: min(1600px, 86vw); + width: min(1600px, 86vw); + gap: clamp(28px, 2.4vw, 56px); + padding: 0 clamp(40px, 3vw, 86px); + justify-content: center; + } + + .image-side { + flex: 0 1 min(30vw, 520px); + justify-content: center; + } + + .phone-img { + height: min(82vh, 900px); + } + + .text-side { + flex: 0 1 min(42vw, 760px); + } + .section-title { margin-left: 0; - max-width: 22ch; + max-width: 16ch; + font-size: clamp(48px, 2.7vw, 78px); + line-height: 1.22; } - .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%; + .section-card { + width: min(100%, 700px); + min-height: clamp(240px, 19vw, 420px); + height: auto; + margin-left: 0; + padding: clamp(26px, 2.2vw, 42px); + border-radius: 16px 80px 16px 16px; + } + + .section-desc { + max-width: 34ch; } -} } @media (max-width: 768px) { diff --git a/src/components/PageContact.vue b/src/components/PageContact.vue index f4dc3cd..d1700e3 100644 --- a/src/components/PageContact.vue +++ b/src/components/PageContact.vue @@ -166,11 +166,11 @@ @media (min-width: 1921px) { .content-wrapper { - max-width: 1600px; - width: min(86vw, 1600px); - gap: clamp(12px, 1.2vw, 28px); + max-width: min(1600px, 86vw); + width: min(1600px, 86vw); + gap: clamp(28px, 2.4vw, 56px); justify-content: center; - padding: 0 clamp(36px, 3vw, 72px); + padding: 0 clamp(40px, 3vw, 86px); } .text-side { @@ -179,8 +179,8 @@ } .section-title { - font-size: clamp(52px, 2.9vw, 82px); - line-height: 1.24; + font-size: clamp(48px, 2.7vw, 78px); + line-height: 1.22; max-width: 16ch; margin-bottom: clamp(18px, 2vh, 34px); } diff --git a/src/components/PageProduct.vue b/src/components/PageProduct.vue index cf0bb41..c993967 100644 --- a/src/components/PageProduct.vue +++ b/src/components/PageProduct.vue @@ -27,10 +27,10 @@ - + - + @@ -177,28 +177,32 @@ bottom: -200%; } .content-wrapper { - max-width: none; - padding: 0 42vw 0 6vw; + max-width: min(1600px, 86vw); + width: min(1600px, 86vw); + padding: 0 clamp(40px, 3vw, 86px); + justify-content: flex-start; + gap: clamp(28px, 2.4vw, 56px); } .text-side { - max-width: min(46vw, 920px); + max-width: min(42vw, 760px); } .section-title { - font-size: clamp(52px, 3vw, 88px); - line-height: 1.18; + font-size: clamp(48px, 2.7vw, 78px); + line-height: 1.22; } .section-desc { max-width: 34ch; line-height: 1.9; + margin-bottom: clamp(20px, 3.2vh, 52px); } .two-phone { - right: 4vw; + right: clamp(40px, 3.6vw, 100px); bottom: -6vh; - height: min(92vh, 1100px); + height: min(100vh, 4000px); } }