settings.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /* pages/settings/settings.wxss */
  2. .container {
  3. padding: 20rpx;
  4. padding-bottom: 40rpx;
  5. background-color: #f5f5f5;
  6. min-height: 100vh;
  7. }
  8. /* 用户信息 */
  9. .user-header {
  10. display: flex;
  11. align-items: center;
  12. background-color: #fff;
  13. border-radius: 16rpx;
  14. padding: 30rpx;
  15. margin-bottom: 20rpx;
  16. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  17. }
  18. .avatar {
  19. margin-right: 30rpx;
  20. }
  21. .avatar-image {
  22. width: 120rpx;
  23. height: 120rpx;
  24. border-radius: 50%;
  25. border: 4rpx solid #FF6B6B;
  26. }
  27. .user-info {
  28. flex: 1;
  29. }
  30. .user-name {
  31. font-size: 36rpx;
  32. font-weight: bold;
  33. color: #333;
  34. display: block;
  35. margin-bottom: 10rpx;
  36. }
  37. .user-role {
  38. font-size: 28rpx;
  39. color: #FF6B6B;
  40. background-color: rgba(255, 107, 107, 0.1);
  41. padding: 4rpx 16rpx;
  42. border-radius: 20rpx;
  43. display: inline-block;
  44. margin-right: 10rpx;
  45. }
  46. .user-family {
  47. font-size: 28rpx;
  48. color: #666;
  49. display: inline-block;
  50. }
  51. /* 区块 */
  52. .section {
  53. background-color: #fff;
  54. border-radius: 16rpx;
  55. margin-bottom: 20rpx;
  56. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  57. overflow: hidden;
  58. }
  59. .section-header {
  60. padding: 30rpx;
  61. border-bottom: 1rpx solid #f0f0f0;
  62. }
  63. .section-title {
  64. font-size: 32rpx;
  65. font-weight: bold;
  66. color: #333;
  67. }
  68. .section-content {
  69. padding: 0 30rpx;
  70. }
  71. /* 菜单项 */
  72. .menu-item {
  73. display: flex;
  74. align-items: center;
  75. padding: 30rpx 0;
  76. border-bottom: 1rpx solid #f0f0f0;
  77. }
  78. .menu-item:last-child {
  79. border-bottom: none;
  80. }
  81. .menu-icon {
  82. font-size: 40rpx;
  83. margin-right: 20rpx;
  84. }
  85. .menu-text {
  86. flex: 1;
  87. font-size: 30rpx;
  88. color: #333;
  89. }
  90. .menu-arrow {
  91. font-size: 28rpx;
  92. color: #ccc;
  93. }
  94. .menu-value {
  95. font-size: 28rpx;
  96. color: #999;
  97. margin-right: 10rpx;
  98. }
  99. /* 孩子选择器 */
  100. .child-selector {
  101. padding: 30rpx 0;
  102. border-bottom: 1rpx solid #f0f0f0;
  103. }
  104. .picker-value {
  105. padding: 20rpx;
  106. border: 2rpx solid #eee;
  107. border-radius: 12rpx;
  108. text-align: center;
  109. font-size: 30rpx;
  110. color: #333;
  111. }
  112. /* 孩子信息 */
  113. .child-info {
  114. padding: 30rpx 0;
  115. border-bottom: 1rpx solid #f0f0f0;
  116. }
  117. .child-info-item {
  118. display: flex;
  119. justify-content: space-between;
  120. align-items: center;
  121. padding: 10rpx 0;
  122. }
  123. .info-label {
  124. font-size: 28rpx;
  125. color: #666;
  126. }
  127. .info-value {
  128. font-size: 28rpx;
  129. color: #333;
  130. font-weight: bold;
  131. }
  132. .info-value.points {
  133. color: #FF6B6B;
  134. }
  135. /* 设置项 */
  136. .setting-item {
  137. display: flex;
  138. justify-content: space-between;
  139. align-items: center;
  140. padding: 30rpx 0;
  141. border-bottom: 1rpx solid #f0f0f0;
  142. }
  143. .setting-item:last-child {
  144. border-bottom: none;
  145. }
  146. .setting-label {
  147. font-size: 30rpx;
  148. color: #333;
  149. }
  150. /* 退出登录 */
  151. .logout-section {
  152. margin-top: 40rpx;
  153. padding: 0 20rpx;
  154. }
  155. .logout-btn {
  156. background-color: #fff;
  157. color: #F44336;
  158. border: 2rpx solid #F44336;
  159. border-radius: 50rpx;
  160. padding: 24rpx;
  161. font-size: 32rpx;
  162. font-weight: bold;
  163. }
  164. .logout-btn::after {
  165. border: none;
  166. }