yongxu-web/src/pages/DataBoard/index.less

body {
  margin: 0;
}
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  //background: #010421;
  background: url('../../../public/assets/dataBoardBg.jpg') center no-repeat;
  background-size: 100% 100%;

  .dataBoardBg_two {
    position: absolute;
    bottom: 0;
  }

  // 顶部
  .dataTitleItem {
    position: relative;
    width: 100%;
    height: 10%;
    img {
      position: absolute;
      left: 50%;
      width: 100%;
      transform: translate(-50%);
    }
    .decoration1 {
      position: absolute;
      top: 37%;
      left: 3%;
    }
    .title {
      position: absolute;
      top: 8%;
      left: 50%;
      color: #2ff8ff;
      font-size: 25px;
      transform: translate(-50%);
    }
    .decoration5 {
      position: absolute;
      top: 75px;
      left: 50%;
      width: 300px;
      height: 40px;
      transform: translate(-50%);
    }
  }

  // 内容
  .dataBoardContent {
    position: relative;
    width: 100%;
    height: 60%;

    .decoration_map {
      position: absolute;
      top: 0;
      left: 50%;
      width: 40%;
      height: 80%;
      transform: translate(-50%);

      .data_show {
        position: relative;
        .data_show_num {
          position: absolute;
          top: 10%;
          left: 50%;
          transform: translate(-50%);
        }
        .data_show_title {
          position: absolute;
          bottom: 20%;
          width: 100%;
          font-size: 13px;
          text-align: center;
        }
      }
    }

    .decoration_left_1,
    .decoration_left_2,
    .decoration_right_3,
    .decoration_right_4 {
      position: absolute;
      width: 27%;
      height: calc(100% - 50%);
    }

    .title_text {
      position: absolute;
      top: 5%;
      left: 10%;
      color: #fff;
      font-size: 15px;
    }

    .radio_style {
      position: absolute;
      top: 15%;
      right: 15%;
      z-index: 10;

      :global {
        .ant-radio-button-wrapper {
          background: rgba(255, 255, 255, 0.78);
        }
        .ant-radio-button-wrapper-checked {
          background: rgba(64, 197, 241, 0.5);
          border-right-color: #40c5f1;
        }
      }
    }

    .user_charts {
      position: absolute;
      top: 15%;
      left: 0;
    }

    .decoration_left_1 {
      top: 0;
      left: 3%;
      .statistics {
        position: absolute;
        top: 15%;
        left: 0;
        display: flex;
        justify-content: space-around;
        width: 92%;
        height: 77%;

        .statistics_title_text {
          margin-top: 10px;
          margin-left: 15px;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          line-height: 30px;
          background-image: -webkit-linear-gradient(right, #52ffff, #2aacfa);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .user_data {
          width: 40%;
          .user_content {
            .user_item {
              margin: 13% 0;
              text-align: center;
              .item_title {
                color: #fff;
              }
            }
          }
        }
        .device_data {
          width: 60%;
          .device_content {
            display: flex;
            width: 100%;
            margin: 5% 0;
            .device_item {
              position: relative;
              text-align: center;
              .device_num {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%);
              }
              .device_bg {
                width: 70%;
              }
              .device_title {
                margin-top: 3%;
                color: #fff;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .decoration_left_2 {
      top: 50%;
      left: 3%;
    }
    .decoration_right_3 {
      top: 0;
      right: 1%;
    }
    .decoration_right_4 {
      top: 50%;
      right: 1%;
    }
  }
  .dataBottom {
    position: relative;
    top: 0.5%;
    left: 0.5%;
    width: 99%;
    height: 30%;
  }
}