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, #3d5afe 0%, #2196f3 100%);
      width: 0;
      height: 100%;
      border-radius: 6px;
      transition: all .5s;
    }

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

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

    .site {
      width: 9px;
      height: 9px;
      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-name {
      font-size: 14px;
      width: 100%;
      text-align: center;
      margin-top: 6px;
      color:#2c3e50;
    }

    .active-site-name{
      color: #1565c0;
      font-weight: bold;
    }
    .check-status{
      @include flexBetween()
    }

    .check-btn {
      padding: 10px 20px;
    }

    .progress-bar {
      background: #e9e9e9;
      border-radius: 2px;
      height: 4px;
      width: 100%;
      overflow: hidden;
      margin-top: 15px;
    }
    .percentage-value {
      margin-top: 10px;
      font-size: 12px;
    }
    .percentage-label {
      margin-top: 10px;
      font-size: 12px;
    }
    .check-progress{
      @include flexStart();
      .t-span{
        margin-right:5px;
        font-weight: bold;
        color:#444;
      }
    }
    .progress-bar-inner {
      background-image: linear-gradient(to right, #3d5afe 0%, #2196f3 100%);
      opacity: 0.7;
      width: 0;
      height: 4px;
      transition: all .2s;
    }
  }
}