index.wxss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. ._a {
  12. text-decoration: none;
  13. color: #5f5f5f;
  14. }
  15. .content {
  16. background-color: #ffabab;
  17. }
  18. .popup_row {
  19. width: 100%;
  20. height: 500rpx;
  21. background-color: #ffffff;
  22. border-radius: 20rpx;
  23. display: -webkit-box;
  24. display: -webkit-flex;
  25. display: flex;
  26. -webkit-box-pack: center;
  27. -webkit-justify-content: center;
  28. justify-content: center;
  29. -webkit-box-align: center;
  30. -webkit-align-items: center;
  31. align-items: center;
  32. }
  33. .popup_row .rows {
  34. width: 100%;
  35. padding: 0 24rpx;
  36. }
  37. .popup_row .rows .rows-item {
  38. height: 80rpx;
  39. line-height: 80rpx;
  40. text-align: center;
  41. width: 100%;
  42. font-size: 32rpx;
  43. color: #303133;
  44. }
  45. .content {
  46. background-color: #f8f8f8;
  47. height: 100%;
  48. /* 头部 轮播图 */
  49. }
  50. .content .carousel-section {
  51. overflow: hidden;
  52. }
  53. .content .carousel-section .carousel {
  54. width: 100%;
  55. height: 398rpx;
  56. }
  57. .content .carousel-section .carousel .carousel-item {
  58. width: 100%;
  59. height: 100%;
  60. padding-left: 30rpx;
  61. padding-right: 30rpx;
  62. overflow: hidden;
  63. }
  64. .content .carousel-section .carousel image {
  65. width: 100%;
  66. height: 398rpx;
  67. }
  68. .content .cate-section {
  69. display: -webkit-box;
  70. display: -webkit-flex;
  71. display: flex;
  72. justify-items: center;
  73. -webkit-box-align: center;
  74. -webkit-align-items: center;
  75. align-items: center;
  76. -webkit-justify-content: space-around;
  77. justify-content: space-around;
  78. height: 214rpx;
  79. width: 750rpx;
  80. background-color: #ffffff;
  81. }
  82. .content .cate-section .cate-item {
  83. display: -webkit-box;
  84. display: -webkit-flex;
  85. display: flex;
  86. -webkit-box-orient: vertical;
  87. -webkit-box-direction: normal;
  88. -webkit-flex-direction: column;
  89. flex-direction: column;
  90. -webkit-box-pack: center;
  91. -webkit-justify-content: center;
  92. justify-content: center;
  93. -webkit-box-align: center;
  94. -webkit-align-items: center;
  95. align-items: center;
  96. color: #5f5f5f;
  97. font-size: 26rpx;
  98. }
  99. .content .cate-section .cate-item image {
  100. height: 88rpx;
  101. width: 88rpx;
  102. margin-bottom: 14rpx;
  103. border-radius: 50%;
  104. opacity: 0.7;
  105. }
  106. .content .science-section {
  107. width: 100%;
  108. background-color: #ffffff;
  109. margin-top: 18rpx;
  110. padding-top: 30rpx;
  111. }
  112. .content .science-section .science-title {
  113. display: -webkit-box;
  114. display: -webkit-flex;
  115. display: flex;
  116. -webkit-box-pack: center;
  117. -webkit-justify-content: center;
  118. justify-content: center;
  119. -webkit-box-align: center;
  120. -webkit-align-items: center;
  121. align-items: center;
  122. padding-bottom: 22rpx;
  123. }
  124. .content .science-section .science-title .title {
  125. width: 285rpx;
  126. height: 64rpx;
  127. background-color: #ca121e;
  128. border-radius: 32rpx;
  129. color: #ffffff;
  130. font-size: 32rpx;
  131. line-height: 64rpx;
  132. text-align: center;
  133. }
  134. .content .science-section .science-title image {
  135. width: 68rpx;
  136. height: 43rpx;
  137. margin-left: 16rpx;
  138. margin-right: 16rpx;
  139. }
  140. .content .science-section .science-box {
  141. padding-left: 15rpx;
  142. padding-right: 15rpx;
  143. padding-bottom: 20rpx;
  144. border-bottom: 1rpx solid #f0f0f0;
  145. white-space: nowrap;
  146. display: -webkit-box;
  147. display: -webkit-flex;
  148. display: flex;
  149. width: 100%;
  150. }
  151. .content .science-section .science-box .science-content {
  152. display: -webkit-box;
  153. }
  154. .content .science-section .science-box .science-content .science-item {
  155. margin-right: 24rpx;
  156. width: 198rpx;
  157. display: -webkit-box;
  158. display: -webkit-flex;
  159. display: flex;
  160. -webkit-box-orient: vertical;
  161. -webkit-box-direction: normal;
  162. -webkit-flex-direction: column;
  163. flex-direction: column;
  164. -webkit-box-align: center;
  165. -webkit-align-items: center;
  166. align-items: center;
  167. text-align: center;
  168. }
  169. .content .science-section .science-box .science-content .science-item image {
  170. width: 100%;
  171. height: 145rpx;
  172. }
  173. .content .science-section .science-box .science-content .science-item .article-title {
  174. width: 198rpx;
  175. color: #333;
  176. font-size: 25rpx;
  177. padding-top: 20rpx;
  178. padding-bottom: 16rpx;
  179. font-weight: 900;
  180. }
  181. .content .science-section .science-box .science-content .science-item .article-content {
  182. width: 198rpx;
  183. color: #999999;
  184. font-size: 18rpx;
  185. overflow: hidden;
  186. text-overflow: ellipsis;
  187. display: -webkit-box;
  188. word-break: break-all;
  189. -webkit-box-orient: vertical;
  190. -webkit-line-clamp: 2;
  191. }
  192. .content .science-section .science-more {
  193. display: -webkit-box;
  194. display: -webkit-flex;
  195. display: flex;
  196. -webkit-box-pack: center;
  197. -webkit-justify-content: center;
  198. justify-content: center;
  199. -webkit-box-align: center;
  200. -webkit-align-items: center;
  201. align-items: center;
  202. color: #cb131c;
  203. font-size: 30rpx;
  204. padding-top: 18rpx;
  205. padding-bottom: 18rpx;
  206. }
  207. .content .science-section .science-more image {
  208. width: 20rpx;
  209. height: 27rpx;
  210. }
  211. .content .system {
  212. width: 100%;
  213. background-color: #ffffff;
  214. margin-top: 18rpx;
  215. padding-top: 40rpx;
  216. }
  217. .content .system .system-title {
  218. display: -webkit-box;
  219. display: -webkit-flex;
  220. display: flex;
  221. -webkit-box-pack: center;
  222. -webkit-justify-content: center;
  223. justify-content: center;
  224. -webkit-box-align: center;
  225. -webkit-align-items: center;
  226. align-items: center;
  227. padding-bottom: 22rpx;
  228. }
  229. .content .system .system-title .title {
  230. width: 285rpx;
  231. height: 64rpx;
  232. background-color: #ca121e;
  233. border-radius: 32rpx;
  234. color: #ffffff;
  235. font-size: 32rpx;
  236. line-height: 64rpx;
  237. text-align: center;
  238. }
  239. .content .system .system-title .img {
  240. width: 68rpx;
  241. height: 43rpx;
  242. margin-left: 16rpx;
  243. margin-right: 16rpx;
  244. }
  245. .content .system .system-title .img image {
  246. width: 68rpx;
  247. height: 43rpx;
  248. }
  249. .content .system .system-map {
  250. width: 750rpx;
  251. height: 500rpx;
  252. background-color: #ffffff;
  253. padding: 0 24rpx;
  254. padding-bottom: 45rpx;
  255. }
  256. .content .system .system-map .map-box {
  257. width: 100%;
  258. height: 500rpx;
  259. background-color: #f8f8f8;
  260. }
  261. .content .system .system-map .map-box image {
  262. width: 100%;
  263. height: 500rpx;
  264. }
  265. .content .list-box {
  266. padding: 0rpx 25rpx 24rpx;
  267. }
  268. .content .list-box .system-title {
  269. display: -webkit-box;
  270. display: -webkit-flex;
  271. display: flex;
  272. -webkit-box-pack: center;
  273. -webkit-justify-content: center;
  274. justify-content: center;
  275. -webkit-box-align: center;
  276. -webkit-align-items: center;
  277. align-items: center;
  278. height: 130rpx;
  279. background-color: #ffffff;
  280. }
  281. .content .list-box .system-title .title {
  282. width: 285rpx;
  283. height: 64rpx;
  284. background-color: #ca121e;
  285. border-radius: 32rpx;
  286. color: #ffffff;
  287. font-size: 32rpx;
  288. line-height: 64rpx;
  289. text-align: center;
  290. }
  291. .content .list-box .system-title .img {
  292. width: 68rpx;
  293. height: 43rpx;
  294. margin-left: 16rpx;
  295. margin-right: 16rpx;
  296. }
  297. .content .list-box .system-title .img image {
  298. width: 68rpx;
  299. height: 43rpx;
  300. }
  301. .content .map-box {
  302. width: 100%;
  303. height: 366rpx;
  304. box-shadow: 5px 15px 15px 5px #f2f2f2;
  305. }
  306. .content .list-tpl {
  307. background-color: #ffffff;
  308. margin: 25rpx 0rpx;
  309. padding: 25rpx 25rpx;
  310. font-size: 28rpx;
  311. border-radius: 15rpx;
  312. display: -webkit-box;
  313. display: -webkit-flex;
  314. display: flex;
  315. -webkit-box-pack: justify;
  316. -webkit-justify-content: space-between;
  317. justify-content: space-between;
  318. }
  319. .content .list-tpl .list-left {
  320. display: -webkit-box;
  321. display: -webkit-flex;
  322. display: flex;
  323. width: 100%;
  324. }
  325. .content .list-tpl .list-left .number {
  326. font-size: 32rpx;
  327. margin-right: 14rpx;
  328. }
  329. .content .list-tpl .list-left .info {
  330. width: 100%;
  331. }
  332. .content .list-tpl .list-left .info .title {
  333. font-size: 32rpx;
  334. color: #222222;
  335. font-weight: 500;
  336. }
  337. .content .list-tpl .list-left .info .addr {
  338. margin-top: 20rpx;
  339. }
  340. .content .list-tpl .image {
  341. width: 10%;
  342. text-align: center;
  343. }
  344. .content .list-tpl .image image {
  345. width: 50rpx;
  346. height: 50rpx;
  347. }
  348. .content .list-tpl .image .tip {
  349. color: #7f7f7f;
  350. font-size: 21rpx;
  351. }