Newer
Older
KaiFengPC / src / assets / styles / rainReportDetail.scss
@zhangdeliang zhangdeliang 13 days ago 9 KB update
.reportDetail {
  width: 100%;
  background: #fff;
  color: #333;
  margin-bottom: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;

  // 表格样式
  .table_content {
    .el-table {
      background-color: transparent !important;

      .el-table__cell {
        padding: 6px 0 !important;
      }

      .success {
        color: #24de8d;
        font-weight: bold;
      }

      .fail {
        color: #f85050;
        font-weight: bold;
      }

      .el-loading-mask {
        background: rgba(3, 20, 37, 0.9) !important;
      }

      .indexClass_1 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      .indexClass_2 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      .indexClass_3 {
        width: 26px;
        height: 26px;
        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
        border-radius: 2px;
        opacity: 0.9;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        display: block;
        justify-content: center;
        line-height: 26px;
      }

      thead {
        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
        // background-size: 100% 100%;
        background: #005cba !important;
      }

      .el-button--primary {
        width: 49px;
        height: 22px;
        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
        border-radius: 11px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #d2efff;
        line-height: 22px;
      }

      .el-table__header-wrapper {
        .el-table__header {
          th {
            background: transparent !important;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            line-height: 32px;
          }
        }
      }

      tr {
        height: 36px !important;
      }

      tr:nth-of-type(even) {
        // background: rgba(0, 72, 153, 0.3) !important;
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
      }

      tr:nth-of-type(odd) {
        // background: rgba(19, 108, 183, 0.5) !important;
        background: transparent !important;
      }

      .el-table__body {
        border-bottom: none !important;

        tr:nth-of-type(odd) {
        }

        tr:nth-of-type(even) {
          td {
          }
        }

        tr:hover > td {
          cursor: pointer;
          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
        }
      }

      .el-table__inner-wrapper {
        &::before {
          display: none;
        }
      }

      .el-table__header-wrapper,
      .el-table__fixed-header-wrapper {
        tr {
          background-color: transparent !important;
        }

        th {
          word-break: break-word;
        }
      }

      .el-table__body-wrapper {
        .el-button [class*='el-icon-'] + span {
          margin-left: 1px;
        }
      }

      th.el-table__cell {
        color: #fff;
        text-align: center;
        border-bottom: none !important;
        border-right: none !important;
      }

      th.is-left {
        text-align: left !important;
      }

      td.el-table__cell {
        text-align: center;
        border-bottom: none !important;
        border-right: none !important;
        color: #fff !important;
      }

      td.is-left {
        text-align: left;
      }

      td.el-table-fixed-column--right {
        background-color: #0f3a4f !important;
        color: #fff !important;

        .el-button {
          color: #fff !important;
        }
      }

      .el-table__empty-block {
        .el-table__empty-text {
          color: #fff !important;
        }
      }
    }

    // .ListBoxHeader_Sel {
    //   .el-input__wrapper {
    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
    //     // box-shadow: none !important;
    //   }
    // }

    .el-progress-bar__outer {
      background: #2eafbf !important;
    }

    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav {
          .el-tabs__item {
            color: #fff !important;

            &.is-active {
              color: #409eff !important;
            }
          }
        }
      }
    }
  }

  .waterlogImg {
    flex-wrap: wrap;

    .part {
      width: 18%;
      margin-left: 10px;
      margin-bottom: 10px;
      text-align: center;

      img {
        width: 100%;
        height: 150px;
      }

      p {
        line-height: 20px;
      }
    }
  }

  #rain_chart,
  #chartOneBG,
  .chartOneBG,
  #chartOneBG2,
  #chartOneBG3,
  #chartOneBG4 {
    // width: 100%;
    width: 1000px;
    height: 300px;
  }

  h1 {
    text-align: center;
    color: $red;
    font-size: 28px;
    letter-spacing: 5px;
  }

  h4 {
    color: $red;
    border-bottom: 3px solid $red;
    padding: 10px 0px;
    text-align: right;
  }

  .title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .small_title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  .button_title {
    width: 66px;
    height: 22px;
    line-height: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-left: 20px;
    cursor: pointer;

    &:hover {
      background: #00a4ae;
      border-radius: 6px;
      text-align: center;
    }
  }

  .active_button_title {
    background: #00a4ae;
    border-radius: 6px;
    text-align: center;
  }

  .content {
    text-indent: 14px;
    position: relative;

    span {
      color: #333333;
      font-weight: bolder;
    }

    &:after {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #918f8f;
      border-radius: 50%;
      content: '';
      left: 0;
      top: 16px;
      margin-top: -4px;
    }
  }

  .small_tip {
    text-align: center;
    font-weight: bold;
    margin: 10px 0px;
  }

  .rain_date_detail {
    margin-bottom: 10px;

    .rain_box2 {
      &:hover {
        background: #5daee6;
      }
    }

    .active_rain_box2 {
      background: #5daee6 !important;
    }

    .rain_box {
      // width: 112px;
      height: 78px;
      background: #155785;
      border-radius: 6px;
      margin-right: 10px;
      cursor: pointer;
      color: #ffffff;

      &:last-child {
        margin-right: 0;
      }

      .rainfall {
        span {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
  }
}

.table_content_box {
  width: 70%;
  margin: 10px auto;
  color: #000;
  border: 1px solid #00314e !important;

  .header {
    text-align: center;
    border-bottom: 0.00521rem solid #00314e !important;
    color: #000;
    font-weight: bolder;
    border-right: none !important;
    position: static !important;
    background-color: #dee1e6 !important;
    height: 0.20833rem !important;
    line-height: 0.20833rem !important;
    font-size: 0.06771rem;
  }

  .basic_label {
    text-align: center;
    border-bottom: 1px solid #00314e !important;
    border-right: none !important;
    position: static !important;
    height: 38px;
    border-right: 1px solid #00314e !important;
  }

  .basic_val {
    text-align: center;
    border-bottom: 1px solid #00314e !important;
    border-right: none !important;
    position: static !important;
    height: 38px;
  }
}

.img_content {
  max-width: 80%;

  .img_box {
    width: 100%;
  }
}

::v-deep(.el-loading-spinner) {
  position: fixed;
  top: 420px !important;
  left: 0;
}

.reportDetail {
  .detailDataTable {
    margin-bottom: 10px !important;
  }

  ::v-deep(.el-table) {
    --el-table-border-color: $mainColor1 !important;
    --el-table-bg-color: $mainColor1 !important;

    .el-table__body {
      border-bottom: 1px solid #333 !important;
    }

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        word-break: break-word;
        background-color: #dee1e6 !important;
        height: 40px !important;
        font-size: 13px;
      }
    }

    .el-table__body-wrapper {
      background-color: #004770 !important;

      .el-button [class*='el-icon-'] + span {
        margin-left: 1px;
      }

      td.el-table-fixed-column--right {
        background: $mainBg !important;
      }
    }

    tr {
      background-color: #f8f8f9 !important;
    }

    tr:nth-of-type(odd) {
      background-color: #fff !important;
    }

    tr:hover > td {
      background-color: #f5f7fa !important;
    }

    th.el-table__cell,
    td.el-table__cell {
      text-align: center;
      border-bottom: 1px solid $mainBg !important;
      color: #000;
      border-right: none !important;
      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
    }

    .el-table__empty-block {
      background-color: #fff !important;

      .el-table__empty-text {
        color: #c6c6c6 !important;
      }
    }

    .el-button {
      border: none !important;
      background: none !important;

      &:hover {
        background: none !important;
        transform: scale(1.01);
      }
    }
  }
}