transaction.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. .page-container.data-v-a901d1cb {
  2. min-height: 100vh;
  3. background: #f5f6fb;
  4. display: flex;
  5. flex-direction: column;
  6. }
  7. .custom-navbar.data-v-a901d1cb {
  8. background: #ffffff;
  9. display: flex;
  10. align-items: center;
  11. justify-content: space-between;
  12. padding: 80rpx 32rpx 30rpx;
  13. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  14. position: relative;
  15. }
  16. .navbar-back.data-v-a901d1cb {
  17. width: 80rpx;
  18. height: 60rpx;
  19. display: flex;
  20. align-items: center;
  21. }
  22. .back-icon.data-v-a901d1cb {
  23. font-size: 40rpx;
  24. color: #222222;
  25. font-weight: bold;
  26. }
  27. .navbar-title.data-v-a901d1cb {
  28. position: absolute;
  29. left: 50%;
  30. transform: translateX(-50%);
  31. }
  32. .title-text.data-v-a901d1cb {
  33. font-size: 36rpx;
  34. font-weight: 600;
  35. color: #222222;
  36. }
  37. .navbar-placeholder.data-v-a901d1cb {
  38. width: 80rpx;
  39. }
  40. .scroll-view.data-v-a901d1cb {
  41. flex: 1;
  42. height: 0;
  43. }
  44. .content-wrapper.data-v-a901d1cb {
  45. padding: 32rpx;
  46. }
  47. .subscription-card.data-v-a901d1cb {
  48. background: #ffffff;
  49. border-radius: 24rpx;
  50. padding: 32rpx;
  51. box-shadow: 0 8rpx 24rpx rgba(37, 52, 94, 0.08);
  52. }
  53. .loading-state.data-v-a901d1cb, .empty-state.data-v-a901d1cb {
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. padding: 60rpx 40rpx;
  58. }
  59. .empty-icon.data-v-a901d1cb {
  60. font-size: 80rpx;
  61. margin-bottom: 20rpx;
  62. }
  63. .empty-text.data-v-a901d1cb {
  64. font-size: 28rpx;
  65. font-weight: 600;
  66. color: #333333;
  67. margin-bottom: 8rpx;
  68. }
  69. .empty-desc.data-v-a901d1cb {
  70. font-size: 24rpx;
  71. color: #999999;
  72. }
  73. .subscription-list.data-v-a901d1cb {
  74. display: flex;
  75. flex-direction: column;
  76. gap: 20rpx;
  77. }
  78. .subscription-item.data-v-a901d1cb {
  79. background: #f9f9fb;
  80. border-radius: 16rpx;
  81. padding: 28rpx;
  82. }
  83. .item-header.data-v-a901d1cb {
  84. display: flex;
  85. justify-content: space-between;
  86. align-items: center;
  87. margin-bottom: 20rpx;
  88. }
  89. .pool-info.data-v-a901d1cb {
  90. display: flex;
  91. align-items: center;
  92. }
  93. .pool-icon.data-v-a901d1cb {
  94. font-size: 32rpx;
  95. margin-right: 12rpx;
  96. }
  97. .pool-name.data-v-a901d1cb {
  98. font-size: 30rpx;
  99. font-weight: 700;
  100. color: #222222;
  101. }
  102. .status-badge.data-v-a901d1cb {
  103. padding: 8rpx 20rpx;
  104. border-radius: 32rpx;
  105. font-size: 24rpx;
  106. font-weight: 500;
  107. }
  108. .status-badge.active.data-v-a901d1cb {
  109. background: #e7f7ef;
  110. color: #3abf81;
  111. }
  112. .status-badge.expired.data-v-a901d1cb {
  113. background: #f5f5f5;
  114. color: #999999;
  115. }
  116. .item-body.data-v-a901d1cb {
  117. display: flex;
  118. flex-direction: column;
  119. gap: 14rpx;
  120. }
  121. .info-row.data-v-a901d1cb {
  122. display: flex;
  123. justify-content: space-between;
  124. align-items: center;
  125. }
  126. .info-label.data-v-a901d1cb {
  127. font-size: 26rpx;
  128. color: #9ca2b5;
  129. }
  130. .info-value.data-v-a901d1cb {
  131. font-size: 26rpx;
  132. color: #222222;
  133. font-weight: 500;
  134. }
  135. .info-value.price.data-v-a901d1cb {
  136. color: #f16565;
  137. font-weight: 700;
  138. }
  139. .info-value.highlight.data-v-a901d1cb {
  140. color: #5B5AEA;
  141. font-weight: 700;
  142. }
  143. .bottom-safe-area.data-v-a901d1cb {
  144. height: 80rpx;
  145. }