123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- .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;
- .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;
- }
- }
- 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;
- }
- }
- }
- }
- }
|