.audio-video-content { display: flex; flex-wrap: wrap; padding: 20rpx; justify-content: space-between; .cover-item { width: 100%; height: 240rpx; display: flex; flex-direction: column-reverse; position: relative; background-repeat: no-repeat; background-size: 100% 100%; font-size: 24rpx; color: #fff; .identification{ display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right:0; width: 0; height: 0; border-top: 90rpx solid #376cbb; border-left: 90rpx solid transparent; } .identification-img { position: absolute; top: 15rpx; right:10rpx; width: 30rpx; height: 30rpx; } .identification-video { border-top: 90rpx solid #FFAB31 !important; } .img-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80rpx; height: 80rpx; image { width: 80rpx; height: 80rpx; } } .time { position: absolute; bottom: 8rpx; left: 15rpx; } } .audio-item { width: 49%; height: 420rpx; margin-bottom: 10rpx; border-radius: 8rpx; overflow: hidden; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05); } .video-item { width: 50%; height: 523rpx; margin-bottom: 10rpx; border-radius: 8rpx; overflow: hidden; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05); .cover-item { height: 340rpx; ::after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 60rpx solid #376cbb; border-right: 60rpx solid transparent; } } } video { width: 100%; height: 340rpx; } .title-share { padding: 0 20rpx 0 15rpx; .title { height: 90rpx; margin: 13rpx 0; } .share { display: flex; align-items: center; justify-content: space-between; .share-icon { display: flex; align-items: center; justify-content: center; width: 50rpx; height: 50rpx; } image { width: 44rpx; height: 44rpx; } .share-text { position: flex; align-items: center; padding: 0 10rpx; image { width: 20rpx; height: 20rpx; margin-right: 5rpx; } } } .share-collected { padding-left: 5rpx; justify-content: space-around; } } }