github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-01 14:59:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update style

Browse Source
This commit is contained in:
Fine 2023-03-16 15:35:15 +08:00
parent 6798b33029
commit 3f72f54881
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -34,7 +34,7 @@ limitations under the License. -->
r="18" r="18"
stroke-width="6" stroke-width="6"
:stroke="n.isReal ? '#72c59f' : '#ed374d'" :stroke="n.isReal ? '#72c59f' : '#ed374d'"
fill="#fff" fill="none"
:cx="n.x" :cx="n.x"
:cy="n.y" :cy="n.y"
/> />
@ -85,17 +85,17 @@ limitations under the License. -->
</marker> </marker>
</defs> </defs>
</g> </g>
<circle class="node" r="10" stroke-width="4" stroke="#ed374d" :cx="34" :cy="65" fill="none" />
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
</svg> </svg>
<div id="tooltip"></div> <div id="tooltip"></div>
<div class="legend"> <div class="legend">
<div> <div>
<img :src="icons.CUBE" />
<span> <span>
{{ settings.description ? settings.description.healthy || "" : "" }} {{ settings.description ? settings.description.healthy || "" : "" }}
</span> </span>
</div> </div>
<div> <div>
<img :src="icons.CUBEERROR" />
<span> <span>
{{ settings.description ? settings.description.unhealthy || "" : "" }} {{ settings.description ? settings.description.unhealthy || "" : "" }}
</span> </span>
@ -135,8 +135,6 @@ limitations under the License. -->
import { ref, onMounted, onBeforeUnmount, reactive, watch, computed, nextTick } from "vue"; import { ref, onMounted, onBeforeUnmount, reactive, watch, computed, nextTick } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import * as d3 from "d3"; import * as d3 from "d3";
import zoom from "../../components/utils/zoom";
// import { simulationInit, simulationSkip } from "./utils/simulation";
import type { Node, Call } from "@/types/topology"; import type { Node, Call } from "@/types/topology";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { useTopologyStore } from "@/store/modules/topology"; import { useTopologyStore } from "@/store/modules/topology";
@ -173,7 +171,6 @@ limitations under the License. -->
const simulation = ref<any>(null); const simulation = ref<any>(null);
const svg = ref<Nullable<any>>(null); const svg = ref<Nullable<any>>(null);
const chart = ref<Nullable<HTMLDivElement>>(null); const chart = ref<Nullable<HTMLDivElement>>(null);
const graph = ref<any>(null);
const node = ref<any>(null); const node = ref<any>(null);
const link = ref<any>(null); const link = ref<any>(null);
const anchor = ref<any>(null); const anchor = ref<any>(null);
@ -569,8 +566,8 @@ limitations under the License. -->
.legend { .legend {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 15px; left: 50px;
color: #ccc; color: #666;
div { div {
margin-bottom: 8px; margin-bottom: 8px;
@ -604,7 +601,7 @@ limitations under the License. -->
} }
.label { .label {
color: #ccc; color: #666;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -640,8 +637,8 @@ limitations under the License. -->
.switch-icon { .switch-icon {
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
background-color: #252a2f99; background: rgba(0, 0, 0, 0.3);
color: #ddd; color: #fff;
display: inline-block; display: inline-block;
padding: 5px 8px 8px; padding: 5px 8px 8px;
border-radius: 3px; border-radius: 3px;
@ -649,8 +646,8 @@ limitations under the License. -->
.topo-line { .topo-line {
stroke-linecap: round; stroke-linecap: round;
stroke-width: 3px; stroke-width: 1px;
stroke-dasharray: 13 7; stroke-dasharray: 20 15;
fill: none; fill: none;
animation: topo-dash 0.5s linear infinite; animation: topo-dash 0.5s linear infinite;
} }