diff --git a/src/pages/UserCenter/index.module.css b/src/pages/UserCenter/index.module.css
new file mode 100644
index 0000000..3728909
--- /dev/null
+++ b/src/pages/UserCenter/index.module.css
@@ -0,0 +1,90 @@
+.userCenterContainer {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.userCenterCard {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tabContent {
+  padding: 16px 0;
+}
+
+.tabHeader {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 60px 0;
+  color: #999;
+}
+
+.emptyState p {
+  margin-top: 16px;
+  font-size: 16px;
+}
+
+.paymentModal {
+  text-align: center;
+}
+
+.paymentInfo {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f9f9f9;
+  border-radius: 8px;
+}
+
+.paymentInfo h3 {
+  margin: 0 0 8px 0;
+  color: #1890ff;
+}
+
+.paymentInfo p {
+  margin: 4px 0;
+  color: #666;
+}
+
+.qrCode {
+  margin: 24px 0;
+}
+
+.qrCodePlaceholder {
+  padding: 24px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.mockQrCode {
+  width: 120px;
+  height: 120px;
+  margin: 16px auto;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+
+.mockQrCode p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.paymentActions {
+  margin-top: 24px;
+} 
\ No newline at end of file