update at 2026-01-14 19:37:54
This commit is contained in:
douboer@gmail.com
117
src/App.vue
117
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;
|
||||
|
||||
Reference in New Issue
Block a user