.my-collection{ width: 750rpx; background: #F0F1F5; } .user-info{ width: 100%; height: 132rpx; display: flex; justify-content: flex-start; align-items: center; } .avatar-image{ width: 100%; height: 100%; border-radius: 50%; } .avatar-box{ width: 96rpx; height: 96rpx; border-radius: 50%; } .avatar-name{ width: 420rpx; height: 80rpx; font-size: 32rpx; color: #444444; margin-left: 14rpx; margin-bottom: 16rpx; } .avatar-follow{ margin-left:30rpx; display:flex; flex-direction:column; align-items:center; width:100rpx; } .avatar-img{ width: 46rpx; height: 40rpx; } .avatar-images{ width: 100%; height: 100%; } .collection-article{ margin-bottom: 4rpx; box-sizing: border-box; width: 100%; padding: 0 23rpx; background: #FFFFFF; } .collection-top{ width: 100%; height: 120rpx; display: flex; align-items: center; } .top-img{ margin-right: 14rpx; width: 96rpx; height: 96rpx; border-radius: 50%; } .top-img>image{ width: 100%; height: 100%; border-radius: 50%; } .collection-info{ width: 580rpx; font-size: 32rpx; margin-bottom: 10rpx; } .collection-info>.title{ color: #000000; font-weight: 500; } .collection-info>.date{ color: #686868; font-weight: lighter; } .video-preview{ /* margin-top: 10rpx; */ width: 100%; height: 290rpx; border-radius: 20rpx; } .video-preview>image{ width: 100%; height: 100%; border-radius: 20rpx; } .content-detail{ width: 100%; height: 60rpx; display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; } .left{ width: 200rpx; } .right{ height: 100%; display: flex; justify-content: space-between; align-items: center; } .right image{ width: 100%; height: 100%; } .play-img{ width: 20rpx; height: 22rpx; } .point-img{ width: 26rpx; height: 24rpx; } .count-add{ width: 36rpx; text-align: center; } .right-detail,.right-details{ display: flex; justify-content: flex-end; align-items: flex-start; } .right-details{ margin-left: 20rpx; } .content-title{ margin-top: 10rpx; width: 100%; height: 55rpx; font-size: 32rpx; font-weight: 500; color: #414141; }