jy2024-ui/src/views/hl/check/css/style.scss

@import "@/assets/styles/common.scss";
.check-body {
  margin: 0;
  //background-image: linear-gradient(to right bottom,#26a69a,#009688);
  height:calc(100vh - 84px);
  overflow: auto;
  @include borderBox();
  padding:10px;
  .site-content {
    border: 1px solid #DDDDDD80;
    padding: 20px;
    background-image: linear-gradient(to right bottom, #F1F1F140, #EEEEEE40);
    border-radius: 6px;

    .site-row {
      //background-image: linear-gradient(to right, #004d40 0%, #00695c 1%, #00796b 100%);
      background: #2c3e5066;
      box-shadow: 0 0 1px #009688;
      border-radius: 6px;
      height: 12px;
      width: 100%;
      margin-bottom: 14px;
    }

    .site-progress {
      background-image: linear-gradient(to right, #43e97b99 0%, #38f9d799 100%);
      width: 0;
      height: 100%;
      border-radius: 6px;
      transition: all .5s;
    }

    .site-label {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: -9px;
      @include flexBetween();
      @include borderBox();
      padding: 0 10px;
    }

    .site-row .site-node {
      @include flexCenter();
      flex-wrap: wrap;
      cursor: pointer;
      width: 14.2%;
    }

    .site {
      width: 12px;
      height: 6px;
      border-radius: 4px;
      transition: all .3s;
    }

    .normal {
      background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
    }

    .abnormal {
      background: #e43;
    }

    .un-info {
      background-image: linear-gradient(120deg, #F1F1F1 0%, #ebedee 100%);
    }
    .site-row .site-node:hover .site {
      transform: scale(1.3);
    }

    .site-row .site-node:hover .site-name {
      text-shadow: 0 0 2px white;
    }

    .site-row .site-name {
      font-size: 14px;
      width: 100%;
      text-align: center;
      margin-top: 6px;
      color:#2c3e50;
    }
  }
}