适配移动端
This commit is contained in:
zxzz
parent
625e03de92
commit
1ec0c9c467
|
|
@ -117,7 +117,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- waves -->
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<!-- <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="rgb(22, 32, 70)" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg> -->
|
||||
</div>
|
||||
|
||||
<!-- footer Section -->
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
/* 波浪效果 - 止 */
|
||||
}
|
||||
|
||||
/* 媒体查询 - 止 */
|
||||
</style>
|
||||
Loading…
Reference in New Issue