labelVideoMore.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /* 返回 */
  2. .nav {
  3. background-color: #101010;
  4. z-index: 3;
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. width: 100%;
  9. /* height: 10%; */
  10. height: 0.88rem;
  11. display: flex;
  12. }
  13. .back {
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. z-index: 3;
  18. width: 10%;
  19. height: 0.88rem;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. }
  24. .back img {
  25. width: 0.18rem;
  26. }
  27. /* 页面标题 */
  28. .pageTitle {
  29. height: 0.88rem;
  30. width: 100%;
  31. display: flex;
  32. justify-content: center;
  33. align-items: center;
  34. font-size: 0.4rem;
  35. }
  36. /* 主要展示区 */
  37. /* 视频 */
  38. .video {
  39. margin-top: 1rem;
  40. padding: 0.3rem 0 0.12rem;
  41. display: flex;
  42. flex-direction: column;
  43. /* justify-content: center; */
  44. align-items: center;
  45. min-height: 40vh;
  46. }
  47. /* 单条视频 */
  48. .videoContent {
  49. background-color: #1c1a1b;
  50. width: 100%;
  51. min-height: 4rem;
  52. border-radius: 5px;
  53. margin-bottom: 0.4rem;
  54. }
  55. .loading {
  56. display: flex;
  57. flex-direction: column;
  58. align-items: center;
  59. justify-content: center;
  60. }
  61. .loadingImg {
  62. width: 80px;
  63. height: 76px;
  64. }
  65. .loadingText {
  66. text-align: center;
  67. margin-top: 4px;
  68. color: #8e8d8d;
  69. font-size: 12px;
  70. }
  71. .videoPhoto, .bannerImg {
  72. position: relative;
  73. width: 100%;
  74. height: 3.6rem;
  75. background-repeat: no-repeat;
  76. background-position: 50% 50%;
  77. background-size: cover;
  78. border-top-left-radius:4px;
  79. border-top-right-radius:4px;
  80. }
  81. .bannerImg {
  82. height: 4rem;
  83. }
  84. .banner {
  85. background-color: #1C1A1B;
  86. width: 100%;
  87. border-radius: .1rem;
  88. margin-bottom: .4rem;
  89. }
  90. .videoTitle {
  91. margin: .1rem .3rem;
  92. font-size: .28rem;
  93. /* 两行展示 */
  94. overflow: hidden;
  95. display: -webkit-box;
  96. -webkit-line-clamp: 2;
  97. -webkit-box-orient: vertical;
  98. word-break: break-all;
  99. }
  100. .videoTime {
  101. position: absolute;
  102. bottom: 0.1rem;
  103. right: 0.1rem;
  104. width: 1.6rem;
  105. background-color: rgba(0, 0, 0, 0.6);
  106. border-radius: 0.1rem;
  107. height: 0.4rem;
  108. line-height: 0.4rem;
  109. text-align: center;
  110. }
  111. .page {
  112. width: 100%;
  113. }
  114. .info {
  115. width: 200px;
  116. height: 34px;
  117. line-height: 34px;
  118. }
  119. .fl {
  120. float: left;
  121. }
  122. .bottomLoadContent {
  123. display: none;
  124. }
  125. .quanWrap {
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. }
  130. .quanText {
  131. font-size: 0.3rem;
  132. color: #fff;
  133. }
  134. .quanquan {
  135. margin-left: 20px;
  136. width: 20px;
  137. height: 20px;
  138. }
  139. .box {
  140. width: 100%;
  141. /* padding-bottom: 1.5rem; */
  142. height: 80px;
  143. display: none;
  144. }