update at 2026-01-14 13:15:32
This commit is contained in:
37
src/App.vue
37
src/App.vue
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="monitor-container">
|
<div class="monitor-container" :class="{ 'is-top2': currentStyle === 'top2' }">
|
||||||
<h1 class="title">火情监控全链路业务监控视图</h1>
|
<h1 class="title">火情监控全链路业务监控视图</h1>
|
||||||
|
|
||||||
<!-- 样式切换按钮 -->
|
<!-- 样式切换按钮 -->
|
||||||
@@ -18,7 +18,12 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="svg-wrapper" ref="svgWrapper" v-html="svgContent"></div>
|
<div
|
||||||
|
class="svg-wrapper"
|
||||||
|
:class="{ 'is-top2': currentStyle === 'top2' }"
|
||||||
|
ref="svgWrapper"
|
||||||
|
v-html="svgContent"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -421,6 +426,34 @@ const addTop2Animation = () => {
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.monitor-container.is-top2 {
|
||||||
|
padding: 8px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-wrapper.is-top2 {
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 55px;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-wrapper.is-top2 :deep(svg) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-wrapper.is-top2 :deep(#shape1) {
|
||||||
|
fill: #211677;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
.svg-wrapper :deep(svg) {
|
.svg-wrapper :deep(svg) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user