feat: 仪表板看板
This commit is contained in:
TsMask
@@ -11,6 +11,35 @@
|
||||
background-color: #101129;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 边框 */
|
||||
.panel {
|
||||
box-sizing: border-box;
|
||||
border: 2px solid red;
|
||||
border-image: url(../images/border.png) 51 38 21 132;
|
||||
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.833rem;
|
||||
}
|
||||
.panel .inner {
|
||||
/* 装内容 */
|
||||
/* height: 60px; */
|
||||
position: absolute;
|
||||
top: -2.125rem;
|
||||
right: -1.583rem;
|
||||
bottom: -0.875rem;
|
||||
left: -5.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.panel h3 {
|
||||
font-size: 0.833rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 总览标题 */
|
||||
.brand {
|
||||
background-image: url(../images/brand.png);
|
||||
@@ -40,53 +69,28 @@
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 拓扑图 */
|
||||
.topology {
|
||||
height: 24.1rem;
|
||||
margin-bottom: 0.833rem;
|
||||
/* 实时流量 */
|
||||
.upfFlow {
|
||||
height: 16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topology .topology-title {
|
||||
line-height: 1;
|
||||
padding: 0.667rem 0;
|
||||
margin: 0;
|
||||
font-size: 0.833rem;
|
||||
color: #fff;
|
||||
}
|
||||
.topology .topology-chart {
|
||||
flex: 1;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
.upfFlow .inner .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 3;
|
||||
position: relative;
|
||||
/* 网络拓扑 */
|
||||
.topology {
|
||||
height: 25.55rem;
|
||||
display: flex;
|
||||
}
|
||||
.topology .inner .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
/* 边框 */
|
||||
box-sizing: border-box;
|
||||
border: 2px solid red;
|
||||
border-image: url(../images/border.png) 51 38 21 132;
|
||||
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.833rem;
|
||||
}
|
||||
.panel .inner {
|
||||
/* 装内容 */
|
||||
/* height: 60px; */
|
||||
position: absolute;
|
||||
top: -2.125rem;
|
||||
right: -1.583rem;
|
||||
bottom: -0.875rem;
|
||||
left: -5.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.panel h3 {
|
||||
font-size: 0.833rem;
|
||||
color: #fff;
|
||||
}
|
||||
/* 概览区域 */
|
||||
.overview {
|
||||
height: 4.583rem;
|
||||
@@ -95,16 +99,128 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.overview h4 {
|
||||
.overview .inner h4 {
|
||||
font-size: 1.167rem;
|
||||
padding-left: 0.2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 0.333rem;
|
||||
}
|
||||
.overview span {
|
||||
.overview .inner span {
|
||||
font-size: 0.667rem;
|
||||
color: #4c9bfd;
|
||||
}
|
||||
|
||||
/* 本月告警统计 */
|
||||
.alarmType {
|
||||
height: 14.167rem;
|
||||
}
|
||||
.alarmType .chart {
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.alarmType .bar {
|
||||
width: 13rem;
|
||||
height: 10rem;
|
||||
margin-left: -0.4rem;
|
||||
}
|
||||
.alarmType .data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 7rem;
|
||||
padding: 1.5rem 1.25rem;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../images/rect.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.alarmType .data h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.167rem;
|
||||
color: #fff;
|
||||
}
|
||||
.alarmType .data span {
|
||||
display: block;
|
||||
color: #4c9bfd;
|
||||
font-size: 0.667rem;
|
||||
}
|
||||
|
||||
/* 告警趋势 */
|
||||
.alarmDay {
|
||||
height: 16rem;
|
||||
display: flex;
|
||||
}
|
||||
.alarmDay .inner .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 总流量 */
|
||||
.totalFlow {
|
||||
height: 6.167rem;
|
||||
}
|
||||
.totalFlow .inner .filter {
|
||||
display: flex;
|
||||
}
|
||||
.totalFlow .inner .filter span {
|
||||
display: block;
|
||||
height: 0.75rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.75rem;
|
||||
color: #1950c4;
|
||||
font-size: 0.75rem;
|
||||
border-right: 0.083rem solid #00f2f1;
|
||||
}
|
||||
.totalFlow .inner .filter span:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.totalFlow .inner .filter span:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.totalFlow .inner .filter span.active {
|
||||
color: #fff;
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
.totalFlow .data {
|
||||
display: flex;
|
||||
margin-top: 0.833rem;
|
||||
}
|
||||
.totalFlow .item {
|
||||
width: 50%;
|
||||
}
|
||||
.totalFlow h4 {
|
||||
font-size: 1.167rem;
|
||||
color: #fff;
|
||||
margin-bottom: 0.417rem;
|
||||
}
|
||||
.totalFlow span {
|
||||
color: #4c9bfd;
|
||||
font-size: 0.667rem;
|
||||
}
|
||||
|
||||
/* 资源情况 */
|
||||
.resources {
|
||||
height: 16rem;
|
||||
display: flex;
|
||||
}
|
||||
.resources .inner .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 会话监控 */
|
||||
.cdr {
|
||||
height: 22rem;
|
||||
display: flex;
|
||||
}
|
||||
.cdr .inner .chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* 监控 */
|
||||
.monitor {
|
||||
height: 20rem;
|
||||
@@ -328,49 +444,7 @@
|
||||
color: #4c9bfd;
|
||||
font-size: 0.667rem;
|
||||
}
|
||||
/* 订单 */
|
||||
.order {
|
||||
height: 6.167rem;
|
||||
}
|
||||
.order .filter {
|
||||
display: flex;
|
||||
}
|
||||
.order .filter a {
|
||||
display: block;
|
||||
height: 0.75rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.75rem;
|
||||
color: #1950c4;
|
||||
font-size: 0.75rem;
|
||||
border-right: 0.083rem solid #00f2f1;
|
||||
}
|
||||
.order .filter a:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.order .filter a:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.order .filter a.active {
|
||||
color: #fff;
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
.order .data {
|
||||
display: flex;
|
||||
margin-top: 0.833rem;
|
||||
}
|
||||
.order .item {
|
||||
width: 50%;
|
||||
}
|
||||
.order h4 {
|
||||
font-size: 1.167rem;
|
||||
color: #fff;
|
||||
margin-bottom: 0.417rem;
|
||||
}
|
||||
.order span {
|
||||
display: block;
|
||||
color: #4c9bfd;
|
||||
font-size: 0.667rem;
|
||||
}
|
||||
|
||||
/* 销售区域 */
|
||||
.sales {
|
||||
height: 10.333rem;
|
||||
|
||||
Reference in New Issue
Block a user