liuguancen/gangyan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[前端] 新建文件夹按钮改为带文字的明显按钮

Browse Source
This commit is contained in:
liuguancen
2026-04-02 13:03:48 +08:00
parent 3427dcd39e
commit 1e47bcab37
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
chat_web_front/src/views/reading/index.vue
View File

@@ -6,7 +6,10 @@
<div class="left-header"> <div class="left-header">
<div class="left-title">文件管理</div> <div class="left-title">文件管理</div>
<div class="left-actions"> <div class="left-actions">
<img src="@/assets/images/reading/create.png" alt="新建" title="新建文件夹" class="action-icon" @click="createFolder()"> <div class="create-folder-btn" @click="createFolder()" title="新建文件夹">
<img src="@/assets/images/reading/create.png" alt="">
<span>新建</span>
</div>
<span class="collapse-btn" title="收起" @click="leftCollapsed = true">«</span> <span class="collapse-btn" title="收起" @click="leftCollapsed = true">«</span>
</div> </div>
</div> </div>
@@ -736,8 +739,14 @@ onMounted(async () => {
padding: 14px 12px 6px 16px; padding: 14px 12px 6px 16px;
.left-title { font-weight: bold; font-size: 15px; color: #000; } .left-title { font-weight: bold; font-size: 15px; color: #000; }
.left-actions { .left-actions {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 6px;
.action-icon { width: 18px; height: 18px; cursor: pointer; opacity: 0.7; &:hover { opacity: 1; } } .create-folder-btn {
display: flex; align-items: center; gap: 3px;
padding: 3px 10px; border-radius: 4px;
background: #004EA0; color: #fff; font-size: 12px; cursor: pointer;
img { width: 14px; height: 14px; filter: brightness(10); }
&:hover { background: #003d80; }
}
.collapse-btn { font-size: 14px; cursor: pointer; color: #999; padding: 2px 4px; border-radius: 4px; &:hover { background: #F0F4FF; color: #004EA0; } } .collapse-btn { font-size: 14px; cursor: pointer; color: #999; padding: 2px 4px; border-radius: 4px; &:hover { background: #F0F4FF; color: #004EA0; } }
} }
} }