live.wxss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .blive-list {
  2. width: 100vw;
  3. box-sizing: border-box;
  4. }
  5. .list-box {
  6. display: flex;
  7. flex-wrap: wrap;
  8. justify-content: space-between;
  9. width: 662rpx;
  10. margin: 0 auto;
  11. }
  12. .live-item {
  13. width: 322rpx;
  14. height: 332rpx;
  15. border-radius: 10rpx;
  16. box-shadow: 0px 0px 16rpx 0px rgba(170, 170, 170, 0.3);
  17. margin-top: 20rpx;
  18. overflow: hidden;
  19. }
  20. .img {
  21. position: relative;
  22. width: 322rpx;
  23. height: 240rpx;
  24. overflow: hidden;
  25. }
  26. .img image {
  27. width: 100%;
  28. height: 100%;
  29. }
  30. .livestatus {
  31. display: flex;
  32. align-items: center;
  33. position: absolute;
  34. width: 96rpx;
  35. height: 32rpx;
  36. background: #F44093;
  37. border-radius: 4rpx;
  38. font-size: 20rpx;
  39. font-family: PingFangSC-Medium, PingFang SC;
  40. font-weight: 500;
  41. color: #FFFFFF;
  42. z-index: 999;
  43. bottom: 8rpx;
  44. left: 8rpx;
  45. padding-left: 4rpx;
  46. }
  47. .livestatus image {
  48. width: 22rpx;
  49. height: 20rpx;
  50. margin-left: 6rpx;
  51. }
  52. .explain {
  53. width: 100%;
  54. height: 34rpx;
  55. font-size: 24rpx;
  56. color: #333333;
  57. line-height: 34rpx;
  58. padding: 0 10rpx;
  59. box-sizing: border-box;
  60. }
  61. .brand-audience {
  62. width: 100%;
  63. display: flex;
  64. justify-content: space-between;
  65. height: 40rpx;
  66. line-height: 40rpx;
  67. padding: 0 10rpx;
  68. box-sizing: border-box;
  69. margin-top: 8rpx;
  70. }
  71. .brand {
  72. flex: 1;
  73. font-size: 28rpx;
  74. font-family: PingFangSC-Medium, PingFang SC;
  75. font-weight: 550;
  76. color: #000000;
  77. }
  78. .audience {
  79. flex-shrink: 0;
  80. font-size: 28rpx;
  81. font-family: PingFangSC-Regular, PingFang SC;
  82. color: #000000;
  83. }