diff --git a/web/src/pages/Cluster/components/cluster_card.js b/web/src/pages/Cluster/components/cluster_card.js
index c08b9520..4c60cec1 100644
--- a/web/src/pages/Cluster/components/cluster_card.js
+++ b/web/src/pages/Cluster/components/cluster_card.js
@@ -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>
diff --git a/web/src/pages/Cluster/components/cluster_card.scss b/web/src/pages/Cluster/components/cluster_card.scss
index 36fa4327..312d18ba 100644
--- a/web/src/pages/Cluster/components/cluster_card.scss
+++ b/web/src/pages/Cluster/components/cluster_card.scss
@@ -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;*/