diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss index 524f7fb0..17cba3e3 100644 --- a/src/assets/css/components/views/charts2/networkOverviewLine.scss +++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss @@ -14,7 +14,7 @@ .cn-chart-tooltip-value.cn-chart-tooltip__color { font-size: 12px; color: #353636; - line-height: 12px; + line-height: 21px; font-weight: 600; } } @@ -82,15 +82,28 @@ margin-left: 20px; } } + .line-value-active { + position: absolute; + height: 3px; + border-radius: 4px 0 0 0; + background: #046ECA; + top: 0; + z-index: 1; + transition: all linear .2s; + } .line-value { position: absolute; - top: 20px; - left: 27px; + top: 0; + left: 0; display: flex; + .line-value-mpackets.mousemove-cursor { + border-top: 4px solid #D3D0D8; + z-index: 0; + } .line-value-mpackets { - margin-right: 30px; - display: flex; - flex-direction: column; + cursor: pointer; + padding: 16px 0 0 20px; + border-top: 4px solid transparent; span:nth-of-type(1) { font-family: Helvetica-Bold; font-size: 28px; @@ -102,12 +115,6 @@ color: #575757; font-weight: 400; } - .table-below-box--inactivated.line-value-mpackets-name { - color: #ccc; - div:nth-of-type(1) { - background-color: #ccc !important; - } - } .line-value-mpackets-name { position: relative; display: flex; @@ -115,7 +122,7 @@ flex: 1; padding-left: 19px; } - .total,.inbound,.outbound,.internal,.other { + .total,.inbound,.outbound,.internal,.through,.other { width: 14px; height: 14px; border-radius: 50%; @@ -135,6 +142,9 @@ .internal { background: #E48F3E; } + .through { + background: #9FBC1D; + } .other { background: #98709B; } @@ -142,3 +152,33 @@ } } } +.el-select__popper.metric { + top: 218px !important; + .el-popper__arrow { + display: none; + } +} +.reference-line.el-select__popper { + left: 1545px !important; +} +.option-popper.el-select-dropdown { + .el-scrollbar { + .el-select-dropdown__wrap { + .el-scrollbar__view.el-select-dropdown__list { + .el-select-dropdown__item { + padding: 0 8px; + font-family: Helvetica; + height: 24px; + line-height: 24px; + font-size: 12px; + color: #575757; + font-weight: 400; + } + .el-select-dropdown__item:hover { + color: #2C72C6; + background: #fff; + } + } + } + } +} diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss index 4d2e2819..de291808 100644 --- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss +++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss @@ -128,3 +128,9 @@ } } } +.metric-select.el-select__popper { + top: 27px !important; + .el-popper__arrow { + display: none; + } +} diff --git a/src/views/charts2/charts/NetworkOverviewLine.vue b/src/views/charts2/charts/NetworkOverviewLine.vue index 88f3cb58..62e707d6 100644 --- a/src/views/charts2/charts/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/NetworkOverviewLine.vue @@ -1,9 +1,17 @@