page { background-color: #ffffff; width: 100%; height: 100vh; } .page { background-color: #ffffff; width: 100%; } .thread { height: 20rpx; } .thread2 { height: 60rpx; } .topBody { width:750rpx; .header { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; width:750rpx; height:320rpx; position: relative; z-index: 10; position: relative; .infoBg { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 710rpx; height: 320rpx; margin: 20rpx 30rpx; margin-top: 0rpx; padding-top: calc(var(--status-bar-height) + 0rpx); border-bottom: solid 1px rgba(120, 120, 120, 0.1); .top_row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; padding: 20rpx 0; .left { padding-left: 30rpx;padding-right: 0rpx; width:200rpx; image { width:136rpx; height:136rpx; border-radius: 100rpx; border:solid 4rpx #fff; } .level { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 32rpx; padding: 0 12rpx; margin-left: 10rpx; border-radius: 12rpx; background: linear-gradient(90deg, #FF5869 0%, #F83881 100%); font-size: 20rpx; color: #fff; font-weight: normal; } } .right { color:#333; width:500rpx; font-size: 40rpx;padding-top: 20rpx; .nickname { font-weight: bold; margin-bottom: 0rpx; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; image { width:36rpx; margin-left: 8rpx; margin-right: 10rpx; } .level { font-weight: normal;font-size: 32rpx; } } .tags_list { .tag { margin-right: 8rpx; } } .join_date { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 28rpx; color:#333; image { width:36rpx; margin-left: 6rpx; } } .follow_info { display: none; } } } .bottom_row { padding: 20rpx 50rpx; .intro_row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx; .intro_text { color: #999; font-size: 28rpx; } .add_icon { width: 28rpx; margin-left: 10rpx; } } .follow_info { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; .num { font-size: 36rpx; font-weight: bold; color: #333; margin-right: 8rpx; } .label { font-size: 28rpx; color: #999; } .separator { width: 2rpx; height: 24rpx; background-color: #E5E5E5; margin: 0 30rpx; } } } } .title { font-size: 34rpx; } } } .myinfo { width: 690rpx; display:flex; flex-direction: column; margin:20rpx 30rpx 20rpx; justify-content: flex-start; .tips { padding:20rpx 0rpx 0rpx;font-size: 36rpx;font-weight: bold; } .numlist2 { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; border-radius: 2rpx; .item { display: flex; justify-content: center; padding:20rpx; border-radius: 20rpx; width:340rpx; background: #ffffff; margin:2rpx; image.icon { width:100%; border-radius: 20rpx; } .num { color:#fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; .name { font-size: 24rpx; color:#BABABA; margin-top: 12rpx; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; .title-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .like-count { display: flex; flex-direction: row; align-items: center; .heart-icon { width: 24rpx; height: 24rpx; margin-right: 6rpx; } text { font-size: 22rpx; color: #FF5869; } } } } } } }