rewards-all.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. body { background-color: #F7F8FA;
  2. }
  3. .container { min-height: 100vh; background-color: #F7F8FA;
  4. }
  5. .tab-bar {
  6. display: flex;
  7. background-color: #fff;
  8. padding: 0 0.9375rem;
  9. }
  10. .tab-item {
  11. padding: 0.5625rem 0.5rem 0;
  12. font-size: 0.875rem;
  13. color: #999;
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. }
  18. .tab-item:first-child { padding-left: 0;
  19. }
  20. .tab-item.active { color: #FF9800; font-weight: bold;
  21. }
  22. /* 下划线正常流,自然居中 */
  23. .tab-line {
  24. width: 1rem;
  25. height: 0.09375rem;
  26. background-color: #FF9800;
  27. border-radius: 0.0625rem;
  28. margin-top: 0.25rem;
  29. align-self: center;
  30. }
  31. .main-scroll { flex: 1; padding: 0.5rem 0;
  32. }
  33. .month-group {
  34. background-color: #fff;
  35. border-radius: 0.5rem;
  36. padding: 0 0.75rem;
  37. margin: 0 0.9375rem 0.5rem;
  38. overflow: hidden;
  39. }
  40. .month-header {
  41. display: flex;
  42. align-items: center;
  43. padding: 0.625rem 0;
  44. border-bottom: 0.03125rem solid #f5f5f5;
  45. }
  46. .month-title {
  47. font-size: 0.9375rem;
  48. font-weight: bold;
  49. color: #333;
  50. margin-right: 0.375rem;
  51. }
  52. .month-summary { display: flex;
  53. }
  54. .month-sum-text { font-size: 0.6875rem; color: #999; margin-right: 0.3125rem;
  55. }
  56. .record-item {
  57. display: flex;
  58. align-items: center;
  59. padding: 0.75rem 0;
  60. border-bottom: 0.03125rem solid #f9f9f9;
  61. }
  62. .ri-icon {
  63. width: 2.25rem;
  64. height: 2.25rem;
  65. border-radius: 50%;
  66. background-color: #FFF3E0;
  67. display: flex;
  68. align-items: center;
  69. justify-content: center;
  70. margin-right: 0.625rem;
  71. flex-shrink: 0;
  72. }
  73. .ri-icon.ri-penalty { background-color: #FAFAFA;
  74. }
  75. .ri-icon-text {
  76. font-size: 0.9375rem;
  77. color: #FF9800;
  78. font-weight: bold;
  79. }
  80. .ri-icon.ri-penalty .ri-icon-text { color: #ccc;
  81. }
  82. .ri-content { flex: 1;
  83. }
  84. .ri-title-row { display: flex; align-items: center; margin-bottom: 0.1875rem;
  85. }
  86. .ri-date { font-size: 0.8125rem; color: #333; font-weight: bold; margin-right: 0.3125rem;
  87. }
  88. .ri-title { font-size: 0.8125rem; color: #333;
  89. }
  90. .ri-desc { font-size: 0.75rem; color: #999;
  91. }
  92. .ri-right {
  93. display: flex;
  94. flex-direction: column;
  95. align-items: flex-end;
  96. margin-left: 0.5rem;
  97. }
  98. .ri-amount { font-size: 0.9375rem; font-weight: bold; margin-bottom: 0.125rem;
  99. }
  100. .ri-amount.positive { color: #FF5722;
  101. }
  102. .ri-amount.negative { color: #333;
  103. }
  104. .ri-status { font-size: 0.6875rem;
  105. }
  106. .ri-status.pending { color: #FF9800;
  107. }
  108. .ri-status.credited { color: #999;
  109. }
  110. .ri-status.deducted { color: #999;
  111. }