Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 
 
 

376 строки
7.8 KiB

  1. /*banner图*/
  2. .lr-site-banner {
  3. position: relative;
  4. width: 100%;
  5. height: 480px;
  6. background-color: #fff;
  7. }
  8. .lr-site-banner-default {
  9. position: relative;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. .lr-site-banner-default .img {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .lr-site-banner-default .title {
  18. position: absolute;
  19. top: 40px;
  20. left: 50%;
  21. margin-left: -100px;
  22. font-size: 20px;
  23. color: #333;
  24. }
  25. .lr-site-banner-swiper-container {
  26. display: none;
  27. }
  28. .lr-site-banner-swiper-container .swiper-slide {
  29. text-align: center;
  30. }
  31. .lr-site-banner-swiper-container .img,
  32. .lr-site-banner-default .img {
  33. height: 480px;
  34. width:100%;
  35. }
  36. .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  37. bottom: 20px;
  38. }
  39. /*中间模块显示**/
  40. .lr-site-modules {
  41. position: relative;
  42. height: auto;
  43. width: 100%;
  44. max-width: 1010px;
  45. background-color: #fcfcfc;
  46. margin: auto;
  47. }
  48. .lr-site-modules:before, .lr-site-modules:after {
  49. display: table;
  50. content: " ";
  51. }
  52. .lr-site-modules:after {
  53. clear: both;
  54. }
  55. .lr-site-module {
  56. position: relative;
  57. padding: 10px;
  58. float: left;
  59. }
  60. .lr-site-box {
  61. position: relative;
  62. height: 100%;
  63. width: 100%;
  64. background-color: #fff;
  65. box-shadow: 0 2px 4px 0 #F3F3F3;
  66. }
  67. /*风格1模块*/
  68. .lr-site-module.module1 {
  69. height: 67px;
  70. width: 100%;
  71. }
  72. .lr-site-module.module1 .lr-site-box {
  73. box-shadow: 0 2px 4px 0 #DADADA;
  74. padding-left: 139px;
  75. padding-right: 50px;
  76. }
  77. .lr-site-module.module1 .lr-site-box .title {
  78. position: absolute;
  79. top: 0;
  80. left: 0;
  81. height: 100%;
  82. line-height: 47px;
  83. width: 129px;
  84. background: #3285ED;
  85. color: #fff;
  86. text-align: center;
  87. font-size: 16px;
  88. }
  89. .lr-site-module.module1 .lr-site-box .fa {
  90. margin-right: 6px;
  91. font-size: 18px;
  92. }
  93. .lr-site-module.module1 .lr-site-box .arrow {
  94. position: absolute;
  95. right: -7px;
  96. top: 50%;
  97. margin-top: -4px;
  98. width: 0;
  99. height: 0;
  100. border: 4px solid transparent;
  101. border-left: 4px solid #3285ED;
  102. }
  103. .lr-site-module.module1 .lr-site-box .content {
  104. position: relative;
  105. width: 100%;
  106. height: 100%;
  107. line-height: 47px;
  108. font-size: 16px;
  109. color: #333333;
  110. overflow: hidden;
  111. white-space: nowrap;
  112. text-overflow: ellipsis;
  113. }
  114. .lr-site-module.module1 .lr-site-box .content {
  115. position: relative;
  116. width: 100%;
  117. height: 100%;
  118. }
  119. .module1 .lr-text-item {
  120. display: block;
  121. position: relative;
  122. width: 100%;
  123. overflow: hidden;
  124. white-space: nowrap;
  125. text-overflow: ellipsis;
  126. color: #333333;
  127. line-height: 47px;
  128. font-size: 16px;
  129. }
  130. .module1 .lr-text-item:hover {
  131. color: #166EDB;
  132. }
  133. .lr-site-more {
  134. position: absolute;
  135. top: 0;
  136. right: 0;
  137. width: 50px;
  138. height: 47px;
  139. line-height: 47px;
  140. font-size: 16px;
  141. color: #333333;
  142. cursor: pointer;
  143. }
  144. /*风格2模块*/
  145. .lr-site-title {
  146. position: absolute;
  147. top: 0;
  148. left: 0;
  149. height: 50px;
  150. line-height: 49px;
  151. width: 100%;
  152. border-bottom: 1px solid #e5e5e5;
  153. font-size: 16px;
  154. color: #333;
  155. padding-left: 18px;
  156. }
  157. .lr-site-title:before {
  158. content: '';
  159. position: absolute;
  160. width: 8px;
  161. height: 30px;
  162. background: #2E81EA;
  163. left: 0;
  164. top: 10px;
  165. }
  166. .lr-site-title .lr-site-more {
  167. height: 49px;
  168. line-height: 49px;
  169. }
  170. .module2 .lr-site-box,
  171. .module3 .lr-site-box,
  172. .module4 .lr-site-box,
  173. .module5 .lr-site-box {
  174. padding-top: 50px;
  175. }
  176. .module2, .module3, .module5 {
  177. height: 330px;
  178. }
  179. .lr-site-body {
  180. position:relative;
  181. height:100%;
  182. width:100%;
  183. }
  184. .module2 .lr-site-body {
  185. padding-left: 340px;
  186. }
  187. .lr-site-module-pic {
  188. position: absolute;
  189. top: 0;
  190. left: 0;
  191. height: 100%;
  192. width: 340px;
  193. padding: 10px;
  194. }
  195. .lr-site-module-swiper-container, .lr-site-module-swiper-container .img{
  196. position: relative;
  197. height: 100%;
  198. width: 100%;
  199. }
  200. .lr-site-module-swiper-container .swiper-pagination-bullet {
  201. height:10px;
  202. width:10px;
  203. background-color:#e4e4e4;
  204. opacity:1;
  205. border-radius:0;
  206. }
  207. .lr-site-module-swiper-container .swiper-pagination-bullet-active {
  208. background-color: #2E81EA;
  209. }
  210. .lr-site-module-swiper-container .swiper-pagination {
  211. bottom: 8px;
  212. right: 8px;
  213. width: auto !important;
  214. text-align:right;
  215. }
  216. .lr-site-module-list {
  217. position: relative;
  218. height: 100%;
  219. width: 100%;
  220. padding:10px 10px 0;
  221. }
  222. .lr-site-module-item {
  223. position: relative;
  224. height: 40px;
  225. line-height:39px;
  226. width: 100%;
  227. border-bottom: 1px dashed #E5E5E5;
  228. font-size: 14px;
  229. color: #333;
  230. padding-right:85px;
  231. cursor:pointer;
  232. }
  233. .lr-site-module-item:hover {
  234. color: #166EDB;
  235. }
  236. .lr-site-module-item .date{
  237. position: absolute;
  238. height: 39px;
  239. width: 80px;
  240. top:0;
  241. right:0;
  242. }
  243. .lr-site-module-item .text {
  244. position: relative;
  245. height: 100%;
  246. width: 100%;
  247. overflow: hidden;
  248. white-space: nowrap;
  249. text-overflow: ellipsis;
  250. }
  251. /*模块3*/
  252. .lr-site-tabs {
  253. position: absolute;
  254. height: 50px;
  255. line-height:49px;
  256. width: 100%;
  257. border-bottom: 1px solid #1A71DE;
  258. top: 0;
  259. left: 0;
  260. }
  261. .lr-site-tab {
  262. position: relative;
  263. text-align: center;
  264. float: left;
  265. width: 33.33%;
  266. font-size: 16px;
  267. color: #333;
  268. cursor: pointer;
  269. }
  270. .lr-site-tab.active, .lr-site-tab:hover {
  271. color: #fff;
  272. background-color: #3285ED;
  273. }
  274. .lr-site-tab-content {
  275. position:relative;
  276. width:100%;
  277. height:100%;
  278. display:none;
  279. padding-top:10px;
  280. }
  281. .lr-site-tab-content.active {
  282. display: block;
  283. }
  284. .lr-site-tab-content-item {
  285. position: relative;
  286. height: 40px;
  287. line-height: 39px;
  288. width: 100%;
  289. border-bottom: 1px dashed #E5E5E5;
  290. font-size: 14px;
  291. color: #333;
  292. overflow: hidden;
  293. white-space: nowrap;
  294. text-overflow: ellipsis;
  295. padding: 0 10px;
  296. cursor: pointer;
  297. }
  298. .lr-site-tab-content-item:hover {
  299. color: #166EDB;
  300. }
  301. /*模块4*/
  302. .module4 {
  303. height:251px;
  304. }
  305. .lr-site-img-item {
  306. position:relative;
  307. height:100%;
  308. width:25%;
  309. float:left;
  310. padding:10px;
  311. }
  312. .lr-site-img-item-content, .lr-site-img-item-content .img {
  313. position: relative;
  314. height: 100%;
  315. width: 100%;
  316. cursor: pointer;
  317. }
  318. .lr-site-img-item-content:hover {
  319. transform: translateY(-10px);
  320. }
  321. .lr-site-img-item-content .text {
  322. position: absolute;
  323. left: 0;
  324. bottom: 0;
  325. height: 30px;
  326. line-height: 30px;
  327. width: 100%;
  328. font-size: 12px;
  329. background: #282b2a;
  330. background: rgba(0,0,0,0.60);
  331. color: #FFF;
  332. padding-left:10px;
  333. }
  334. /*模块5*/
  335. .module5 .lr-site-body {
  336. padding-top:150px;
  337. cursor:pointer;
  338. }
  339. .lr-site-article-pic {
  340. position: absolute;
  341. height: 150px;
  342. width: 100%;
  343. top: 0;
  344. left: 0;
  345. padding:10px;
  346. }
  347. .lr-site-article-pic .img {
  348. height:100%;
  349. width:100%;
  350. }
  351. .module5 .text-content {
  352. position: relative;
  353. height: 100%;
  354. width: 100%;
  355. padding: 0 10px 10px 10px;
  356. overflow: hidden;
  357. }
  358. .module5 .text {
  359. position: relative;
  360. height: 100%;
  361. width: 100%;
  362. font-size: 14px;
  363. color: #333333;
  364. overflow: hidden;
  365. }
  366. .module5 .text:hover {
  367. color: #166EDB;
  368. }