.my-read{ width: 100%; /* height: 50rpx; */ /* background: #fff; */ background: rgba(240, 241, 245, 1); min-height: 100%; padding-bottom:20rpx; padding-top:22rpx; } .worksCard { position: relative; overflow: hidden; width: 720rpx; height: 476rpx; background: #fff; /* padding: 26rpx; */ border-radius: 12rpx; /* margin: 0 0 18rpx 16rpx; */ margin: 0 auto 20rpx; /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */ } .worksCard .wareCardImg { display: block; width: 662rpx; height: 272rpx; margin: 22rpx auto 0; border-radius: 20rpx; } .worksCard .titleSummary { display: flex; justify-content: space-between; margin-top: 12rpx; } .worksCard .wareCardTitle { /* margin: 0 auto; */ width: 80%; height: 46rpx; display: block; /* text-align: left; */ color: #444; font-size: 32rpx; /* letter-spacing: 4rpx; */ margin-left: 28rpx; font-family: MicrosoftYaHei; } .worksCard .topData { height: 92rpx; margin-top: 22rpx; display: flex; flex-direction: row; /* justify-content: space-between; */ align-items: center; } .worksLeft { display: flex; flex-direction: row; flex: 1; margin-left: 10rpx; } .worksLeft .worksInfo .authorName { color: #444444; font-size: 32rpx; margin-top: 8rpx; } .worksLeft .worksInfo .time { color: #686868; font-size: 28rpx; } .worksCard .topData .wareCardPlays { width: 100rpx; /* margin-left: 270rpx; */ display: flex; flex-direction: row-reverse; align-items: center; padding-right: 35rpx; } .worksCard .topData .authorAvatar { width: 92rpx; height: 92rpx; margin: 0 22rpx 0 22rpx; display: block; border: 4rpx solid #61CA54; border-radius: 50%; } .worksCard .topData .profession { width: 68rpx; height: 24rpx; background: rgba(97, 202, 84, 1); border-radius: 166rpx; border: 2rpx solid rgba(255, 255, 255, 1); font-size: 16rpx; /* font-family: PingFangSC-Medium; */ /* font-weight: 500; */ color: rgba(255, 255, 255, 1); line-height: 24rpx; text-align: center; position: absolute; bottom: -7rpx; left: 37rpx; } .topData .numberInfo { display: flex; flex-direction: column; } .worksCard .wareCardTip { width: 178rpx; height: 40rpx; display: block; text-align: left; color: #444; font-size: 24rpx; line-height: 44rpx; } .worksCard .wareCardPlays .wareCardPlaysImg { width: 26rpx; height: 26rpx; margin-right: 6rpx; float: right; } .worksCard .wareCardPlays text { margin-left: 4rpx; color: #5e5e5e; font-size: 22rpx; text-align: right; /* width:57%; */ float: right; } .worksCard .wareCardLikes { width: 100rpx; margin-right: 18rpx; display: flex; flex-direction: row-reverse; align-items: center; } .worksCard .wareCardLikes .wareCardLikesImg { width: 26rpx; height: 24rpx; margin-right: 6rpx; } .worksCard .wareCardLikes text { margin-left: 4rpx; color: #FF9800; font-size: 24rpx; }