feat：学员中心：资料页面对接；教师后台：个人中心对接
This commit is contained in:
yuk255
parent
b093dcd630
commit
6a8078e272
@ -7,3 +7,9 @@ export class ActivityListApi {
|
||||
return ApiRequest.get('/aiol/aiolActivity/list')
|
||||
}
|
||||
}
|
||||
|
||||
export class UserInfoApi {
|
||||
static async editUserInfo(data: any): Promise<any> {
|
||||
return ApiRequest.post('/aiol/aiolUser/edit_profile', data)
|
||||
}
|
||||
}
|
||||
|
||||
@ -208,7 +208,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { useMessage } from "naive-ui";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { UploadApi } from "@/api/modules/upload";
|
||||
import { UserInfoApi } from "@/api/modules/userCenter";
|
||||
import { AuthApi } from "@/api/modules/auth";
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
@ -250,9 +256,47 @@ function startEdit() {
|
||||
isEditing.value = true;
|
||||
}
|
||||
|
||||
function save() {
|
||||
// 可在此接入后端提交逻辑
|
||||
async function save() {
|
||||
isEditing.value = false;
|
||||
|
||||
//判断必填
|
||||
if (!formData.name) {
|
||||
message.error("姓名不能为空");
|
||||
return;
|
||||
}
|
||||
// 调用修改用户信息接口
|
||||
try {
|
||||
const data = {
|
||||
realname: formData.name,
|
||||
avatar: avatar.value,
|
||||
tag: formData.intro,
|
||||
};
|
||||
|
||||
const response = await UserInfoApi.editUserInfo(data);
|
||||
if (response.data.code === 200) {
|
||||
message.success("用户信息修改成功");
|
||||
const userInfoResponse = await AuthApi.getUserInfo();
|
||||
|
||||
if (userInfoResponse.success && userInfoResponse.result) {
|
||||
// 将后端用户信息转换为前端格式
|
||||
const convertedUser = AuthApi.convertBackendUserToUser(
|
||||
userInfoResponse.result
|
||||
);
|
||||
|
||||
// 保存转换后的用户信息
|
||||
userStore.user = convertedUser;
|
||||
localStorage.setItem("user", JSON.stringify(convertedUser));
|
||||
|
||||
} else {
|
||||
console.warn("⚠️ 获取用户信息失败，使用登录返回的基本信息");
|
||||
}
|
||||
} else {
|
||||
message.error("用户信息修改失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("用户信息修改错误:", error);
|
||||
message.error("用户信息修改失败，请重试");
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
@ -292,7 +336,7 @@ function triggerUpload() {
|
||||
fileInput.value?.click();
|
||||
}
|
||||
|
||||
function handleFileChange(event: Event) {
|
||||
async function handleFileChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
if (!file) return;
|
||||
@ -309,15 +353,35 @@ function handleFileChange(event: Event) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建预览
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
avatar.value = e.target?.result as string;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// 上传头像到服务器
|
||||
try {
|
||||
message.loading("正在上传头像...");
|
||||
|
||||
// 清空input值，避免选择同一文件时不触发change
|
||||
const response: any = await UploadApi.uploadCourseThumbnail(
|
||||
file,
|
||||
0,
|
||||
(progress) => {
|
||||
console.log(`上传进度: ${progress}%`);
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.destroyAll();
|
||||
avatar.value = response.data.message;
|
||||
message.success("头像上传成功");
|
||||
console.log("上传的头像URL:", response.message);
|
||||
} else {
|
||||
message.error("头像上传失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("头像上传错误:", error);
|
||||
message.error("头像上传失败，请重试");
|
||||
} finally {
|
||||
// 清空input值，允许重新选择同一个文件
|
||||
if (target) {
|
||||
target.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -111,12 +111,12 @@
|
||||
: "时间待定"
|
||||
}}</span
|
||||
>
|
||||
<img
|
||||
<!-- <img
|
||||
class="thumbnail_8"
|
||||
referrerpolicy="no-referrer"
|
||||
src="/images/profile/33.png"
|
||||
/>
|
||||
<!-- <span class="text_22">报名：{{ course.enrollCount }}/{{ course.maxEnroll }}</span> -->
|
||||
<span class="text_22">{{ course.enrollmentCount }}</span> -->
|
||||
<div
|
||||
class="text-wrapper_2 flex-col"
|
||||
@click="goToCourseDetail(course)"
|
||||
|
||||
755
src/components/profile/MaterialsContent.vue
Normal file
755
src/components/profile/MaterialsContent.vue
Normal file
@ -0,0 +1,755 @@
|
||||
<template>
|
||||
<div class="materials-content">
|
||||
<!-- 资料页面标签页 -->
|
||||
<div class="materials-header">
|
||||
<div class="materials-tabs">
|
||||
<span
|
||||
class="materials-tab-item"
|
||||
:class="{ active: activeMaterialsTab === 'basic' }"
|
||||
@click="handleMaterialsTabChange('basic')"
|
||||
>
|
||||
基础信息
|
||||
</span>
|
||||
<span
|
||||
class="materials-tab-item"
|
||||
:class="{ active: activeMaterialsTab === 'password' }"
|
||||
@click="handleMaterialsTabChange('password')"
|
||||
>
|
||||
密码修改
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息页面 -->
|
||||
<div v-if="activeMaterialsTab === 'basic'" class="basic-info-content">
|
||||
<div class="basic-info-container">
|
||||
<h3 class="basic-info-title">基础信息</h3>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-container">
|
||||
<SafeAvatar
|
||||
:src="userInfo.avatar"
|
||||
:name="
|
||||
userStore.user?.profile?.realName ||
|
||||
userStore.user?.nickname ||
|
||||
userStore.user?.username ||
|
||||
'用户'
|
||||
"
|
||||
:size="68"
|
||||
alt="用户头像"
|
||||
class="user-avatar-large"
|
||||
/>
|
||||
<div
|
||||
class="avatar-edit-btn"
|
||||
:class="{ uploading: isUploading }"
|
||||
@click="triggerAvatarUpload"
|
||||
>
|
||||
<img
|
||||
v-if="!isUploading"
|
||||
src="/images/auth/revise.png"
|
||||
alt="编辑头像"
|
||||
class="edit-icon"
|
||||
/>
|
||||
<div v-else class="uploading-icon">⟳</div>
|
||||
</div>
|
||||
<!-- 隐藏的文件输入 -->
|
||||
<input
|
||||
ref="avatarInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleAvatarUpload"
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息表单 -->
|
||||
<div class="basic-info-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">昵称：</label>
|
||||
<NInput v-model:value="userInfo.nickname" placeholder="张成学" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">性别：</label>
|
||||
<NSelect
|
||||
v-model:value="userInfo.gender"
|
||||
:options="genderOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">所在院校：</label>
|
||||
<NSelect v-model:value="userInfo.college" :options="schoolList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-btn">
|
||||
<NButton type="primary" @click="saveUserInfo">保存</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 密码修改页面 -->
|
||||
<div v-else-if="activeMaterialsTab === 'password'" class="password-content">
|
||||
<div class="password-container">
|
||||
<h3 class="password-title">密码修改</h3>
|
||||
|
||||
<div class="password-form">
|
||||
<!-- 账号显示 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">账号：</label>
|
||||
<NInput
|
||||
v-model:value="userInfo.phone"
|
||||
type="text"
|
||||
:disabled="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 原密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">原密码：</label>
|
||||
<NInput
|
||||
v-model:value="passwordForm.currentPassword"
|
||||
type="password"
|
||||
placeholder="请输入原密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">新密码：</label>
|
||||
<NInput
|
||||
v-model:value="passwordForm.newPassword"
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 确认密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">确认密码：</label>
|
||||
<NInput
|
||||
v-model:value="passwordForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请输入确认新密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div class="password-form-actions">
|
||||
<NButton type="primary" @click="savePassword">保存</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useMessage, NInput, NSelect, NButton } from "naive-ui";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import SafeAvatar from "@/components/common/SafeAvatar.vue";
|
||||
import { TeachCourseApi } from "@/api/modules/teachCourse";
|
||||
import { UploadApi } from "@/api/modules/upload";
|
||||
import { UserInfoApi } from "@/api/modules/userCenter";
|
||||
import { AuthApi } from "@/api/modules/auth";
|
||||
|
||||
const message = useMessage();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 头像上传相关
|
||||
const avatarInput = ref<HTMLInputElement | null>(null);
|
||||
const isUploading = ref(false);
|
||||
|
||||
// 资料相关状态
|
||||
const activeMaterialsTab = ref("basic");
|
||||
|
||||
// 用户信息
|
||||
const userInfo = reactive({
|
||||
avatar: userStore.user?.avatar || "/images/traings/traing1.png",
|
||||
nickname: userStore.user?.profile?.realName || userStore.user?.nickname,
|
||||
gender: userStore.user?.profile?.gender === "male" ? 1 : 2,
|
||||
college: userStore.user?.profile?.location || "",
|
||||
phone: userStore.user?.phone || "",
|
||||
});
|
||||
|
||||
// 性别选项
|
||||
const genderOptions = [
|
||||
{ label: "男", value: 1 },
|
||||
{ label: "女", value: 2 },
|
||||
];
|
||||
|
||||
// 密码修改表单
|
||||
const passwordForm = reactive({
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
|
||||
// 资料相关方法
|
||||
const handleMaterialsTabChange = (tab: string) => {
|
||||
activeMaterialsTab.value = tab;
|
||||
};
|
||||
|
||||
// 保存密码修改
|
||||
const savePassword = () => {
|
||||
if (
|
||||
!passwordForm.currentPassword ||
|
||||
!passwordForm.newPassword ||
|
||||
!passwordForm.confirmPassword
|
||||
) {
|
||||
message.error("请填写完整的密码信息");
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||||
message.error("两次输入的新密码不一致");
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.newPassword.length < 6) {
|
||||
message.error("新密码长度不能少于6位");
|
||||
return;
|
||||
}
|
||||
|
||||
// 这里可以添加实际的密码修改逻辑
|
||||
message.success("密码修改成功");
|
||||
|
||||
// 清空表单
|
||||
passwordForm.currentPassword = "";
|
||||
passwordForm.newPassword = "";
|
||||
passwordForm.confirmPassword = "";
|
||||
};
|
||||
|
||||
// 头像上传相关方法
|
||||
const triggerAvatarUpload = () => {
|
||||
if (isUploading.value) {
|
||||
message.warning("头像正在上传中，请稍等...");
|
||||
return;
|
||||
}
|
||||
avatarInput.value?.click();
|
||||
};
|
||||
|
||||
const handleAvatarUpload = async (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
// 文件类型检查
|
||||
if (!file.type.startsWith("image/")) {
|
||||
message.error("请选择图片文件");
|
||||
return;
|
||||
}
|
||||
|
||||
// 文件大小检查 (限制5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
message.error("图片文件大小不能超过5MB");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isUploading.value = true;
|
||||
message.loading("正在上传头像...");
|
||||
|
||||
const response: any = await UploadApi.uploadCourseThumbnail(
|
||||
file,
|
||||
0,
|
||||
(progress) => {
|
||||
console.log(`上传进度: ${progress}%`);
|
||||
}
|
||||
);
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.destroyAll();
|
||||
userInfo.avatar = response.data.message;
|
||||
message.success("头像上传成功");
|
||||
console.log("上传的头像URL:", response.message);
|
||||
} else {
|
||||
message.error("头像上传失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("头像上传错误:", error);
|
||||
message.error("头像上传失败，请重试");
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
// 清空input值，允许重新选择同一个文件
|
||||
if (target) {
|
||||
target.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const saveUserInfo = async () => {
|
||||
if (!userInfo.nickname) {
|
||||
message.error("昵称不能为空");
|
||||
return;
|
||||
}
|
||||
|
||||
if (userInfo.nickname.length > 20) {
|
||||
message.error("昵称长度不能超过20个字符");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = {
|
||||
realname: userInfo.nickname,
|
||||
avatar: userInfo.avatar,
|
||||
sex: userInfo.gender,
|
||||
college: userInfo.college,
|
||||
};
|
||||
|
||||
const response = await UserInfoApi.editUserInfo(data);
|
||||
if (response.data.code === 200) {
|
||||
message.success("用户信息修改成功");
|
||||
const userInfoResponse = await AuthApi.getUserInfo();
|
||||
|
||||
if (userInfoResponse.success && userInfoResponse.result) {
|
||||
// 将后端用户信息转换为前端格式
|
||||
const convertedUser = AuthApi.convertBackendUserToUser(
|
||||
userInfoResponse.result
|
||||
);
|
||||
|
||||
// 保存转换后的用户信息
|
||||
userStore.user = convertedUser;
|
||||
localStorage.setItem("user", JSON.stringify(convertedUser));
|
||||
|
||||
} else {
|
||||
console.warn("⚠️ 获取用户信息失败，使用登录返回的基本信息");
|
||||
}
|
||||
} else {
|
||||
message.error("用户信息修改失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("用户信息修改错误:", error);
|
||||
message.error("用户信息修改失败，请重试");
|
||||
}
|
||||
};
|
||||
|
||||
const schoolList = ref<Array<{ label: string; value: string }>>([]);
|
||||
|
||||
const initSchoolList = async () => {
|
||||
try {
|
||||
const response = await TeachCourseApi.getSchoolList();
|
||||
console.log("学校列表:", response);
|
||||
schoolList.value = response.data.result.map(
|
||||
(item: { name: string; id: string }) => ({
|
||||
label: item,
|
||||
value: item,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("获取学校列表失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await initSchoolList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 我的资料页面样式 */
|
||||
.materials-content {
|
||||
background: white;
|
||||
border-radius: 0.42vw;
|
||||
/* 8px转换为vw */
|
||||
padding: 0;
|
||||
margin: 1.04vh 0;
|
||||
/* 20px转换为vh */
|
||||
}
|
||||
|
||||
.materials-header {
|
||||
padding-bottom: 1vh;
|
||||
/* 30px 40px转换 */
|
||||
border-bottom: 1.5px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.materials-tabs {
|
||||
display: flex;
|
||||
gap: 2.08vw;
|
||||
/* 40px转换为vw */
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 0.83vw;
|
||||
/* 16px转换为vw */
|
||||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 0.52vh 0;
|
||||
/* 10px转换为vh */
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.materials-tab-item.active {
|
||||
color: #0288d1;
|
||||
font-weight: 500;
|
||||
/* 移除蓝色下划线 */
|
||||
}
|
||||
|
||||
.materials-tab-item:hover {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
/* 基础信息页面样式 */
|
||||
.basic-info-content {
|
||||
padding: 1.04vh 0;
|
||||
/* 20px转换，减少内边距因为容器已有边距 */
|
||||
}
|
||||
|
||||
.basic-info-container {
|
||||
margin: 10px auto;
|
||||
border: 1.5px solid #d8d8d8;
|
||||
/* 8px转换为vw */
|
||||
padding: 2.08vh 2.08vw;
|
||||
/* 40px转换 */
|
||||
background: white;
|
||||
}
|
||||
|
||||
.basic-info-title {
|
||||
font-size: 16px;
|
||||
/* 18px转换为vw */
|
||||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2.08vh;
|
||||
/* 40px转换为vh */
|
||||
padding-bottom: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
border-bottom: 1.5px solid #e6e6e6;
|
||||
}
|
||||
|
||||
/* 头像部分样式 */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 3.13vh;
|
||||
/* 60px转换为vh */
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
border: 1.5px solid #0292d5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 68px !important;
|
||||
/* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
height: 68px !important;
|
||||
/* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-avatar-large img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25px;
|
||||
/* 25px转换为vw */
|
||||
height: 25px;
|
||||
/* 25px转换为vw */
|
||||
background: #0288d1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-edit-btn:hover {
|
||||
background: #0277bd;
|
||||
/* 稍微深一点的蓝色作为悬停效果 */
|
||||
}
|
||||
|
||||
.avatar-edit-btn.uploading {
|
||||
background: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.uploading-icon {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 11px;
|
||||
/* 11px转换为vw */
|
||||
height: 11px;
|
||||
/* 11px转换为vw */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.basic-info-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* 改为水平展示 */
|
||||
gap: 2.08vw;
|
||||
/* 40px转换为vw */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.5vh;
|
||||
/* 30px转换为vh，增加标签和输入框之间的距离 */
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
/* 改为自适应宽度，避免换行 */
|
||||
min-width: 4.17vw;
|
||||
/* 80px转换为vw，确保最小宽度 */
|
||||
height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #999999;
|
||||
line-height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 密码修改页面样式 */
|
||||
.password-content {
|
||||
padding: 1.04vh 0;
|
||||
/* 20px转换为vh */
|
||||
}
|
||||
|
||||
.password-container {
|
||||
margin: 10px auto;
|
||||
border: 1.5px solid #d8d8d8;
|
||||
/* 8px转换为vw */
|
||||
padding: 2.08vh 2.08vw;
|
||||
/* 40px转换 */
|
||||
background: white;
|
||||
}
|
||||
|
||||
.password-title {
|
||||
font-size: 16px;
|
||||
/* 18px转换为vw */
|
||||
font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
/* 40px转换为vh */
|
||||
padding-bottom: 10px;
|
||||
/* 20px转换为vh */
|
||||
border-bottom: 1.5px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.56vh;
|
||||
/* 30px转换为vh */
|
||||
margin-bottom: 2.08vh;
|
||||
/* 40px转换为vh */
|
||||
}
|
||||
|
||||
.password-form-label {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
/* 14px转换为vw */
|
||||
color: #999999;
|
||||
line-height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.password-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
/* 40px转换为vh */
|
||||
}
|
||||
|
||||
/* 账号显示样式 */
|
||||
.account-display {
|
||||
width: 15.63vw;
|
||||
/* 300px转换为vw */
|
||||
height: 2.08vh;
|
||||
/* 40px转换为vh */
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 0.21vw;
|
||||
/* 4px转换为vw */
|
||||
padding: 0.52vh 0.52vw;
|
||||
/* 10px转换 */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #666;
|
||||
line-height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.materials-tabs {
|
||||
gap: 3vw;
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 6vw !important;
|
||||
height: 6vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 2.6vw;
|
||||
/* 平板端按比例调整：25px * 1.3 ≈ 32px */
|
||||
height: 2.6vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 1.14vw;
|
||||
/* 平板端按比例调整：11px * 1.3 ≈ 14px */
|
||||
height: 1.14vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 3vh;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.basic-info-title,
|
||||
.password-title {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.materials-content {
|
||||
margin: 2vh 1vw;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.materials-header {
|
||||
padding: 3vh 4vw;
|
||||
}
|
||||
|
||||
.materials-tabs {
|
||||
gap: 6vw;
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.basic-info-content,
|
||||
.password-content {
|
||||
padding: 4vh 4vw;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 15vw !important;
|
||||
height: 15vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 6.5vw;
|
||||
/* 手机端按比例调整：25px * 2.6 ≈ 65px */
|
||||
height: 6.5vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 2.86vw;
|
||||
/* 手机端按比例调整：11px * 2.6 ≈ 29px */
|
||||
height: 2.86vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 4vh;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1vh;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
font-size: 3.5vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.basic-info-title,
|
||||
.password-title {
|
||||
font-size: 4vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -748,102 +748,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 我的资料页面 -->
|
||||
<div v-else-if="activeTab === 'materials'" class="materials-content">
|
||||
<!-- 资料页面标签页 -->
|
||||
<div class="materials-header">
|
||||
<div class="materials-tabs">
|
||||
<span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'basic' }"
|
||||
@click="handleMaterialsTabChange('basic')">
|
||||
基础信息
|
||||
</span>
|
||||
<span class="materials-tab-item" :class="{ active: activeMaterialsTab === 'password' }"
|
||||
@click="handleMaterialsTabChange('password')">
|
||||
密码修改
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息页面 -->
|
||||
<div v-if="activeMaterialsTab === 'basic'" class="basic-info-content">
|
||||
<div class="basic-info-container">
|
||||
<h3 class="basic-info-title">基础信息</h3>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-container">
|
||||
<SafeAvatar :src="userStore.user?.avatar"
|
||||
:name="userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username || '用户'"
|
||||
:size="68" alt="用户头像" class="user-avatar-large" />
|
||||
<div class="avatar-edit-btn">
|
||||
<img src="/images/auth/revise.png" alt="编辑头像" class="edit-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息表单 -->
|
||||
<div class="basic-info-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">昵称：</label>
|
||||
<input v-model="userInfo.nickname" type="text" class="form-input" placeholder="张成学" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">性别：</label>
|
||||
<select v-model="userInfo.gender" class="form-select">
|
||||
<option value="男">男</option>
|
||||
<option value="女">女</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">所在院校：</label>
|
||||
<input v-model="userInfo.college" type="text" class="form-input" placeholder="北京清华大学" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 密码修改页面 -->
|
||||
<div v-else-if="activeMaterialsTab === 'password'" class="password-content">
|
||||
<div class="password-container">
|
||||
<h3 class="password-title">密码修改</h3>
|
||||
|
||||
<div class="password-form">
|
||||
<!-- 账号显示 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">账号：</label>
|
||||
<div class="account-display">{{ userInfo.phone || '18658822666654' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 原密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">原密码：</label>
|
||||
<input v-model="passwordForm.currentPassword" type="password" class="password-form-input"
|
||||
placeholder="请输入原密码" />
|
||||
</div>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">新密码：</label>
|
||||
<input v-model="passwordForm.newPassword" type="password" class="password-form-input"
|
||||
placeholder="请输入新密码" />
|
||||
</div>
|
||||
|
||||
<!-- 确认密码 -->
|
||||
<div class="password-form-group">
|
||||
<label class="password-form-label">确认密码：</label>
|
||||
<input v-model="passwordForm.confirmPassword" type="password" class="password-form-input"
|
||||
placeholder="请输入确认新密码" />
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div class="password-form-actions">
|
||||
<button class="password-save-btn" @click="savePassword">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MaterialsContent v-else-if="activeTab === 'materials'"></MaterialsContent>
|
||||
|
||||
<!-- 我的下载页面 -->
|
||||
<div v-else-if="activeTab === 'download'" class="download-content"
|
||||
@ -1003,6 +908,7 @@ import MenuApi from '@/api/modules/menu'
|
||||
import CourseContent from '@/components/profile/CourseContent.vue'
|
||||
import PracticeContent from '@/components/profile/PracticeContent.vue'
|
||||
import ActivityContent from '@/components/profile/ActivityContent.vue'
|
||||
import MaterialsContent from '@/components/profile/MaterialsContent.vue'
|
||||
|
||||
// const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
@ -1237,25 +1143,6 @@ const likeMessageCount = ref(0)
|
||||
const systemMessageCount = ref(0)
|
||||
const messageCountsLoading = ref(false)
|
||||
|
||||
// 资料相关状态
|
||||
const activeMaterialsTab = ref('basic')
|
||||
|
||||
// 用户信息
|
||||
const userInfo = reactive({
|
||||
avatar: '/images/traings/traing1.png',
|
||||
nickname: '张成学',
|
||||
gender: '男',
|
||||
college: '北京清华大学',
|
||||
phone: '18658822666654'
|
||||
})
|
||||
|
||||
// 密码修改表单
|
||||
const passwordForm = reactive({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
// 下载相关状态
|
||||
const activeDownloadTab = ref('courseware')
|
||||
const activeFileMenu = ref<number | null>(null)
|
||||
@ -2893,37 +2780,6 @@ const getLikeActionText = (type: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 资料相关方法
|
||||
const handleMaterialsTabChange = (tab: string) => {
|
||||
activeMaterialsTab.value = tab
|
||||
}
|
||||
|
||||
// 保存密码修改
|
||||
const savePassword = () => {
|
||||
if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
|
||||
message.error('请填写完整的密码信息')
|
||||
return
|
||||
}
|
||||
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||||
message.error('两次输入的新密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (passwordForm.newPassword.length < 6) {
|
||||
message.error('新密码长度不能少于6位')
|
||||
return
|
||||
}
|
||||
|
||||
// 这里可以添加实际的密码修改逻辑
|
||||
message.success('密码修改成功')
|
||||
|
||||
// 清空表单
|
||||
passwordForm.currentPassword = ''
|
||||
passwordForm.newPassword = ''
|
||||
passwordForm.confirmPassword = ''
|
||||
}
|
||||
|
||||
// 下载相关方法
|
||||
const handleDownloadTabChange = (tab: string) => {
|
||||
activeDownloadTab.value = tab
|
||||
@ -7710,369 +7566,6 @@ onActivated(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 我的资料页面样式 */
|
||||
.materials-content {
|
||||
background: white;
|
||||
border-radius: 0.42vw;
|
||||
/* 8px转换为vw */
|
||||
padding: 0;
|
||||
margin: 1.04vh 0;
|
||||
/* 20px转换为vh */
|
||||
}
|
||||
|
||||
.materials-header {
|
||||
padding-bottom: 1vh;
|
||||
/* 30px 40px转换 */
|
||||
border-bottom: 1.5px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.materials-tabs {
|
||||
display: flex;
|
||||
gap: 2.08vw;
|
||||
/* 40px转换为vw */
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 0.83vw;
|
||||
/* 16px转换为vw */
|
||||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 0.52vh 0;
|
||||
/* 10px转换为vh */
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.materials-tab-item.active {
|
||||
color: #0288D1;
|
||||
font-weight: 500;
|
||||
/* 移除蓝色下划线 */
|
||||
}
|
||||
|
||||
.materials-tab-item:hover {
|
||||
color: #0288D1;
|
||||
}
|
||||
|
||||
/* 基础信息页面样式 */
|
||||
.basic-info-content {
|
||||
padding: 1.04vh 0;
|
||||
/* 20px转换，减少内边距因为容器已有边距 */
|
||||
}
|
||||
|
||||
.basic-info-container {
|
||||
height: 310px;
|
||||
margin: 10px auto;
|
||||
border: 1.5px solid #D8D8D8;
|
||||
/* 8px转换为vw */
|
||||
padding: 2.08vh 2.08vw;
|
||||
/* 40px转换 */
|
||||
background: white;
|
||||
}
|
||||
|
||||
.basic-info-title {
|
||||
font-size: 16px;
|
||||
/* 18px转换为vw */
|
||||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2.08vh;
|
||||
/* 40px转换为vh */
|
||||
padding-bottom: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
border-bottom: 1.5px solid #E6E6E6;
|
||||
}
|
||||
|
||||
/* 头像部分样式 */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 3.13vh;
|
||||
/* 60px转换为vh */
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 78px !important;
|
||||
height: 78px !important;
|
||||
border: 1.5px solid #0292D5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 68px !important;
|
||||
/* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
height: 68px !important;
|
||||
/* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-avatar-large img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25px;
|
||||
/* 25px转换为vw */
|
||||
height: 25px;
|
||||
/* 25px转换为vw */
|
||||
background: #0288D1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-edit-btn:hover {
|
||||
background: #0277BD;
|
||||
/* 稍微深一点的蓝色作为悬停效果 */
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 11px;
|
||||
/* 11px转换为vw */
|
||||
height: 11px;
|
||||
/* 11px转换为vw */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.basic-info-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* 改为水平展示 */
|
||||
gap: 2.08vw;
|
||||
/* 40px转换为vw */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.56vh;
|
||||
/* 30px转换为vh，增加标签和输入框之间的距离 */
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
/* 改为自适应宽度，避免换行 */
|
||||
min-width: 4.17vw;
|
||||
/* 80px转换为vw，确保最小宽度 */
|
||||
height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #999999;
|
||||
line-height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
/* 防止换行 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 276px;
|
||||
height: 41px;
|
||||
/* 80px转换为vh，与密码修改页面保持一致 */
|
||||
padding: 1.04vh 0.73vw;
|
||||
/* 20px 14px转换，增加上下内边距 */
|
||||
background: #F5F8FB;
|
||||
border: 1px solid #D8D8D8;
|
||||
/* 4px转换为vw */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
/* 改为normal，让浏览器自动计算合适的行高 */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
transition: border-color 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
/* 确保padding包含在总高度内 */
|
||||
}
|
||||
|
||||
/* 专门为select元素优化 */
|
||||
.form-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 垂直居中对齐 */
|
||||
padding-top: 0.78vh;
|
||||
/* 15px转换为vh，调整顶部内边距 */
|
||||
padding-bottom: 0.78vh;
|
||||
/* 15px转换为vh，调整底部内边距 */
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
/* 密码修改页面样式 */
|
||||
.password-content {
|
||||
margin-top: 15px;
|
||||
/* 20px转换，减少内边距因为容器已有边距 */
|
||||
}
|
||||
|
||||
.password-container {
|
||||
/* 1000px转换为vw */
|
||||
margin: 0 auto;
|
||||
border: 1.5px solid #D8D8D8;
|
||||
/* 8px转换为vw */
|
||||
padding: 10px 15px;
|
||||
/* 40px转换 */
|
||||
background: white;
|
||||
}
|
||||
|
||||
.password-title {
|
||||
font-size: 16px;
|
||||
/* 18px转换为vw */
|
||||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
/* 40px转换为vh */
|
||||
padding-bottom: 10px;
|
||||
/* 20px转换为vh */
|
||||
border-bottom: 1.5px solid #E6E6E6;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.56vh;
|
||||
/* 30px转换为vh */
|
||||
margin-bottom: 2.08vh;
|
||||
/* 40px转换为vh */
|
||||
}
|
||||
|
||||
.password-form-label {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
/* 14px转换为vw */
|
||||
color: #999999;
|
||||
line-height: 1.04vh;
|
||||
/* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.account-display {
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
background: #F5F8FB;
|
||||
border: 1.5px solid #D8D8D8;
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-form-input {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
padding: 10px 15px;
|
||||
background: #F5F8FB;
|
||||
border: 1.5px solid #D8D8D8;
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 0.73vw;
|
||||
/* 14px转换为vw */
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
transition: border-color 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password-form-input:focus {
|
||||
outline: none;
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.password-form-input::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.password-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
/* 40px转换为vh */
|
||||
}
|
||||
|
||||
.password-save-btn {
|
||||
width: 100px;
|
||||
height: 33px;
|
||||
background: #0288D1;
|
||||
color: white;
|
||||
border: none;
|
||||
/* 4px转换为vw */
|
||||
font-size: 14px;
|
||||
/* 14px转换为vw */
|
||||
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.password-save-btn:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
|
||||
.password-save-btn:active {
|
||||
background: #096dd9;
|
||||
}
|
||||
|
||||
/* 我的下载页面样式 */
|
||||
.download-content {
|
||||
background: white;
|
||||
@ -8700,62 +8193,11 @@ onActivated(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.materials-tabs {
|
||||
gap: 3vw;
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 6vw !important;
|
||||
height: 6vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 2.6vw;
|
||||
/* 平板端按比例调整：25px * 1.3 ≈ 32px */
|
||||
height: 2.6vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 1.14vw;
|
||||
/* 平板端按比例调整：11px * 1.3 ≈ 14px */
|
||||
height: 1.14vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 3vh;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 30vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.basic-info-title,
|
||||
.password-title {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 1vw;
|
||||
padding: 1vh 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.download-content,
|
||||
.materials-content {
|
||||
.download-content {
|
||||
margin: 2vh 1vw;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
@ -8857,75 +8299,6 @@ onActivated(() => {
|
||||
font-size: 3.5vw;
|
||||
padding: 2vh 3vw;
|
||||
}
|
||||
|
||||
.materials-header {
|
||||
padding: 3vh 4vw;
|
||||
}
|
||||
|
||||
.materials-tabs {
|
||||
gap: 6vw;
|
||||
}
|
||||
|
||||
.materials-tab-item {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.basic-info-content,
|
||||
.password-content {
|
||||
padding: 4vh 4vw;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 15vw !important;
|
||||
height: 15vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 6.5vw;
|
||||
/* 手机端按比例调整：25px * 2.6 ≈ 65px */
|
||||
height: 6.5vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 2.86vw;
|
||||
/* 手机端按比例调整：11px * 2.6 ≈ 29px */
|
||||
height: 2.86vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 4vh;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1vh;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: auto;
|
||||
font-size: 3.5vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
font-size: 3.5vw;
|
||||
height: 6vh;
|
||||
padding: 2vh 3vw;
|
||||
}
|
||||
|
||||
.basic-info-title,
|
||||
.password-title {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 3.5vw;
|
||||
padding: 2vh 6vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 包含@的消息高亮样式 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user