index.wxss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. .dashboard-container.data-v-a869e244 {
  2. padding: 30rpx 20rpx;
  3. background-color: #f8f9fa;
  4. min-height: 100vh;
  5. }
  6. .header-card.data-v-a869e244 {
  7. display: flex;
  8. justify-content: space-between;
  9. align-items: center;
  10. padding: 30rpx;
  11. background: linear-gradient(135deg, #4CAF50, #2E7D32);
  12. border-radius: 20rpx;
  13. margin-bottom: 24rpx;
  14. box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.2);
  15. }
  16. .header-card .header-left.data-v-a869e244 {
  17. flex: 1;
  18. }
  19. .header-card .header-right.data-v-a869e244 {
  20. display: flex;
  21. align-items: center;
  22. }
  23. .header-card .user-avatar.data-v-a869e244 {
  24. width: 90rpx;
  25. height: 90rpx;
  26. border-radius: 50%;
  27. overflow: hidden;
  28. background-color: #ffffff;
  29. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  30. }
  31. .header-card .user-avatar .avatar-svg.data-v-a869e244 {
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .header-card .welcome-text.data-v-a869e244 {
  36. font-size: 38rpx;
  37. font-weight: bold;
  38. color: #ffffff;
  39. margin-bottom: 12rpx;
  40. }
  41. .header-card .plot-info.data-v-a869e244 {
  42. display: flex;
  43. align-items: center;
  44. flex-wrap: wrap;
  45. }
  46. .header-card .plot-info .plot-label.data-v-a869e244 {
  47. font-size: 28rpx;
  48. color: rgba(255, 255, 255, 0.9);
  49. margin-right: 4rpx;
  50. }
  51. .header-card .plot-info .plot-name.data-v-a869e244 {
  52. font-size: 28rpx;
  53. color: #ffffff;
  54. font-weight: 500;
  55. margin-right: 16rpx;
  56. }
  57. .header-card .plot-info .switch-plot-btn.data-v-a869e244 {
  58. display: flex;
  59. align-items: center;
  60. background-color: rgba(255, 255, 255, 0.2);
  61. border-radius: 30rpx;
  62. padding: 4rpx 16rpx;
  63. margin-left: 8rpx;
  64. }
  65. .header-card .plot-info .switch-plot-btn text.data-v-a869e244 {
  66. font-size: 24rpx;
  67. color: #ffffff;
  68. margin-left: 4rpx;
  69. }
  70. .stats-grid.data-v-a869e244 {
  71. display: grid;
  72. grid-template-columns: repeat(2, 1fr);
  73. gap: 20rpx;
  74. margin-bottom: 24rpx;
  75. }
  76. .stats-grid .stat-card.data-v-a869e244 {
  77. background-color: #ffffff;
  78. border-radius: 16rpx;
  79. padding: 24rpx;
  80. display: flex;
  81. flex-direction: column;
  82. align-items: center;
  83. justify-content: center;
  84. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  85. }
  86. .stats-grid .stat-card .stat-content.data-v-a869e244 {
  87. display: flex;
  88. flex-direction: column;
  89. align-items: center;
  90. text-align: center;
  91. }
  92. .stats-grid .stat-card .stat-content .stat-value.data-v-a869e244 {
  93. font-size: 40rpx;
  94. font-weight: bold;
  95. color: #333;
  96. margin-bottom: 10rpx;
  97. }
  98. .stats-grid .stat-card .stat-content .stat-label.data-v-a869e244 {
  99. font-size: 26rpx;
  100. color: #666;
  101. }
  102. .section-card.data-v-a869e244 {
  103. background-color: #ffffff;
  104. border-radius: 16rpx;
  105. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  106. margin-bottom: 24rpx;
  107. overflow: hidden;
  108. }
  109. .section-card .card-header.data-v-a869e244 {
  110. display: flex;
  111. justify-content: space-between;
  112. align-items: center;
  113. padding: 20rpx 24rpx;
  114. border-bottom: 1px solid #f0f0f0;
  115. }
  116. .section-card .card-header .card-title.data-v-a869e244 {
  117. display: flex;
  118. align-items: center;
  119. }
  120. .section-card .card-header .card-title .title-icon.data-v-a869e244 {
  121. display: flex;
  122. align-items: center;
  123. margin-right: 12rpx;
  124. }
  125. .section-card .card-header .card-title .title-icon .icon-dot.data-v-a869e244 {
  126. width: 12rpx;
  127. height: 12rpx;
  128. border-radius: 6rpx;
  129. background-color: #4CAF50;
  130. }
  131. .section-card .card-header .card-title .title-text.data-v-a869e244 {
  132. font-size: 30rpx;
  133. font-weight: bold;
  134. color: #333;
  135. }
  136. .section-card .card-header .more-link.data-v-a869e244 {
  137. display: flex;
  138. align-items: center;
  139. }
  140. .section-card .card-header .more-link text.data-v-a869e244 {
  141. font-size: 24rpx;
  142. color: #4CAF50;
  143. margin-right: 6rpx;
  144. }
  145. .section-card .card-body.data-v-a869e244 {
  146. padding: 0;
  147. border: 1rpx solid rgba(76, 175, 80, 0.15);
  148. border-radius: 10rpx;
  149. overflow: hidden;
  150. box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.03);
  151. }
  152. .section-card .card-body .activity-item.data-v-a869e244:not(:last-child) {
  153. position: relative;
  154. }
  155. .section-card .card-body .activity-item.data-v-a869e244:not(:last-child):after {
  156. content: "";
  157. position: absolute;
  158. left: 0;
  159. right: 0;
  160. bottom: 0;
  161. height: 1rpx;
  162. background-color: #f2f2f2;
  163. }
  164. .activity-header.data-v-a869e244 {
  165. display: flex;
  166. margin-bottom: 0;
  167. padding-bottom: 18rpx;
  168. padding-top: 18rpx;
  169. border-bottom: 1rpx solid rgba(76, 175, 80, 0.1);
  170. background-color: rgba(76, 175, 80, 0.07);
  171. border-radius: 8rpx 8rpx 0 0;
  172. }
  173. .activity-header .activity-header-right.data-v-a869e244 {
  174. flex: 1;
  175. display: flex;
  176. justify-content: space-between;
  177. align-items: center;
  178. }
  179. .activity-header .activity-header-right .header-title.data-v-a869e244 {
  180. flex: 1.5;
  181. font-size: 28rpx;
  182. color: #4CAF50;
  183. font-weight: bold;
  184. padding-left: 30rpx;
  185. text-align: left;
  186. }
  187. .activity-header .activity-header-right .header-executor.data-v-a869e244 {
  188. font-size: 28rpx;
  189. color: #4CAF50;
  190. font-weight: bold;
  191. width: 180rpx;
  192. text-align: center;
  193. }
  194. .activity-header .activity-header-right .header-date.data-v-a869e244 {
  195. font-size: 28rpx;
  196. color: #4CAF50;
  197. font-weight: bold;
  198. min-width: 250rpx;
  199. text-align: center;
  200. margin-right: 20rpx;
  201. }
  202. .activity-header .activity-header-right .header-action.data-v-a869e244 {
  203. width: 36rpx;
  204. }
  205. .activity-item.data-v-a869e244 {
  206. display: flex;
  207. margin-bottom: 0;
  208. padding: 24rpx 0;
  209. border-bottom: 1rpx solid #f2f2f2;
  210. height: 60rpx;
  211. }
  212. .activity-item.data-v-a869e244:last-child {
  213. border-bottom-left-radius: 8rpx;
  214. border-bottom-right-radius: 8rpx;
  215. }
  216. .activity-item .activity-right.data-v-a869e244 {
  217. flex: 1;
  218. display: flex;
  219. justify-content: space-between;
  220. align-items: center;
  221. padding-bottom: 0;
  222. border-bottom: none;
  223. height: 100%;
  224. }
  225. .activity-item .activity-right .activity-content.data-v-a869e244 {
  226. flex: 1.5;
  227. padding-left: 30rpx;
  228. height: 100%;
  229. display: flex;
  230. align-items: center;
  231. }
  232. .activity-item .activity-right .activity-content .activity-title.data-v-a869e244 {
  233. font-size: 28rpx;
  234. color: #333;
  235. font-weight: 500;
  236. text-align: left;
  237. line-height: 1.4;
  238. }
  239. .activity-item .activity-right .activity-executor.data-v-a869e244 {
  240. font-size: 28rpx;
  241. color: #666;
  242. width: 180rpx;
  243. text-align: center;
  244. height: 100%;
  245. display: flex;
  246. align-items: center;
  247. justify-content: center;
  248. }
  249. .activity-item .activity-right .activity-date.data-v-a869e244 {
  250. font-size: 28rpx;
  251. color: #999;
  252. text-align: center;
  253. margin-right: 20rpx;
  254. min-width: 250rpx;
  255. height: 100%;
  256. display: flex;
  257. align-items: center;
  258. justify-content: center;
  259. }
  260. .activity-item .activity-right .activity-action.data-v-a869e244 {
  261. width: 36rpx;
  262. }
  263. .weather-card .card-body.data-v-a869e244 {
  264. padding: 0;
  265. background: #ffffff;
  266. border-radius: 12rpx;
  267. overflow: hidden;
  268. }
  269. .weather-card .weather-main.data-v-a869e244 {
  270. padding: 30rpx;
  271. }
  272. .weather-card .weather-top.data-v-a869e244 {
  273. display: flex;
  274. margin-bottom: 0;
  275. }
  276. .weather-card .weather-left.data-v-a869e244 {
  277. display: flex;
  278. align-items: flex-start;
  279. gap: 20rpx;
  280. }
  281. .weather-card .weather-icon-large.data-v-a869e244 {
  282. width: 48rpx;
  283. height: 48rpx;
  284. margin-top: 6rpx;
  285. flex-shrink: 0;
  286. }
  287. .weather-card .weather-info .temp-row.data-v-a869e244 {
  288. display: flex;
  289. align-items: center;
  290. gap: 16rpx;
  291. }
  292. .weather-card .weather-info .temp-row .temp-display.data-v-a869e244 {
  293. display: flex;
  294. align-items: flex-start;
  295. }
  296. .weather-card .weather-info .temp-row .temp-display .weather-temp.data-v-a869e244 {
  297. font-size: 48rpx;
  298. font-weight: 500;
  299. color: #333;
  300. line-height: 1;
  301. }
  302. .weather-card .weather-info .temp-row .temp-display .temp-unit.data-v-a869e244 {
  303. font-size: 24rpx;
  304. color: #666;
  305. margin-top: 6rpx;
  306. margin-left: 2rpx;
  307. }
  308. .weather-card .weather-info .temp-row .weather-desc.data-v-a869e244 {
  309. font-size: 28rpx;
  310. color: #666;
  311. margin-top: 4rpx;
  312. }
  313. .weather-card .weather-advice.data-v-a869e244 {
  314. background: #F8FFF9;
  315. border: 2rpx solid rgba(76, 175, 80, 0.15);
  316. border-radius: 12rpx;
  317. padding: 24rpx;
  318. margin-top: 24rpx;
  319. }
  320. .weather-card .weather-advice .advice-header.data-v-a869e244 {
  321. display: flex;
  322. align-items: center;
  323. gap: 8rpx;
  324. margin-bottom: 12rpx;
  325. }
  326. .weather-card .weather-advice .advice-header .advice-title.data-v-a869e244 {
  327. font-size: 28rpx;
  328. color: #4CAF50;
  329. font-weight: 500;
  330. }
  331. .weather-card .weather-advice .advice-content.data-v-a869e244 {
  332. font-size: 26rpx;
  333. color: #333;
  334. line-height: 1.5;
  335. }
  336. .weather-metrics.data-v-a869e244 {
  337. display: flex;
  338. justify-content: space-between;
  339. align-items: center;
  340. padding: 20rpx 30rpx;
  341. border-top: 2rpx solid #f5f5f5;
  342. }
  343. .weather-metrics .metric-item.data-v-a869e244 {
  344. flex: 1;
  345. display: flex;
  346. flex-direction: column;
  347. align-items: center;
  348. }
  349. .weather-metrics .metric-item .metric-label.data-v-a869e244 {
  350. font-size: 24rpx;
  351. color: #999;
  352. margin-bottom: 8rpx;
  353. }
  354. .weather-metrics .metric-item .metric-value.data-v-a869e244 {
  355. font-size: 28rpx;
  356. color: #333;
  357. font-weight: 500;
  358. }
  359. .weather-metrics .metric-divider.data-v-a869e244 {
  360. width: 2rpx;
  361. height: 40rpx;
  362. background: #f0f0f0;
  363. margin: 0 20rpx;
  364. }
  365. @keyframes rotate-a869e244 {
  366. from {
  367. transform: rotate(0deg);
  368. }
  369. to {
  370. transform: rotate(360deg);
  371. }
  372. }
  373. @keyframes float-a869e244 {
  374. 0%, 100% {
  375. transform: translateY(0);
  376. }
  377. 50% {
  378. transform: translateY(-6rpx);
  379. }
  380. }
  381. @keyframes rainDrop-a869e244 {
  382. 0%, 100% {
  383. transform: translateY(0);
  384. }
  385. 50% {
  386. transform: translateY(2rpx);
  387. }
  388. }
  389. .plot-selector.data-v-a869e244 {
  390. background-color: #ffffff;
  391. border-radius: 24rpx 24rpx 0 0;
  392. overflow: hidden;
  393. }
  394. .plot-selector .plot-selector-header.data-v-a869e244 {
  395. display: flex;
  396. justify-content: space-between;
  397. align-items: center;
  398. padding: 30rpx;
  399. border-bottom: 1rpx solid #f0f0f0;
  400. }
  401. .plot-selector .plot-selector-header .plot-selector-title.data-v-a869e244 {
  402. font-size: 32rpx;
  403. font-weight: bold;
  404. color: #333;
  405. }
  406. .plot-selector .plot-selector-body.data-v-a869e244 {
  407. max-height: 60vh;
  408. overflow-y: auto;
  409. padding: 0 30rpx;
  410. }
  411. .plot-selector .plot-selector-body .plot-selector-item.data-v-a869e244 {
  412. display: flex;
  413. justify-content: space-between;
  414. align-items: center;
  415. padding: 30rpx 0;
  416. border-bottom: 1rpx solid #f0f0f0;
  417. }
  418. .plot-selector .plot-selector-body .plot-selector-item.data-v-a869e244:last-child {
  419. border-bottom: none;
  420. }
  421. .plot-selector .plot-selector-body .plot-selector-item.active .plot-name.data-v-a869e244 {
  422. color: #4CAF50;
  423. font-weight: bold;
  424. }
  425. .plot-selector .plot-selector-body .plot-selector-item .plot-name.data-v-a869e244 {
  426. font-size: 30rpx;
  427. color: #333;
  428. }
  429. .stats-section.data-v-a869e244 {
  430. margin: 40rpx 32rpx;
  431. }
  432. .stats-section .stats-grid.data-v-a869e244 {
  433. display: grid;
  434. grid-template-columns: repeat(2, 1fr);
  435. gap: 40rpx 32rpx;
  436. }
  437. .stats-section .stat-card.data-v-a869e244 {
  438. background: #FAFAFA;
  439. border-radius: 24rpx;
  440. padding: 32rpx;
  441. box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
  442. min-height: 320rpx;
  443. display: flex;
  444. flex-direction: column;
  445. transition: all 0.3s ease;
  446. }
  447. .stats-section .stat-card.data-v-a869e244:hover {
  448. transform: translateY(-2rpx);
  449. box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
  450. }
  451. .stats-section .stat-card .card-header.data-v-a869e244 {
  452. display: flex;
  453. align-items: center;
  454. justify-content: center;
  455. margin-bottom: 32rpx;
  456. gap: 16rpx;
  457. }
  458. .stats-section .stat-card .card-header .icon-badge.data-v-a869e244 {
  459. width: 48rpx;
  460. height: 48rpx;
  461. border-radius: 50%;
  462. display: flex;
  463. align-items: center;
  464. justify-content: center;
  465. background: linear-gradient(135deg, var(--primary-color, #4CAF50), var(--primary-dark, #2E7D32));
  466. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  467. }
  468. .stats-section .stat-card .card-header .icon-badge .icon.data-v-a869e244 {
  469. font-size: 24rpx;
  470. }
  471. .stats-section .stat-card .card-header .card-title.data-v-a869e244 {
  472. font-size: 32rpx;
  473. color: #333;
  474. font-weight: 600;
  475. }
  476. .stats-section .stat-card .card-content.data-v-a869e244 {
  477. flex: 1;
  478. display: flex;
  479. flex-direction: column;
  480. justify-content: space-between;
  481. }
  482. .stats-section .stat-card .card-content .main-stats.data-v-a869e244 {
  483. display: flex;
  484. justify-content: space-around;
  485. gap: 24rpx;
  486. margin-bottom: 32rpx;
  487. }
  488. .stats-section .stat-card .card-content .main-stats .stat-item.data-v-a869e244 {
  489. flex: 1;
  490. text-align: center;
  491. }
  492. .stats-section .stat-card .card-content .main-stats .stat-item .number.data-v-a869e244 {
  493. font-size: 48rpx;
  494. font-weight: 600;
  495. color: #333;
  496. line-height: 1.5;
  497. display: block;
  498. animation: numberChange-a869e244 0.5s ease-out;
  499. }
  500. .stats-section .stat-card .card-content .main-stats .stat-item .label.data-v-a869e244 {
  501. font-size: 24rpx;
  502. color: #999;
  503. line-height: 1.5;
  504. display: block;
  505. margin-top: 8rpx;
  506. }
  507. .stats-section .stat-card .card-content .main-stats .stat-item .progress-circle.data-v-a869e244 {
  508. width: 96rpx;
  509. height: 96rpx;
  510. margin: 0 auto;
  511. border-radius: 50%;
  512. background: conic-gradient(var(--primary-color, #4CAF50) 80%, #f0f0f0 80%);
  513. display: flex;
  514. align-items: center;
  515. justify-content: center;
  516. position: relative;
  517. }
  518. .stats-section .stat-card .card-content .main-stats .stat-item .progress-circle.data-v-a869e244::after {
  519. content: "";
  520. position: absolute;
  521. width: 80rpx;
  522. height: 80rpx;
  523. background: #FAFAFA;
  524. border-radius: 50%;
  525. }
  526. .stats-section .stat-card .card-content .main-stats .stat-item .progress-circle .progress-text.data-v-a869e244 {
  527. font-size: 28rpx;
  528. font-weight: 600;
  529. color: #333;
  530. z-index: 1;
  531. }
  532. .stats-section .stat-card .card-content .sub-info.data-v-a869e244 {
  533. display: flex;
  534. align-items: center;
  535. justify-content: center;
  536. gap: 8rpx;
  537. padding: 16rpx;
  538. background: rgba(0, 0, 0, 0.02);
  539. border-radius: 12rpx;
  540. }
  541. .stats-section .stat-card .card-content .sub-info .emoji.data-v-a869e244 {
  542. font-size: 28rpx;
  543. }
  544. .stats-section .stat-card .card-content .sub-info .info-text.data-v-a869e244 {
  545. font-size: 24rpx;
  546. color: #666;
  547. line-height: 1.5;
  548. }
  549. .stats-section .stat-card .card-content .sub-info.warning.data-v-a869e244 {
  550. background: rgba(255, 167, 38, 0.1);
  551. }
  552. .stats-section .stat-card .card-content .sub-info.warning .info-text.data-v-a869e244 {
  553. color: #F57C00;
  554. }
  555. @keyframes numberChange-a869e244 {
  556. from {
  557. opacity: 0;
  558. transform: translateY(10rpx);
  559. }
  560. to {
  561. opacity: 1;
  562. transform: translateY(0);
  563. }
  564. }