videoDetail.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. body{
  2. background: #fff;
  3. }
  4. .videoList::-webkit-scrollbar-track
  5. {
  6. background-color: #F5F5F5;
  7. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.52);
  8. }
  9. /*定义滚动条高宽及背景*/
  10. .videoList::-webkit-scrollbar
  11. {
  12. width: 6px;
  13. background-color: rgba(0, 0, 0, 0.84);
  14. }
  15. /*定义滚动条*/
  16. .videoList::-webkit-scrollbar-thumb
  17. {
  18. background-color: #888585;
  19. border-radius: 10px;
  20. }
  21. .videoBody{
  22. width: 100%;
  23. background: #262626;
  24. overflow: hidden;
  25. }
  26. .videoBody .videoCenter{
  27. width: 1200px;
  28. background: #000;
  29. margin: 0 auto;
  30. overflow: hidden;
  31. }
  32. .videoBody .videoCenter .videoPlay{
  33. width: 900px;
  34. float: left;
  35. height: 560px;
  36. }
  37. .videoBody .videoCenter .videoPlay #videoDe{
  38. width:900px;
  39. max-height: 506px;
  40. }
  41. .videoList{
  42. padding: 20px;
  43. width: 300px;
  44. float: right;
  45. box-sizing: border-box;
  46. color: #fff;
  47. height: 558px;
  48. overflow-y: auto;
  49. }
  50. .videoList li img{
  51. width: 90px;
  52. height: 90px;
  53. display: inline-block;
  54. float: left;
  55. clear: both;
  56. overflow: hidden;
  57. }
  58. .videoList ul {
  59. margin-top: 20px;
  60. }
  61. .videoList li {
  62. cursor: pointer;
  63. overflow: hidden;
  64. clear: both;
  65. margin-bottom: 15px;
  66. }
  67. .videoList li.active .txt h4,.videoList li.active .txt p{
  68. color:#0289df;
  69. }
  70. .videoList li .txt{
  71. float: right;
  72. width: 140px;
  73. padding: 14px;
  74. color: #fff;
  75. padding-left: 0
  76. }
  77. .videoList h3{
  78. font-weight: normal;
  79. color: #fff;
  80. font-size: 24px;
  81. padding-bottom:10px;
  82. }
  83. .videoList li .txt h4{
  84. font-size: 16px;
  85. font-weight: normal;
  86. overflow: hidden;
  87. white-space:nowrap;
  88. text-overflow:ellipsis;
  89. -o-text-overflow:ellipsis;
  90. }
  91. .videoList li .txt p{
  92. font-size: 14px;
  93. margin-top: 10px;
  94. overflow: hidden;
  95. display: -webkit-box;
  96. text-overflow: ellipsis;
  97. -webkit-box-orient: vertical;
  98. -webkit-line-clamp:2;
  99. }
  100. .share{
  101. clear: both;
  102. height: 50px;
  103. line-height: 50px;
  104. padding-left: 28px;
  105. position: relative;
  106. z-index: 10;
  107. }
  108. .share div{
  109. float: left;
  110. }
  111. .share ul{
  112. position: absolute;
  113. left: 140px;
  114. height: 40px;
  115. width:140px;
  116. transition: all .2s ease-in-out;
  117. background: #fff;
  118. display: flex;
  119. display: -webkit-flex;
  120. justify-content: space-around;
  121. border-radius: 4px;
  122. padding: 0 15px;
  123. z-index: -1;
  124. opacity: 0;
  125. }
  126. .share ul::before{
  127. content: '';
  128. position: absolute;
  129. width: 10px;
  130. color: #fff;
  131. height: 10px;
  132. background: #fff;
  133. display: inline-block;
  134. transform: rotate(45deg);
  135. left: -5px;
  136. top: 18px;
  137. z-index:-1;
  138. }
  139. .share ul.active{
  140. left: 110px;
  141. opacity: 1;
  142. z-index: 30;
  143. transition: all .3s ease-in
  144. }
  145. .share ul.active::before{
  146. z-index: 30;
  147. }
  148. .share ul li{
  149. cursor: pointer;
  150. width: 30px;
  151. height: 30px;
  152. margin-top: 5px;
  153. }
  154. .share ul .qqHy{
  155. background: url(../../img/indedImg/qq_no.png)no-repeat;
  156. background-size:100% 100%;
  157. }
  158. .share ul .qqHy:hover{
  159. background: url(../../img/indedImg/qq_yes.png)no-repeat;
  160. background-size:100% 100%;
  161. }
  162. .share ul .qqKj:hover{
  163. background: url(../../img/indedImg/kj_yes.png)no-repeat;
  164. background-size:100% 100%;
  165. }
  166. .share ul .qqKj{
  167. background: url(../../img/indedImg/kj_no.png)no-repeat;
  168. background-size:100% 100%;
  169. }
  170. .share ul .xlWb:hover{
  171. background: url(../../img/indedImg/xl_yes.png)no-repeat;
  172. background-size:100% 100%;
  173. }
  174. .share ul .xlWb{
  175. background: url(../../img/indedImg/xl_no.png)no-repeat;
  176. background-size:100% 100%;
  177. }
  178. .pub_fix {
  179. z-index: 9999;
  180. }
  181. .share div>img{
  182. width: 24px;
  183. height: 24px;
  184. display: inline-block;
  185. margin-right: 10px;
  186. vertical-align: middle;
  187. margin-top: -3px;
  188. }
  189. .share span{
  190. display: inline-block;
  191. line-break: 50px;
  192. color: #999999;
  193. cursor: pointer;
  194. }
  195. .share span:hover{
  196. color: #fff;
  197. }
  198. .videoBody h2{
  199. width: 1200px;
  200. font-weight: normal;
  201. font-size:30px;
  202. color: #ffffff;
  203. margin: 20px auto 40px;
  204. }
  205. .summary{
  206. width: 1200px;
  207. margin: 58px auto 100px;
  208. }
  209. .summary h4{
  210. font-size: 30px;
  211. color: #333333;
  212. margin-bottom:28px;
  213. font-weight: normal
  214. }
  215. .summary p{
  216. font-size: 24px;
  217. color: #666666;
  218. text-align: justify;
  219. margin-bottom: 20px;
  220. }
  221. footer{
  222. display: block;
  223. }