Gitiles
Code Review Sign In
gerrit.lilingkun.com / echo-frontend / 4158f3aee9cd516bbfa3af73a2cad65bb8a91750 / . / src / pages / UserCenter / UserProfile.css
blob: de2ecace938a10c19076072ae60d5fa8b0d03827 [file] [log] [blame]
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]1.user-center {
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]2 max-width: 100%;
3 padding: 3%;
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]4 font-family: Arial, sans-serif;
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]5 display: flex;
6 gap: 10%;
Krishya57cc17b2025-05-26 16:43:34 +0800[diff] [blame]7 background: #333;
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]8}
9
10
11.right-content {
12 flex: 3;
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]13}
14
15.profile-header {
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]16 margin-top: -20%;
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]17 text-align: center;
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]18}
19
20.avatar {
21 width: 100px;
22 height: 100px;
23 border-radius: 50%;
24 object-fit: cover;
25}
26
27h1 {
28 font-size: 2em;
29 margin-top: 10px;
30}
31
32.profile-details {
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]33 margin-top: 20%;
2230100924e5c0f2025-04-15 21:31:12 +0800[diff] [blame]34 font-size: 1.2em;
35}
36
37.profile-details p {
38 margin: 10px 0;
39}
40
41.profile-details strong {
42 color: #333;
43}
44
45.error {
46 color: red;
47 text-align: center;
Krishyac0f7e9b2025-04-22 15:28:28 +0800[diff] [blame]48}
49
50.common-card {
51 background-color: #e9ded2;
52 border-radius: 16px;
53 margin: 0 auto;
54 margin-top: 40px;
55 padding: 10% 20%;
56 margin-left: 5%;
57 margin-right: 5%;
22301009df48f962025-06-05 13:40:44 +0800[diff] [blame]58}
59.avatar-wrapper {
60 position: relative;
61 display: inline-block;
62}
63
64.avatar-upload-label {
65 position: absolute;
66 bottom: 0;
67 right: 0;
68 background: #3498db;
69 color: white;
70 padding: 4px 8px;
71 font-size: 12px;
72 cursor: pointer;
73 border-radius: 4px;
74 opacity: 0.85;
75}
76
77.avatar-upload-label:hover {
78 opacity: 1;
79}
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]80
81.right-content {
82 flex: 3;
83}
84
85.profile-header {
86 margin-top: -20%;
87 text-align: center;
88}
89
90.avatar {
91 width: 100px;
92 height: 100px;
93 border-radius: 50%;
94 object-fit: cover;
95}
96
97h1 {
98 font-size: 2em;
99 margin-top: 10px;
100}
101
102.profile-details {
103 margin-top: 20%;
104 font-size: 1.2em;
105}
106
107.profile-details p {
108 margin: 10px 0;
109}
110
111.profile-details strong {
112 color: #333;
113}
114
115.error {
116 color: red;
117 text-align: center;
118}
119
120.common-card {
121 background-color: #e9ded2;
122 border-radius: 16px;
123 margin: 0 auto;
124 margin-top: 40px;
125 padding: 10% 20%;
126 margin-left: 5%;
127 margin-right: 5%;
128}
129
130.avatar-wrapper {
131 position: relative;
132 display: inline-block;
133}
134
135.avatar-upload-label {
136 position: absolute;
137 bottom: 0;
138 right: 0;
139 background: #3498db;
140 color: white;
141 padding: 4px 8px;
142 font-size: 12px;
143 cursor: pointer;
144 border-radius: 4px;
145 opacity: 0.85;
146}
147
148.avatar-upload-label:hover {
149 opacity: 1;
150}
151
152
153.collection-list {
154 display: flex;
155 flex-direction: column;
156 gap: 20px;
157}
158
159.collection-item {
160 cursor: pointer;
161 background-color: #f9f9f9;
162 padding: 16px;
163 border-radius: 12px;
164 transition: box-shadow 0.2s ease;
165}
166
167.collection-item:hover {
168 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
169}
170
171.collection-item h3 {
172 font-size: 1.2em;
173 margin-bottom: 8px;
174 color: #333;
175}
176
177.collection-item .content-preview {
178 color: #555;
179 font-size: 0.95em;
180 margin-bottom: 6px;
181}
182
183.collection-item .meta {
184 font-size: 0.8em;
185 color: #888;
186}
187
188.error-text {
189 color: red;
190 font-weight: bold;
191 padding: 10px;
192}
193
194.loading {
195 text-align: center;
196 font-size: 18px;
197 color: #333;
198}
199
200.task-btn {
201 margin-right: 8px;
202 padding: 6px 12px;
203 border: none;
204 border-radius: 6px;
205 background-color: #4a90e2;
206 color: white;
207 cursor: pointer;
208}
209
210.task-btn:hover {
211 background-color: #357abd;
212}
213
214.task-btn-group {
215 margin-top: 10px;
216 display: flex;
217 flex-wrap: wrap;
218 gap: 8px;
219}
220
221.loading {
222 text-align: center;
223 font-size: 18px;
224 color: #333;
225}
226
227