news.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. .news_wrap .nav-tabs {
  2. /* border-bottom: 1px solid transparent; */
  3. border-bottom: 2px solid #F4F4F4;
  4. padding-bottom: 30px;
  5. }
  6. .news_wrap .nav-tabs>li.active>a,
  7. .news_wrap .nav-tabs>li.active>a:focus,
  8. .news_wrap .nav-tabs>li.active>a:hover {
  9. color: #555;
  10. cursor: default;
  11. background-color: #fff;
  12. border: 0px solid #ddd;
  13. border-bottom-color: transparent;
  14. position: relative;
  15. }
  16. .news_wrap .nav>li>a:focus,
  17. .news_wrap .nav>li>a:hover {}
  18. .news_wrap .nav-tabs>li>a {
  19. font-size: 20px;
  20. font-family: Source Han Sans CN;
  21. font-weight: 400;
  22. color: #666666;
  23. line-height: 25px;
  24. transition: all 0.3s linear;
  25. }
  26. .news_wrap .nav-tabs>li>a {
  27. border: 0;
  28. }
  29. .news_wrap .nav-tabs>li.active>a:focus,
  30. .news_wrap .nav-tabs>li.active>a {
  31. font-size: 32px;
  32. font-family: Source Han Sans CN;
  33. font-weight: 400;
  34. color: #333333;
  35. }
  36. .news_wrap .nav-tabs>li>a:hover {
  37. border-color: transparent transparent transparent;
  38. }
  39. .news_wrap .nav-tabs>li.active>a::after {
  40. content: '';
  41. position: absolute;
  42. bottom: -30px;
  43. left: 50%;
  44. transform: translateX(-50%);
  45. transition: all 0.3s linear;
  46. width: 34px;
  47. height: 3px;
  48. background: #0052D9;
  49. border-radius: 1px;
  50. }
  51. .news_wrap .nav>li>a::after {
  52. content: '';
  53. position: absolute;
  54. bottom: -2px;
  55. left: 0;
  56. transition: all 0.3s linear;
  57. width: 0;
  58. height: 0;
  59. background: #0052D9;
  60. }
  61. .news_wrap .nav>li>a {
  62. padding: 10px 20px;
  63. }
  64. .news_wrap {
  65. margin: 63px 0;
  66. }
  67. .tab-content a {
  68. display: block;
  69. text-decoration: none;
  70. }
  71. .news_items_box {
  72. display: flex;
  73. justify-content: space-between;
  74. margin: 28px 0;
  75. box-sizing: border-box;
  76. padding: 20px;
  77. background: #FAFAFA;
  78. }
  79. .news_img {
  80. width: 370px;
  81. height: 208px;
  82. border-radius: 4px;
  83. min-width: 370px;
  84. margin-right: 30px;
  85. border: 1px solid red;
  86. }
  87. .news_img img {
  88. display: block;
  89. width: 100%;
  90. border-radius: 4px;
  91. }
  92. .news_main_tit {
  93. font-size: 20px;
  94. font-weight: 500;
  95. color: #0052D9;
  96. line-height: 25px;
  97. margin-bottom: 40px;
  98. white-space: nowrap;
  99. text-overflow: ellipsis;
  100. overflow: hidden;
  101. word-break: break-all;
  102. }
  103. .news_desc {
  104. font-size: 14px;
  105. font-family: Source Han Sans CN;
  106. font-weight: 400;
  107. color: #666666;
  108. line-height: 24px;
  109. margin-bottom: 60px;
  110. text-overflow: -o-ellipsis-lastline;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. display: -webkit-box;
  114. -webkit-line-clamp: 2;
  115. line-clamp: 2;
  116. -webkit-box-orient: vertical;
  117. }
  118. .news_time {
  119. font-size: 12px;
  120. font-family: Source Han Sans CN;
  121. font-weight: 400;
  122. color: #666666;
  123. line-height: 25px;
  124. }
  125. /*>=1024的设备*/
  126. @media (min-width: 1280px) {
  127. .head_bg {
  128. background: url(../imgs/news/banner-1280.png) no-repeat;
  129. height: 400px;
  130. }
  131. }
  132. @media (min-width: 1440px) {
  133. .head_bg {
  134. background: url(../imgs/news/banner-1440.png) no-repeat;
  135. height: 450px;
  136. }
  137. }
  138. @media (min-width: 1680px) {
  139. /* .head_bg {
  140. background: url(../imgs/industry/banner-1920.png) no-repeat;
  141. height: 600px;
  142. } */
  143. }
  144. @media (min-width: 1920px) {
  145. .head_bg {
  146. background: url(../imgs/news/banner-1920.png) no-repeat;
  147. height: 600px;
  148. }
  149. }