|
@@ -18,14 +18,14 @@
|
|
|
line-height: 30px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
- color: #326f64;
|
|
|
+ color: #242764;
|
|
|
}
|
|
|
|
|
|
// 样式重置
|
|
|
.pinBottom.left {
|
|
|
width: 960px;
|
|
|
margin-right: 350px;
|
|
|
- height: 85px;
|
|
|
+ height: 95px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
background-size: contain;
|
|
@@ -56,6 +56,7 @@
|
|
|
|
|
|
#gui-modes-map {
|
|
|
margin-left: 30px;
|
|
|
+ background: #d5cfca;
|
|
|
#play,
|
|
|
#pause,
|
|
|
#next,
|
|
@@ -67,6 +68,7 @@
|
|
|
width: 45px;
|
|
|
height: 45px;
|
|
|
margin-left: 30px;
|
|
|
+
|
|
|
background-color: transparent !important;
|
|
|
position: relative;
|
|
|
|
|
@@ -87,6 +89,7 @@
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
+ background: #d5cfca;
|
|
|
gap: 30px;
|
|
|
.likeBox,
|
|
|
.A2_map_box,
|
|
@@ -153,7 +156,7 @@
|
|
|
z-index: 100;
|
|
|
left: -18px;
|
|
|
bottom: 0;
|
|
|
- text-shadow: 1px 1px 1px #fcda99;
|
|
|
+ // text-shadow: 1px 1px 1px #fcda99;
|
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
|
}
|
|
@@ -238,7 +241,7 @@
|
|
|
bottom: 40px;
|
|
|
right: 30px;
|
|
|
.sectionIndexImg {
|
|
|
- width: 125px;
|
|
|
+ width: 90px;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
cursor: pointer;
|
|
@@ -270,12 +273,12 @@
|
|
|
padding: 0 20px;
|
|
|
width: fit-content;
|
|
|
overflow: auto;
|
|
|
- height: 89%;
|
|
|
+ height: 85%;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: nowrap;
|
|
|
scroll-behavior: smooth;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
gap: 20px;
|
|
|
::-webkit-scrollbar {
|
|
@@ -286,53 +289,67 @@
|
|
|
|
|
|
& > div {
|
|
|
flex: 0 0 auto;
|
|
|
- width: 19%;
|
|
|
- height: 91%;
|
|
|
+ width: 16%;
|
|
|
+ height: 75%;
|
|
|
+ align-self: end;
|
|
|
background-size: contain;
|
|
|
cursor: pointer;
|
|
|
p {
|
|
|
- margin-top: 250px;
|
|
|
+ margin-top: 325px;
|
|
|
padding: 38px;
|
|
|
font-size: 13px;
|
|
|
line-height: 21px;
|
|
|
text-indent: 2em;
|
|
|
+ color: #d5cdc8;
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
}
|
|
|
.section1 {
|
|
|
+ width: 17%;
|
|
|
+ height: 95%;
|
|
|
background: url(../../assets/img/section1.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- p {
|
|
|
- color: #000000;
|
|
|
+ & > p {
|
|
|
+ margin-top: 435px;
|
|
|
}
|
|
|
}
|
|
|
.section2 {
|
|
|
- background: url(../../assets/img/section2.png) no-repeat;
|
|
|
+ background: url(../../assets/img/section1.1.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- p {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
}
|
|
|
.section3 {
|
|
|
- background: url(../../assets/img/section3.png) no-repeat;
|
|
|
+ background: url(../../assets/img/section1.2.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- p {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
}
|
|
|
.section4 {
|
|
|
- background: url(../../assets/img/section4.png) no-repeat;
|
|
|
+ background: url(../../assets/img/section1.3.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- p {
|
|
|
- color: #000;
|
|
|
- }
|
|
|
}
|
|
|
.section5 {
|
|
|
- background: url(../../assets/img/section5.png) no-repeat;
|
|
|
+ width: 17%;
|
|
|
+ height: 95%;
|
|
|
+ background: url(../../assets/img/section2.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- p {
|
|
|
- color: #000;
|
|
|
+ & > p {
|
|
|
+ margin-top: 445px;
|
|
|
}
|
|
|
}
|
|
|
+ .section6 {
|
|
|
+ background: url(../../assets/img/section2.1.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .section7 {
|
|
|
+ background: url(../../assets/img/section2.2.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .section8 {
|
|
|
+ background: url(../../assets/img/section2.3.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .section9 {
|
|
|
+ background: url(../../assets/img/section2.4.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.sectionClose {
|
|
|
position: fixed;
|
|
@@ -349,8 +366,8 @@
|
|
|
height: 20px;
|
|
|
top: 24px;
|
|
|
font-size: 10px;
|
|
|
- color: #fff;
|
|
|
- text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
|
|
|
+ color: #242764;
|
|
|
+ // text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
|
|
|
}
|
|
|
#gui-modes-map {
|
|
|
border-radius: 25px;
|