|
|
@ -4,92 +4,99 @@ |
|
|
<Menu |
|
|
<Menu |
|
|
@menu-click="handleSidebarClick" |
|
|
@menu-click="handleSidebarClick" |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<!-- 主内容区域 --> |
|
|
<!-- 主内容区域 --> |
|
|
<div class="main-content"> |
|
|
<div class="main-content"> |
|
|
<div class="profile-container"> |
|
|
<div class="profile-container"> |
|
|
<!-- 页面标题 --> |
|
|
<!-- 页面标题 --> |
|
|
<div class="page-header"> |
|
|
<div class="page-header"> |
|
|
<h1 class="page-title">个人主页</h1> |
|
|
<h2 class="page-title">个人中心</h2> |
|
|
<p class="page-subtitle">管理您的个人信息和账户设置</p> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="avatar-section"> |
|
|
<!-- 个人信息卡片 --> |
|
|
<div class="avatar-container"> |
|
|
<div class="profile-card"> |
|
|
<img |
|
|
<!-- 头像区域 --> |
|
|
:src="userProfile.avatar" |
|
|
<div class="avatar-section"> |
|
|
alt="用户头像" |
|
|
<div class="avatar-container"> |
|
|
|
|
|
<img |
|
|
|
|
|
:src="userProfile.avatar" |
|
|
|
|
|
alt="用户头像" |
|
|
|
|
|
class="avatar-image" |
|
|
class="avatar-image" |
|
|
@error="handleAvatarError" |
|
|
@error="handleAvatarError" |
|
|
> |
|
|
> |
|
|
<div class="avatar-overlay" @click="triggerFileInput"> |
|
|
<div class="avatar-overlay" @click="triggerFileInput"> |
|
|
<span class="camera-icon">📷</span> |
|
|
<span class="camera-icon">📷</span> |
|
|
<span class="overlay-text">更换头像</span> |
|
|
<span class="overlay-text">更换头像</span> |
|
|
</div> |
|
|
|
|
|
<input |
|
|
|
|
|
type="file" |
|
|
|
|
|
ref="fileInput" |
|
|
|
|
|
@change="handleAvatarChange" |
|
|
|
|
|
accept="image/*" |
|
|
|
|
|
class="hidden-input" |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="username-display">{{ userProfile.username }}</div> |
|
|
<input |
|
|
<div class="avatar-status"> |
|
|
type="file" |
|
|
<p v-if="avatarUploading" class="uploading-text">上传中...</p> |
|
|
ref="fileInput" |
|
|
<p v-if="avatarUploadSuccess" class="success-text">头像更新成功</p> |
|
|
@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> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 个人信息卡片 --> |
|
|
|
|
|
<div class="profile-card"> |
|
|
|
|
|
<!-- 头像区域 --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 用户信息表单 --> |
|
|
<!-- 用户信息表单 --> |
|
|
<div class="info-section"> |
|
|
<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"> |
|
|
<form class="password-form" @submit.prevent="changePassword"> |
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label for="currentPassword" class="form-label">当前密码</label> |
|
|
<label for="currentPassword" class="form-label">当前密码</label> |
|
|
<input |
|
|
<input |
|
|
type="password" |
|
|
type="password" |
|
|
id="currentPassword" |
|
|
id="currentPassword" |
|
|
v-model="passwordForm.currentPassword" |
|
|
v-model="passwordForm.currentPassword" |
|
|
class="form-input" |
|
|
class="form-input" |
|
|
placeholder="请输入当前密码" |
|
|
placeholder="请输入当前登录密码" |
|
|
required |
|
|
required |
|
|
> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="display: flex"> |
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label for="newPassword" class="form-label">新密码</label> |
|
|
<label for="newPassword" class="form-label">新密码</label> |
|
|
<input |
|
|
<input |
|
|
type="password" |
|
|
type="password" |
|
|
id="newPassword" |
|
|
id="newPassword" |
|
|
v-model="passwordForm.newPassword" |
|
|
v-model="passwordForm.newPassword" |
|
|
class="form-input" |
|
|
class="form-input" |
|
|
placeholder="请输入新密码" |
|
|
placeholder="请设置新密码(8-16位，含字母+数字)" |
|
|
required |
|
|
required style=" width: 97%;" |
|
|
> |
|
|
> |
|
|
</div> |
|
|
<div class="form-label" style="text-align: left;margin-top: 5px;font-size: 13px;font-weight: 500">密码要求:8-16位，包含字母和数字，不允许空格</div> |
|
|
|
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label for="confirmPassword" class="form-label">确认新密码</label> |
|
|
<label for="confirmPassword" class="form-label">确认新密码</label> |
|
|
<input |
|
|
<input style=" width: 100%;" |
|
|
type="password" |
|
|
type="password" |
|
|
id="confirmPassword" |
|
|
id="confirmPassword" |
|
|
v-model="passwordForm.confirmPassword" |
|
|
v-model="passwordForm.confirmPassword" |
|
|
class="form-input" |
|
|
class="form-input" |
|
|
placeholder="请再次输入新密码" |
|
|
placeholder="请再次输入新密码" |
|
|
required |
|
|
required |
|
|
> |
|
|
> |
|
|
<p v-if="passwordMismatch" class="error-text">两次输入的密码不一致</p> |
|
|
<p v-if="passwordMismatch" class="error-text">两次输入的密码不一致</p> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-actions"> |
|
|
<div class="form-actions"> |
|
|
<button type="submit" class="save-button" :disabled="passwordSaving || passwordMismatch"> |
|
|
<button type="submit" class="save-button" :disabled="passwordSaving || passwordMismatch"> |
|
|
<span v-if="!passwordSaving">修改密码</span> |
|
|
保存新密码 |
|
|
<span v-else>修改中...</span> |
|
|
</button> |
|
|
|
|
|
<button type="submit" class="reset" :disabled="passwordSaving || passwordMismatch"> |
|
|
|
|
|
重置表单 |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</form> |
|
|
@ -141,8 +148,8 @@ const errorMessage = ref(''); |
|
|
|
|
|
|
|
|
// 计算属性 |
|
|
// 计算属性 |
|
|
const passwordMismatch = computed(() => { |
|
|
const passwordMismatch = computed(() => { |
|
|
return passwordForm.value.newPassword && |
|
|
return passwordForm.value.newPassword && |
|
|
passwordForm.value.confirmPassword && |
|
|
passwordForm.value.confirmPassword && |
|
|
passwordForm.value.newPassword !== passwordForm.value.confirmPassword; |
|
|
passwordForm.value.newPassword !== passwordForm.value.confirmPassword; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
@ -168,45 +175,45 @@ const handleAvatarChange = async (event) => { |
|
|
errorMessage.value = '请选择图片文件'; |
|
|
errorMessage.value = '请选择图片文件'; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 检查文件大小 (限制为2MB) |
|
|
// 检查文件大小 (限制为2MB) |
|
|
if (file.size > 2 * 1024 * 1024) { |
|
|
if (file.size > 2 * 1024 * 1024) { |
|
|
errorMessage.value = '图片大小不能超过2MB'; |
|
|
errorMessage.value = '图片大小不能超过2MB'; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 开始上传 |
|
|
// 开始上传 |
|
|
avatarUploading.value = true; |
|
|
avatarUploading.value = true; |
|
|
avatarUploadSuccess.value = false; |
|
|
avatarUploadSuccess.value = false; |
|
|
errorMessage.value = ''; |
|
|
errorMessage.value = ''; |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
// 从localStorage获取token |
|
|
// 从localStorage获取token |
|
|
const token = localStorage.getItem('token'); |
|
|
const token = localStorage.getItem('token'); |
|
|
|
|
|
|
|
|
if (!token) { |
|
|
if (!token) { |
|
|
errorMessage.value = '用户未登录，请先登录'; |
|
|
errorMessage.value = '用户未登录，请先登录'; |
|
|
avatarUploading.value = false; |
|
|
avatarUploading.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 创建FormData对象 |
|
|
// 创建FormData对象 |
|
|
const formData = new FormData(); |
|
|
const formData = new FormData(); |
|
|
formData.append('avatar', file); |
|
|
formData.append('avatar', file); |
|
|
formData.append('token', token); |
|
|
formData.append('token', token); |
|
|
|
|
|
|
|
|
console.log('准备上传头像文件:', file.name); |
|
|
console.log('准备上传头像文件:', file.name); |
|
|
console.log('Token:', token); |
|
|
console.log('Token:', token); |
|
|
|
|
|
|
|
|
// 调用API上传头像 |
|
|
// 调用API上传头像 |
|
|
const response = await updateAvatar(formData,{ |
|
|
const response = await updateAvatar(formData,{ |
|
|
headers: { |
|
|
headers: { |
|
|
'Content-Type': 'multipart/form-data' |
|
|
'Content-Type': 'multipart/form-data' |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
console.log('收到响应:', response); |
|
|
console.log('收到响应:', response); |
|
|
|
|
|
|
|
|
if (response.success) { |
|
|
if (response.success) { |
|
|
// 使用返回的头像路径 |
|
|
// 使用返回的头像路径 |
|
|
// 确保头像URL是完整的路径 |
|
|
// 确保头像URL是完整的路径 |
|
|
@ -216,11 +223,11 @@ const handleAvatarChange = async (event) => { |
|
|
avatarPath = avatarPath; |
|
|
avatarPath = avatarPath; |
|
|
} |
|
|
} |
|
|
userProfile.value.avatar = avatarPath; |
|
|
userProfile.value.avatar = avatarPath; |
|
|
|
|
|
|
|
|
// 显示成功消息 |
|
|
// 显示成功消息 |
|
|
avatarUploadSuccess.value = true; |
|
|
avatarUploadSuccess.value = true; |
|
|
successMessage.value = '头像更新成功'; |
|
|
successMessage.value = '头像更新成功'; |
|
|
|
|
|
|
|
|
// 3秒后隐藏成功提示 |
|
|
// 3秒后隐藏成功提示 |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
avatarUploadSuccess.value = false; |
|
|
avatarUploadSuccess.value = false; |
|
|
@ -236,7 +243,7 @@ const handleAvatarChange = async (event) => { |
|
|
stack: error.stack, |
|
|
stack: error.stack, |
|
|
name: error.name |
|
|
name: error.name |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
// 提供更详细的错误信息 |
|
|
// 提供更详细的错误信息 |
|
|
if (error.response) { |
|
|
if (error.response) { |
|
|
// 服务器响应了错误状态码 |
|
|
// 服务器响应了错误状态码 |
|
|
@ -261,12 +268,12 @@ const updateProfile = () => { |
|
|
profileSaving.value = true; |
|
|
profileSaving.value = true; |
|
|
errorMessage.value = ''; |
|
|
errorMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
|
|
|
|
|
|
// 模拟API请求 |
|
|
// 模拟API请求 |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
profileSaving.value = false; |
|
|
profileSaving.value = false; |
|
|
successMessage.value = '个人信息更新成功'; |
|
|
successMessage.value = '个人信息更新成功'; |
|
|
|
|
|
|
|
|
// 3秒后隐藏成功提示 |
|
|
// 3秒后隐藏成功提示 |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
successMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
@ -279,38 +286,38 @@ const changePassword = async () => { |
|
|
if (passwordMismatch.value) { |
|
|
if (passwordMismatch.value) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
passwordSaving.value = true; |
|
|
passwordSaving.value = true; |
|
|
errorMessage.value = ''; |
|
|
errorMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
// 从localStorage获取token |
|
|
// 从localStorage获取token |
|
|
const token = localStorage.getItem('token'); |
|
|
const token = localStorage.getItem('token'); |
|
|
|
|
|
|
|
|
if (!token) { |
|
|
if (!token) { |
|
|
errorMessage.value = '用户未登录，请先登录'; |
|
|
errorMessage.value = '用户未登录，请先登录'; |
|
|
passwordSaving.value = false; |
|
|
passwordSaving.value = false; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 调用API修改密码 |
|
|
// 调用API修改密码 |
|
|
const response = await updatePassword({ |
|
|
const response = await updatePassword({ |
|
|
token, |
|
|
token, |
|
|
currentPassword: passwordForm.value.currentPassword, |
|
|
currentPassword: passwordForm.value.currentPassword, |
|
|
newPassword: passwordForm.value.newPassword |
|
|
newPassword: passwordForm.value.newPassword |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
if (response.success) { |
|
|
if (response.success) { |
|
|
successMessage.value = '密码修改成功'; |
|
|
successMessage.value = '密码修改成功'; |
|
|
|
|
|
|
|
|
// 清空表单 |
|
|
// 清空表单 |
|
|
passwordForm.value = { |
|
|
passwordForm.value = { |
|
|
currentPassword: '', |
|
|
currentPassword: '', |
|
|
newPassword: '', |
|
|
newPassword: '', |
|
|
confirmPassword: '' |
|
|
confirmPassword: '' |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 3秒后隐藏成功提示 |
|
|
// 3秒后隐藏成功提示 |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
successMessage.value = ''; |
|
|
successMessage.value = ''; |
|
|
@ -331,15 +338,15 @@ onMounted(async () => { |
|
|
try { |
|
|
try { |
|
|
// 从localStorage获取token |
|
|
// 从localStorage获取token |
|
|
const token = localStorage.getItem('token'); |
|
|
const token = localStorage.getItem('token'); |
|
|
|
|
|
|
|
|
console.log('Profile组件挂载，获取到的token:', token); |
|
|
console.log('Profile组件挂载，获取到的token:', token); |
|
|
|
|
|
|
|
|
if (token) { |
|
|
if (token) { |
|
|
// 调用API获取用户信息 |
|
|
// 调用API获取用户信息 |
|
|
const response = await getUserProfile(token); |
|
|
const response = await getUserProfile(token); |
|
|
|
|
|
|
|
|
console.log('获取用户信息响应:', response); |
|
|
console.log('获取用户信息响应:', response); |
|
|
|
|
|
|
|
|
if (response.success) { |
|
|
if (response.success) { |
|
|
// 更新用户信息 |
|
|
// 更新用户信息 |
|
|
// 如果头像路径是相对路径，需要添加服务器前缀 |
|
|
// 如果头像路径是相对路径，需要添加服务器前缀 |
|
|
@ -347,9 +354,9 @@ onMounted(async () => { |
|
|
if (avatarUrl.startsWith('/resource/')) { |
|
|
if (avatarUrl.startsWith('/resource/')) { |
|
|
avatarUrl = avatarUrl; // 相对路径，直接使用 |
|
|
avatarUrl = avatarUrl; // 相对路径，直接使用 |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
console.log('设置头像URL:', avatarUrl); |
|
|
console.log('设置头像URL:', avatarUrl); |
|
|
|
|
|
|
|
|
userProfile.value = { |
|
|
userProfile.value = { |
|
|
username: response.user.username, |
|
|
username: response.user.username, |
|
|
avatar: avatarUrl |
|
|
avatar: avatarUrl |
|
|
@ -357,7 +364,7 @@ onMounted(async () => { |
|
|
} else { |
|
|
} else { |
|
|
console.error('获取用户信息失败:', response.message); |
|
|
console.error('获取用户信息失败:', response.message); |
|
|
errorMessage.value = response.message || '获取用户信息失败'; |
|
|
errorMessage.value = response.message || '获取用户信息失败'; |
|
|
|
|
|
|
|
|
// 如果是token过期或无效，清除token并跳转到登录页 |
|
|
// 如果是token过期或无效，清除token并跳转到登录页 |
|
|
if (response.message && response.message.includes('登录')) { |
|
|
if (response.message && response.message.includes('登录')) { |
|
|
localStorage.removeItem('token'); |
|
|
localStorage.removeItem('token'); |
|
|
@ -376,40 +383,23 @@ onMounted(async () => { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.app-container { |
|
|
|
|
|
|
|
|
.app-container{ |
|
|
display: flex; |
|
|
display: flex; |
|
|
height: 100vh; |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
.main-content { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
background-color: #F5F8FF; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
|
|
|
overflow: auto;; |
|
|
padding: 1.5rem; |
|
|
padding: 1.5rem; |
|
|
overflow-y: auto; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background-color: #f5f7fa; |
|
|
|
|
|
transition: margin-left 0.3s ease; |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 确保左侧导航栏完全固定 */ |
|
|
|
|
|
.app-container > :first-child { |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 为右侧内容添加左边距，避免被固定导航栏遮挡 */ |
|
|
|
|
|
.main-content { |
|
|
|
|
|
margin-left: 240px; /* 与Menu.vue中的sidebar-container宽度相同 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 当菜单折叠时调整内容区域 */ |
|
|
|
|
|
.app-container:has(.sidebar-container.collapsed) .main-content { |
|
|
|
|
|
margin-left: 60px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.profile-container { |
|
|
.profile-container { |
|
|
max-width: 700px; |
|
|
width: 97%; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -418,13 +408,30 @@ onMounted(async () => { |
|
|
margin-bottom: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.page-title { |
|
|
.page-title { |
|
|
font-size: 1.5rem; |
|
|
font-size: 20px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
color: #1f2937; |
|
|
padding-left: 12px; |
|
|
margin: 0 0 0.5rem 0; |
|
|
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 { |
|
|
.page-subtitle { |
|
|
color: #6b7280; |
|
|
color: #6b7280; |
|
|
margin: 0; |
|
|
margin: 0; |
|
|
@ -450,13 +457,12 @@ onMounted(async () => { |
|
|
/* 个人信息卡片 */ |
|
|
/* 个人信息卡片 */ |
|
|
.profile-card { |
|
|
.profile-card { |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
border-radius: 0.5rem; |
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
|
|
padding: 1.5rem; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
max-width: 600px; |
|
|
|
|
|
margin-left: auto; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
margin-right: auto; |
|
|
|
|
|
box-shadow: 2px -1px 14px 9px #EBF1FF; |
|
|
|
|
|
border-radius: 18px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 头像区域样式 */ |
|
|
/* 头像区域样式 */ |
|
|
@ -465,14 +471,17 @@ onMounted(async () => { |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-bottom: 2rem; |
|
|
margin-bottom: 2rem; |
|
|
padding-bottom: 1.5rem; |
|
|
padding: 20px; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
box-shadow: 2px -1px 14px 9px #EBF1FF; |
|
|
|
|
|
border-radius: 18px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.avatar-container { |
|
|
.avatar-container { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 100px; |
|
|
width: 140px; |
|
|
height: 100px; |
|
|
height: 140px; |
|
|
margin-bottom: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -525,11 +534,14 @@ onMounted(async () => { |
|
|
|
|
|
|
|
|
.username-display { |
|
|
.username-display { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
font-size: 1.125rem; |
|
|
font-size: 12px; |
|
|
font-weight: 600; |
|
|
color: #1356F2; |
|
|
color: #1f2937; |
|
|
|
|
|
margin-top: 0.75rem; |
|
|
margin-top: 0.75rem; |
|
|
margin-bottom: 0.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
|
|
|
background-color: #E8F0FF; |
|
|
|
|
|
padding: 10px 13px; |
|
|
|
|
|
border-radius: 5px; |
|
|
|
|
|
font-weight:600; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.uploading-text, .success-text { |
|
|
.uploading-text, .success-text { |
|
|
@ -545,28 +557,34 @@ onMounted(async () => { |
|
|
color: #10b981; |
|
|
color: #10b981; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 信息区域样式 */ |
|
|
|
|
|
.info-section { |
|
|
|
|
|
margin-bottom: 1.5rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.section-title { |
|
|
.section-title { |
|
|
font-size: 1.125rem; |
|
|
font-size: 17px; |
|
|
font-weight: 600; |
|
|
margin-bottom: 10px; |
|
|
color: #1f2937; |
|
|
padding-left: 12px; |
|
|
margin: 0 0 1rem 0; |
|
|
position: relative; |
|
|
padding-bottom: 0.5rem; |
|
|
display: flex; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
align-items: center; |
|
|
text-align: 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 { |
|
|
.profile-form, .password-form { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
gap: 13px; |
|
|
max-width: 400px; |
|
|
margin-top: 15px; |
|
|
margin: 0 auto; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-group { |
|
|
.form-group { |
|
|
@ -576,20 +594,22 @@ onMounted(async () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-label { |
|
|
.form-label { |
|
|
font-size: 0.875rem; |
|
|
font-size: 15px; |
|
|
font-weight: 500; |
|
|
text-align: left; |
|
|
color: #374151; |
|
|
font-weight: bold; |
|
|
|
|
|
color: #8d929a; |
|
|
margin-bottom: 0.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-input { |
|
|
.form-input { |
|
|
padding: 0.625rem 0.875rem; |
|
|
padding: 0.625rem 0.875rem; |
|
|
border: 1px solid #d1d5db; |
|
|
border: 2px solid #EBF1FF; |
|
|
border-radius: 0.375rem; |
|
|
border-radius: 0.375rem; |
|
|
font-size: 0.875rem; |
|
|
font-size: 0.875rem; |
|
|
transition: border-color 0.2s; |
|
|
transition: border-color 0.2s; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
background-color: #F5F8FF; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-input:focus { |
|
|
.form-input:focus { |
|
|
@ -608,38 +628,43 @@ onMounted(async () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.form-actions { |
|
|
.form-actions { |
|
|
display: flex; |
|
|
text-align: left; |
|
|
justify-content: center; |
|
|
margin-top: -2px; |
|
|
margin-top: 1rem; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.save-button { |
|
|
.save-button { |
|
|
background-color: #3b82f6; |
|
|
background-color: #1558F6; |
|
|
color: white; |
|
|
color: white; |
|
|
border: none; |
|
|
border: none; |
|
|
border-radius: 0.375rem; |
|
|
|
|
|
padding: 0.625rem 1.25rem; |
|
|
padding: 0.625rem 1.25rem; |
|
|
font-size: 0.875rem; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
transition: background-color 0.2s; |
|
|
min-width: 120px; |
|
|
min-width: 120px; |
|
|
|
|
|
border-radius: 7px; |
|
|
|
|
|
margin-right: 15px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.save-button:hover:not(:disabled) { |
|
|
.reset { |
|
|
background-color: #2563eb; |
|
|
background-color: #F5F8FF; |
|
|
} |
|
|
color: #8d929a; |
|
|
|
|
|
padding: 0.625rem 1.25rem; |
|
|
.save-button:disabled { |
|
|
font-size: 0.875rem; |
|
|
background-color: #9ca3af; |
|
|
font-weight: 500; |
|
|
cursor: not-allowed; |
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
min-width: 120px; |
|
|
|
|
|
border-radius: 7px; |
|
|
|
|
|
border: 2px solid #EBF1FF; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 错误和成功消息样式 */ |
|
|
/* 错误和成功消息样式 */ |
|
|
.error-text { |
|
|
.error-text { |
|
|
color: #ef4444; |
|
|
color: #ef4444; |
|
|
font-size: 0.75rem; |
|
|
text-align: left; |
|
|
margin-top: 0.25rem; |
|
|
margin-top: 5px; |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
font-weight: 500; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.success-message, .error-message { |
|
|
.success-message, .error-message { |
|
|
|
