+
+
+
{
margin-bottom: 1.5rem;
}
+
+
.page-title {
- font-size: 1.5rem;
- font-weight: 600;
- color: #1f2937;
- margin: 0 0 0.5rem 0;
+ font-size: 20px;
+ margin-bottom: 20px;
+ padding-left: 12px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ color: #165DFF;
+ margin-left: 15px;
}
+.page-title::before {
+ content: '';
+ width: 6px;
+ height: 18px;
+ background-color: #165DFF;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 5px;
+}
.page-subtitle {
color: #6b7280;
margin: 0;
@@ -433,12 +453,12 @@ onMounted(async () => {
/* 个人信息卡片 */
.profile-card {
background-color: #fff;
- border-radius: 0.5rem;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
+ box-shadow: 2px -1px 14px 9px #EBF1FF;
+ border-radius: 18px;
}
/* 头像区域样式 */
@@ -447,14 +467,17 @@ onMounted(async () => {
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
- padding-bottom: 1.5rem;
+ padding: 20px;
border-bottom: 1px solid #e5e7eb;
+ background-color: #fff;
+ box-shadow: 2px -1px 14px 9px #EBF1FF;
+ border-radius: 18px;
}
.avatar-container {
position: relative;
- width: 100px;
- height: 100px;
+ width: 120px;
+ height: 120px;
margin-bottom: 1rem;
}
@@ -507,11 +530,14 @@ onMounted(async () => {
.username-display {
text-align: center;
- font-size: 1.125rem;
- font-weight: 600;
- color: #1f2937;
+ font-size: 12px;
+ color: #1356F2;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
+ background-color: #E8F0FF;
+ padding: 10px 13px;
+ border-radius: 5px;
+ font-weight:600;
}
.uploading-text, .success-text {
@@ -530,25 +556,39 @@ onMounted(async () => {
/* 信息区域样式 */
.info-section {
margin-bottom: 1.5rem;
+
}
+
+
.section-title {
- font-size: 1.125rem;
- font-weight: 600;
- color: #1f2937;
- margin: 0 0 1rem 0;
- padding-bottom: 0.5rem;
- border-bottom: 1px solid #e5e7eb;
- text-align: center;
+ font-size: 17px;
+ margin-bottom: 10px;
+ padding-left: 12px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ color: #165DFF;
+ margin-top: 0px;
}
+.section-title::before {
+ content: '';
+ width: 6px;
+ height: 17px;
+ background-color: #165DFF;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 5px;
+}
/* 表单样式 */
.profile-form, .password-form {
display: flex;
flex-direction: column;
gap: 1rem;
- max-width: 400px;
- margin: 0 auto;
+ margin-top: 15px;
}
.form-group {
@@ -559,19 +599,21 @@ onMounted(async () => {
.form-label {
font-size: 0.875rem;
- font-weight: 500;
- color: #374151;
+ text-align: left;
+ font-weight: bold;
+ color: #8d929a;
margin-bottom: 0.5rem;
}
.form-input {
padding: 0.625rem 0.875rem;
- border: 1px solid #d1d5db;
+ border: 2px solid #EBF1FF;
border-radius: 0.375rem;
font-size: 0.875rem;
transition: border-color 0.2s;
width: 100%;
box-sizing: border-box;
+ background-color: #F5F8FF;
}
.form-input:focus {
@@ -590,8 +632,7 @@ onMounted(async () => {
}
.form-actions {
- display: flex;
- justify-content: center;
+ text-align: left;
margin-top: 1rem;
}