update at 2026-01-14 19:37:54

src/App.vue

@@ -104,15 +104,10 @@
                   </div>
                 </div>
                 <div v-if="currentStyle === 'top3'" class="top3-center-block" data-node-id="303:722">
-                  <div class="top3-subheader" data-node-id="303:1411">
-                    <span class="top3-subheader-line is-left"></span>
-                    <span class="top3-subheader-text">业务系统分层整体架构展示</span>
-                    <span class="top3-subheader-line is-right"></span>
-                  </div>
                   <div class="top2-center" data-node-id="303:723">
                     <div class="svg-wrapper is-top3" ref="svgWrapper" v-html="svgContent"></div>
-                    <img class="top3-map-frame" :src="mapKuang" alt="" />
                   </div>
+                  <img class="top3-map-frame" :src="mapKuang" alt="" />
                 </div>
                 <div v-else class="top2-center" data-node-id="162:5">
                   <div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div>
@@ -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;