Startseite Erkunden Hilfe
Registrieren Anmelden
liyaoyu
/
pfhwyigou
Beobachten 1
Favorit hinzufügen 0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Branch: master
Branches Tags
pfhwyigou
/
frontend
/
web
/
video
/
css
/
videolist.css

videolist.css 15 KB
Permalink Verlauf Originalformat

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 
  1. /*顶部图*/
    2. 

  2. .p_across {width:100%;height:218px;margin-top:0px;}
    3. 

  3. .p_across >img {display:block;height:100%;width:100%;}
    4. 

  4. .pr {position:relative;}
    5. 

  5. .p_acroos_area {position:absolute;left:0;top:40px;color:#fff;}
    6. 

  6. .p_acroos_area .fb {font-weight:600;font-size:48px;margin-top:15px; margin-bottom: 0px;}
    7. 

  7. .p_acroos_area .fa {font-size:26px;font-weight:600;}
    8. 

  8. .seek_box {position:absolute;right:0;top:122px;}
    9. 

  9. .seek_box .seek_input{width:625px;}
    10. 

  10. .seek_box .seek_input .seekinput_search {width:100%;height:45px;position:relative;background:#FFF;}
    11. 

  11. .seek_box .seek_input .seekinput_search span{cursor:pointer;width:79px;height:45px;display:block;float:left;display:flex;align-items:center;justify-content:center;font-size:15px;color:#666;}
    12. 

  12. .seek_box .seek_input .seekinput_search span img{width:11px;margin-left:7px;}
    13. 

  13. .seek_box .seek_input .seekinput_search input[type="text"] {display:none;border:none;width:395px;height:45px;line-height:45px;font-size:15px;color:#999;padding-left:20px;}
    14. 

  14. .seek_box .seek_input .seekinput_search input[type="text"]::-webkit-input-placeholder {color: #ccc;}
    15. 

  15. .seek_box .seek_input .seekinput_search input[type="button"] {border:none;padding-left:33px;color:#22222E;width:120px;height:45px;font-size:20px;font-weight:bold;position:absolute;top:0;right:0;background:#DFAE5E url("/image/v2/index10.png") no-repeat 24px  14px/20px 20px;}
    16. 

  16. .seekinput_option{padding-bottom:19px;display:none;position:absolute;top:50px;left:0;width:100px;z-index:10;background:#FFF;border-radius:4px;box-shadow:0px 2px 5px 0px rgba(199, 199, 199, 0.36);}
    17. 

  17. .seekinput_option span{cursor:pointer;display:block;padding:0 14px;font-size: 15px;color:#666;margin-top:19px;}
    18. 

  18. .seekinput_option span.on{color:#DD2222;}
    19. 

  19. 

  20. .seek_box .seek_host {color:#fff;margin-top:8px;font-size:14px;}
    21. 

  21. .seek_box .seek_host a {color:#fff;font-size:14px;margin-left:5px;}
    22. 

  22. .seek_box .seek_host a:hover {color:#E03700;}
    23. 

  23. .s_on {color:#E03700 !important;}
    24. 

  24. 

  25. 

  26. /* 新添加模块2020-03-14 */
    27. 

  27. .livelist .live_nav{margin-top: 45px;}
    28. 

  28. .live_nav{display:flex;align-items:center;justify-content:center;}
    29. 

  29. .live_nav span{font-size:18px;color:#333;position:relative;cursor:pointer;}
    30. 

  30. .live_nav span + span{margin-left:49px;}
    31. 

  31. .live_nav span img{width:12px;margin-left:8px;margin-top:8px;}
    32. 

  32. .live_nav span em{position:relative;z-index:10;}
    33. 

  33. .live_nav span.on i{position:absolute;bottom:2px;left:0;width:100%;height:5px;border-radius:50px;background:#DD2222;display:block;}
    34. 

  34. .live_nav span.gdclick:before {content:"";display:block;width:100px;height:50px;position:absolute;top:0;left:0;}
    35. 

  35. 

  36. .liveBox{background: #FAFAFA; height: auto;width: 100%; padding: 73px 0 80px;}
    37. 

  37. .livelist_main{margin: 0 auto; margin-top: 30px;position: relative; width: 1200px; height: auto;}
    38. 

  38. .main_li{width: 1200px;margin: 0 auto;overflow: hidden;}
    39. 

  39. .main_li ul li{width: 280px; height: auto; background: #fff; border-radius: 4px; margin: 10px 0;
    40. 

  40.   display: -webkit-flex;display: flex;flex-wrap: nowrap;
    41. 

  41.   transition: all .5s;
    42. 

  42.   -moz-transition: all .5s;
    43. 

  43.   -webkit-transition: all .5s;
    44. 

  44.   -o-transition: all .5s;
    45. 

  45. }
    46. 

  46. .main_li ul li .pule_list{ width: 280px; height: auto;}
    47. 

  47. .main_li ul li .pule_list .top_tu{ width: 100%; height: 200px;position: relative; border-radius: 4px;overflow: hidden;}
    48. 

  48. .main_li ul li .pule_list .top_tu p.bg_img{width: 100%; height: 100%;background: #f7f7f7;}
    49. 

  49. .main_li ul li .pule_list .top_tu p.bg_img img{width: 100%; height: 100%;}
    50. 

  50. .main_li ul li .pule_list .top_tu .text-left{position: absolute;left: 12px;top: 12px; z-index: 2;}
    51. 

  51. .main_li ul li .pule_list .top_tu .text-left span{border:1px solid #DD2323; display: inline-block; height: 20px;line-height: 20px; font-size: 14px; color: #fff;background:#DD2323; padding: 0 13px;}
    52. 

  52. .main_li ul li .pule_list .top_tu .text-left em{display: inline-block; font-size: 14x; color: #fff; margin-left: 5px; height: 20px; line-height: 20px;}
    53. 

  53. .main_li ul li .pule_list .top_tu p.pl_img{width: 48px; height: 48px;position: absolute;left: 50%; top: 50%; margin-top: -24px;margin-left: -24px;z-index: 2;}
    54. 

  54. .main_li ul li .pule_list .top_tu p.pl_img img{width: 100%; height: 100%;}
    55. 

  55. .main_li ul li .pule_list.playback .top_tu .text-left span{background:rgba(0,0,0,0); border:1px solid #fff;}
    56. 

  56. .main_li ul li .pule_list.advance .top_tu .text-left span{background:rgba(0,0,0,0); border:none; padding: 0;}
    57. 

  57. .main_li ul li .pule_list.advance .top_tu .text-left i{display: inline-block;width: 6px; height: 6px; border-radius: 100%; background:#DD2323; position: relative;top: -2px; margin-right: 5px;}
    58. 

  58. .main_li ul li .pule_list.advance .top_tu p.pl_img{ width: 90px;height: 35px;border:1px solid #fff; background: rgba(0,0,0,0.4); border-radius: 18px; font-size: 18px; color: #fff; text-align: center;line-height: 35px; margin-top: -17.5px; margin-left: -45px;}
    59. 

  59. .main_li ul li .pule_list.advance .top_tu:hover p.pl_img{border:1px solid #DD2323; background: #DD2323; color: #fff;}
    60. 

  60. .main_li ul li .pule_list .bottom_text{padding: 15px 13px 13px;}
    61. 

  61. .main_li ul li .pule_list .bottom_text p.title_m{font-size: 18px; color: #333333; font-weight: bold;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    62. 

  62. .main_li ul li .pule_list .bottom_text p.text_m{ margin-top: 10px;}
    63. 

  63. .main_li ul li .pule_list .bottom_text p.text_m span{display: block;}
    64. 

  64. .main_li ul li .pule_list .bottom_text p.text_m span.fl i{display: inline-block; width: 11px; height: 13px; position: relative; top: 1px;}
    65. 

  65. .main_li ul li .pule_list .bottom_text p.text_m span.fr i{display: inline-block; width: 14px; height: 11px; position: relative; top: 2px;}
    66. 

  66. .main_li ul li .pule_list .bottom_text p.text_m span i img{width: 100%; height: 100%;}
    67. 

  67. .main_li ul li .pule_list .bottom_text p.text_m span em{display: inline-block; font-size: 14px; color: #999; margin-left: 3px;}
    68. 

  68. .livelist_main .swiper-button-prev{position: absolute; left: -60px; top: 50%; margin-top: -20px; width: 30px; height: 40px; background: url('/video/image/xm_tb19.png') #fff no-repeat 7px center;}
    69. 

  69. .livelist_main .swiper-button-prev:hover{ width: 30px; height: 40px; background: url('/video/image/xm_tb19_1.png') #fff no-repeat 7.5px center;}
    70. 

  70. .livelist_main .swiper-button-next{position: absolute; top: 50%; margin-top: -20px; right: -60px; width: 30px; height: 40px; background: url('/video/image/xm_tb20.png') #fff no-repeat 7px center;}
    71. 

  71. .livelist_main .swiper-button-next:hover{ width: 30px; height: 40px; background: url('/video/image/xm_tb20_1.png') #fff no-repeat 7.5px center;}
    72. 

  72. .main_li li:hover{   
    73. 

  73. transform: scale(1.03);  
    74. 

  74. -webkit-transform: scale(1.03);  
    75. 

  75. -moz-transform: scale(1.03);
    76. 

  76. -o-transform: scale(1.03); 
    77. 

  77. }
    78. 

  78. .main_li li:hover .pule_list .bottom_text p.title_m{color: #DD2323;}
    79. 

  79. 

  80. 

  81. /* 报名 */
    82. 

  82. .liveBm{ display: none; width: 368px; height: 306px;position: fixed;left: 50%;top: 50%;margin-left: -183px; margin-top: -153px; background: url('/video/image/xm_tb22.png') no-repeat; background-size:100% 100%; z-index: 101;}
    83. 

  83. .liveBm_bg{display: none; width: 100%;height: 100%;position: fixed;left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.5);}
    84. 

  84. .liveBm_main{width: 100%; height: 100%;position: relative;}
    85. 

  85. .liveBm_gb{position: absolute;right: 18px;top:10px; z-index: 2;width: 23px;height: 23px;}
    86. 

  86. .liveBm_gb img{width: 100%;height: 100%;}
    87. 

  87. .liveBm_box{width: 236px; margin: 0 auto;padding-top: 203px;position: relative;left: -21px;}
    88. 

  88. .liveBm_box p.in{width: 100%; height: 32px;background: #fff; border-radius: 4px;}
    89. 

  89. .liveBm_box p.in i{float: left; display: inline-block;width: 10px; height: 15px; margin-left: 10px;position: relative;top: 9px;}
    90. 

  90. .liveBm_box p.in i img{width: 100%;height: 100%;}
    91. 

  91. .liveBm_box p.in em{display: inline-block;height: 15px;width: 1px; background-color:#CCCCCC;float: left;margin: 0 9px 0 7px;position: relative; top: 9px;}
    92. 

  92. .liveBm_box p.in input{display: inline-block;float: left; width: 190px; height: 30px; border:none; position: relative; top: 1px;}
    93. 

  93. .liveBm_box a{display: block;height: 48px;width: 213px; margin: 0 auto;margin-top: 85px;}
    94. 

  94. .liveBm_box a img{width: 100%;height: 100%;}
    95. 

  95. 

  96. 

  97. 

  98. 

  99. /*标题*/
    100. 

  100. .m_headtitle{width:1200px;margin:auto;display:flex;align-items:center;justify-content:center;}
    101. 

  101. .m_headtitle_text{text-align:center;}
    102. 

  102. .m_headtitle h1{font-size:36px;color:#333;font-weight:500;}
    103. 

  103. .m_headtitle span{display:block;margin-top:11px;font-size:14px;color:#999;}
    104. 

  104. 

  105. /*视频看房*/
    106. 

  106. .m_videolist_box{width:1200px;margin:auto;margin-top:45px;}
    107. 

  107. .m_videolist_dh{display:flex;align-items:center;justify-content:center;}
    108. 

  108. .m_videolist_dh span{font-size:18px;color:#333;position:relative;cursor:pointer;}
    109. 

  109. .m_videolist_dh span + span{margin-left:49px;}
    110. 

  110. .m_videolist_dh span img{width:12px;margin-left:8px;margin-top:8px;}
    111. 

  111. .m_videolist_dh span em{position:relative;z-index:10;}
    112. 

  112. .m_videolist_dh span.on i{position:absolute;bottom:2px;left:0;width:100%;height:5px;border-radius:50px;background:#DFA24E;display:block;}
    113. 

  113. .m_videolist_dh span.gdclick:before {content:"";display:block;width:100px;height:50px;position:absolute;top:0;left:0;}
    114. 

  114. 

  115. .videolist_option{display:none;padding-bottom:19px;position:absolute;top:33px;left:-3px;width:105px;z-index:10;background:#FFF;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(199, 199, 199, 0.36)}
    116. 

  116. .videolist_option p{cursor:pointer;padding:0 14px;font-size: 15px;color:#666;margin-top:19px;}
    117. 

  117. .videolist_option p.on{color:#DD2222;}
    118. 

  118. 

  119. 

  120. 

  121. 

  122. .m_videolist{margin-top:39px;
    123. 

  123.  }
    124. 

  124.  .m_videolist.on{max-height:732px;overflow:auto;}
    125. 

  125.  .m_videolist.on::-webkit-scrollbar {
    126. 

  126.   /*滚动条整体样式*/
    127. 

  127.   width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
    128. 

  128.   height: 1px;
    129. 

  129.   }
    130. 

  130.  .m_videolist.on::-webkit-scrollbar-thumb {
    131. 

  131.   /*滚动条里面小方块*/
    132. 

  132.   border-radius: 10px;
    133. 

  133.   /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
    134. 

  134.   background   : #535353;
    135. 

  135.   }
    136. 

  136.  .m_videolist.on::-webkit-scrollbar-track {
    137. 

  137.   /*滚动条里面轨道*/
    138. 

  138.   /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
    139. 

  139.   border-radius: 10px;
    140. 

  140.   background   : #DDD;
    141. 

  141.   }
    142. 

  142. 

  143. .m_videolist ul li{width:370px;border-radius:4px;overflow:hidden;float:left;margin-right:30px;margin-bottom:30px;}
    144. 

  144. .m_videolist ul li:nth-child(3n){margin-right:0;}
    145. 

  145. .m_videolist ul li .m_videolist_img{width:376px;height:240px;position:relative;overflow:hidden;}
    146. 

  146. .m_videolist ul li .m_videolist_img .img{width:100%;height:100%;
    147. 

  147. transition: all .5s;
    148. 

  148. -moz-transition: all .5s;
    149. 

  149. -webkit-transition: all .5s;
    150. 

  150. -o-transition: all .5s;
    151. 

  151. }
    152. 

  152. .m_videolist ul li .m_videolist_img .type{position:absolute;top:16px;left:0;font-size:14px;color:#FFF;background:rgba(0,0,0,0.5);padding:9px 15px;}
    153. 

  153. .m_videolist ul li .m_videolist_img .imgtb{position:absolute;top:50%;left:50%;width:58px;height:58px;margin-top:-29px;margin-left:-29px;}
    154. 

  154. .m_videolist ul li .m_videolist_img .text_box{position:absolute;bottom:0;left:0;width:100%;padding:30px 0 10px 0;
    155. 

  155. background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.66))); 
    156. 

  156.            -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.66))); 
    157. 

  157.            -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.66))); 
    158. 

  158. }
    159. 

  159. .m_videolist ul li .m_videolist_img .text{padding:0 15px;position:relative;}
    160. 

  160. .m_videolist ul li .m_videolist_img .text .Price{font-size:24px;color:#FFF;font-weight:600;}
    161. 

  161. .m_videolist ul li .m_videolist_img .text .sj{font-size:12px;color:#ccc;margin-top:4px;}
    162. 

  162. .m_videolist ul li .m_videolist_img .text .region{position:absolute;bottom:0;right:14px;font-size:14px;color:#CCC;}
    163. 

  163. .m_videolist ul li .m_videolist_img .text .region img{width:10px;margin-top:3px;margin-right:5px;}
    164. 

  164. .m_videolist_text{border:1px solid #EEE;padding:20px;}
    165. 

  165. .m_videolist_text em{font-size:17px;color:#333;font-weight:600;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
    166. 

  166. .m_videolist_text p{margin-top:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
    167. 

  167. .m_videolist_text p span{font-size:14px;color:#999;}
    168. 

  168. .m_videolist_text p i{font-size:12px;color:#CCC;margin:0 3px;position:relative;top:-1px;}
    169. 

  169. 

  170. .m_videolist ul li:hover .m_videolist_img .img{  
    171. 

  171. transform: scale(1.1);  
    172. 

  172. -webkit-transform: scale(1.1);  
    173. 

  173. -moz-transform: scale(1.1);
    174. 

  174. -o-transform: scale(1.1); 
    175. 

  175. }
    176. 

  176. .m_videolist ul li:hover .m_videolist_text em{color:#DFAE5E;}
    177. 

  177. 

  178. 

  179. /*玩转海外*/
    180. 

  180. .m_overseas_box{margin-top:50px;padding:80px 0 30px 0;background:#F8F8F8;}
    181. 

  181. .m_overseas{width:1200px;margin:auto;margin-top:45px;}
    182. 

  182. 

  183. .m_overseasdh{display:flex;align-items:center;justify-content:center;}
    184. 

  184. .m_overseasdh span{font-size:18px;color:#333;position:relative;}
    185. 

  185. .m_overseasdh span + span{margin-left:49px;}
    186. 

  186. .m_overseasdh span img{width:12px;margin-left:8px;margin-top:8px;}
    187. 

  187. .m_overseasdh span em{position:relative;z-index:10;}
    188. 

  188. .m_overseasdh span.on i{position:absolute;bottom:2px;left:0;width:100%;height:5px;border-radius:50px;background:#DFA24E;display:block;}
    189. 

  189. .m_overseasdh span.overseasdgj:before {content:"";display:block;width:100px;height:50px;position:absolute;top:0;left:0;}
    190. 

  190. 

  191. 

  192. .overseasdh_option{display:none;padding-bottom:19px;position:absolute;top:33px;left:-3px;width:105px;z-index:10;background:#FFF;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(199, 199, 199, 0.36)}
    193. 

  193. .overseasdh_option p{cursor:pointer;padding:0 14px;font-size: 15px;color:#666;margin-top:19px;}
    194. 

  194. .overseasdh_option p.on{color:#DD2222;}
    195. 

  195. 

  196. 

  197. 

  198. 

  199. 

  200. 

  201. .m_overseas ul{margin-top:39px;}
    202. 

  202. .m_overseas ul li{width:286px;height:208px;position:relative;float:left;margin-right:15px;border-radius:4px;overflow:hidden;}
    203. 

  203. .m_overseas ul li img{width:100%;height:100%;    transition: all .5s;
    204. 

  204.                                                     -moz-transition: all .5s;
    205. 

  205.                                                     -webkit-transition: all .5s;
    206. 

  206.                                                     -o-transition: all .5s;}  
    207. 

  207. 

  208. .m_overseas ul li:hover img{   transform: scale(1.1);  -webkit-transform: scale(1.1);  
    209. 

  209.                                                      -moz-transform: scale(1.1);
    210. 

  210.                                                       -o-transform: scale(1.1);  }
    211. 

  211. 

  212. 

  213. .m_overseas ul li p{position:absolute;bottom:0;left:0;width:100%;padding:39px 0 10px 0;
    214. 

  214. background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); 
    215. 

  215.            -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); 
    216. 

  216.            -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); 
    217. 

  217. }
    218. 

  218. .m_overseas ul li span{display:block;padding:0 12px;font-size:14px;color:#FFF;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
    219. 

  219. .m_overseas ul li:nth-child(1){width:567px;height:430px;position:relative;float:left;}
    220. 

  220. .m_overseas ul li:nth-child(1) p{padding:39px 0 14px 0;}
    221. 

  221. .m_overseas ul li:nth-child(1) p span{font-size:20px;}
    222. 

  222. .m_overseas ul li:nth-child(3){margin-right:0;}
    223. 

  223. .m_overseas ul li:nth-child(4){margin-top:15px;}
    224. 

  224. .m_overseas ul li:nth-child(5){margin-right:0;margin-top:15px;}
    225. 

  225. 

  226. 

  227.   /*免责声明*/
    228. 

  228. .y_footmzsm{display:none;}
    229. 

  229. .m_footmzsm{width: 1200px;margin: 0 auto;}
    230. 

  230. .m_footmzsm p{font-size: 14px;color: #999;line-height: 24px;margin-top: 60px;}
    231.