settings.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. .settings-container {
  2. padding: 20rpx;
  3. min-height: 100vh;
  4. transition: all 0.3s ease;
  5. }
  6. .section {
  7. background-color: #fff;
  8. border-radius: 12rpx;
  9. margin-bottom: 20rpx;
  10. padding: 30rpx;
  11. box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  12. transition: all 0.3s ease;
  13. }
  14. .user-section {
  15. display: flex;
  16. flex-direction: column;
  17. align-items: center;
  18. padding: 40rpx 0;
  19. }
  20. .user-info {
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. margin-bottom: 30rpx;
  25. }
  26. .user-avatar {
  27. width: 120rpx;
  28. height: 120rpx;
  29. border-radius: 50%;
  30. margin-bottom: 20rpx;
  31. border: 4rpx solid #E7624F;
  32. }
  33. .user-name {
  34. font-size: 32rpx;
  35. font-weight: bold;
  36. margin-bottom: 20rpx;
  37. }
  38. .logout-btn, .login-btn {
  39. width: 240rpx;
  40. height: 80rpx;
  41. line-height: 80rpx;
  42. border-radius: 40rpx;
  43. margin-top: 20rpx;
  44. padding: 0;
  45. font-size: 28rpx;
  46. border: none;
  47. }
  48. .logout-btn {
  49. background-color: #E7624F;
  50. color: #fff;
  51. }
  52. .login-btn {
  53. background-color: #4CAF50;
  54. color: #fff;
  55. }
  56. .login-tip {
  57. text-align: center;
  58. margin-top: 20rpx;
  59. }
  60. .login-text {
  61. color: #fff;
  62. }
  63. .setting-item {
  64. display: flex;
  65. justify-content: space-between;
  66. align-items: center;
  67. padding: 20rpx 0;
  68. border-bottom: 1rpx solid #f0f0f0;
  69. }
  70. .item-title {
  71. font-size: 30rpx;
  72. }
  73. .item-arrow {
  74. color: #999;
  75. font-size: 30rpx;
  76. }
  77. /* 深色主题适配 */
  78. .dark-theme .section {
  79. background-color: #333 !important;
  80. box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.2);
  81. }
  82. .dark-theme .item-title {
  83. color: #f5f5f5 !important;
  84. }
  85. .dark-theme .item-arrow {
  86. color: #aaa !important;
  87. }
  88. .dark-theme .setting-item {
  89. border-bottom-color: #444 !important;
  90. }