|
|
|
@ -10,44 +10,45 @@ |
|
|
|
<div class="profile-container"> |
|
|
|
<!-- 页面标题 --> |
|
|
|
<div class="page-header"> |
|
|
|
<h1 class="page-title">个人主页</h1> |
|
|
|
<p class="page-subtitle">管理您的个人信息和账户设置</p> |
|
|
|
<h2 class="page-title">个人中心</h2> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 个人信息卡片 --> |
|
|
|
<div class="profile-card"> |
|
|
|
<!-- 头像区域 --> |
|
|
|
<div class="avatar-section"> |
|
|
|
<div class="avatar-container"> |
|
|
|
<img |
|
|
|
<div class="avatar-section"> |
|
|
|
<div class="avatar-container"> |
|
|
|
<img |
|
|
|
:src="userProfile.avatar" |
|
|
|
alt="用户头像" |
|
|
|
class="avatar-image" |
|
|
|
@error="handleAvatarError" |
|
|
|
> |
|
|
|
<div class="avatar-overlay" @click="triggerFileInput"> |
|
|
|
<span class="camera-icon">📷</span> |
|
|
|
<span class="overlay-text">更换头像</span> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
> |
|
|
|
<div class="avatar-overlay" @click="triggerFileInput"> |
|
|
|
<span class="camera-icon">📷</span> |
|
|
|
<span class="overlay-text">更换头像</span> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
type="file" |
|
|
|
ref="fileInput" |
|
|
|
@change="handleAvatarChange" |
|
|
|
accept="image/*" |
|
|
|
class="hidden-input" |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="username-display">{{ userProfile.username }}</div> |
|
|
|
<div class="avatar-status"> |
|
|
|
<p v-if="avatarUploading" class="uploading-text">上传中...</p> |
|
|
|
<p v-if="avatarUploadSuccess" class="success-text">头像更新成功</p> |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="username-display">{{ userProfile.username }}</div> |
|
|
|
<div class="avatar-status"> |
|
|
|
<p v-if="avatarUploading" class="uploading-text">上传中...</p> |
|
|
|
<p v-if="avatarUploadSuccess" class="success-text">头像更新成功</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 个人信息卡片 --> |
|
|
|
<div class="profile-card"> |
|
|
|
<!-- 头像区域 --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 用户信息表单 --> |
|
|
|
<div class="info-section"> |
|
|
|
<h2 class="section-title">修改密码</h2> |
|
|
|
<div style="border-bottom: 3px solid #F5F8FF;"> |
|
|
|
<h2 class="section-title">修改密码</h2> |
|
|
|
</div> |
|
|
|
<form class="password-form" @submit.prevent="changePassword"> |
|
|
|
<div class="form-group"> |
|
|
|
<label for="currentPassword" class="form-label">当前密码</label> |
|
|
|
@ -56,7 +57,7 @@ |
|
|
|
id="currentPassword" |
|
|
|
v-model="passwordForm.currentPassword" |
|
|
|
class="form-input" |
|
|
|
placeholder="请输入当前密码" |
|
|
|
placeholder="请输入当前登录密码" |
|
|
|
required |
|
|
|
> |
|
|
|
</div> |
|
|
|
@ -68,11 +69,13 @@ |
|
|
|
id="newPassword" |
|
|
|
v-model="passwordForm.newPassword" |
|
|
|
class="form-input" |
|
|
|
placeholder="请输入新密码" |
|
|
|
placeholder="请设置新密码(8-16位，含字母+数字)" |
|
|
|
required |
|
|
|
> |
|
|
|
<div class="form-label" style="text-align: left;margin-top: 7px;font-size: 12px;font-weight: 500">密码要求:8-16位，包含字母和数字，不允许空格</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
<label for="confirmPassword" class="form-label">确认新密码</label> |
|
|
|
<input |
|
|
|
@ -401,13 +404,30 @@ onMounted(async () => { |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
|
