page {
  background-color: #f8f8f8;
}
.me_page {
  background:
    linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 500rpx),
    linear-gradient(146deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 300rpx),
    linear-gradient(194deg, #dffff3 0%, #f7f7f7 500rpx);
  background-repeat: no-repeat;
  padding-top: 160rpx;
  .me_header {
    display: flex;
    align-items: center;
    height: 120rpx;
    padding: 30rpx;
    .me_avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 100rpx;
      overflow: hidden;
      background-color: #f8f8f8;
    }
    .me_user {
      flex: 1;
      padding-left: 25rpx;
      .me_name {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        color: #333;
        font-weight: 500;
      }
      .user_roles {
        font-size: 28rpx;
        color: #666;
        display: flex;
        align-items: center;
        padding-top: 10rpx;
        .item {
          display: flex;
          align-items: center;
          height: 30rpx;
          &:last-child {
            padding-left: 20rpx;
            margin-left: 20rpx;
            border-left: 1rpx solid #d8d8d8;
          }
          image {
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }

  .me_content {
    margin: 10rpx 30rpx 0 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    padding-bottom: 30rpx;
    .items {
      width: 25%;
      padding-top: 30rpx;
      color: #3d3d3d;
      font-size: 24rpx;
    }
    image {
      height: 40rpx;
    }
  }
}
