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