.container {
  display: flex;
  flex-direction: column;
  height: 684px;
  width: 100%;
  // background: rgba(68, 120, 195, 0.2);
  background: url('@/assets/images/bg.png');
  border-radius: 20px;

  .titleWarp {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;

    .title {
      font-family: DingTalk JinBuTi;
      background-color: rgba(62, 146, 199, 0.347);
      width: 170px;
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px 0 25px 0;
      color: rgb(255, 255, 255);
      font-size: 30px;
    }

    .select {
      padding: 10px;

      :global {
        .ant-picker-outlined {
          // background: transparent !important;
        }

        .ant-picker-cell-inner {
          background: #326fa7 !important;
        }
      }
    }
  }

  .content {
    display: flex;
    // justify-content: space-between;
    padding: 0 20px;
    margin-top: 32px;

    .upIcon {
      width: 24px;
      height: 58px;
      transform: rotate(90deg);
      margin-left: 20px;
    }

    .platform {
      // width: 488px;
      flex: 1;

      .platItem {
        width: calc(100% - 64px);
        height: 84px;
        background: rgba(67, 112, 180, 0.313);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-bottom: 13px;
        padding: 0 25px;

        .title {
          color: rgb(188, 206, 233);
          font-size: 20px;
          width: 134px;
        }

        .countWarp {
          width: 130px;
          display: flex;
          align-items: center;
          cursor: pointer;
          text-align: right;
          justify-content: flex-end;

          .unit {
            font-size: 14px;
            color: rgb(188, 206, 233);
            margin-left: 8px;
          }
        }
      }
    }

    .rigth {
      width: 534px;
      height: 569px;
      background: rgba(77, 107, 178, 0.238);
      border-radius: 15px;
      padding: 33px 20px 20px 20px;

      .topWarp {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: rgb(189, 206, 233);
          font-size: 20px;
        }

        .countWarp {
          display: flex;
          align-items: center;

          .unit {
            color: rgb(188, 206, 233);
            font-size: 14px;
            margin-left: 8px;
            line-height: 1;
          }
        }
      }

      .roat {
        margin-top: 10px;
        text-align: right;
        color: rgb(188, 206, 233);
        margin-bottom: 10px;

        .count {
          font-size: 18px;
          color: rgb(29, 187, 138);
          font-weight: 700;
        }
      }

      .eventWarp {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 30px;
        padding: 0 30px;
        grid-row-gap: 27px;

        .eventItem {
          display: flex;

          .icon {
            width: 60px;
            height: 60px;
            cursor: default;
          }

          .rw {
            margin-left: 16px;

            .countWarp {
              display: flex;
              align-items: center;

              .unit {
                margin-left: 5px;
                color: rgb(188, 206, 233);
              }
            }

            .label {
              color: rgb(188, 206, 233);
              font-size: 20px;
            }
          }
        }
      }

      .issueWarp {
        height: 139px;
        border-radius: 10px;
        background-color: rgba(71, 101, 165, 0.269);
        margin-top: 15px;
        padding: 17px 20px;

        .topWarp {
          display: flex;
          justify-content: space-between;
          width: 100%;

          .title {
          }

          .countWarp {
            display: flex;
            align-items: center;

            .unit {
              margin-left: 5px;
              color: rgb(188, 206, 233);
            }
          }
        }

        .progressWarp {
          margin-top: 17px;

          :global {
            .ant-progress .ant-progress-success-bg {
              background-color: rgb(255, 198, 20);
            }
          }
        }

        .botWarp {
          display: flex;
          justify-content: space-between;
          color: rgb(188, 206, 233);
          padding-left: 20px;
          margin-top: 8px;
          padding-right: 20px;

          .item {
            display: flex;
            align-items: center;

            .dot {
              width: 12px;
              height: 12px;
            }

            .name {
              color: rgb(188, 206, 233);
              margin-left: 3px;
              margin-right: 6px;
            }

            .unit {
              font-size: rgb(188, 206, 233);
              margin-left: 5px;
            }
          }
        }
      }

      .cityIssue {
        margin-top: 40px;
        padding-left: 21px;
        background-color: rgba(71, 101, 165, 0.307);
        height: 72px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        .label {
          width: 55%;
          font-size: 20px;
        }
        .numWarp {
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
    }
  }

  :global {
    .ant-statistic-content-value {
      background: linear-gradient(
        180deg,
        rgb(170, 255, 246),
        rgb(37, 187, 255)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-family: D-DIN;
      // font-size: 26px;
      // font-size: clamp(20px, 2.5vh, 30px);
      font-weight: 700;
    }
  }
}

.spin {
  flex: 1;
  height: 100%;
  
  :global {
    .ant-spin-container {
      width: 100%;
      height: 100%;
      &::after {
        background: transparent !important;
      }
    }
  }
}

.countBlue {
  background: linear-gradient(180deg, #aafff6, #25bbff);
  background-clip: 'text';
  -webkit-text-fill-color: transparent;
}
