index.wxss 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. /* nova-werun/pages/home/statistics/index.wxss */
  2. .all {
  3. width: 100vw;
  4. padding-top: 20rpx;
  5. overflow-y: scroll;
  6. background: linear-gradient(to bottom, #4F9AF7, #FFFFFF);
  7. color: #015EEA;
  8. }
  9. .all .number {
  10. width: 100%;
  11. height: 150rpx;
  12. display: flex;
  13. justify-content: space-between;
  14. }
  15. .all .number .num {
  16. height: 100%;
  17. width: 255rpx;
  18. display: flex;
  19. flex-direction: column;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. .all .number .num .num-num {
  24. font-size: 50rpx;
  25. margin-bottom: 18rpx;
  26. display: flex;
  27. }
  28. .all .number .num .num-num .numtext {
  29. font-size: 30rpx;
  30. display: flex;
  31. align-items: flex-end;
  32. margin-bottom: 8rpx;
  33. margin-left: 2rpx;
  34. }
  35. .all .number .num .num-text {
  36. width: 100%;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. font-size: 28rpx;
  41. }
  42. .all .number .num .num-text image {
  43. width: 40rpx;
  44. height: 40rpx;
  45. margin-right: 6rpx;
  46. }
  47. .all .circlebox {
  48. width: 100%;
  49. height: 430rpx;
  50. display: flex;
  51. justify-content: center;
  52. align-items: center;
  53. position: relative;
  54. }
  55. .all .circlebox .runbox {
  56. width: 400rpx;
  57. height: 400rpx;
  58. border-radius: 50%;
  59. background-color: white;
  60. margin-top: 10rpx;
  61. display: flex;
  62. align-items: center;
  63. justify-content: center;
  64. }
  65. .all .circlebox .runbox .run {
  66. width: 370rpx;
  67. height: 370rpx;
  68. border-radius: 50%;
  69. background-color: #9BC5F9;
  70. display: flex;
  71. align-items: center;
  72. flex-direction: column;
  73. }
  74. .all .circlebox .runbox .run .tody-steps {
  75. width: 100%;
  76. font-size: 28rpx;
  77. display: flex;
  78. justify-content: center;
  79. margin-top: 50rpx;
  80. font-weight: 600;
  81. color: white;
  82. }
  83. .all .circlebox .runbox .run .step-num {
  84. font-size: 65rpx;
  85. font-weight: 600;
  86. margin-top: 20rpx;
  87. }
  88. .all .circlebox .runbox .run .objective {
  89. width: 100%;
  90. height: 50rpx;
  91. align-items: center;
  92. justify-content: center;
  93. display: flex;
  94. margin-top: 20rpx;
  95. }
  96. .all .circlebox .runbox .run .objective image {
  97. width: 32rpx;
  98. height: 32rpx;
  99. margin-right: 10rpx;
  100. }
  101. .all .circlebox .runbox .run .objective .ob-num {
  102. font-size: 28rpx;
  103. }
  104. .all .circlebox .runbox .run .achieve {
  105. color: gray;
  106. font-size: 28rpx;
  107. margin-top: 4rpx;
  108. }
  109. .all .circlebox .image2 {
  110. position: absolute;
  111. bottom: 20rpx;
  112. right: 45rpx;
  113. width: 50rpx;
  114. height: 50rpx;
  115. }
  116. .all .sharebox {
  117. width: 100%;
  118. height: 70rpx;
  119. display: flex;
  120. justify-content: center;
  121. margin-top: 20rpx;
  122. }
  123. .all .sharebox .share {
  124. width: 210rpx;
  125. height: 60rpx;
  126. font-size: 30rpx;
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. border-radius: 30rpx;
  131. border: solid #015EEA 1px;
  132. color: #015EEA;
  133. }
  134. .all .text {
  135. width: 100%;
  136. height: 50rpx;
  137. padding-left: 40rpx;
  138. display: flex;
  139. align-items: center;
  140. margin-top: 30rpx;
  141. }
  142. .all .text .text2 {
  143. height: 50rpx;
  144. font-size: 28rpx;
  145. margin-right: 20rpx;
  146. display: flex;
  147. align-items: center;
  148. margin-right: 14rpx;
  149. }
  150. .all .text .text3 {
  151. height: 50rpx;
  152. font-size: 32rpx;
  153. margin-right: 20rpx;
  154. display: flex;
  155. align-items: center;
  156. color: white;
  157. }
  158. .all .chart {
  159. width: 100%;
  160. height: 508rpx;
  161. }
  162. .all .chart ec-canvas {
  163. width: 100%;
  164. height: 100%;
  165. }
  166. .all2 {
  167. width: 100vw;
  168. padding-top: 20rpx;
  169. padding-left: 30rpx;
  170. padding-right: 30rpx;
  171. overflow-y: scroll;
  172. background: linear-gradient(to bottom, #4F9AF7, #FFFFFF);
  173. color: #015EEA;
  174. }
  175. .all2 .card1 {
  176. width: 100%;
  177. height: 360rpx;
  178. padding: 20rpx;
  179. border: solid #015EEA 2px;
  180. border-radius: 20rpx;
  181. }
  182. .all2 .card1 .card1-title {
  183. font-size: 32rpx;
  184. display: flex;
  185. color: white;
  186. }
  187. .all2 .card1 .card1-title view {
  188. font-size: 28rpx;
  189. margin-right: 10rpx;
  190. color: #015EEA;
  191. }
  192. .all2 .card1 .card1-in {
  193. margin-top: 5rpx;
  194. font-size: 28rpx;
  195. }
  196. .all2 .card1 .card1-card {
  197. width: 100%;
  198. height: 70rpx;
  199. display: flex;
  200. align-items: flex-end;
  201. margin-top: 20rpx;
  202. margin-bottom: 20rpx;
  203. }
  204. .all2 .card1 .card1-card .card1card-number {
  205. font-size: 60rpx;
  206. }
  207. .all2 .card1 .card1-card .card1card-text {
  208. font-size: 28rpx;
  209. margin-bottom: 8rpx;
  210. margin-left: 10rpx;
  211. }
  212. .all2 .card1 .card1-card2 {
  213. width: 100%;
  214. display: flex;
  215. justify-content: space-between;
  216. margin-top: 30rpx;
  217. }
  218. .all2 .card1 .card1-card2 .card1-c2c {
  219. font-size: 34rpx;
  220. padding-left: 10rpx;
  221. padding-right: 10rpx;
  222. }
  223. .all2 .card1 .card1-card2 .card1-c2c .card1-c2ctex {
  224. display: flex;
  225. justify-content: center;
  226. align-items: center;
  227. }
  228. .all2 .card1 .card1-card2 .card1-c2c .card1-c2cnum {
  229. display: flex;
  230. justify-content: center;
  231. align-items: center;
  232. }
  233. .all2 .card1 .card1-card2 .card1-c2c:nth-child(2) {
  234. width: 300rpx;
  235. border-left: solid black 2px;
  236. border-right: solid black 2px;
  237. }
  238. .all2 .card2 {
  239. width: 100%;
  240. height: 306rpx;
  241. padding: 20rpx;
  242. padding-bottom: 0rpx;
  243. border: solid #015EEA 2px;
  244. border-radius: 20rpx;
  245. margin-top: 26rpx;
  246. }
  247. .all2 .card2 .card2-top {
  248. width: 100%;
  249. display: flex;
  250. justify-content: space-between;
  251. }
  252. .all2 .card2 .card2-top .card2-title {
  253. font-size: 32rpx;
  254. display: flex;
  255. color: white;
  256. }
  257. .all2 .card2 .card2-top .card2-title view {
  258. font-size: 28rpx;
  259. margin-right: 10rpx;
  260. color: #015EEA;
  261. }
  262. .all2 .card2 .card2-top .card2-title2 {
  263. font-size: 32rpx;
  264. margin-right: 10rpx;
  265. }
  266. .all2 .card2 .card2-bottom {
  267. width: 100%;
  268. margin-top: 40rpx;
  269. }
  270. .all2 .card2 .card2-bottom .card2-bottom1 {
  271. font-size: 28rpx;
  272. }
  273. .all2 .card2 .card2-bottom .card2-bottom2 {
  274. display: flex;
  275. align-items: flex-end;
  276. height: 70rpx;
  277. margin-top: 20rpx;
  278. }
  279. .all2 .card2 .card2-bottom .card2-bottom2 .card2-bottom2t {
  280. font-size: 60rpx;
  281. }
  282. .all2 .card2 .card2-bottom .card2-bottom2 .card2-bottom2t2 {
  283. font-size: 28rpx;
  284. margin-bottom: 8rpx;
  285. margin-left: 10rpx;
  286. }
  287. .all2 .card2 .card2-bottom .card2-bottom3 {
  288. font-size: 28rpx;
  289. margin-top: 8rpx;
  290. }
  291. .all2 .card3 {
  292. width: 100%;
  293. padding: 20rpx;
  294. padding-bottom: 0rpx;
  295. border: solid #015EEA 2px;
  296. border-radius: 20rpx;
  297. margin-top: 26rpx;
  298. }
  299. .all2 .card3 .card3-top {
  300. width: 100%;
  301. display: flex;
  302. justify-content: space-between;
  303. }
  304. .all2 .card3 .card3-top .card3-title {
  305. font-size: 32rpx;
  306. display: flex;
  307. color: white;
  308. }
  309. .all2 .card3 .card3-top .card3-title view {
  310. font-size: 28rpx;
  311. margin-right: 10rpx;
  312. color: #015EEA;
  313. }
  314. .all2 .card3 .card3-top .card3-title2 {
  315. font-size: 32rpx;
  316. margin-right: 10rpx;
  317. display: flex;
  318. }
  319. .all2 .card3 .card3-top .card3-title2 .card3-bu {
  320. width: 88rpx;
  321. height: 45rpx;
  322. font-size: 28rpx;
  323. border-radius: 20rpx;
  324. margin-left: 10rpx;
  325. border: solid #4F9AF7 2px;
  326. display: flex;
  327. justify-content: center;
  328. align-items: center;
  329. }
  330. .all2 .card3 .card3-top .card3-title2 .card3-bu2 {
  331. width: 88rpx;
  332. height: 45rpx;
  333. font-size: 28rpx;
  334. border-radius: 20rpx;
  335. margin-left: 10rpx;
  336. border: solid #4F9AF7 2px;
  337. display: flex;
  338. justify-content: center;
  339. align-items: center;
  340. background-color: #4F9AF7;
  341. color: white;
  342. }
  343. .all2 .card3 .card3-midin {
  344. width: 100%;
  345. display: flex;
  346. margin-top: 30rpx;
  347. }
  348. .all2 .card3 .card3-midin .card3-midin2 {
  349. width: 50%;
  350. display: flex;
  351. justify-content: center;
  352. align-items: center;
  353. flex-direction: column;
  354. }
  355. .all2 .card3 .card3-midin .card3-midin2 .card3-midinnum {
  356. font-size: 50rpx;
  357. }
  358. .all2 .card3 .card3-midin .card3-midin2 .card3-midintex {
  359. font-size: 30rpx;
  360. margin-top: 10rpx;
  361. }
  362. .all2 .card3 .card3-bottom {
  363. width: 100%;
  364. }
  365. .all2 .card3 .card4-bottom {
  366. width: 100%;
  367. height: auto;
  368. margin-top: 20rpx;
  369. border-radius: 15rpx;
  370. overflow: hidden;
  371. }