mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-12 15:52:57 +00:00
fix: style
This commit is contained in:
parent
986b428768
commit
eea69ccfb5
@ -113,7 +113,7 @@ limitations under the License. -->
|
||||
const topologyLayout = ref<any>({});
|
||||
const graphWidth = ref<number>(100);
|
||||
const currentNode = ref<Nullable<Node>>(null);
|
||||
const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 20]);
|
||||
const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 40]);
|
||||
const radius = 10;
|
||||
|
||||
async function init() {
|
||||
@ -186,8 +186,7 @@ limitations under the License. -->
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.hierarchy-services-topo,
|
||||
hierarchy-services {
|
||||
.hierarchy-services-topo {
|
||||
.node-text {
|
||||
fill: var(--sw-topology-color);
|
||||
font-size: 12px;
|
||||
@ -219,10 +218,6 @@ limitations under the License. -->
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.hierarchy-services {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
@ -171,85 +171,6 @@ limitations under the License. -->
|
||||
<style lang="scss" scoped>
|
||||
.hierarchy-services-topo {
|
||||
position: relative;
|
||||
|
||||
.relation-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 50px;
|
||||
left: 700px;
|
||||
font-size: 12px;
|
||||
color: var(--sw-topology-color);
|
||||
}
|
||||
|
||||
.node-text {
|
||||
fill: var(--sw-topology-color);
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hierarchy-services-svg {
|
||||
cursor: move;
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--sw-topology-color);
|
||||
font-size: 12px;
|
||||
|
||||
div {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.hierarchy-settings {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 10px;
|
||||
width: 280px;
|
||||
height: 420px;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
color: $disabled-color;
|
||||
border: 1px solid $border-color-primary;
|
||||
background-color: var(--sw-topology-setting-bg);
|
||||
box-shadow: var(--sw-topology-box-shadow);
|
||||
transition: all 0.5ms linear;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--sw-topology-color);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.topo-line {
|
||||
stroke-linecap: round;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 10 10;
|
||||
fill: none;
|
||||
animation: var(--sw-topo-animation);
|
||||
}
|
||||
|
||||
.topo-line-anchor,
|
||||
.topo-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
|
@ -179,85 +179,6 @@ limitations under the License. -->
|
||||
<style lang="scss" scoped>
|
||||
.hierarchy-services-topo {
|
||||
position: relative;
|
||||
|
||||
.relation-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 50px;
|
||||
left: 700px;
|
||||
font-size: 12px;
|
||||
color: var(--sw-topology-color);
|
||||
}
|
||||
|
||||
.node-text {
|
||||
fill: var(--sw-topology-color);
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hierarchy-services-svg {
|
||||
cursor: move;
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--sw-topology-color);
|
||||
font-size: 12px;
|
||||
|
||||
div {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.hierarchy-settings {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 10px;
|
||||
width: 280px;
|
||||
height: 420px;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
color: $disabled-color;
|
||||
border: 1px solid $border-color-primary;
|
||||
background-color: var(--sw-topology-setting-bg);
|
||||
box-shadow: var(--sw-topology-box-shadow);
|
||||
transition: all 0.5ms linear;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--sw-topology-color);
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.topo-line {
|
||||
stroke-linecap: round;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 10 10;
|
||||
fill: none;
|
||||
animation: var(--sw-topo-animation);
|
||||
}
|
||||
|
||||
.topo-line-anchor,
|
||||
.topo-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
|
Loading…
Reference in New Issue
Block a user