diff --git a/index.html b/index.html index c913550..7ec41e3 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ test-ssg - +
diff --git a/src/App.vue b/src/App.vue index 11d7713..2aa5265 100644 --- a/src/App.vue +++ b/src/App.vue @@ -52,5 +52,8 @@ \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 75ffab6..9fab6ee 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -11,6 +11,10 @@ p { margin: 0; padding: 0; } +html, +body { + overflow-x: hidden; +} * { box-sizing: border-box; font-family: Poppins; diff --git a/src/assets/css/style.less b/src/assets/css/style.less index 748a395..5194e56 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -11,7 +11,9 @@ p { margin: 0; padding: 0; } - +html,body{ + overflow-x: hidden; +} * { box-sizing: border-box; font-family: Poppins; diff --git a/src/components/email-box.vue b/src/components/email-box.vue index a12a1cd..fa21b0b 100644 --- a/src/components/email-box.vue +++ b/src/components/email-box.vue @@ -78,5 +78,15 @@ text-transform: uppercase; --hover-backcolor: #000; } + @media (max-width: 800px) { + padding: 20px; + border-radius: 20px; + > .title { + font-size: 20px; + } + > .tip { + font-size: 12px; + } + } } diff --git a/src/components/main-footer.vue b/src/components/main-footer.vue index 5b0e6a8..3a2927d 100644 --- a/src/components/main-footer.vue +++ b/src/components/main-footer.vue @@ -79,5 +79,15 @@ } } } + @media (max-width: 800px) { + padding: 15px 20px; + flex-direction: column; + align-items: center; + > .right { + > div { + border-left: none; + } + } + } } diff --git a/src/components/main-header.vue b/src/components/main-header.vue index e36b10f..cd3ca5f 100644 --- a/src/components/main-header.vue +++ b/src/components/main-header.vue @@ -1,10 +1,10 @@ diff --git a/src/components/main-menu-dialog.vue b/src/components/main-menu-dialog.vue new file mode 100644 index 0000000..8191a2f --- /dev/null +++ b/src/components/main-menu-dialog.vue @@ -0,0 +1,210 @@ + + + diff --git a/src/directives/custom-animation.js b/src/directives/custom-animation.js index 136895b..ceae92d 100644 --- a/src/directives/custom-animation.js +++ b/src/directives/custom-animation.js @@ -180,7 +180,6 @@ async function handleScroll({ target: root }) { const elTop_bottom = offsetHeight - (getDocumentTop(el) - offsetTop - rootEl.scrollTop) const maxHeight = offsetHeight + el.offsetHeight const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight)) - console.log(p) children.forEach((item) => { setDocumentStyles(el, item, p) }) diff --git a/src/pages/mixi/index.vue b/src/pages/mixi/index.vue index 7914672..5b27113 100644 --- a/src/pages/mixi/index.vue +++ b/src/pages/mixi/index.vue @@ -123,9 +123,9 @@ z-index: 1; background-color: #f9f9f9; } - + --bg-height: 500px; > .bg { - height: 500px; + height: var(--bg-height); width: 100%; object-fit: cover; position: fixed; @@ -133,7 +133,7 @@ z-index: 0; } > .header { - height: 500px; + height: var(--bg-height); display: flex; align-items: center; justify-content: center; @@ -238,7 +238,8 @@ height: auto; } > .panel { - width: 400px; + max-width: 400px; + width: 60%; height: auto; position: absolute; right: 80px; @@ -304,7 +305,7 @@ } > .email-input { position: relative; - padding-bottom: 250px; + padding-bottom: 100px; > img { width: 100%; height: auto; @@ -314,10 +315,80 @@ } > .email-box { max-width: 860px; - position: absolute; - bottom: 100px; - left: 50%; - transform: translateX(-50%); + position: relative; + margin-top: -150px; + } + } + @media (max-width: 800px) { + --bg-height: 275px; + > .introduce { + padding: 20px; + > .box { + > .tip { + font-size: 12px; + } + } + } + > .video { + padding: 40px 20px; + } + > .key-features { + flex-direction: column; + align-items: inherit; + padding: 20px; + > .left { + > .bg { + max-width: inherit; + } + > .panel { + right: 50px; + bottom: 0px; + } + } + > .right { + > .title { + font-size: 36px; + } + > ul > li { + font-size: 12px; + } + } + } + > .industry { + padding: 20px; + > .content { + > .title { + font-size: 36px; + } + > .box { + flex-direction: column; + gap: 0; + > div { + padding: 20px; + > img { + width: 100px; + height: 100px; + margin-top: 0; + margin-bottom: 0; + } + } + } + } + } + > .email-input { + position: relative; + padding-bottom: 50px; + > img { + width: 100%; + height: auto; + max-height: 500px; + object-fit: cover; + display: block; + } + > .email-box { + width: 90%; + margin-top: -100px; + } } } }