.page {
  height: 100vh;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;

  .myBox {
    width: 90%;
    height: 300rpx;
    margin: 30rpx auto;
    background: url('../../static/img/my/card-bg.svg') no-repeat;
    background-size: 100%;
    border-radius: 8rpx;

    .my-top {
      overflow: hidden;
      padding: 70rpx 0 28rpx 30rpx;

      .my-portrait {
        width: 120rpx;
        height: 120rpx;
        display: block;
        float: left;
      }

      .my-item {
        float: left;
        margin-left: 32rpx;
        width: 70%;

        .my-username {
          font-size: 32rpx;
          color: #FFFFFF;
          margin-bottom: 24rpx;
          margin-top: 6rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .my-phone {
          font-size: 28rpx;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
    }
  }

  .box {
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    height: 92rpx;
    line-height: 92rpx;

    .box-img {
      width: 52rpx;
      height: 52rpx;
      display: block;
      float: left;
      padding: 20rpx 20rpx 20rpx 30rpx;
    }

    .box-txt {
      float: left;
      font-size: 28rpx;
      color: #333333;
    }

    .img {
      width: 52rpx;
      height: 52rpx;
      display: block;
      float: right;
      padding: 20rpx 30rpx 20rpx 0;
    }
  }

  .logout {
    width: 550rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #346FC2;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    margin: 98rpx auto 0;
    text-align: center;
  }
}