index.less 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. //pc端样式
  2. .main {
  3. width: 100%;
  4. max-width: 1920px;
  5. margin: 0 auto;
  6. padding-top: 71px;
  7. &>.title{
  8. font-size: 60px;
  9. text-align: center;
  10. padding-top: 110px;
  11. }
  12. }
  13. .list{
  14. width: 100%;
  15. text-align: center;
  16. padding-top: 43px;
  17. max-width: 1300px;
  18. margin: 0 auto;
  19. .newsType{
  20. width: 100%;
  21. padding-bottom: 83px;
  22. .newsLi{
  23. width: 100%;
  24. display: flex;
  25. justify-content: space-between;
  26. padding-bottom: 37px;
  27. border-bottom: 1px dotted #acacac5e;
  28. padding-top: 37px;
  29. transition: all 0.3s ease-in-out;
  30. &:last-child{
  31. border-bottom: 0px dotted #ACACAC;
  32. }
  33. .timer{
  34. width: 65px;
  35. height: 66px;
  36. border-radius: 8px;
  37. border: 1px solid #A7A5A5;
  38. text-align: center;
  39. font-size: 12px;
  40. padding: 0px 12px 0;
  41. box-sizing: border-box;
  42. .timerData{
  43. font-size: 26px;
  44. color: #b81c25;
  45. border-bottom: 1px solid #b81c25;
  46. padding-bottom: 3px;
  47. margin-bottom: 3px;
  48. line-height: 30px;
  49. padding-top: 4px;
  50. }
  51. }
  52. .newsLiCon{
  53. width: calc(100% - 80px);
  54. font-size: 18px;
  55. text-align: left;
  56. &>div{
  57. overflow: hidden;
  58. white-space: nowrap;
  59. width: 100%;
  60. height: 24px;
  61. text-overflow: ellipsis;
  62. }
  63. .liTitle{
  64. color: #231F20;
  65. font-weight: 500;
  66. margin-bottom: 8px;
  67. padding-top: 6px;
  68. transition: all 0.3s ease-in-out;
  69. }
  70. .licon{
  71. font-weight: 400;
  72. color: #999999;
  73. font-size: 16px;
  74. }
  75. }
  76. &:hover{
  77. background: #EFEFEF;
  78. .newsLiCon{
  79. .liTitle{
  80. color: #B81C25;
  81. }
  82. }
  83. }
  84. }
  85. }
  86. }
  87. .pages {
  88. margin: 0px 0 120px;
  89. display: table;
  90. margin-left: auto;
  91. margin-right: auto;
  92. color: #fff;
  93. .item {
  94. width: 40px;
  95. height: 40px;
  96. line-height: 40px;
  97. float: left;
  98. text-align: center;
  99. box-sizing: border-box;
  100. color: #000;
  101. border: 1px solid #DDE2E6;
  102. border-radius: 2px;
  103. transition: all 0.3s ease-in-out;
  104. }
  105. .prev {
  106. margin-right: 15px;
  107. border: 1px solid #000000;
  108. border-radius: 4px;
  109. transform: rotate(-90deg);
  110. font-size: 20px;
  111. }
  112. .next {
  113. margin-left: 15px;
  114. border-radius: 4px;
  115. border: 1px solid #000000;
  116. transform: rotate(90deg);
  117. font-size: 20px;
  118. }
  119. .prev:hover,
  120. .next:hover {
  121. border-color: #B81C25;
  122. background-color: #B81C25;
  123. color: #fff;
  124. }
  125. .disableBtn {
  126. opacity: 0.5;
  127. cursor: default;
  128. }
  129. .disableBtn:hover {
  130. border-color: #000000;
  131. background-color: transparent;
  132. color: #000;
  133. }
  134. .first {
  135. float: left;
  136. }
  137. .space {
  138. color: #999999;
  139. float: left;
  140. letter-spacing: 1px;
  141. line-height: 30px;
  142. margin-left: 5px;
  143. margin-right: 5px;
  144. }
  145. .last{
  146. margin-left: 5px;
  147. }
  148. .pageList {
  149. float: left;
  150. }
  151. .pageItem {
  152. float: left;
  153. margin-left: 5px;
  154. margin-right: 5px;
  155. }
  156. .curPageItem,
  157. .pageItem:hover,
  158. .first:hover,
  159. .last:hover {
  160. color: #fff;
  161. background-color: #B81C25;
  162. float: left;
  163. }
  164. .curPageItem {
  165. cursor: default;
  166. }
  167. }
  168. .partContent h2 {
  169. color: white;
  170. border-bottom: 1px solid #fff;
  171. font-size: 60px;
  172. }
  173. @media screen and (min-width: 801px) and (max-width: 1400px) {
  174. }
  175. @media screen and (min-width:800px){
  176. }
  177. .mTxt{
  178. display: none;
  179. }
  180. //移动端样式
  181. @media screen and (max-width:800px) {
  182. .pcTxt{
  183. display: none;
  184. }
  185. .mTxt{
  186. display: block;
  187. }
  188. .main{
  189. padding-top: 61px;
  190. &>.title{
  191. padding-top: 80px;
  192. box-sizing: border-box;
  193. font-size: 24px;
  194. line-height: normal;
  195. }
  196. }
  197. .list {
  198. width: 100%;
  199. box-sizing: border-box;
  200. padding: 0px 15px;
  201. .newsType {
  202. padding-top: 20px;
  203. padding-bottom: 20px;
  204. .newsLi{
  205. padding-bottom: 20px;
  206. padding-top: 20px;
  207. .newsLiCon{
  208. font-size: 14px;
  209. .licon{
  210. font-size: 12px;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. .pages{
  217. display: none;
  218. }
  219. .pageNext{
  220. color: #B81C25;
  221. width: 120px;
  222. margin: 0px auto;
  223. text-align: center;
  224. font-size: 12px;
  225. margin-bottom: 60px;
  226. .iconfont{
  227. transform: rotate(180deg);
  228. display: inline-block;
  229. font-size: 16px;
  230. position: relative;
  231. top: 2px;
  232. }
  233. }
  234. }