@@ -637,7 +632,7 @@ const addTop2Animation = () => {
gap: 0;
align-items: stretch;
justify-content: stretch;
- background: #2543a5;
+ background: #182b69;
}
.top2-stage {
@@ -647,7 +642,7 @@ const addTop2Animation = () => {
display: flex;
align-items: center;
justify-content: center;
- background: #2543a5;
+ background: #182b69;
}
.top2-scale {
@@ -659,7 +654,7 @@ const addTop2Animation = () => {
position: absolute;
left: 0;
top: 0;
- background: #2543a5;
+ background: #182b69;
border-radius: 0;
overflow: hidden;
transform: scale(var(--top2-scale));
@@ -725,7 +720,7 @@ const addTop2Animation = () => {
left: 516.1px;
top: 7.78px;
font-size: 28.491px;
- color: #2543a5;
+ color: #182b69;
letter-spacing: 0.3px;
}
@@ -772,6 +767,7 @@ const addTop2Animation = () => {
top: 25.15px;
width: 744.126px;
height: 543.699px;
+ padding: 0;
}
.layout-top3 .top2-center-col {
@@ -779,7 +775,8 @@ const addTop2Animation = () => {
height: 734px;
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 0;
+ padding: 0;
}
.layout-top2 .top2-right-col {
@@ -881,13 +878,15 @@ const addTop2Animation = () => {
}
.layout-top3 .panel-center-bottom-left {
- width: 364px;
- height: 151.814px;
+ width: auto;
+ flex: 1;
+ height: 100%;
}
.layout-top3 .panel-center-bottom-right {
- width: 364px;
- height: 151.814px;
+ width: auto;
+ flex: 1;
+ height: 100%;
}
.layout-top2 .top2-center {
@@ -902,7 +901,6 @@ const addTop2Animation = () => {
width: 696.481px;
height: 333.004px;
position: relative;
- align-self: center;
overflow: visible;
}
@@ -916,9 +914,11 @@ const addTop2Animation = () => {
.layout-top3 .top2-bottom-row {
width: 744px;
- height: 151.818px;
+ height: auto;
+ flex: 1;
display: flex;
gap: 16px;
+ align-items: stretch;
}
.top2-cards {
@@ -1026,78 +1026,33 @@ const addTop2Animation = () => {
.top3-center-block {
width: 744px;
height: 436.182px;
- display: flex;
- flex-direction: column;
- gap: 16px;
- align-items: center;
+ position: relative;
+}
+
+.top3-center-block .top2-center {
+ position: absolute;
+ left: 24.982px;
+ top: 65px;
+ width: 696.481px;
+ height: 333.004px;
+ z-index: 1;
+}
+
+.top3-center-block .svg-wrapper {
+ position: relative;
+ z-index: 1;
}
.top3-map-frame {
position: absolute;
- left: 50%;
- top: 50%;
- width: 795px;
- height: 456px;
- transform: translate(-50%, -50%);
- object-fit: contain;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
pointer-events: none;
z-index: 2;
}
-.top3-subheader {
- width: 100%;
- height: 87.178px;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
-}
-
-.top3-subheader-text {
- font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
- font-size: 24px;
- font-weight: 700;
- line-height: 60px;
- color: #ffffff;
- letter-spacing: 0.2px;
- text-align: center;
-}
-
-.top3-subheader-line {
- position: absolute;
- top: 50%;
- width: 214.131px;
- height: 1px;
- background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 55%, rgba(255, 255, 255, 0));
- transform: translateY(-50%);
-}
-
-.top3-subheader-line::before {
- content: '';
- position: absolute;
- top: -2px;
- width: 4px;
- height: 4px;
- border-radius: 50%;
- background: #ffffff;
-}
-
-.top3-subheader-line.is-left {
- left: 0;
-}
-
-.top3-subheader-line.is-left::before {
- left: 0;
-}
-
-.top3-subheader-line.is-right {
- right: 0;
-}
-
-.top3-subheader-line.is-right::before {
- right: 0;
-}
-
.svg-wrapper.is-top2,
.svg-wrapper.is-top3 {
flex: none;
diff --git a/src/assets/map-kuang.svg b/src/assets/map-kuang.svg
index f2e2e40..49daed6 100644
--- a/src/assets/map-kuang.svg
+++ b/src/assets/map-kuang.svg
@@ -1,35 +1,35 @@