.signs {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  .main {
    position: relative;
    height: calc(100vh - 100px);
    overflow: scroll;
    padding-top: 100px;
    .date {
      padding: 20px 40px;
      color: #8b8b8b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* justify-content: space-around; */
      .left {
        font-size: 28px;
      }
      .right {
        font-size: 32px;
      }
    }
    .circle {
      position: relative;
      padding: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-circle {
        height: 200px !important;
        width: 200px !important;
        position: relative;
        .circle-text {
          height: 100%;
          padding: 0 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          .left {
            @include center();
            font-size: 62px;
            color: #333;
          }
          .right {
            display: flex;
            justify-content: flex-start;
            align-self: center;
            flex-direction: column;
            img {
              height: 50px;
              width: 50px;
              margin: 0 10px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
            }
          }
          /*  flex-direction: column; */
        }
      }
      .circle-white {
        position: absolute;
        bottom: 78px;
        right: 45%;
        height: 50px;
        width: 50px;
        border: 2px solid;
        border-radius: 50%;
        background: #fff;
      }
    }
    .progress {
      position: relative;
      flex: 1;
      font-size: 30px;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .progress-circle {
        position: absolute;
        top: -12px;
        left: 0;
        height: 35px;
        width: 35px;
        background-color: #fff;
        border-radius: 50%;
        border: 12px solid;
        z-index: 99;
      }
      .state-item {
        width: 100%;
        .state-line {
          position: relative;
          height: 30px;
          font-size: 32px;
          &.low {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
          }
          &.blue {
            background-color: $green;
          }
          &.hight {
            background-color: $com_red;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
          }
        }
        .state-text {
          padding: 40px 0 40px 0;
          @include center();
          color: #333;
          font-weight: bold;
        }
      }
    }
    .statistics {
      position: relative;
      padding: 0px 28px 10px 28px;
      .list {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 32px;
        .item {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          width: 126px;
          padding: 30px 60px 30px 20px;
          /* height: px2rem(136); */
          flex-direction: column;
          border: 1px solid $border_color;
          border-radius: 30px;
          color: #fff;
          .top {
            font-size: 24px;
          }
          .middle {
            font-size: 48px;
            /* padding: 10px; */
          }
          .bottom {
            font-size: 24px;
          }
          .line {
            height: 3px;
            width: 100%;
            margin: 5px 0;
            background-color: #fff;
            @include center();
          }
        }
      }
    }
    .warn-tips {
      padding: 40px 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .left {
        img {
          height: 60px;
          width: 60px;
          object-fit: contain;
          margin-right: 30px;
        }
      }
      .right {
        font-size: 28px;
        .orange {
          color: #edb21d;
        }
      }
    }
    .tab-bar {
      padding: 20px;
      position: relative;
      .date-tab-con {
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #fff;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        .date-tab-list {
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #fff;
          flex: 1;
          height: 50px;
          .date-tab-item {
            position: relative;
            margin: 0 8px;
            height: 100%;
            width: 100%;
            border-radius: 40px;
            color: #6d6d6d;
            font-size: 28px;
            font-weight: bold;
            @include center();
            background-color: #e6e6e6;
            img {
              height: 50px;
              width: 50px;
              padding: 0 16px;
            }
            .more {
              width: 20px;
              height: 12px;
            }
            /* &.active::after {
                            content: '';
                            width: 88px;
                            position: absolute;
                            right: 25%;
                            bottom:  -20px;
                            box-sizing: border-box;
                            border-bottom: 8px solid $green;
                        } */
            &.active {
              color: #fff;
              background-color: $green;
            }
            &.notClick {
              background-color: $border_color;
              color: #fff;
              border: 1px solid #fff;
            }
          }
          .date-tab-item:nth-child(3) {
            border-right: 1px solid #e0e0e0;
          }
          /* .date-tab-item:first-child {
                        border-top-left-radius: 15px;
                        border-bottom-left-radius: 15px;
                    }
                    .date-tab-item:last-child {
                        border-top-right-radius: 15px;
                        border-bottom-right-radius: 15px;
                    } */
        }
        img {
          height: 50xp;
          width: 50px;
          object-fit: contain;
        }
      }
    }
    .top {
      flex: 1;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 32px 20px 26px;
        font-size: 36px;
        .title-left {
          font-weight: bold;
          .van-icon {
            margin-left: 5px;
            font-size: 18px;
          }
        }
      }
      .monitoring-count {
        text-align: left;
        padding: 6px 28px;
        line-height: 40px;
        p {
          font-size: 24px;
          color: #8b8b8b;
        }
      }
      .pie-chart-con {
        flex: 1;
        padding: 10px 0 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .pie-chart-left {
          position: relative;
          height: 300px;
          padding-left: 30px;
          width: 35%;
          @include center();
          #pieChart {
            height: 212px;
            width: 212px;
          }
        }
        .pie-chart-right {
          height: 300px;
          width: 65%;
          padding-right: 40px;
          @include center();
          .list {
            flex-direction: column;
            .item {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 24px;
              padding: 18px 0;
              .item-left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-right: 20px;
                .item-circle {
                  height: 24px;
                  width: 24px;
                  margin: 0 8px;
                }
                span {
                  font-size: 24px;
                }
                .text {
                  color: #000;
                  font-size: 24px;
                }
              }
              .item-right {
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }
    .echart-container {
      flex: 1;
      position: relative;
      min-height: 600px;
      background-color: #fff;
      padding: 0 20px;
    }
    .bottom {
      flex: 1;
      .result {
        padding: 20px 40px;
        .result-con {
          .title {
            span {
              font-size: 46px;
              font-weight: bold;
            }
          }
          .status {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: space-between;
            justify-content: space-between;
            width: 100%;
            margin: 20px 0;
            p {
              font-size: 52px;
              color: $green;
              font-weight: bold;
            }
            ul {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-start;
              li {
                width: 40px;
                height: 30px;
                border-radius: 20px;
                position: relative;
                & + li {
                  margin-left: 10px;
                }
                &.toobad {
                  background-color: #ff5f8b;
                  &:after {
                    background-color: #ff5f8b;
                  }
                }
                &.ordinary {
                  background-color: #2ea7e0;
                  &:after {
                    background-color: #2ea7e0;
                  }
                }
                &.sameas {
                  background-color: #8dc21f;
                  &:after {
                    background-color: #8dc21f;
                  }
                }
                &.excellent {
                  background-color: #179b3b;
                  &:after {
                    background-color: #179b3b;
                  }
                }
                &.active {
                  width: 240px;
                  &:after {
                    opacity: 1;
                  }
                  &:before {
                    opacity: 1;
                  }
                }
                &:after {
                  content: '';
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                  width: 60px;
                  height: 60px;
                  opacity: 0;
                  border-radius: 50%;
                }
                &:before {
                  content: '';
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                  width: 35px;
                  height: 35px;
                  opacity: 0;
                  border-radius: 50%;
                  background-color: #fff;
                  z-index: 2;
                }
              }
            }
          }
          .tips {
            font-size: 24px;
          }
        }
      }
      .wran-tips {
        padding: 20px 40px 50px 40px;
        font-size: 24px;
        .tips-title {
          font-weight: bold;
          padding: 20px 0;
          color: #333;
        }
      }
    }
  }
}
