From 93bd6c330a99ac608648c8a1fd8eb19d8e5679a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Sat, 2 Aug 2025 18:52:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E4=B8=8B=E8=BD=BD=E5=92=8C?=
=?UTF-8?q?=E6=88=91=E7=9A=84=E8=B5=84=E6=96=99=E4=B8=A4=E4=B8=AA=E6=A8=A1?=
=?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/Profile.vue | 1305 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 1305 insertions(+)
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 6c2df44..6ddbe5c 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -688,6 +688,197 @@
+
+
+
+
+
+
+
+
+
基础信息
+
+
+
+
+
![用户头像]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 已全部加载,共17个文件
+
+
+
+
+
+
+
+
+
+
![文件图标]()
+
+
{{ file.name }}
+
+
+
+
{{ getTabTitle(activeTab) }}
@@ -1106,6 +1297,57 @@ const activeMessageTab = ref('all')
const replyingMessageId = ref(null)
const replyContent = ref('')
+// 资料相关状态
+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(null)
+const currentPath = ref([]) // 当前路径,用于面包屑
+const isInSubDirectory = ref(false) // 是否在子目录中
+
+// 下载筛选条件
+const downloadFilter = reactive({
+ type: 'all',
+ keyword: ''
+})
+
+// 下载文件数据
+const downloadFiles = reactive([
+ { id: 1, name: '图片', type: 'folder', category: 'courseware' },
+ { id: 2, name: '文档', type: 'folder', category: 'courseware' },
+ { id: 3, name: '视频', type: 'folder', category: 'courseware' },
+ { id: 4, name: '样子', type: 'folder', category: 'courseware' },
+ { id: 5, name: '音频', type: 'folder', category: 'courseware' },
+ { id: 6, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 7, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 8, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 9, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 10, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 11, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 12, name: '文件名称', type: 'folder', category: 'courseware' },
+ { id: 13, name: '证书文件1', type: 'folder', category: 'certificate' },
+ { id: 14, name: '证书文件2', type: 'folder', category: 'certificate' },
+ { id: 15, name: '资源文件1', type: 'folder', category: 'resources' }
+
+])
+
// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(5) // 每页显示5个课程
@@ -2131,6 +2373,105 @@ const handleMessageTabChange = (tab: string) => {
activeMessageTab.value = tab
}
+// 资料相关方法
+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
+}
+
+// 筛选后的下载文件
+const filteredDownloadFiles = computed(() => {
+ let files = downloadFiles.filter(file => file.category === activeDownloadTab.value)
+
+ if (downloadFilter.type !== 'all') {
+ files = files.filter(file => file.type === downloadFilter.type)
+ }
+
+ if (downloadFilter.keyword) {
+ files = files.filter(file =>
+ file.name.toLowerCase().includes(downloadFilter.keyword.toLowerCase())
+ )
+ }
+
+ return files
+})
+
+// 文件菜单操作
+const toggleFileMenu = (fileId: number) => {
+ activeFileMenu.value = activeFileMenu.value === fileId ? null : fileId
+}
+
+const handleFileClick = (file: any) => {
+ if (file.type === 'folder' && file.name === '图片') {
+ // 点击图片文件夹,进入子目录
+ isInSubDirectory.value = true
+ currentPath.value = ['课件', '图片']
+ }
+}
+
+const goBack = () => {
+ // 返回上级目录
+ isInSubDirectory.value = false
+ currentPath.value = []
+}
+
+const getFileIcon = () => {
+ if (activeDownloadTab.value === 'certificate') {
+ // 证书标签页使用证书图标
+ return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdbc5738893837b29e29e56db7f3999ff13a42da7012dadb028f61eb9fe149ca4'
+ } else if (isInSubDirectory.value) {
+ // 子目录使用子目录图标
+ return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf45333052202c303acc2c06223c26b820d330459ce2d452a21a3132fbbeab442'
+ } else {
+ // 默认文件夹图标
+ return 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5548891b00234027dbe6dadafbd83596d616261421c0587a85652dc194b2d5ef'
+ }
+}
+
+const createNewFolder = () => {
+ message.info('新建文件夹功能开发中...')
+}
+
+const renameFile = (fileId: number) => {
+ message.info(`重命名文件 ${fileId}`)
+ activeFileMenu.value = null
+}
+
+const deleteFile = (fileId: number) => {
+ message.info(`删除文件 ${fileId}`)
+ activeFileMenu.value = null
+}
+
// 开始回复消息
const startReply = (messageId: number) => {
replyingMessageId.value = messageId
@@ -5359,4 +5700,968 @@ height: 33px;
padding: 1.5vh 3vw;
}
}
+
+/* 我的资料页面样式 */
+.materials-content {
+ background: white;
+ border-radius: 0.42vw; /* 8px转换为vw */
+ padding: 0;
+ margin: 1.04vh 0; /* 20px转换为vh */
+}
+
+.materials-header {
+ padding: 1.56vh 2.08vw; /* 30px 40px转换 */
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.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: #1890ff;
+ font-weight: 500;
+ /* 移除蓝色下划线 */
+}
+
+.materials-tab-item:hover {
+ color: #1890ff;
+}
+
+/* 基础信息页面样式 */
+.basic-info-content {
+ padding: 1.04vh 1.04vw; /* 20px转换,减少内边距因为容器已有边距 */
+}
+
+.basic-info-container {
+ max-width: 52.08vw; /* 1000px转换为vw */
+ margin: 0 auto;
+ border: 1px solid #D8D8D8;
+ border-radius: 0.42vw; /* 8px转换为vw */
+ padding: 2.08vh 2.08vw; /* 40px转换 */
+ background: white;
+}
+
+.basic-info-title {
+ font-size: 0.94vw; /* 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: 1px solid #f0f0f0;
+}
+
+/* 头像部分样式 */
+.avatar-section {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 3.13vh; /* 60px转换为vh */
+}
+
+.avatar-container {
+ position: relative;
+ display: inline-block;
+}
+
+.user-avatar-large {
+ width: 3.54vw; /* 68px转换为vw */
+ height: 3.54vw; /* 68px转换为vw */
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid #e0e0e0;
+}
+
+.avatar-edit-btn {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 1.56vw; /* 30px转换为vw */
+ height: 1.56vw; /* 30px转换为vw */
+ background: #1890ff;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.avatar-edit-btn:hover {
+ background: #40a9ff;
+}
+
+.avatar-edit-btn::before {
+ content: '✏️';
+ color: white;
+ font-size: 0.73vw; /* 14px转换为vw */
+}
+
+/* 表单样式 */
+.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: 14.38vw; /* 276px转换为vw */
+ height: 4.17vh; /* 80px转换为vh,与密码修改页面保持一致 */
+ padding: 1.04vh 0.73vw; /* 20px 14px转换,增加上下内边距 */
+ background: #F5F8FB;
+ border: 1px solid #D8D8D8;
+ border-radius: 0.21vw; /* 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 {
+ padding: 1.04vh 1.04vw; /* 20px转换,减少内边距因为容器已有边距 */
+}
+
+.password-container {
+ max-width: 52.08vw; /* 1000px转换为vw */
+ margin: 0 auto;
+ border: 1px solid #D8D8D8;
+ border-radius: 0.42vw; /* 8px转换为vw */
+ padding: 2.08vh 2.08vw; /* 40px转换 */
+ background: white;
+}
+
+.password-title {
+ font-size: 0.94vw; /* 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: 1px solid #f0f0f0;
+}
+
+.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 {
+ 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;
+}
+
+.account-display {
+ width: 47.92vw; /* 920px转换为vw,减小宽度避免超出容器 */
+ height: 4.17vh; /* 80px转换为vh,增加高度 */
+ padding: 1.04vh 1.56vw; /* 20px 30px转换,增加内边距,placeholder往右移 */
+ background: #F5F8FB;
+ border: 1px solid #D8D8D8;
+ border-radius: 0.21vw; /* 4px转换为vw */
+ 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: 47.92vw; /* 920px转换为vw,减小宽度避免超出容器 */
+ height: 4.17vh; /* 80px转换为vh,增加高度 */
+ padding: 1.04vh 1.56vw; /* 20px 30px转换,增加内边距,placeholder往右移 */
+ background: #F5F8FB;
+ border: 1px solid #D8D8D8;
+ border-radius: 0.21vw; /* 4px转换为vw */
+ 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: 2.08vh; /* 40px转换为vh */
+}
+
+.password-save-btn {
+ padding: 0.73vh 2.08vw; /* 14px 40px转换 */
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 0.21vw; /* 4px转换为vw */
+ font-size: 0.73vw; /* 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;
+ border-radius: 0.42vw; /* 8px转换为vw */
+ padding: 0 0 1.04vh 0; /* 底部添加20px内边距,确保内容不被截断 */
+ margin: 1.04vh 0; /* 20px转换为vh */
+ overflow: visible; /* 确保内容完全可见 */
+}
+
+/* 面包屑控制区域样式 */
+.breadcrumb-controls {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 1.56vh 2.08vw; /* 30px 40px转换 */
+}
+
+/* 面包屑导航样式 */
+.breadcrumb-nav {
+ display: flex;
+ align-items: center;
+}
+
+.breadcrumb-text {
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #666;
+ cursor: pointer;
+ transition: color 0.3s ease;
+}
+
+.breadcrumb-text:hover {
+ color: #1890ff;
+}
+
+.breadcrumb-current {
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ font-weight: 500;
+}
+
+/* 子目录中的文件项样式调整 */
+.download-content.in-subdirectory .file-item .file-icon {
+ margin-left: 0 !important; /* 子目录中移除左边距 */
+}
+
+.download-content.in-subdirectory .file-item .file-name {
+ margin-top: 1.56vh !important; /* 子目录中文件名下移30px */
+}
+
+/* 子目录特有样式 */
+.subdirectory-item .file-icon {
+ margin-left: 0 !important; /* 移除左边距 */
+}
+
+.subdirectory-item .file-name {
+ margin-top: 2.04vh !important; /* 20px转换为vh,下移文件名 */
+}
+
+/* 证书网格特有样式 - 一行显示3个 */
+.certificate-grid {
+ grid-template-columns: repeat(3, 1fr) !important; /* 固定3列 */
+ gap: 1.5vw !important; /* 减少间距,给证书更多空间 */
+ justify-content: center;
+ width: 100% !important; /* 确保占满容器宽度 */
+}
+
+.certificate-grid .file-item {
+ width: 100% !important; /* 占满网格单元格宽度 */
+ height: auto !important; /* 高度自适应内容 */
+ min-height: 15vh !important; /* 增加最小高度给证书更多空间 */
+ background: white !important; /* 证书背景色改为白色 */
+ padding: 2.6vh 2.6vw !important; /* 50px转换为vw/vh,上下左右50px间距 */
+ display: flex !important; /* 使用flex布局 */
+ flex-direction: column !important; /* 垂直排列 */
+ align-items: center !important; /* 水平居中 */
+ justify-content: center !important; /* 垂直居中 */
+}
+
+.certificate-grid .file-item .file-icon {
+ width: 100% !important; /* 占满容器宽度 */
+ height: auto !important; /* 高度自适应 */
+ max-width: 20vw !important; /* 增大最大宽度限制 */
+ margin: 0 auto 2.6vh auto !important; /* 居中显示,底部留50px间距(2.6vh) */
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+
+.certificate-grid .file-item .folder-icon {
+ width: 100% !important; /* 图片占满图标容器 */
+ height: auto !important; /* 高度自适应保持比例 */
+ max-width: 100% !important; /* 最大宽度不超过容器 */
+ min-height: 8vh !important; /* 设置最小高度确保图片足够大 */
+ object-fit: contain !important; /* 保持图片比例,完整显示 */
+}
+
+.certificate-grid .file-item .file-name {
+ margin-top: 0.5vh !important; /* 证书名字与图片间距约25px */
+ text-align: center !important; /* 文字居中 */
+ padding: 0 1.3vw !important; /* 左右内边距约25px */
+}
+
+.download-header {
+ padding: 1.56vh 2.08vw; /* 30px 40px转换 */
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.download-tabs {
+ display: flex;
+ gap: 2.08vw; /* 40px转换为vw */
+}
+
+.download-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;
+}
+
+.download-tab-item.active {
+ color: #1890ff;
+ font-weight: 500;
+ /* 移除蓝色下划线 */
+}
+
+.download-tab-item:hover {
+ color: #1890ff;
+}
+
+/* 筛选和操作区域 */
+.download-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.56vh 2.08vw; /* 30px 40px转换 */
+ /* 移除下方边框线条 */
+}
+
+.download-filters {
+ display: flex;
+ align-items: center;
+ gap: 2.08vw; /* 40px转换为vw */
+}
+
+.filter-group,
+.search-group {
+ display: flex;
+ align-items: center;
+ gap: 0.52vw; /* 10px转换为vw */
+}
+
+.filter-label,
+.search-label {
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ white-space: nowrap;
+}
+
+.filter-select {
+ width: 9.21vw; /* 100px转换为vw */
+ height: 3.16vh; /* 80px转换为vh,增加一倍高度 */
+ padding: 0.52vh 0.52vw; /* 10px转换,增加内边距 */
+ border: 1px solid #d9d9d9;
+
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ background: white;
+}
+
+.search-input-container {
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+
+.search-input {
+ width: 10.42vw; /* 200px转换为vw */
+ height: 3.16vh; /* 80px转换为vh,增加一倍高度 */
+ padding: 0.26vh 2.08vw 0.26vh 0.52vw; /* 5px 40px 5px 10px转换,右侧留空给按钮 */
+ border: 1px solid #d9d9d9;
+ border-radius: 0; /* 移除圆角,变成直角 */
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ background: white;
+}
+
+.search-btn {
+ position: absolute;
+ right: 0.26vw; /* 5px转换为vw */
+ top: 50%;
+ transform: translateY(-50%);
+ width: 1.56vw; /* 30px转换为vw */
+ height: 1.56vh; /* 30px转换为vh */
+ border: none;
+ background: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.search-icon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.download-actions {
+ display: flex;
+ align-items: center;
+ gap: 1.04vw; /* 20px转换为vw */
+}
+
+.file-count {
+ width: 5.83vw; /* 112px转换为vw */
+ height: 0.73vh; /* 14px转换为vh */
+ font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-size: 0.52vw; /* 10px转换为vw */
+ color: #999999;
+ line-height: 0.73vh; /* 14px转换为vh */
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+}
+
+.new-folder-btn {
+ padding: 0.52vh 1.04vw; /* 10px 20px转换 */
+ background: #1890ff;
+ color: white;
+ border: none;
+ border-radius: 0.21vw; /* 4px转换为vw */
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.new-folder-btn:hover {
+ background: #40a9ff;
+}
+
+/* 文件网格样式 */
+.files-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 8.17vw); /* 自适应列数,每列157px */
+ gap: 1.56vw; /* 30px转换为vw,增加间距 */
+ padding: 2.08vh 2.08vw 3.13vh 2.08vw; /* 上40px 左右40px 下60px,确保底部边框可见 */
+ justify-content: start;
+ overflow: visible; /* 确保内容不被截断 */
+}
+
+.file-item {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 8.17vw; /* 157px转换为vw */
+ min-height: 10.47vh; /* 最小高度201px,允许自适应增长 */
+ padding: 1.04vh 0.52vw; /* 上下20px 左右10px */
+ border: 1px solid #D8D8D8 !important; /* 强制显示边框 */
+ border-radius: 0; /* 移除圆角,变成直角 */
+ background: white;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ box-sizing: border-box;
+ margin-bottom: 0.26vh; /* 2px转换为vh,确保底部边框可见 */
+}
+
+.file-item:hover {
+ background: #f5f5f5;
+ border-color: #bfbfbf;
+}
+
+.file-menu {
+ position: absolute;
+ top: 0.52vh; /* 10px转换为vh */
+ right: 0.52vw; /* 10px转换为vw */
+ z-index: 10;
+}
+
+.file-menu-btn {
+ width: 1.25vw; /* 24px转换为vw */
+ height: 1.25vh; /* 24px转换为vh */
+ border: none;
+ background: none; /* 移除背景 */
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.83vw; /* 16px转换为vw */
+ color: #666;
+ transition: all 0.3s ease;
+}
+
+.file-menu-btn:hover {
+ background: none; /* 移除悬停背景 */
+}
+
+.more-icon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.file-menu-dropdown {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.21vw; /* 4px转换为vw */
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ z-index: 20;
+ min-width: 4.17vw; /* 80px转换为vw */
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ gap: 0.21vw; /* 4px转换为vw,减小图标和文字间距 */
+ padding: 0.52vh 0.73vw; /* 10px 14px转换 */
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ white-space: nowrap; /* 确保文字水平展示,不换行 */
+}
+
+.menu-icon {
+ width: 1.25vw; /* 24px转换为vw,增加一倍 */
+ height: 1.25vh; /* 24px转换为vh,增加一倍 */
+ object-fit: contain;
+ flex-shrink: 0;
+}
+
+.menu-item:hover {
+ background: #f5f5f5;
+}
+
+.menu-item:first-child {
+ border-radius: 0.21vw 0.21vw 0 0; /* 4px转换为vw */
+}
+
+.menu-item:last-child {
+ border-radius: 0 0 0.21vw 0.21vw; /* 4px转换为vw */
+}
+
+.file-icon {
+ width: 5.21vw; /* 100px转换为vw */
+ height: 5.21vw; /* 100px转换为vw */
+ margin-top: 4.56vh; /* 30px转换为vh,增加顶部间距,图片下移 */
+ margin-left: 1.26vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.folder-icon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.folder-icon-css {
+ font-size: 2.5vw; /* 48px转换为vw */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+}
+
+.file-name {
+ font-size: 0.73vw; /* 14px转换为vw */
+ font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
+ color: #333;
+ text-align: center;
+ word-break: break-all;
+ line-height: 1.2;
+ margin-top: -0.26vh; /* 5px转换为vh,减小与图标的间距,文件名上移 */
+ margin-bottom: 0.52vh; /* 10px转换为vh,底部间距,确保不贴边框 */
+ padding: 0 0.26vw; /* 左右5px内边距 */
+ width: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+ .download-tabs {
+ gap: 3vw;
+ }
+
+ .download-tab-item {
+ font-size: 1vw;
+ }
+
+ .download-controls {
+ flex-direction: column;
+ gap: 2vh;
+ align-items: flex-start;
+ }
+
+ .download-filters {
+ gap: 3vw;
+ }
+
+ .filter-select {
+ width: 8vw;
+ font-size: 1vw;
+ }
+
+ .search-input {
+ width: 15vw;
+ font-size: 1vw;
+ }
+
+ .files-grid {
+ grid-template-columns: repeat(auto-fit, 12vw); /* 平板端调整文件项宽度 */
+ gap: 2vw;
+ }
+
+
+
+ .file-item {
+ width: 12vw;
+ height: 18vh; /* 增加平板端高度 */
+ }
+
+ .file-icon {
+ width: 8vw;
+ height: 8vw;
+ }
+
+ .file-name {
+ font-size: 1vw;
+ }
+}
+
+@media (max-width: 1200px) {
+ .materials-tabs {
+ gap: 3vw;
+ }
+
+ .materials-tab-item {
+ font-size: 1vw;
+ }
+
+ .user-avatar-large {
+ width: 6vw;
+ height: 6vw;
+ }
+
+ .avatar-edit-btn {
+ width: 2.5vw;
+ height: 2.5vw;
+ }
+
+ .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 {
+ margin: 2vh 1vw;
+ border-radius: 1vw;
+ }
+
+ .download-header {
+ padding: 3vh 4vw;
+ }
+
+ .download-tabs {
+ gap: 6vw;
+ }
+
+ .download-tab-item {
+ font-size: 3vw;
+ }
+
+ .download-controls {
+ padding: 3vh 4vw;
+ flex-direction: column;
+ gap: 3vh;
+ }
+
+ .download-filters {
+ flex-direction: column;
+ gap: 2vh;
+ width: 100%;
+ }
+
+ .filter-group,
+ .search-group {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .filter-select {
+ width: 20vw;
+ font-size: 3.5vw;
+ height: 6vh;
+ }
+
+ .search-input {
+ width: 50vw;
+ font-size: 3.5vw;
+ height: 6vh;
+ padding: 2vh 8vw 2vh 3vw;
+ }
+
+ .search-btn {
+ width: 6vw;
+ height: 6vh;
+ }
+
+ .download-actions {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .file-count {
+ font-size: 3vw;
+ }
+
+ .new-folder-btn {
+ font-size: 3vw;
+ padding: 2vh 4vw;
+ }
+
+ .files-grid {
+ grid-template-columns: repeat(auto-fit, 40vw); /* 手机端文件项宽度 */
+ gap: 4vw;
+ padding: 4vh 4vw;
+ justify-content: center;
+ }
+
+
+
+ .file-item {
+ width: 40vw;
+ height: 30vh; /* 增加手机端高度 */
+ }
+
+ .file-icon {
+ width: 20vw;
+ height: 20vw;
+ }
+
+ .file-name {
+ font-size: 3vw;
+ }
+
+ .file-menu-btn {
+ width: 6vw;
+ height: 6vh;
+ font-size: 4vw;
+ }
+
+ .menu-item {
+ 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;
+ height: 15vw;
+ }
+
+ .avatar-edit-btn {
+ width: 5vw;
+ height: 5vw;
+ }
+
+ .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;
+ }
+}
\ No newline at end of file