适配移动端
This commit is contained in:
zxzz
parent
625e03de92
commit
1ec0c9c467
|
|
@ -117,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- waves -->
|
<!-- 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>
|
<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" />
|
<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>
|
</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="0" fill="rgba(255,255,255,0.45)" />
|
||||||
<use href="#wave-path" x="50" y="9" fill="rgb(22, 32, 70)" />
|
<use href="#wave-path" x="50" y="9" fill="rgb(22, 32, 70)" />
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- footer Section -->
|
<!-- footer Section -->
|
||||||
|
|
@ -413,7 +413,7 @@ export default {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 200x;
|
width: 300px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -491,6 +491,7 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
/* 波浪效果 - 起 */
|
/* 波浪效果 - 起 */
|
||||||
|
|
||||||
.waves {
|
.waves {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8vh;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue