集群状态的组件开发 缺背景图

haoxuan

2023-11-01 5c2a12a0436d01b48439528864811777af9aae68

集群状态的组件开发 缺背景图

 src/assets/images/number.png

 src/views/dashboard/components/DeviceStatusInfo.vue

@@ -70,7 +70,8 @@
          </span>
        </span>
      </span>
      <div class="device-b">运行时间：1天1小时23分12秒</div>
      <div class="device-info">主节点</div>
      <div class="device-b title-bng"><span>节点数</span> <i>120</i></div>
    </div>
  </div>
</template>
@@ -97,20 +98,15 @@
$status-dark-font: #efefef;
$status-off: red;
.device-status-info {
  width: calc(50% - 5px);
  width: 50%;
  height: 150px;
  line-height: 40px;
  background: $status-done;
  margin-top: 10px;
  border-radius: 4px;
  color: #fff;
  border: 1px solid $status-border;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
  text-align: center;
  font-size: 15px;

  .duan {
    color: $status-off;
    font-size: 26px;
@@ -128,8 +124,13 @@
  .color-one,
  .color-two {
    height: 100%;
    width: 100%;
    margin-right: 10px;
    width: calc(100% - 10px);
    margin-right: 20px;
    background: $status-done;
    border: 1px solid $status-border;
    box-sizing: border-box;
    border-radius: 4px;
    padding-top: 10px;
    .device-m {
      width: 100%;
      display: inline-block;
@@ -149,7 +150,36 @@
    }
  }
  .color-two {
    margin-left: 10px;
    margin-right: 0px;
    position: relative;
    .device-info {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 0px 6px;
      font-size: 12px;
      line-height: 20px;
      background: $status-running;
      color: #fff;
      border-radius: 8px;
    }
    .title-bng {
      height: 32px;
      line-height: 32px;
      background: url('../../../assets/images/number.png') no-repeat center center / cover;
      span {
        height: 32px;
        display: inline-block;
        text-align: center;
        display: inline-block;
        float: left;
        margin-left: 35%;
      }
      i {
        float: right;
        margin-right: 15px;
      }
    }
  }
}
</style>