page {
  background-color: #f3f4f5;
}
.page {
  background: linear-gradient(180deg, #d2f1fe 0%, rgba(244, 248, 249, 0) 100%) no-repeat top center / 100% 682rpx;
  .login {
    margin: 32rpx 62rpx 0;
    display: flex;
    gap: 24rpx;
    .upload {
      flex-shrink: 0;
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
    }
    .user {
      padding-top: 10rpx;
      flex: 1;
      .name {
        font-size: 40rpx;
        color: #141515;
        font-weight: bold;
        line-height: 1;
        word-break: break-all;
        .icon {
          vertical-align: -4rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
      .tel {
        margin-top: 8rpx;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
      }
      .status {
        margin-top: 8rpx;
        font-size: 28rpx;
        color: #999999;
        line-height: 40rpx;
      }
    }
    .switch {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .no-login {
    margin: 32rpx 62rpx 0;
    display: flex;
    align-items: center;
    gap: 24rpx;
    .avatar {
      width: 160rpx;
      height: 160rpx;
    }
    .name {
      font-size: 40rpx;
      color: #3795f7;
    }
  }
  .nav-list {
    margin: 70rpx 32rpx 0;
    padding: 0 30rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #ffffff;
    .nav-item {
      padding: 32rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      font-size: 36rpx;
      color: #000000;
      &:last-of-type {
        border: none;
      }
      .icon {
        margin-right: 20rpx;
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}