floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cluster_card css style

This commit is contained in:
shiyang 2021-10-27 14:08:47 +08:00
parent fcee8943a9
commit 68a8bdc003
2 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/Cluster/components/cluster_card.js
View File

@ -11,7 +11,7 @@ const ClusterCard = ()=>{
<span class="text">Availability History(Last 7 Days)</span>
</div>
<div class="info-middle">
<span class="label">100.0%</span>
<span class="label font-bold">100.0%</span>
<span class="label label-primary">128 Nodes</span>
<span class="label label-primary">1280 Shards</span>
</div>

104
web/src/pages/Cluster/components/cluster_card.scss
View File

@ -1,3 +1,7 @@
//公用样式
.font-bold {
font-weight: bold;
}
.bg-green {
background-color: green;
}
@ -7,33 +11,47 @@
.bg-red {
background-color: red;
}
.cluster-item {
border: 1px solid black;
.cluster-item {
border: 1px solid #6047a3;
width: 100%;
height: 130px;
margin-bottom: 15px;
height: 120px;
display: flex;
font-size: 12px;
}
.cluster-item .cluster-name {
.cluster-item .label {
text-align: center;
display: inline-block;
padding: 0 3px;
min-width: 50px;
height: 26px;
line-height: 26px;
}
.cluster-item .label.label-primary {
background-color: #1c90ff;
color: white;
}
.cluster-item .cluster-name {
width: 15%;
height: 100%;
padding-right: 5px;
background-color: #a9b108;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cluster-item .cluster-info {
/*background-color: lightblue;*/
.cluster-item .cluster-info {
width: 40%;
height: 100%;
padding: 0 5px;
padding-right: 5px;
}
.cluster-item .cluster-info .info-top {
/*background-color: lightseagreen;*/
.cluster-item .cluster-info .info-top {
background-color: #c6f1ef;
margin: 5px 0 5px 5px;
}
.cluster-item .cluster-info .info-top .text {
.cluster-item .cluster-info .info-top .text {
height: 23px;
line-height: 23px;
font-weight: bold;
@ -41,82 +59,72 @@
padding-left: 5px
;
}
.cluster-item .cluster-info .info-middle {
.cluster-item .cluster-info .info-middle {
width: 100%;
margin: 8px auto;
margin: 5px auto;
display: flex;
justify-content: space-between;
}
.cluster-item .label {
text-align: center;
display: inline-block;
padding: 0 10px;
min-width: 60px;
height: 30px;
line-height: 30px;
}
.cluster-item .label.label-primary {
background-color: #1f63af;
color: white;
}
.cluster-item .cluster-info .info-bottom {
.cluster-item .cluster-info .info-bottom {
display: flex;
flex-wrap: wrap;
margin-top: 3px;
height: 50px;
overflow: hidden;
padding-left: 3px;
}
.cluster-item .cluster-info .info-bottom .status-block {
width: 18px;
height: 18px;
margin: 3px 5px;
.cluster-item .cluster-info .info-bottom .status-block {
width: 15px;
height: 15px;
margin: 4px;
}
.cluster-item .cluster-chart {
.cluster-item .cluster-chart {
width: 45%;
height: 100%;
padding: 0 5px;
padding-right: 5px;
;
}
.cluster-item .cluster-chart .chart-top {
height: 90px;
.cluster-item .cluster-chart .chart-top {
height: 80px;
width: 100%;
display: flex;
margin-top: 5px;
margin-bottom: 3px;
}
.cluster-item .cluster-chart .chart-top .pie-chart {
height: 90px;
.cluster-item .cluster-chart .chart-top .pie-chart {
height: 80px;
width: 50%;
display: flex;
justify-content: space-between;
background-color: lightgray;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item {
.cluster-item .cluster-chart .chart-top .pie-chart .item {
width: 50%;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie1{
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie1{
background-color: goldenrod;
}
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie2{
.cluster-item .cluster-chart .chart-top .pie-chart .item.pie2{
background-color: greenyellow;
}
.cluster-item .cluster-chart .chart-top .line-chart {
height: 90px;
.cluster-item .cluster-chart .chart-top .line-chart {
height: 80px;
width: 50%;
display: flex;
flex-direction: column;
}
.cluster-item .cluster-chart .chart-top .line-chart .item {
height: 45px;
.cluster-item .cluster-chart .chart-top .line-chart .item {
height: 40px;
width: 100%;
}
.cluster-item .cluster-chart .chart-top .line-chart .item.line1{
.cluster-item .cluster-chart .chart-top .line-chart .item.line1{
background-color: #ff8080;
}
.cluster-item .cluster-chart .chart-top .line-chart .item.line2{
.cluster-item .cluster-chart .chart-top .line-chart .item.line2{
background-color: lightseagreen;
}
.cluster-item .cluster-chart .chart-bottom {
height: 30px;
.cluster-item .cluster-chart .chart-bottom {
height: 26px;
width: 100%;
display: flex;
/*background-color: lightgreen;*/