gavin/monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-01-14 18:35:40

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-14 18:35:40 +08:00
parent 1a0678232f
commit bbe0b373b6
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.vue
View File

@@ -111,6 +111,7 @@
</div> </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>
</div> </div>
<div v-else class="top2-center" data-node-id="162:5"> <div v-else class="top2-center" data-node-id="162:5">
@@ -154,6 +155,7 @@ import videoIcon from './assets/video.svg'
import playIcon from './assets/play.svg' import playIcon from './assets/play.svg'
import aiIcon from './assets/ai.svg' import aiIcon from './assets/ai.svg'
import picIcon from './assets/pic.svg' import picIcon from './assets/pic.svg'
import mapKuang from './assets/map-kuang.svg'
type StyleType = 'circle' | 'top2' | 'top3' type StyleType = 'circle' | 'top2' | 'top3'
@@ -901,6 +903,7 @@ const addTop2Animation = () => {
height: 333.004px; height: 333.004px;
position: relative; position: relative;
align-self: center; align-self: center;
overflow: visible;
} }
.layout-top2 .top2-bottom-row { .layout-top2 .top2-bottom-row {
@@ -946,12 +949,26 @@ const addTop2Animation = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
position: relative;
}
.top2-card-icon::before {
content: '';
position: absolute;
width: 49px;
height: 49px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.7);
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(37, 67, 165, 0.15) 60%, rgba(37, 67, 165, 0) 100%);
box-shadow: 0 0 10px rgba(0, 245, 255, 0.35);
} }
.top2-card-icon img { .top2-card-icon img {
width: 100%; width: 28px;
height: 100%; height: 28px;
display: block; display: block;
position: relative;
z-index: 1;
} }
.top2-card-text { .top2-card-text {
@@ -1015,6 +1032,18 @@ const addTop2Animation = () => {
align-items: center; align-items: center;
} }
.top3-map-frame {
position: absolute;
left: 50%;
top: 50%;
width: 795px;
height: 456px;
transform: translate(-50%, -50%);
object-fit: contain;
pointer-events: none;
z-index: 2;
}
.top3-subheader { .top3-subheader {
width: 100%; width: 100%;
height: 87.178px; height: 87.178px;