.settings-container { padding: 20rpx; min-height: 100vh; transition: all 0.3s ease; } .section { background-color: #fff; border-radius: 12rpx; margin-bottom: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); transition: all 0.3s ease; } .user-section { display: flex; flex-direction: column; align-items: center; padding: 40rpx 0; } .user-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 30rpx; } .user-avatar { width: 120rpx; height: 120rpx; border-radius: 50%; margin-bottom: 20rpx; border: 4rpx solid #E7624F; } .user-name { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; } .logout-btn, .login-btn { width: 240rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; margin-top: 20rpx; padding: 0; font-size: 28rpx; border: none; } .logout-btn { background-color: #E7624F; color: #fff; } .login-btn { background-color: #4CAF50; color: #fff; } .login-tip { text-align: center; margin-top: 20rpx; } .login-text { color: #fff; } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0; border-bottom: 1rpx solid #f0f0f0; } .item-title { font-size: 30rpx; } .item-arrow { color: #999; font-size: 30rpx; } /* 深色主题适配 */ .dark-theme .section { background-color: #333 !important; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.2); } .dark-theme .item-title { color: #f5f5f5 !important; } .dark-theme .item-arrow { color: #aaa !important; } .dark-theme .setting-item { border-bottom-color: #444 !important; }