index.wxss 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. ._a {
  12. text-decoration: none;
  13. color: #5f5f5f;
  14. }
  15. page,
  16. .content {
  17. background-color: #f8f8f8;
  18. height: 100%;
  19. padding-bottom: 50px;
  20. }
  21. .popup_row {
  22. width: 500rpx;
  23. height: 500rpx;
  24. background-color: #ffffff;
  25. border-radius: 20rpx;
  26. display: -webkit-box;
  27. display: -webkit-flex;
  28. display: flex;
  29. -webkit-box-pack: center;
  30. -webkit-justify-content: center;
  31. justify-content: center;
  32. -webkit-box-align: center;
  33. -webkit-align-items: center;
  34. align-items: center;
  35. }
  36. .popup_row .rows .row-1 {
  37. margin: auto;
  38. }
  39. .popup_row .rows .row-1 .first_aid {
  40. width: 300rpx;
  41. height: 300rpx;
  42. }
  43. .popup_row .rows .row-2 {
  44. font-size: 38rpx;
  45. margin-top: 20rpx;
  46. }
  47. .content {
  48. background-color: #f8f8f8;
  49. height: 100%;
  50. /* 头部 轮播图 */
  51. }
  52. .content .carousel-section {
  53. overflow: hidden;
  54. }
  55. .content .carousel-section .carousel {
  56. width: 100%;
  57. height: 398rpx;
  58. }
  59. .content .carousel-section .carousel .carousel-item {
  60. width: 100%;
  61. height: 100%;
  62. padding-left: 30rpx;
  63. padding-right: 30rpx;
  64. overflow: hidden;
  65. }
  66. .content .carousel-section .carousel image {
  67. width: 100%;
  68. height: 398rpx;
  69. }
  70. .content .cate-section {
  71. display: -webkit-box;
  72. display: -webkit-flex;
  73. display: flex;
  74. justify-items: center;
  75. -webkit-box-align: center;
  76. -webkit-align-items: center;
  77. align-items: center;
  78. -webkit-justify-content: space-around;
  79. justify-content: space-around;
  80. height: 214rpx;
  81. width: 750rpx;
  82. background-color: #ffffff;
  83. }
  84. .content .cate-section .cate-item {
  85. display: -webkit-box;
  86. display: -webkit-flex;
  87. display: flex;
  88. -webkit-box-orient: vertical;
  89. -webkit-box-direction: normal;
  90. -webkit-flex-direction: column;
  91. flex-direction: column;
  92. -webkit-box-pack: center;
  93. -webkit-justify-content: center;
  94. justify-content: center;
  95. -webkit-box-align: center;
  96. -webkit-align-items: center;
  97. align-items: center;
  98. color: #5f5f5f;
  99. font-size: 26rpx;
  100. }
  101. .content .cate-section .cate-item image {
  102. height: 88rpx;
  103. width: 88rpx;
  104. margin-bottom: 14rpx;
  105. border-radius: 50%;
  106. opacity: 0.7;
  107. }
  108. .content .science-section {
  109. width: 100%;
  110. background-color: #ffffff;
  111. margin-top: 18rpx;
  112. padding-top: 30rpx;
  113. }
  114. .content .science-section .science-title {
  115. display: -webkit-box;
  116. display: -webkit-flex;
  117. display: flex;
  118. -webkit-box-pack: center;
  119. -webkit-justify-content: center;
  120. justify-content: center;
  121. -webkit-box-align: center;
  122. -webkit-align-items: center;
  123. align-items: center;
  124. padding-bottom: 22rpx;
  125. }
  126. .content .science-section .science-title .title {
  127. width: 285rpx;
  128. height: 64rpx;
  129. background-color: #ca121e;
  130. border-radius: 32rpx;
  131. color: #ffffff;
  132. font-size: 32rpx;
  133. line-height: 64rpx;
  134. text-align: center;
  135. }
  136. .content .science-section .science-title image {
  137. width: 68rpx;
  138. height: 43rpx;
  139. margin-left: 16rpx;
  140. margin-right: 16rpx;
  141. }
  142. .content .science-section .science-box {
  143. padding-left: 15rpx;
  144. padding-right: 15rpx;
  145. padding-bottom: 20rpx;
  146. border-bottom: 1rpx solid #f0f0f0;
  147. white-space: nowrap;
  148. display: -webkit-box;
  149. display: -webkit-flex;
  150. display: flex;
  151. width: 100%;
  152. }
  153. .content .science-section .science-box .science-content {
  154. display: -webkit-box;
  155. }
  156. .content .science-section .science-box .science-content .science-item {
  157. width: 198rpx;
  158. display: -webkit-box;
  159. display: -webkit-flex;
  160. display: flex;
  161. -webkit-box-orient: vertical;
  162. -webkit-box-direction: normal;
  163. -webkit-flex-direction: column;
  164. flex-direction: column;
  165. -webkit-box-align: center;
  166. -webkit-align-items: center;
  167. align-items: 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. color: #333;
  175. font-size: 25rpx;
  176. padding-top: 20rpx;
  177. padding-bottom: 16rpx;
  178. font-weight: 900;
  179. }
  180. .content .science-section .science-box .science-content .science-item .article-content {
  181. color: #999999;
  182. font-size: 18rpx;
  183. overflow: hidden;
  184. text-overflow: ellipsis;
  185. display: -webkit-box;
  186. word-break: break-all;
  187. -webkit-box-orient: vertical;
  188. -webkit-line-clamp: 2;
  189. }
  190. .content .science-section .science-more {
  191. display: -webkit-box;
  192. display: -webkit-flex;
  193. display: flex;
  194. -webkit-box-pack: center;
  195. -webkit-justify-content: center;
  196. justify-content: center;
  197. -webkit-box-align: center;
  198. -webkit-align-items: center;
  199. align-items: center;
  200. color: #cb131c;
  201. font-size: 30rpx;
  202. padding-top: 18rpx;
  203. padding-bottom: 18rpx;
  204. }
  205. .content .science-section .science-more image {
  206. width: 20rpx;
  207. height: 27rpx;
  208. }
  209. .content .system {
  210. width: 100%;
  211. background-color: #ffffff;
  212. margin-top: 18rpx;
  213. padding-top: 40rpx;
  214. padding-bottom: 50px;
  215. margin-bottom: 84rpx;
  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. }