introduction.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. @charset "UTF-8";
  2. .new-attributes .panel-body {
  3. border: 0;
  4. padding-left: 0;
  5. padding-top: 0;
  6. }
  7. .new-attributes .new-attributes_content {
  8. color: inherit;
  9. font-size: 15px;
  10. padding-right: 10px;
  11. line-height: 200%;
  12. }
  13. .new-attributes .news-list {
  14. display: table;
  15. table-layout: fixed;
  16. width: 100%;
  17. font-size: 1.2rem;
  18. line-height: 3rem;
  19. }
  20. .new-attributes .news-item {
  21. display: table-row;
  22. width: 100%;
  23. }
  24. .new-attributes .news-item-img {
  25. width: 100%;
  26. }
  27. .new-attributes .decoration:before,
  28. .new-attributes .decoration:after {
  29. content: "";
  30. display: block;
  31. width: 1px;
  32. height: 50%;
  33. background: #ccc;
  34. position: absolute;
  35. left: 0;
  36. right: 0;
  37. margin: auto;
  38. z-index: -1;
  39. }
  40. .new-attributes .news-item:nth-child(1) .decoration:before {
  41. display: none;
  42. }
  43. .new-attributes .news-item:nth-last-child(1) .decoration:after {
  44. display: none;
  45. }
  46. .new-attributes .decoration:before {
  47. top: 0;
  48. }
  49. .new-attributes .decoration:after {
  50. bottom: 0;
  51. }
  52. .new-attributes .decoration {
  53. display: table-cell;
  54. width: 10%;
  55. position: relative;
  56. vertical-align: middle;
  57. text-align: center;
  58. /*text-align: left;*/
  59. }
  60. .new-attributes .news-item:hover .news-box {
  61. background-color: #e14d57;
  62. color: #fff;
  63. }
  64. .new-attributes .news-item:hover .news-box:before {
  65. content: "";
  66. width: 0;
  67. height: 0;
  68. border-top: 10px solid transparent;
  69. border-right: 10px solid #e14d57;
  70. border-bottom: 10px solid transparent;
  71. position: absolute;
  72. left: -10px;
  73. top: 0;
  74. bottom: 0;
  75. margin: auto;
  76. }
  77. .new-attributes .news-item:hover .solid-circle {
  78. background: #e14d57;
  79. }
  80. .new-attributes .news-item .news-title,
  81. .new-attributes .news-item-img .news-title {
  82. display: block;
  83. white-space: nowrap;
  84. text-overflow: ellipsis;
  85. overflow: hidden;
  86. }
  87. .new-attributes .news-item:hover .news-title {
  88. color: #fff;
  89. text-decoration: underline;
  90. }
  91. .new-attributes .news-item:hover .news-time {
  92. color: #fff;
  93. }
  94. .new-attributes .news-box {
  95. display: table-cell;
  96. line-height: 3rem;
  97. width: 100%;
  98. vertical-align: middle;
  99. color: #000;
  100. padding-left: 15px;
  101. position: relative;
  102. border-radius: 2px;
  103. }
  104. .new-attributes .news-circle {
  105. display: inline-block;
  106. border-radius: 50%;
  107. border: 1px solid #ccc;
  108. background-color: #fff;
  109. vertical-align: middle;
  110. }
  111. .new-attributes .solid-circle {
  112. background: #ccc;
  113. border-radius: 50%;
  114. width: 0.6rem;
  115. height: 0.6rem;
  116. overflow: hidden;
  117. margin: 0.3rem;
  118. }
  119. @media screen and (max-width: 762px) {
  120. .news-info-container,
  121. .news-img {
  122. display: table-row !important;
  123. }
  124. .news-img>a {
  125. width: 100% !important;
  126. height: inherit !important;
  127. }
  128. }
  129. /* what new 含图片 start */
  130. .new-attributes .news-box-img {
  131. /* display: table; */
  132. display: flex;
  133. align-items: center;
  134. line-height: 3rem;
  135. width: 100%;
  136. vertical-align: middle;
  137. color: #000;
  138. /* padding-left: 15px; */
  139. position: relative;
  140. border-radius: 2px;
  141. padding: 20px;
  142. /* border-bottom: 2px solid rgb(221, 221, 221); */
  143. border-top: 2px solid rgb(221, 221, 221);
  144. }
  145. .news-img {
  146. /* width: 180px; */
  147. height: 206px;
  148. /* background: no-repeat url(../img/l_graphicLayer_webgl.png); */
  149. /* margin-right: 20px; */
  150. /* display: table-cell; */
  151. width: 260px;
  152. position: relative;
  153. border-radius: 5px;
  154. overflow: hidden;
  155. }
  156. .news-img>a {
  157. position: absolute;
  158. width: 100%;
  159. height: 100%;
  160. }
  161. .news-title-href,
  162. .news-title-forbidden {
  163. font-size: 17px;
  164. color: rgb(52, 56, 68);
  165. font-weight: 600;
  166. }
  167. .news-title-href:hover {
  168. color: #e14d57
  169. }
  170. .news-info-container {
  171. /* float: left; */
  172. /* max-width: 523px; */
  173. /* display: table-cell; */
  174. width: 65%;
  175. padding-left: 30px;
  176. }
  177. .news-info-title {
  178. border-bottom: 2px solid #e14d57;
  179. display: inline-block;
  180. }
  181. /* what new 含图片 end */