Gitiles
Code Review Sign In
gerrit.lilingkun.com / echo-frontend / 01d3ff9a78a968485cfb76d1a1e26880c4742a49 / . / src / pages / UserCenter / UserProfile.css
blob: cb71be704aeca16e9614f8698f382423507f13c0 [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;
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]55 width: 80%;
56 padding-top: 10%;
Krishya73cd8822025-06-07 15:48:41 +0800[diff] [blame]57 padding-right: 10%;
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]58 padding-bottom: 10%;
59 padding-left: 10%;
Krishya73cd8822025-06-07 15:48:41 +0800[diff] [blame]60 margin-left: 3%;
61 margin-right: 5%;
62
63 /* padding: 10% 20%; */
22301009df48f962025-06-05 13:40:44 +0800[diff] [blame]64}
Krishya73cd8822025-06-07 15:48:41 +0800[diff] [blame]65
66/* .common-card {
67 background-color: #e9ded2;
68 border-radius: 16px;
69 margin: 0 auto;
70 margin-top: 40px;
71 padding: 10% 20%;
72 margin-left: 5%;
73 margin-right: 5%;
74} */
75
22301009df48f962025-06-05 13:40:44 +0800[diff] [blame]76.avatar-wrapper {
77 position: relative;
78 display: inline-block;
79}
80
81.avatar-upload-label {
82 position: absolute;
83 bottom: 0;
84 right: 0;
85 background: #3498db;
86 color: white;
87 padding: 4px 8px;
88 font-size: 12px;
89 cursor: pointer;
90 border-radius: 4px;
91 opacity: 0.85;
92}
93
94.avatar-upload-label:hover {
95 opacity: 1;
96}
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]97
98.right-content {
99 flex: 3;
100}
101
102.profile-header {
103 margin-top: -20%;
104 text-align: center;
105}
106
107.avatar {
108 width: 100px;
109 height: 100px;
110 border-radius: 50%;
111 object-fit: cover;
112}
113
114h1 {
115 font-size: 2em;
116 margin-top: 10px;
117}
118
119.profile-details {
120 margin-top: 20%;
121 font-size: 1.2em;
122}
123
124.profile-details p {
125 margin: 10px 0;
126}
127
128.profile-details strong {
129 color: #333;
130}
131
132.error {
133 color: red;
134 text-align: center;
135}
136
Krishya73cd8822025-06-07 15:48:41 +0800[diff] [blame]137
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]138
139.avatar-wrapper {
140 position: relative;
141 display: inline-block;
142}
143
144.avatar-upload-label {
145 position: absolute;
146 bottom: 0;
147 right: 0;
148 background: #3498db;
149 color: white;
150 padding: 4px 8px;
151 font-size: 12px;
152 cursor: pointer;
153 border-radius: 4px;
154 opacity: 0.85;
155}
156
157.avatar-upload-label:hover {
158 opacity: 1;
159}
160
161
162.collection-list {
163 display: flex;
164 flex-direction: column;
165 gap: 20px;
166}
167
168.collection-item {
169 cursor: pointer;
170 background-color: #f9f9f9;
171 padding: 16px;
172 border-radius: 12px;
173 transition: box-shadow 0.2s ease;
174}
175
176.collection-item:hover {
177 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
178}
179
180.collection-item h3 {
181 font-size: 1.2em;
182 margin-bottom: 8px;
183 color: #333;
184}
185
186.collection-item .content-preview {
187 color: #555;
188 font-size: 0.95em;
189 margin-bottom: 6px;
190}
191
192.collection-item .meta {
193 font-size: 0.8em;
194 color: #888;
195}
196
197.error-text {
198 color: red;
199 font-weight: bold;
200 padding: 10px;
201}
202
203.loading {
204 text-align: center;
205 font-size: 18px;
206 color: #333;
207}
208
209.task-btn {
210 margin-right: 8px;
211 padding: 6px 12px;
212 border: none;
213 border-radius: 6px;
214 background-color: #4a90e2;
215 color: white;
216 cursor: pointer;
217}
218
219.task-btn:hover {
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]220 background-color: #bd7035;
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]221}
222
223.task-btn-group {
224 margin-top: 10px;
225 display: flex;
226 flex-wrap: wrap;
227 gap: 8px;
228}
229
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]230
231.exp-bar-wrapper {
232 width: 100%;
233 height: 14px;
234 background-color: #fbfafa;
235 border-radius: 8px;
236 margin: 10px 0;
237 overflow: hidden;
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]238}
239
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]240.exp-bar {
241 height: 100%;
242 background-color: #0eb813;
243 transition: width 0.3s ease;
244}
Krishyac6b24832025-06-05 20:13:20 +0800[diff] [blame]245
Krishya6bf199c2025-06-06 21:14:23 +0800[diff] [blame]246.exp-progress-text {
247 font-size: 0.9em;
248 color: #555;
249 margin-bottom: 10px;
250}
251
252.profile-actions {
253 margin-top: 1em;
254}
255
256.profile-actions button {
257 padding: 8px 16px;
258 background-color: #4677f5;
259 color: white;
260 border: none;
261 border-radius: 6px;
262 cursor: pointer;
263}
264
265.modal {
266 position: fixed;
267 top: 0;
268 left: 0;
269 right: 0;
270 bottom: 0;
271 background-color: rgba(0, 0, 0, 0.4);
272 display: flex;
273 justify-content: center;
274 align-items: center;
275 z-index: 99;
276}
277
278.modal-content {
279 background-color: white;
280 padding: 20px;
281 border-radius: 8px;
282 width: 300px;
283}
284
285.modal-content input {
286 display: block;
287 width: 100%;
288 margin: 10px 0;
289 padding: 8px;
290}
291
292.modal-buttons {
293 display: flex;
294 justify-content: space-between;
295}