sisweb/src/assets/css/index/index.scss

.page{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  >.mapControl{
    width: 35%;
    height: 100%;
    float: left;
  }
  >.data{
    width: 65%;
    height: 100%;
    float: left;
    padding: 10px;
    .shadow{
      -webkit-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
      -moz-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
      -o-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
      box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
      &:hover{
        -webkit-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
        -moz-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
        -o-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
        box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
      }
    }
    >.item{
      width: 100%;
      height: calc((100% - #{15px})/4);
      display: table;
      border: 1px solid $border-color-base;
      border-radius: $border-radius-base;
      margin-bottom: 5px;
      >.title{
        width: 30px;
        padding: 0 5px;
        height: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid $border-color-base;
      }
      >.con{
        height: 100%;
        display: block;
        .one{
          float: left;
          width: 20%;
          height: 20%;
          overflow: hidden;
          border-bottom: 1px solid $border-color-base;
          .name{
            width: 110px;
            height: 100%;
            float: left;
            padding: 0 3px;
            border-right: 1px solid $border-color-base;
            display: table;
            >div{
              display: table-cell;
              vertical-align: middle;
              text-align-last: justify;
            }
          }
          .number{
            width: calc(100% - #{160px});
            height: 100%;
            float: left;
            border-right: 1px solid $border-color-base;
            display: table;
            >div{
              font-family: "fontNameRegular";
              font-size: 16px;
              display: table-cell;
              vertical-align: middle;
              text-align: center;
            }
          }
          .unit{
            width: 50px;
            height: 100%;
            float: left;
            border-right: 1px solid $border-color-base;
            display: table;
            >div{
              display: table-cell;
              vertical-align: middle;
              text-align: center;
            }
          }
          &:nth-child(21), &:nth-child(22), &:nth-child(23), &:nth-child(24), &:nth-child(25){
            border-bottom: 0;
          }
          &:nth-child(5), &:nth-child(10), &:nth-child(15), &:nth-child(20), &:nth-child(25){
            .unit{
              border-right: 0;
            }
          }
        }
      }
    }
    >.item2{
      width: 100%;
      height: calc((100% - #{15px})/4);
      margin-bottom: 5px;
      .finishedPower, .powerLoad{
        width: calc((100% - #{10px})/2);
        height: 100%;
        margin-right: 10px;
        display: table;
        float: left;
        border: 1px solid $border-color-base;
        &:last-child{
          margin-right: 0;
        }
        >.title{
          width: 30px;
          padding: 0 5px;
          height: 100%;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          border-right: 1px solid $border-color-base;
        }
        >.con{
          height: 100%;
          display: block;
          .one{
            float: left;
            width: 20%;
            height: 20%;
            overflow: hidden;
            border-bottom: 1px solid $border-color-base;
            .name{
              width: 110px;
              height: 100%;
              float: left;
              padding: 0 3px;
              border-right: 1px solid $border-color-base;
              display: table;
              >div{
                display: table-cell;
                vertical-align: middle;
                text-align-last: justify;
              }
            }
            .number{
              width: calc(100% - #{160px});
              height: 100%;
              float: left;
              border-right: 1px solid $border-color-base;
              display: table;
              >div{
                font-family: "fontNameRegular";
                font-size: 16px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
              }
            }
            .unit{
              width: 50px;
              height: 100%;
              float: left;
              border-right: 1px solid $border-color-base;
              display: table;
              >div{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
              }
            }
            &:nth-child(21), &:nth-child(22), &:nth-child(23), &:nth-child(24), &:nth-child(25){
              border-bottom: 0;
            }
            &:nth-child(5), &:nth-child(10), &:nth-child(15), &:nth-child(20), &:nth-child(25){
              .unit{
                border-right: 0;
              }
            }
          }
        }
      }
    }

  }
}