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

feat: update style

Browse Source
This commit is contained in:
Fine 2023-02-13 17:44:34 +08:00
parent 21be504f13
commit a8bdddb23a
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/reset.scss
View File

@ -204,3 +204,6 @@ div.vis-tooltip {
.vis-item.vis-selected.Normal { .vis-item.vis-selected.Normal {
color: #1a1a1a !important; color: #1a1a1a !important;
} }
.el-progress__text {
font-size: 12px !important;
}

33
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -81,15 +81,16 @@ limitations under the License. -->
<div class="message mb-5 b"> <div class="message mb-5 b">
{{ i.event }} {{ i.event }}
</div> </div>
<div <div class="timeline-table-i-scope mr-10 l sm">
class="timeline-table-i-scope mr-10 l sm" <el-progress
:class="{ :percentage="((i.endTime - i.startTime) / currentSpan.dur) * 100"
blue: i.scope === 'Service', :show-text="false"
green: i.scope === 'Endpoint', :stroke-width="15"
yellow: i.scope === 'ServiceInstance', />
}" <span>
> <b>{{ t("duration") }}: </b>
{{ t(i.scope.toLowerCase()) }} <b>{{ (i.endTime - i.startTime) * 1000000 }} ns</b>
</span>
</div> </div>
<div class="grey sm show-xs"> <div class="grey sm show-xs">
{{ `${visDate(Number(i.endTime))}:${i.endTimeNanos}` }} {{ `${visDate(Number(i.endTime))}:${i.endTimeNanos}` }}
@ -242,6 +243,16 @@ limitations under the License. -->
padding: 0; padding: 0;
} }
.el-progress--line {
width: 300px;
font-size: 12px;
}
.timeline-table-i-scope {
border: none;
padding: 0;
}
.time-line { .time-line {
padding: 0; padding: 0;
max-width: 260px; max-width: 260px;
@ -272,4 +283,8 @@ limitations under the License. -->
.link-hover:hover { .link-hover:hover {
color: #448dfe; color: #448dfe;
} }
b {
font-weight: normal;
}
</style> </style>