update at 2026-01-14 19:37:54
This commit is contained in:
douboer@gmail.com
4
dist/index.html
vendored
4
dist/index.html
vendored
@@ -7,8 +7,8 @@
|
|||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<title>火情监控全链路业务监控视图</title>
|
<title>火情监控全链路业务监控视图</title>
|
||||||
<script type="module" crossorigin src="/assets/index-BxgaTP91.js"></script>
|
<script type="module" crossorigin src="/assets/index-CXxc8szZ.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-DSvn6aKJ.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-TX7wYp3m.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
117
src/App.vue
117
src/App.vue
@@ -104,15 +104,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="currentStyle === 'top3'" class="top3-center-block" data-node-id="303:722">
|
<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="top2-center" data-node-id="303:723">
|
||||||
<div class="svg-wrapper is-top3" ref="svgWrapper" v-html="svgContent"></div>
|
<div class="svg-wrapper is-top3" ref="svgWrapper" v-html="svgContent"></div>
|
||||||
<img class="top3-map-frame" :src="mapKuang" alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<img class="top3-map-frame" :src="mapKuang" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="top2-center" data-node-id="162:5">
|
<div v-else class="top2-center" data-node-id="162:5">
|
||||||
<div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div>
|
<div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div>
|
||||||
@@ -637,7 +632,7 @@ const addTop2Animation = () => {
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
background: #2543a5;
|
background: #182b69;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-stage {
|
.top2-stage {
|
||||||
@@ -647,7 +642,7 @@ const addTop2Animation = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #2543a5;
|
background: #182b69;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-scale {
|
.top2-scale {
|
||||||
@@ -659,7 +654,7 @@ const addTop2Animation = () => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background: #2543a5;
|
background: #182b69;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: scale(var(--top2-scale));
|
transform: scale(var(--top2-scale));
|
||||||
@@ -725,7 +720,7 @@ const addTop2Animation = () => {
|
|||||||
left: 516.1px;
|
left: 516.1px;
|
||||||
top: 7.78px;
|
top: 7.78px;
|
||||||
font-size: 28.491px;
|
font-size: 28.491px;
|
||||||
color: #2543a5;
|
color: #182b69;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -772,6 +767,7 @@ const addTop2Animation = () => {
|
|||||||
top: 25.15px;
|
top: 25.15px;
|
||||||
width: 744.126px;
|
width: 744.126px;
|
||||||
height: 543.699px;
|
height: 543.699px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-top3 .top2-center-col {
|
.layout-top3 .top2-center-col {
|
||||||
@@ -779,7 +775,8 @@ const addTop2Animation = () => {
|
|||||||
height: 734px;
|
height: 734px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-top2 .top2-right-col {
|
.layout-top2 .top2-right-col {
|
||||||
@@ -881,13 +878,15 @@ const addTop2Animation = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.layout-top3 .panel-center-bottom-left {
|
.layout-top3 .panel-center-bottom-left {
|
||||||
width: 364px;
|
width: auto;
|
||||||
height: 151.814px;
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-top3 .panel-center-bottom-right {
|
.layout-top3 .panel-center-bottom-right {
|
||||||
width: 364px;
|
width: auto;
|
||||||
height: 151.814px;
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-top2 .top2-center {
|
.layout-top2 .top2-center {
|
||||||
@@ -902,7 +901,6 @@ const addTop2Animation = () => {
|
|||||||
width: 696.481px;
|
width: 696.481px;
|
||||||
height: 333.004px;
|
height: 333.004px;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-self: center;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -916,9 +914,11 @@ const addTop2Animation = () => {
|
|||||||
|
|
||||||
.layout-top3 .top2-bottom-row {
|
.layout-top3 .top2-bottom-row {
|
||||||
width: 744px;
|
width: 744px;
|
||||||
height: 151.818px;
|
height: auto;
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top2-cards {
|
.top2-cards {
|
||||||
@@ -1026,78 +1026,33 @@ const addTop2Animation = () => {
|
|||||||
.top3-center-block {
|
.top3-center-block {
|
||||||
width: 744px;
|
width: 744px;
|
||||||
height: 436.182px;
|
height: 436.182px;
|
||||||
display: flex;
|
position: relative;
|
||||||
flex-direction: column;
|
}
|
||||||
gap: 16px;
|
|
||||||
align-items: center;
|
.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 {
|
.top3-map-frame {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
inset: 0;
|
||||||
top: 50%;
|
width: 100%;
|
||||||
width: 795px;
|
height: 100%;
|
||||||
height: 456px;
|
object-fit: fill;
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
object-fit: contain;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 2;
|
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-top2,
|
||||||
.svg-wrapper.is-top3 {
|
.svg-wrapper.is-top3 {
|
||||||
flex: none;
|
flex: none;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Reference in New Issue
Block a user