home.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. .m_top {height:50px;background:#fff;position:fixed;top:0;left:0;width:100%;z-index:9999;box-shadow:0px 0px 2px 0px rgba(191, 190, 190, 0.2);display:flex;align-items:center;}
  2. .header_back {position:absolute;top: 13px;width: 18px;right: 15px;}
  3. .header_menu{position:relative;margin-left:4%;}
  4. .header_menu a{ width:11px;display:block;float: left;position:relative;top:1px;}
  5. .header_menu img {display:inline-block;width:100%;height:auto;}
  6. .y_input {width:55%;border-radius:100px;background:#F7F5F6;float: left;margin-left:4%;}
  7. .y_input input {display:inline-block;width:81%;height:30px;line-height:33px;background:#F7F5F6;border:none;border-radius:50px;font-size:0.7rem;color:#666;padding-left:5px;}
  8. .y_input input::-ms-input-placeholder{color:#ccc}
  9. .y_input input::-webkit-input-placeholder{ color:#ccc}
  10. .y_input input::-moz-placeholder{color:#ccc}
  11. .y_input i{display:inline-block;width:12px;margin-left:15px;}
  12. .xm_toplogo{width:70px;float: left;margin-left:10px;}
  13. .xm_toplogo img{width:100%;height:100%;}
  14. /*头部*/
  15. .m_videohead_box{padding:0 0px;}
  16. .m_videohead{border-bottom:1px solid #EEE;}
  17. .m_videohead_box a{display:block;width:25%;float:left;text-align:center;height:40px;line-height:40px;}
  18. .m_videohead_box span{width:60%;display:inline-block;position:relative;font-size:0.875rem;color:#999;}
  19. .m_videohead_box span:before {content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:rgba(0,0,0,0);}
  20. .m_videohead_box a.on span:before{background:#E03700;}
  21. .m_videohead_box a.on span{font-weight:600;color:#333;}
  22. /*视频列表*/
  23. .m_video_box{margin-top:20px;padding:0 15px;}
  24. .m_video{}
  25. .m_video li{border-bottom:1px solid #EEE;padding-bottom:16px;margin-bottom:20px;}
  26. .m_video li:last-child{margin-bottom:0;}
  27. .m_video li a{display:block;}
  28. .m_video li .img{width:100%;height:175px;border-radius:5px;position:relative;overflow:hidden;}
  29. .m_video li .img .imgbj{width:100%;height:100%;}
  30. .m_video li .img .imgtb{position:absolute;top:50%;left:50%;width:55px;height:55px;margin-top:-27.5px;margin-left:-27.5px;}
  31. .m_video li .img i{position:absolute;top:10px;right:10px;font-size:0.75rem;color:#F8F8F8;background:rgba(0, 0, 0, 0.3);border:1px solid rgba(238, 238, 238, 0.5);border-radius:50px;padding:7px 9px 5px 9px;}
  32. .m_video li .img .imgtext{position:absolute;bottom:0;left:0;width:100%;padding:39px 0 10px 0;
  33. background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));
  34. -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));
  35. -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));
  36. }
  37. .m_video li .img .imgtext p{padding:0 10px;}
  38. .m_video li .img .imgtext p span{font-size:0.75rem;color:#F8F8F8;float:left;}
  39. .m_video li .img .imgtext p span:nth-child(2){float:right;}
  40. .m_video li .img .imgtext p span img{width:12px;margin-top:-3px;margin-right:2px;}
  41. .m_video li .text{font-size:1.0625rem;color:#333;font-weight:600;margin-top:12px;line-height:25px;}
  42. .dropload-up,.dropload-down{
  43. position: relative;
  44. height: 0;
  45. overflow: hidden;
  46. font-size: 12px;
  47. /* 开启硬件加速 */
  48. -webkit-transform:translateZ(0);
  49. transform:translateZ(0);
  50. }
  51. .dropload-down{
  52. height: 75px;
  53. }
  54. .dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
  55. height: 50px;
  56. line-height: 50px;
  57. text-align: center;
  58. }
  59. .dropload-load .loading{
  60. display: inline-block;
  61. height: 15px;
  62. width: 15px;
  63. border-radius: 100%;
  64. margin: 6px;
  65. border: 2px solid #666;
  66. border-bottom-color: transparent;
  67. vertical-align: middle;
  68. -webkit-animation: rotate 0.75s linear infinite;
  69. animation: rotate 0.75s linear infinite;
  70. }
  71. @-webkit-keyframes rotate {
  72. 0% {
  73. -webkit-transform: rotate(0deg);
  74. }
  75. 50% {
  76. -webkit-transform: rotate(180deg);
  77. }
  78. 100% {
  79. -webkit-transform: rotate(360deg);
  80. }
  81. }
  82. @keyframes rotate {
  83. 0% {
  84. transform: rotate(0deg);
  85. }
  86. 50% {
  87. transform: rotate(180deg);
  88. }
  89. 100% {
  90. transform: rotate(360deg);
  91. }
  92. }