.container { .topbg{ position: absolute; width: 100%; z-index: -1; } .navbar { padding-left: 30rpx; font-weight: 600; font-size: 38rpx; color: #FFFFFF; } .userinfo { display: flex; padding: 72rpx 40rpx 48rpx; color: #fff; font-size: 26rpx; .content { flex: 1; .header { display: flex; justify-content: space-between; .name { font-weight: 600; font-size: 36rpx; } } .addr { margin: 10rpx 0 12rpx; } } .edit { width: 80rpx; margin-top: 20rpx; } .avatar { width: 112rpx; height: 112rpx; background: #FFFFFF; box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 50%; border: 4rpx solid #FFFFFF; margin-right: 30rpx; } } .main_content{ margin-top: -16rpx; background-color: #fff; border-radius: 16rpx 16rpx 0rpx 0rpx; padding: 40rpx; .func_list{ background: #F7F7F7; border-radius: 8rpx; margin-bottom: 40rpx; padding: 0 40rpx; .line{ display: flex; align-items: center; justify-content: space-between; height: 108rpx; border-bottom: 1rpx solid #E5E5E5; &:nth-last-of-type(1){ border: none; } .icon{ width: 40rpx; height: 40rpx; } } } } .modal{ width: 600rpx; height: 720rpx; padding: 48rpx 40rpx; border-radius: 16rpx; .header{ display: flex; .avatar{ width: 88rpx; height: 88rpx; border-radius: 50%; margin-right: 24rpx; } .content{ .name{font-size: 30rpx;} .desc{ font-size: 24rpx; color: #999999; margin-top: 12rpx; } } } .qrcode{ width: 400rpx; height: 400rpx; margin: 60rpx auto 40rpx; } .text{ font-size: 26rpx; color: #999999; text-align: center; } } }