report.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. .report-page {
  2. min-height: 100%;
  3. background: #f7f4ed;
  4. padding: 24rpx;
  5. box-sizing: border-box;
  6. }
  7. .state-box,
  8. .state-card,
  9. .hero-card,
  10. .info-card,
  11. .section-card,
  12. .disclaimer-card {
  13. background: #fff;
  14. border-radius: 22rpx;
  15. box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.05);
  16. }
  17. .state-box,
  18. .state-card {
  19. padding: 80rpx 40rpx;
  20. text-align: center;
  21. }
  22. .state-title,
  23. .hero-title,
  24. .card-title {
  25. font-size: 32rpx;
  26. font-weight: bold;
  27. color: #2b2b2b;
  28. }
  29. .state-desc,
  30. .hero-sub,
  31. .section-content,
  32. .question-value {
  33. margin-top: 16rpx;
  34. font-size: 24rpx;
  35. color: #666;
  36. line-height: 1.8;
  37. }
  38. .state-btn {
  39. width: 240rpx;
  40. height: 82rpx;
  41. line-height: 82rpx;
  42. margin: 28rpx auto 0;
  43. border-radius: 999rpx;
  44. color: #fff;
  45. font-size: 28rpx;
  46. background: linear-gradient(135deg, #efc57b, #d4932b);
  47. }
  48. .generating-card {
  49. background: linear-gradient(180deg, #fffaf1, #ffffff);
  50. }
  51. .loading-dot {
  52. width: 28rpx;
  53. height: 28rpx;
  54. margin: 28rpx auto 0;
  55. border-radius: 50%;
  56. background: #eab86a;
  57. box-shadow: 0 0 0 20rpx rgba(234, 184, 106, 0.16);
  58. }
  59. .hero-card,
  60. .info-card,
  61. .section-card,
  62. .disclaimer-card {
  63. margin-bottom: 20rpx;
  64. padding: 28rpx;
  65. }
  66. .hero-card {
  67. background: linear-gradient(135deg, #efe2bd, #eab86a);
  68. }
  69. .hero-top {
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: flex-start;
  73. }
  74. .hero-main {
  75. flex: 1;
  76. padding-right: 18rpx;
  77. }
  78. .hero-badge-wrap {
  79. display: flex;
  80. align-items: center;
  81. }
  82. .hero-badge-icon {
  83. width: 40rpx;
  84. height: 40rpx;
  85. margin-right: 10rpx;
  86. }
  87. .hero-badge {
  88. display: inline-block;
  89. padding: 8rpx 18rpx;
  90. border-radius: 999rpx;
  91. background: rgba(255, 255, 255, 0.35);
  92. color: #6b5630;
  93. font-size: 22rpx;
  94. }
  95. .hero-title {
  96. margin-top: 14rpx;
  97. color: #4f3d1c;
  98. }
  99. .hero-sub {
  100. color: #6b5630;
  101. }
  102. .hero-status {
  103. min-width: 110rpx;
  104. height: 52rpx;
  105. padding: 0 18rpx;
  106. box-sizing: border-box;
  107. border-radius: 999rpx;
  108. background: rgba(255, 255, 255, 0.35);
  109. color: #7b5e2b;
  110. text-align: center;
  111. line-height: 52rpx;
  112. font-size: 22rpx;
  113. }
  114. .hero-stats {
  115. display: flex;
  116. flex-wrap: wrap;
  117. margin-top: 22rpx;
  118. padding-top: 20rpx;
  119. border-top: 1rpx solid rgba(255, 255, 255, 0.28);
  120. }
  121. .hero-stat {
  122. width: 33.33%;
  123. margin-bottom: 16rpx;
  124. }
  125. .hero-stat-label {
  126. font-size: 22rpx;
  127. color: rgba(79, 61, 28, 0.72);
  128. }
  129. .hero-stat-value {
  130. margin-top: 8rpx;
  131. font-size: 28rpx;
  132. font-weight: 600;
  133. color: #4f3d1c;
  134. }
  135. .disclaimer-card {
  136. background: #fff9ec;
  137. border: 1rpx solid #f0dfbc;
  138. }
  139. .card-title.small {
  140. font-size: 28rpx;
  141. }
  142. .data-list,
  143. .image-list {
  144. display: flex;
  145. flex-wrap: wrap;
  146. margin-top: 18rpx;
  147. }
  148. .card-head,
  149. .section-head {
  150. display: flex;
  151. align-items: center;
  152. }
  153. .card-accent {
  154. width: 8rpx;
  155. height: 28rpx;
  156. margin-right: 12rpx;
  157. border-radius: 999rpx;
  158. background: #d4932b;
  159. }
  160. .card-accent.warn {
  161. background: #e0a643;
  162. }
  163. .section-badge {
  164. width: 46rpx;
  165. height: 46rpx;
  166. margin-right: 12rpx;
  167. border-radius: 50%;
  168. background: #f7ead0;
  169. color: #b7802a;
  170. text-align: center;
  171. line-height: 46rpx;
  172. font-size: 22rpx;
  173. font-weight: 600;
  174. }
  175. .data-item {
  176. width: 33.33%;
  177. margin-bottom: 18rpx;
  178. }
  179. .data-key,
  180. .question-title,
  181. .image-title {
  182. font-size: 24rpx;
  183. color: #999;
  184. }
  185. .data-value {
  186. display: block;
  187. margin-top: 10rpx;
  188. font-size: 30rpx;
  189. color: #b7802a;
  190. font-weight: 600;
  191. }
  192. .question-item {
  193. margin-top: 18rpx;
  194. padding-top: 18rpx;
  195. border-top: 1rpx solid #f1f1f1;
  196. }
  197. .question-item:first-child {
  198. margin-top: 0;
  199. padding-top: 0;
  200. border-top: 0;
  201. }
  202. .image-item {
  203. width: 31%;
  204. margin-right: 3.5%;
  205. margin-bottom: 20rpx;
  206. }
  207. .image-item:nth-child(3n) {
  208. margin-right: 0;
  209. }
  210. .report-image {
  211. width: 100%;
  212. height: 190rpx;
  213. border-radius: 16rpx;
  214. background: #f3f3f3;
  215. }
  216. .image-title {
  217. margin-top: 10rpx;
  218. text-align: center;
  219. }
  220. .section-content {
  221. white-space: pre-wrap;
  222. }