page {
  background: #f8fafa;
}
.page-switch {
  color: #fff;
  text-align: right;
  font-family: 'Alibaba PuHuiTi 2.0';
  font-size: 44rpx;
  font-style: normal;
  font-weight: 700;
  line-height: 52rpx;
  .arrow {
    font-size: 28rpx;
  }
}

.page {
  min-height: 60vh;
  .user {
    margin: 48rpx 0 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20rpx;
    .avatar {
      flex-shrink: 0;
      width: 102rpx;
      height: 102rpx;
      border-radius: 50%;
      border: 1px solid #fff;
    }
    .wrap {
      padding-top: 8rpx;
      flex: 1;
      .name {
        font-size: 36rpx;
        color: #ffffff;
        .label {
          margin-top: 8rpx;
          padding: 0 12rpx;
          display: inline-block;
          font-size: 28rpx;
          color: #ffffff;
          line-height: 36rpx;
          border-radius: 6rpx;
          background: linear-gradient(84deg, #fece55 0%, #ffb700 100%);
        }
      }
      .site {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
    .code {
      padding: 16rpx 28rpx;
      border: 1px solid #fff;
      border-radius: 24rpx 0 0 24rpx;
      border-right: none;
      background: linear-gradient(180deg, #f57b3d 0%, #ffa64d 100%);
      display: flex;
      align-items: center;
      gap: 8rpx;
      .icon {
        display: block;
        width: 52rpx;
        height: 52rpx;
      }
      .arrow {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
  .stat-data {
    margin: 32rpx 32rpx 0;
    padding: 32rpx;
    background: linear-gradient(180deg, #ffeede 0%, #ffffff 12.04%, #ffffff 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1px solid #ffffff;
    .s-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 36rpx;
        color: #1a2020;
        font-weight: bold;
      }
      .tip {
        font-size: 28rpx;
        color: #b5b8bb;
      }
    }
    .card {
      margin-top: 32rpx;
      border: 1px solid #f5f4f3;
      border-radius: 16rpx;
      overflow: hidden;
      .row2 {
        display: flex;
        background: linear-gradient(90deg, #ff8a4c 0%, #fece55 100%);
        border-radius: 16rpx 16rpx 0 0;
        .col {
          flex: 1;
          padding: 28rpx 34rpx;
          .name {
            font-size: 28rpx;
            color: #ffffff;
            line-height: 36rpx;
          }
          .num {
            margin-top: 8rpx;
            font-size: 40rpx;
            color: #ffffff;
            line-height: 48rpx;
          }
        }
        .line {
          width: 1px;
          background-color: rgba(238, 245, 245, 0.35);
        }
      }
      .row3 {
        background-color: #fff;
        display: flex;
        .col {
          position: relative;
          padding: 28rpx 34rpx;
          flex: 1;
          .name {
            font-size: 24rpx;
            color: #b7b7b7;
            line-height: 36rpx;
          }
          .num {
            margin-top: 8rpx;
            font-size: 40rpx;
            color: #342317;
            line-height: 48rpx;
          }
          .line {
            position: absolute;
            left: 20rpx;
            bottom: 0;
            width: 168rpx;
            height: 1px;
            background-color: #f5f4f3;
          }
          &:nth-of-type(2) {
            borer: 1px solid #f2f6f8;
            border-right: none;
            border-left: none;
            background-color: #f9f9f9;
          }
        }
      }
    }
  }
  .chat-data {
    margin: 32rpx 32rpx;
    padding: 32rpx;
    background: linear-gradient(180deg, #fff6ed 0%, #ffffff 7.03%, #ffffff 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1px solid #ffffff;
    .c-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 36rpx;
        color: #342317;
        font-weight: bold;
      }
      .switch-btns {
        display: flex;
        align-items: center;
        gap: 24rpx;
        .btn {
          width: 148rpx;
          height: 56rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #ffffff;
          font-size: 28rpx;
          color: #342317;
          border-radius: 1748rpx 1748rpx 1748rpx 1748rpx;
          border: 1px solid rgba(175, 171, 169, 0.2);
          &.active {
            background-color: #ff8a4c;
            color: #fff;
            border-color: #ff8a4c;
          }
        }
      }
    }
    .c-options {
      margin-top: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 32rpx;
        color: #342317;
        font-weight: bold;
      }
      .picker {
        color: #ffa64d;
        font-size: 28rpx;
        .p-content {
          display: flex;
          align-items: center;
          .content {
            color: #6a605c;
          }
          .icon {
            padding: 20rpx 10rpx;
          }
        }
      }
    }
    .card {
      margin-top: 32rpx;
      border: 1px solid #f5f4f3;
      border-radius: 16rpx;
      overflow: hidden;
      .row2 {
        display: flex;
        background: linear-gradient(90deg, #ff8a4c 0%, #fece55 100%);
        border-radius: 16rpx 16rpx 0 0;
        .col {
          flex: 1;
          padding: 28rpx 34rpx;
          .name {
            font-size: 28rpx;
            color: #ffffff;
            line-height: 36rpx;
          }
          .num {
            margin-top: 8rpx;
            font-size: 40rpx;
            color: #ffffff;
            line-height: 48rpx;
          }
        }
        .line {
          width: 1px;
          background-color: rgba(238, 245, 245, 0.35);
        }
      }
      .row3 {
        background-color: #fff;
        display: flex;
        .col {
          position: relative;
          padding: 28rpx 34rpx;
          flex: 1;
          .name {
            font-size: 24rpx;
            color: #b7b7b7;
            line-height: 36rpx;
          }
          .num {
            margin-top: 8rpx;
            font-size: 40rpx;
            color: #342317;
            line-height: 48rpx;
          }
          .line {
            position: absolute;
            left: 20rpx;
            bottom: 0;
            width: 168rpx;
            height: 1px;
            background-color: #f5f4f3;
          }
          &:nth-of-type(2) {
            borer: 1px solid #f2f6f8;
            border-right: none;
            border-left: none;
            background-color: #f9f9f9;
          }
        }
      }
    }
    .chart-range {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .picker {
        .p-content {
          padding: 8rpx 38rpx;
          display: flex;
          align-items: center;
          gap: 18rpx;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 1px solid #f2f6f8;
          .content {
            font-size: 28rpx;
            color: #b5b8bb;
          }
          .icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
      .line {
        width: 24rpx;
        height: 1px;
        background-color: #f2f6f8;
      }
    }
    .chart-container {
      margin-top: 16rpx;
      padding: 15rpx 30rpx;
      width: 100%;
      height: 546rpx;
      box-sizing: border-box;
    }
    .more {
      padding: 20rpx 0 0;
      font-size: 28rpx;
      color: #FF8A4C;
      text-align: center;
    }
  }
}