wellness.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. .wellness-page {
  2. min-height: 100%;
  3. background: #f7f4ed;
  4. padding: 24rpx;
  5. box-sizing: border-box;
  6. }
  7. .hero {
  8. background: linear-gradient(135deg, #efe2bd, #eab86a);
  9. border-radius: 24rpx;
  10. padding: 34rpx 30rpx;
  11. color: #5b4724;
  12. box-shadow: 0 16rpx 30rpx rgba(212, 147, 43, 0.15);
  13. }
  14. .hero-head {
  15. display: flex;
  16. align-items: center;
  17. }
  18. .hero-icon {
  19. width: 44rpx;
  20. height: 44rpx;
  21. margin-right: 12rpx;
  22. }
  23. .hero-badge {
  24. display: inline-block;
  25. padding: 8rpx 20rpx;
  26. border-radius: 999rpx;
  27. background: rgba(255, 255, 255, 0.45);
  28. font-size: 24rpx;
  29. margin-bottom: 18rpx;
  30. }
  31. .hero-title {
  32. font-size: 42rpx;
  33. font-weight: bold;
  34. color: #4f3d1c;
  35. }
  36. .hero-user {
  37. margin-top: 18rpx;
  38. font-size: 24rpx;
  39. color: #6b5630;
  40. }
  41. .summary-card,
  42. .feature-card,
  43. .tips-card {
  44. background: #fff;
  45. border-radius: 22rpx;
  46. box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.05);
  47. }
  48. .summary-card {
  49. margin-top: 22rpx;
  50. padding: 28rpx;
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. }
  55. .summary-title {
  56. font-size: 30rpx;
  57. font-weight: 600;
  58. color: #2b2b2b;
  59. }
  60. .summary-status {
  61. margin-top: 10rpx;
  62. font-size: 26rpx;
  63. color: #d4932b;
  64. }
  65. .summary-time {
  66. margin-top: 8rpx;
  67. font-size: 22rpx;
  68. color: #999;
  69. }
  70. .summary-text {
  71. margin-top: 12rpx;
  72. font-size: 24rpx;
  73. line-height: 1.7;
  74. color: #666;
  75. display: -webkit-box;
  76. -webkit-line-clamp: 2;
  77. -webkit-box-orient: vertical;
  78. overflow: hidden;
  79. }
  80. .summary-action {
  81. width: 150rpx;
  82. height: 62rpx;
  83. border-radius: 999rpx;
  84. background: linear-gradient(135deg, #efc57b, #d4932b);
  85. color: #fff;
  86. text-align: center;
  87. line-height: 62rpx;
  88. font-size: 24rpx;
  89. }
  90. .section-title {
  91. margin: 28rpx 8rpx 18rpx;
  92. font-size: 30rpx;
  93. font-weight: bold;
  94. color: #4c4c4c;
  95. }
  96. .feature-card {
  97. padding: 28rpx;
  98. margin-bottom: 22rpx;
  99. }
  100. .feature-card.primary {
  101. background: linear-gradient(180deg, #fffaf1, #ffffff);
  102. border: 1rpx solid #f0dfbc;
  103. }
  104. .feature-top {
  105. display: flex;
  106. justify-content: space-between;
  107. align-items: flex-start;
  108. }
  109. .feature-main {
  110. flex: 1;
  111. padding-right: 18rpx;
  112. }
  113. .feature-tag {
  114. display: inline-block;
  115. padding: 6rpx 16rpx;
  116. border-radius: 999rpx;
  117. background: #f7eedc;
  118. color: #b7802a;
  119. font-size: 22rpx;
  120. }
  121. .feature-title {
  122. margin-top: 16rpx;
  123. font-size: 34rpx;
  124. font-weight: bold;
  125. color: #2b2b2b;
  126. }
  127. .feature-subtitle {
  128. margin-top: 12rpx;
  129. font-size: 24rpx;
  130. line-height: 1.7;
  131. color: #666;
  132. }
  133. .feature-icon {
  134. width: 92rpx;
  135. height: 92rpx;
  136. box-sizing: border-box;
  137. border-radius: 24rpx;
  138. background: rgba(234, 184, 106, 0.16);
  139. display: flex;
  140. align-items: center;
  141. justify-content: center;
  142. }
  143. .feature-icon-image {
  144. width: 54rpx;
  145. height: 54rpx;
  146. }
  147. .feature-points {
  148. display: flex;
  149. flex-wrap: wrap;
  150. margin-top: 22rpx;
  151. }
  152. .feature-point {
  153. margin-right: 14rpx;
  154. margin-bottom: 14rpx;
  155. padding: 10rpx 18rpx;
  156. background: #f8f5ef;
  157. border-radius: 999rpx;
  158. font-size: 22rpx;
  159. color: #7d6a46;
  160. }
  161. .feature-btn {
  162. width: 220rpx;
  163. height: 68rpx;
  164. border-radius: 999rpx;
  165. margin-top: 10rpx;
  166. background: linear-gradient(135deg, #efc57b, #d4932b);
  167. color: #fff;
  168. text-align: center;
  169. line-height: 68rpx;
  170. font-size: 26rpx;
  171. }
  172. .feature-btn.secondary {
  173. background: #efe7d5;
  174. color: #b7802a;
  175. }
  176. .tips-card {
  177. padding: 26rpx 28rpx;
  178. margin-bottom: 24rpx;
  179. }
  180. .tips-item {
  181. position: relative;
  182. padding-left: 24rpx;
  183. margin-bottom: 16rpx;
  184. font-size: 24rpx;
  185. line-height: 1.7;
  186. color: #666;
  187. }
  188. .tips-item:last-child {
  189. margin-bottom: 0;
  190. }
  191. .tips-item::before {
  192. content: '';
  193. position: absolute;
  194. left: 0;
  195. top: 14rpx;
  196. width: 10rpx;
  197. height: 10rpx;
  198. border-radius: 50%;
  199. background: #eab86a;
  200. }