From 1ec0c9c4678ebd57e42b3c31cdc868badc5157f9 Mon Sep 17 00:00:00 2001 From: zxzz <2652816967@qq.com> Date: Sun, 24 Mar 2024 22:20:33 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HomePage.vue | 378 +++++++++++++++++++++++++++++++++++- 1 file changed, 375 insertions(+), 3 deletions(-) diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue index 03bdb66..7cdb0c8 100644 --- a/src/components/HomePage.vue +++ b/src/components/HomePage.vue @@ -117,7 +117,7 @@ - + @@ -413,7 +413,7 @@ export default { margin-top: 25px; img { - width: 200x; + width: 300px; height: auto; } @@ -491,6 +491,7 @@ export default { /* 波浪效果 - 起 */ + .waves { width: 100%; height: 8vh; @@ -531,4 +532,375 @@ export default { } /* 波浪效果 - 止 */ + +/* 媒体查询 - 起 */ +@media (max-width: 600px) { + .banner-section { + width: 100vw; + height: 46vw; + position: relative; + background-image: url("../assets/banner.svg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + ul { + list-style-type: none; + margin: 0px; + padding: 0px; + width: 40vw; + height: 5.1vw; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + top: 0px; + left: 3.4vw; + + img { + width: 8.9vw; + margin-right: 2vw; + } + + a { + text-decoration: none; + color: inherit; + outline: none; + display: flex; + align-items: center; + + &:hover { + color: rgb(88, 93, 230); + } + } + + li { + height: auto; + color: #ffffff; + font-size: 1.2vw; + font-weight: 600; + letter-spacing: 0.1vw; + } + } + + .logo-and-title { + width: 89vw; + height: auto; + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + + .banner-logo { + width: 13.7vw; + height: auto; + } + + .banner-blank { + width: 2vw; + height: auto; + } + + .banner-title { + width: 73.3vw; + height: auto; + } + } + + .download-button { + width: 17.1vw; + height: 4.1vw; + border: 0.068vw solid #ffffff; + background-color: #3466ee; + color: #ffffff; + font-size: 1.71vw; + letter-spacing: 0.20vw; + line-height: 4.11vw; + position: absolute; + bottom: 12%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 0.68vw; + + &:hover { + background-color: darken(#3466ee, 10%); // 在原背景颜色基础上加深10% + } + } + } + + .video-section { + width: 100vw; + height: 58.22vw; + background-color: #dae5ff; + position: relative; + + .video-box { + width: 78.77vw; + height: auto; + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .intro-section { + width: 100vw; + height: 41.1vw; + background-color: #180e8d; + position: relative; + + .intro-box { + width: 75.34vw; + height: 41.1vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #ffffff; + display: flex; + flex-direction: column; + align-items: center; + + .intro-title-box { + height: 10.27vw; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + margin-top: 4.11vw; + + .aside-img { + width: 20.55vw; + height: auto; + } + + .intro-title { + width: 13.7vw; + letter-spacing: 0.14vw; + font-size: 2.5vw; + } + } + + .intro-text-box { + margin: 0; + padding: 0; + height: 13.7vw; + width: 61.64vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background: #234DC0; + border: 0.14vw solid #A1B4FF; + + p { + width: 61.64vw; + font-size: 1.16vw; + margin-left: 5vw; + text-align: left; + letter-spacing: 0.14; + } + } + } + } + + .logo-section { + width: 100vw; + height: 38.37vw; + background-color: #dae5ff; + position: relative; + + .logo-box { + width: 75.34vw; + height: 38.37vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + .logo-title-box { + height: 13.7vw; + width: 75.34vw; + display: flex; + justify-content: center; + align-items: center; + + .aside-img { + width: 20.55vw; + height: auto; + } + + .logo-title { + width: 13.7vw; + color: #180E8D; + font-size: 2.5vw; + } + } + + .logo-icon-box { + margin: 0; + padding: 0; + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; + + img { + width: 10.27vw; + height: auto; + margin: 0vw 3.42vw; + } + } + } + } + + .poster-section { + width: 100%; + height: 54.79vw; + background-color: #180e8d; + position: relative; + + .poster-box { + width: 75.34vw; + height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #ffffff; + + .poster-title-box { + height: 13.7vw; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.71vw; + + img { + width: 20.55vw; + height: auto; + } + + .poster-title { + width: 13.7vw; + letter-spacing: 0.14vw; + font-size: 2.5vw; + } + } + + .poster-picture-box { + margin: 0; + padding: 0; + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; + + img { + width: 20.55vw; + height: auto; + margin: 0px 2.05vw; + } + } + } + } + + .footer-section { + width: 100vw; + height: 13.7vw; + background-color: rgb(22, 32, 70); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #cccccc; + font-size: 0.82vw; + letter-spacing: 1px; + + p { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + height: 2.05vw; + line-height: 2.05vw; + + img { + width: 1.03vw; + } + + span { + display: flex; + align-items: center; + } + + a { + text-decoration: none; + color: inherit; + outline: none; + display: flex; + align-items: center; + + &:hover { + color: rgb(250, 197, 53); + } + } + } + + .police-img { + border-radius: 50%; + } + + } + + + /* 波浪效果 - 起 */ + + .waves { + width: 100vw; + height: 6vw; + position: absolute; + left: 0; + right: 0; + bottom: -2vw; + } + + .parallax>use { + animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + } + + .parallax>use:nth-child(1) { + animation-delay: -2s; + animation-duration: 7s; + } + + .parallax>use:nth-child(2) { + animation-delay: -3s; + animation-duration: 10s; + } + + .parallax>use:nth-child(3) { + animation-delay: -4s; + animation-duration: 13s; + } + + @keyframes move-forever { + 0% { + transform: translate3d(-6.16vw, 0, 0); + } + + 100% { + transform: translate3d(53.13vw, 0, 0); + } + } + + /* 波浪效果 - 止 */ +} + +/* 媒体查询 - 止 */ \ No newline at end of file