page {
  background-color: rgba(246, 246, 246, 1);
}

.page {
  .page-header {
    position: relative;
    padding-bottom: 44rpx;
    margin-bottom: 58rpx;
    border-radius: 0 0 32rpx 32rpx;
    transition: all 0.3s;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0 0 32rpx 32rpx;
    filter: drop-shadow(0rpx 8rpx 20rpx rgba(24, 57, 107, 0.05));
    .calendar-wrap {
      margin-top: 48rpx;
      .calendar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 48rpx;
        .left,
        .right {
          padding: 8rpx 10rpx 10rpx 8rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 2rpx solid rgba(174, 182, 205, 0.18);
          .icon {
            display: block;
            width: 30rpx;
            height: 30rpx;
          }
        }
        .current-date {
          display: flex;
          align-items: baseline;
          gap: 8rpx;
          font-size: 52rpx;
          color: #091f44;
          font-weight: bold;
          .name {
            font-size: 32rpx;
          }
        }
      }
      .calendar {
        margin: 16rpx 0 0;
      }
    }
    .legend {
      padding-right: 40rpx;
      display: flex;
      justify-content: flex-end;
      gap: 48rpx;
      .l-item {
        display: flex;
        align-items: center;
        gap: 12rpx;
        .dot {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          &.dot1 {
            background-color: rgba(5, 134, 255, 1);
          }
          &.dot2 {
            background-color: rgba(246, 74, 58, 1);
          }
        }
        .name {
          font-size: 28rpx;
          color: #aeb6cd;
        }
      }
    }
    .more {
      position: absolute;
      bottom: -32rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 84rpx;
      height: 44rpx;
      background-color: #fff;
      border-radius: 0 0 16rpx 16rpx;
      display: flex;
      justify-content: center;
      &.active {
        .icon {
          transform: rotate(180deg);
        }
      }
      .icon {
        transition: all 0.3s;
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .form {
    margin: 80rpx 40rpx 0;
    display: flex;
    align-items: center;
    gap: 18rpx;
    font-size: 32rpx;
    color: rgba(1, 1, 5, 1);
    font-weight: bold;
    .picker {
      flex: 1;
      .picker-content {
        padding: 22rpx 32rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 12rpx;
        .content {
          flex: 1;
          font-size: 28rpx;
          color: rgba(1, 1, 5, 1);
          font-weight: normal;
          &:empty::after {
            content: attr(data-place);
            color: rgba(161, 164, 172, 0.5);
          }
        }
        .tril {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 12rpx 12rpx 0 12rpx;
          border-color: rgba(207, 209, 213, 1) transparent transparent transparent;
        }
      }
    }
  }
  .page-container {
    padding: 0 40rpx 40rpx;
    .module1 {
      margin-top: 32rpx;
      padding: 24rpx 32rpx 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .title {
        font-size: 32rpx;
        color: rgba(1, 1, 5, 1);
        font-weight: bold;
      }
      .container {
        margin-top: 32rpx;
        height: 600rpx;
        #mychart-dom-bar {
          width: 100%;
          height: 100%;
        }
      }
    }
    .tabs {
      margin-top: 48rpx;
      display: flex;
      padding: 8rpx;
      background-color: #fff;
      border-radius: 112rpx;
      .tab {
        flex: 1;
        padding: 16rpx;
        text-align: center;
        font-size: 32rpx;
        color: rgba(137, 141, 151, 1);
        &.active {
          color: #fff;
          border-radius: 112rpx;
          background-color: rgba(28, 107, 255, 1);
        }
      }
    }
    .doc {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 58rpx;
      .total {
        font-size: 28rpx;
        color: rgba(137, 141, 151, 1);
        .num {
          font-size: 32rpx;
          color: rgba(28, 107, 255, 1);
        }
      }
      .more {
        font-size: 28rpx;
        color: rgba(28, 107, 255, 1);
      }
    }
    .tab1 {
      .tab1-module {
        margin-top: 32rpx;
        padding: 32rpx;
        background: linear-gradient(3deg, #ffffff 0%, #fff4f3 100%);
        box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 2rpx solid #ffffff;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .item {
          padding: 0 0 0 48rpx;
          display: flex;
          align-items: center;
          gap: 24rpx;
          &:first-of-type {
            border-right: 1px solid rgba(0, 0, 0, 0.09);
          }
          .icon {
            width: 96rpx;
            height: 96rpx;
            background: linear-gradient(159deg, #1dd4ac 0%, #1c6bff 100%);
            box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(28, 107, 255, 0.1);
            border-radius: 122rpx 122rpx 122rpx 122rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .i-img {
              width: 52rpx;
              height: 52rpx;
            }
          }
          .wrap {
            .name {
              font-size: 24rpx;
              color: rgba(161, 164, 172, 1);
            }
            .num {
              font-size: 40rpx;
              font-weight: bold;
              color: rgba(1, 1, 5, 1);
              .sub {
                font-size: 24rpx;
                color: rgba(161, 164, 172, 1);
                font-weight: normal;
              }
            }
          }
        }
      }
      .tab1-list {
        margin-top: 32rpx;
        .list-item {
          display: flex;
          gap: 16rpx;
          .aside {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 16rpx;
            .order {
              margin-top: 8rpx;
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
              background-clip: content-box;
              background-color: rgba(28, 107, 255, 1);
              border: 4rpx solid rgba(28, 107, 255, 0.3);
            }
            .line {
              flex: 1;
              border-right: 1px dashed rgba(28, 107, 255, 1);
            }
          }
          .container {
            flex: 1;
            padding-bottom: 16rpx;
            .date {
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
              padding-bottom: 16rpx;
            }
            .wrap {
              background-color: #fff;
              border-radius: 24rpx;
              padding: 16rpx 32rpx 16rpx 0;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .title {
                display: flex;
                align-items: center;
                gap: 20rpx;
                font-size: 32rpx;
                color: rgba(1, 1, 5, 1);
                font-weight: bold;
                &::before {
                  content: '';
                  width: 12rpx;
                  height: 36rpx;
                  border-radius: 0 7rpx 7rpx 0;
                  background: rgba(28, 107, 255, 1);
                }
              }
              .progress {
                min-width: 148rpx;
                height: 88rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 40rpx;
                color: rgba(255, 255, 255, 1);
                background: #0586ff;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                &::after {
                  margin-top: 10rpx;
                  content: '%';
                  font-size: 24rpx;
                }
              }
            }
          }
        }
      }
    }
    .tab2 {
      .tab2-list {
        margin-top: 32rpx;
        .list-item {
          display: flex;
          gap: 16rpx;
          .aside {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 16rpx;
            .order {
              margin-top: 8rpx;
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
              background-clip: content-box;
              background-color: rgba(28, 107, 255, 1);
              border: 4rpx solid rgba(28, 107, 255, 0.3);
            }
            .line {
              flex: 1;
              border-right: 1px dashed rgba(28, 107, 255, 1);
            }
          }
          .container {
            flex: 1;
            padding-bottom: 16rpx;
            .date {
              font-size: 32rpx;
              color: rgba(1, 1, 5, 1);
              padding-bottom: 16rpx;
            }
            .wrap {
              background-color: #fff;
              border-radius: 24rpx;
              padding: 16rpx 32rpx 16rpx 0;
              .title {
                display: flex;
                align-items: center;
                gap: 20rpx;
                font-size: 32rpx;
                color: rgbargba(137, 141, 151, 1) (1, 1, 5, 1);
                padding-bottom: 16rpx;
                font-weight: bold;
                &::before {
                  content: '';
                  width: 12rpx;
                  height: 36rpx;
                  border-radius: 0 7rpx 7rpx 0;
                  background: rgba(28, 107, 255, 1);
                }
              }
              .row {
                padding: 16rpx 32rpx;
                display: flex;
                align-items: center;
                gap: 16rpx;
                .legend {
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  &.legend1 {
                    background: linear-gradient(180deg, #54e5ff 0%, #0588ff 100%);
                  }
                  &.legend2 {
                    background: linear-gradient(166deg, #acf8e0 0%, #22dca1 100%);
                  }
                }
                .label {
                  flex: 1;
                  font-size: 28rpx;
                  color: rgba(137, 141, 151, 1);
                }
                .num {
                  width: 5em;
                  font-size: 28rpx;
                  color: rgba(137, 141, 151, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}