/* pages/user/myworks/myworks.wxss */ page{ width: 100%; background: #F0F1F5; } .user-works{ width: 750rpx; box-sizing: border-box; padding: 0 15rpx; background: #F0F1F5; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .follow-details{ width: 100%; height: 382rpx; border-radius: 20rpx; background: #FFFFFF; margin-top: 30rpx; display: flex; position: relative; } .follow-info{ width: 100%; display: flex; } .follow { display: flex; align-items: center; justify-content: center; width:154rpx; height:58rpx; border: 2rpx solid #ff0000; font-size: 28rpx; border-radius: 30rpx; /* text-align: center; */ /* line-height: 60rpx; */ color: #ff0000; position:absolute; top: 36rpx; right: 32rpx; } .follow image { width: 36rpx; height: 32rpx; margin-right: 15rpx; } .avatar-bg{ margin-left: 20rpx; margin-top: 50rpx; width: 152rpx; height: 152rpx; background: #61CA54; border-radius: 50%; position: relative; } .avatar-box{ width: 138rpx; height: 138rpx; border-radius: 50%; z-index: 300; /* position: absolute; top: 7rpx; left: 7rpx; */ margin: 8rpx auto; } .avatar-image{ width: 100%; height: 100%; border-radius: 50%; } .avatar-nickname{ width: 500rpx; display: flex; } .avatar-address{ width: 500rpx; } .flowers-box{ width: 26rpx; height: 26rpx; margin-left: 10rpx; } .flowers-box>image{ width: 100%; height: 100%; } .occupation-title{ position: absolute; left: 48rpx; bottom: -10rpx; width: 68rpx; height: 26rpx; background: #61CA54; border-radius: 180rpx; z-index: 600; /* line-height: 26rpx; */ text-align: center; color: #FFFFFF; font-size: 18rpx; } .avatar-msg{ margin-left: 40rpx; margin-top: 50rpx; width: 500rpx; height: 150rpx; color: #444444; font-size: 32rpx; } .gender-size{ margin-left: 10rpx; font-size: 28rpx; align-self: center; } .set-msg{ width: 100%; height: 248rpx; display: flex; align-items: flex-start; justify-content: center; } .avatar-nickname,.avatar-birthday,.avatar-address{ line-height: 50rpx; color: #444; font-size: 32rpx; } .mine-category{ box-sizing: border-box; width: 674rpx; padding-top: 30rpx; border-top: 4rpx solid #F0F1F5; font-size: 28rpx; font-weight: 600; z-index: 900; display: flex; position: absolute; top: 246rpx; left: 23rpx; } .border-right { display: flex; justify-content: center; align-items: center; font-size: 24rpx; font-weight: lighter; height: 22rpx; border-right: 2rpx solid #D6D6D6; } .flower-count .border-right { border: none; } .play-count, .point-count, .follow-count, .flower-count { width: 25%; text-align: center; } .play-img { width: 28rpx; height: 26rpx; margin-right: 6rpx; margin-bottom: 6rpx; } .red-heart { width: 26rpx; height: 22rpx; margin-right: 6rpx; margin-bottom: 6rpx; } .point-img { width: 28rpx; height: 24rpx; margin-right: 6rpx; margin-bottom: 6rpx; } image { width: 100%; height: 100%; } .color { text-align: right; padding-right: 44rpx; } .play-count { color: #92D626; } .point-count { color: #FFA700; } .follow-count { color: #FF0000; } .flower-count { color: #EE5750; } .works-article{ margin-top: 12rpx; box-sizing: border-box; width: 100%; padding: 0 27rpx; background: #FFFFFF; border-radius: 12rpx; } .user-info{ width: 100%; height: 120rpx; display: flex; align-items: center; font-size:32rpx; } .user-img{ width: 96rpx; height: 96rpx; border-radius: 50%; margin-right:20rpx; } .user-img>image{ width: 100%; height: 100%; border-radius: 50%; } .user-details{ /* margin-left: 26rpx; */ display: flex; flex-direction: column; } .user-name{ width: 552rpx; display: flex; justify-content: space-between; align-items: flex-end; color: #444; } .left-detail{ width: 500rpx; font-size: 32rpx; } .right-detail{ width: 90rpx; display: flex; font-size: 22rpx; flex-direction:row-reverse; margin-right: 6rpx; } .user-time{ 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-title{ margin-top: 12rpx; margin-bottom: 30rpx; width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 32rpx; font-weight: 500; color: #414141; } .content-grage{ font-size: 24rpx; margin-right:6rpx; } .user-info image{ width: 100%; height: 100%; } .plays-img{ width: 20rpx; height: 20rpx; margin-right:4rpx; } .likes-img{ width: 26rpx; height: 24rpx; margin-right:4rpx; } .likes-count{ color: #FD8B43; } .plays-count{ color: #5E5E5E; }