.container { position: relative; height: 100vh; padding: 38rpx 24rpx; background: url(https://reader-wx.ai160.com/images/reader/sell/bg1.jpg) no-repeat; background-size: contain; } .container .userBox { display: flex; align-items: flex-start; justify-content: space-between; } .container .userBox .left { display: flex; align-items: center; } .container .userBox .left .avatar { width: 106rpx; height: 106rpx; border-radius: 50%; border: 1rpx solid white; } .container .userBox .left .identity { margin-left: 24rpx; } .container .userBox .left .identity .nickName { margin: 6rpx 0 20rpx; font-size: 30rpx; } .container .userBox .left .identity .tag { padding: 5rpx 20rpx; border-radius: 20rpx; font-size: 22rpx; font-weight: bold; color: #FC6E1C; background: #FFFFFF; } .container .userBox .right { padding: 8rpx 20rpx; margin-right: -24rpx; border-radius: 26rpx 0rpx 0rpx 26rpx; font-size: 28rpx; color: #FFFFFF; background: #F19511; } .container .statistics { margin: 44rpx 0 30rpx; padding: 25rpx 41rpx; background: #FFFFFF; box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.02); border-radius: 20rpx; } .container .statistics .above { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18rpx; border-bottom: 1rpx solid #EEEEEE; } .container .statistics .above .left .label { font-size: 30rpx; font-weight: bold; color: #000000; } .container .statistics .above .left .money { margin-top: 12rpx; font-size: 43rpx; font-weight: 600; color: #FF8200; } .container .statistics .above .withdrawal { padding: 8rpx 20rpx 8rpx 24rpx; background: #FFA343; border-radius: 28rpx; color: white; } .container .statistics .above .withdrawal .rbtn { margin-left: 2rpx; width: 16rpx; height: 22rpx; } .container .statistics .below { padding-top: 26rpx; display: flex; justify-content: space-between; } .container .statistics .below .box { font-size: 28rpx; } .container .statistics .below .box .label { color: #333; font-size: 30rpx; } .container .statistics .below .box .money { font-size: 30rpx; margin-top: 18rpx; font-weight: bold; } .container .boxs { display: flex; align-items: flex-start; justify-content: space-between; } .container .boxs .box { width: 220rpx; height: 172rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 10rpx; } .container .boxs .box .b1 { width: 74rpx; height: 74rpx; } .container .boxs .box .b2 { width: 62rpx; height: 70rpx; } .container .boxs .box .b3 { width: 70rpx; height: 63rpx; } .container .boxs .box .name { margin-top: 12rpx; font-size: 30rpx; } .container .bottom { position: absolute; width: 100%; padding: 26rpx 0; bottom: 0; left: 0; background-color: white; } .container .bottom .btn { margin: 0 auto; width: 466rpx; padding: 14rpx 0; margin-bottom: env(safe-area-inset-bottom) !important; background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%); border-radius: 39rpx; color: white; }