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