index.wxss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. .mine-page.data-v-569e925a {
  2. width: 100%;
  3. height: 100vh;
  4. background: #f7f8fa;
  5. position: relative;
  6. display: flex;
  7. flex-direction: column;
  8. overflow: hidden;
  9. }
  10. .mine-scroll.data-v-569e925a {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. /* 隐藏滚动条 */
  15. .mine-scroll.data-v-569e925a ::-webkit-scrollbar {
  16. width: 0 !important;
  17. height: 0 !important;
  18. color: transparent !important;
  19. display: none !important;
  20. }
  21. /* 顶部定制背景:高级渐变蓝 + 柔和弧度 */
  22. .header-bg-shape.data-v-569e925a {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 380rpx;
  28. background: linear-gradient(135deg, #C1001C 0%, #F4D4F 100%);
  29. border-bottom-left-radius: 60rpx;
  30. border-bottom-right-radius: 60rpx;
  31. z-index: 1;
  32. box-shadow: 0 10rpx 30rpx rgba(193, 0, 28, 0.15);
  33. }
  34. .header-bg-gradient.data-v-569e925a {
  35. width: 100%;
  36. height: 100%;
  37. background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
  38. border-bottom-left-radius: 60rpx;
  39. border-bottom-right-radius: 60rpx;
  40. }
  41. /* 标题栏已恢复为原生,此处仅需正常的容器内边距即可 */
  42. .content-wrapper.data-v-569e925a {
  43. position: relative;
  44. z-index: 2;
  45. flex: 1;
  46. display: flex;
  47. flex-direction: column;
  48. padding: 40rpx 30rpx 0;
  49. box-sizing: border-box;
  50. }
  51. /* 用户信息卡片 */
  52. .user-card.data-v-569e925a {
  53. background: #fff;
  54. border-radius: 32rpx;
  55. padding: 50rpx 40rpx;
  56. display: flex;
  57. align-items: center;
  58. margin-bottom: 30rpx;
  59. margin-top: 20rpx;
  60. box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.05);
  61. }
  62. .user-card.unlogged.data-v-569e925a {
  63. cursor: pointer;
  64. }
  65. .avatar-box.data-v-569e925a {
  66. width: 130rpx;
  67. height: 130rpx;
  68. border-radius: 65rpx;
  69. background: #f5f6f7;
  70. margin-right: 30rpx;
  71. overflow: hidden;
  72. border: 4rpx solid #fff;
  73. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  74. }
  75. .gray-avatar.data-v-569e925a {
  76. background: #f0f0f0;
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. }
  81. .avatar-img.data-v-569e925a {
  82. width: 100%;
  83. height: 100%;
  84. }
  85. .info-box.data-v-569e925a {
  86. flex: 1;
  87. display: flex;
  88. flex-direction: column;
  89. justify-content: center;
  90. }
  91. .nickname.data-v-569e925a {
  92. font-size: 40rpx;
  93. font-weight: bold;
  94. color: #1a1a1a;
  95. margin-bottom: 12rpx;
  96. }
  97. .login-hint.data-v-569e925a {
  98. color: #333;
  99. }
  100. .tags-row.data-v-569e925a {
  101. display: flex;
  102. align-items: center;
  103. margin-bottom: 12rpx;
  104. }
  105. .customer-tag.data-v-569e925a {
  106. font-size: 24rpx;
  107. color: #C1001C;
  108. background: rgba(193, 0, 28, 0.1);
  109. padding: 6rpx 16rpx;
  110. border-radius: 8rpx;
  111. font-weight: 500;
  112. }
  113. .phone-text.data-v-569e925a {
  114. font-size: 26rpx;
  115. color: #999;
  116. }
  117. /* 设置图标 & 右侧箭头 */
  118. .settings-btn.data-v-569e925a {
  119. width: 60rpx;
  120. height: 60rpx;
  121. display: flex;
  122. align-items: center;
  123. justify-content: center;
  124. }
  125. .settings-icon.data-v-569e925a {
  126. width: 44rpx;
  127. height: 44rpx;
  128. opacity: 0.6;
  129. }
  130. .arrow-icon-right.data-v-569e925a {
  131. width: 24rpx;
  132. height: 24rpx;
  133. opacity: 0.4;
  134. }
  135. /* 通用卡片样式 */
  136. .section-card.data-v-569e925a {
  137. background: #fff;
  138. border-radius: 24rpx;
  139. padding: 40rpx 30rpx;
  140. margin-bottom: 30rpx;
  141. box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.02);
  142. }
  143. /* 订单统计区块 */
  144. .section-header.data-v-569e925a {
  145. display: flex;
  146. justify-content: space-between;
  147. align-items: center;
  148. margin-bottom: 40rpx;
  149. }
  150. .section-title.data-v-569e925a {
  151. font-size: 32rpx;
  152. font-weight: bold;
  153. color: #333;
  154. }
  155. .more-link.data-v-569e925a {
  156. display: flex;
  157. align-items: center;
  158. font-size: 26rpx;
  159. color: #999;
  160. }
  161. .arrow-icon.data-v-569e925a {
  162. width: 20rpx;
  163. height: 20rpx;
  164. opacity: 0.5;
  165. margin-left: 6rpx;
  166. position: relative;
  167. top: 2rpx;
  168. }
  169. .stat-grid.data-v-569e925a {
  170. display: flex;
  171. justify-content: space-around;
  172. }
  173. .stat-item.data-v-569e925a {
  174. display: flex;
  175. flex-direction: column;
  176. align-items: center;
  177. }
  178. .stat-icon.data-v-569e925a {
  179. width: 56rpx;
  180. height: 56rpx;
  181. margin-bottom: 16rpx;
  182. opacity: 0.8;
  183. }
  184. .stat-label.data-v-569e925a {
  185. font-size: 26rpx;
  186. color: #666;
  187. }
  188. /* 菜单列表区块 */
  189. .menu-card.data-v-569e925a {
  190. padding: 10rpx 30rpx;
  191. }
  192. .menu-item.data-v-569e925a {
  193. display: flex;
  194. justify-content: space-between;
  195. align-items: center;
  196. padding: 36rpx 0;
  197. border-bottom: 1rpx solid #f5f6f7;
  198. }
  199. .menu-item.data-v-569e925a:last-child {
  200. border-bottom: none;
  201. }
  202. .menu-left.data-v-569e925a {
  203. display: flex;
  204. align-items: center;
  205. }
  206. .menu-icon.data-v-569e925a {
  207. width: 44rpx;
  208. height: 44rpx;
  209. margin-right: 20rpx;
  210. opacity: 0.7;
  211. }
  212. .menu-label.data-v-569e925a {
  213. font-size: 30rpx;
  214. color: #333;
  215. }
  216. /* 退出登录 */
  217. .logout-section.data-v-569e925a {
  218. margin-top: 40rpx;
  219. }
  220. .logout-btn.data-v-569e925a {
  221. width: 100%;
  222. height: 96rpx;
  223. background: #fff;
  224. color: #ff5e5e;
  225. border-radius: 24rpx;
  226. display: flex;
  227. align-items: center;
  228. justify-content: center;
  229. font-size: 32rpx;
  230. font-weight: bold;
  231. border: none;
  232. box-shadow: 0 4rpx 20rpx rgba(255, 94, 94, 0.05);
  233. transition: all 0.2s;
  234. }
  235. .logout-btn.data-v-569e925a:active {
  236. background: #fff0f0;
  237. }
  238. button.data-v-569e925a::after {
  239. border: none;
  240. }
  241. .bottom-placeholder.data-v-569e925a {
  242. height: 180rpx;
  243. }