audioVideo.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .audio-video-content {
  2. display: flex;
  3. flex-wrap: wrap;
  4. padding: 20rpx;
  5. justify-content: space-between;
  6. .cover-item {
  7. width: 100%;
  8. height: 240rpx;
  9. display: flex;
  10. flex-direction: column-reverse;
  11. position: relative;
  12. background-repeat: no-repeat;
  13. background-size: 100% 100%;
  14. font-size: 24rpx;
  15. color: #fff;
  16. .img-bg {
  17. position: absolute;
  18. top: 50%;
  19. left: 50%;
  20. transform: translate(-50%, -50%);
  21. width: 80rpx;
  22. height: 80rpx;
  23. image {
  24. width: 80rpx;
  25. height: 80rpx;
  26. }
  27. }
  28. .time {
  29. position: absolute;
  30. bottom: 8rpx;
  31. left: 15rpx;
  32. }
  33. }
  34. .audio-item {
  35. width: 49%;
  36. height: 420rpx;
  37. margin-bottom: 10rpx;
  38. border-radius: 8rpx;
  39. overflow: hidden;
  40. box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
  41. }
  42. .video-item {
  43. width: 50%;
  44. height: 523rpx;
  45. margin-bottom: 10rpx;
  46. border-radius: 8rpx;
  47. overflow: hidden;
  48. box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
  49. .cover-item {
  50. height: 340rpx;
  51. }
  52. }
  53. video {
  54. width: 100%;
  55. height: 340rpx;
  56. }
  57. .title-share {
  58. padding: 0 20rpx 0 15rpx;
  59. .title {
  60. height: 90rpx;
  61. margin: 13rpx 0;
  62. }
  63. .share {
  64. display: flex;
  65. align-items: center;
  66. justify-content: space-between;
  67. .share-icon {
  68. display: flex;
  69. align-items: center;
  70. justify-content: center;
  71. width: 50rpx;
  72. height: 50rpx;
  73. }
  74. image {
  75. width: 44rpx;
  76. height: 44rpx;
  77. }
  78. .share-text {
  79. position: flex;
  80. align-items: center;
  81. padding: 0 10rpx;
  82. image {
  83. width: 20rpx;
  84. height: 20rpx;
  85. margin-right: 5rpx;
  86. }
  87. }
  88. }
  89. }
  90. }