github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 19:23:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 文件名称显示两行

Browse Source
This commit is contained in:
kuaifan 2023-03-09 04:01:25 +08:00
parent dc9a7c07e8
commit 9cfc736ba9
2 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/js/pages/manage/file.vue
View File

@ -93,8 +93,9 @@
</div> </div>
<div v-else class="file-list" @contextmenu.prevent="handleContextmenu"> <div v-else class="file-list" @contextmenu.prevent="handleContextmenu">
<ul> <ul>
<li <li v-for="item in fileList">
v-for="item in fileList" <div
class="file-item"
:class="{ :class="{
shear: shearIds.includes(item.id), shear: shearIds.includes(item.id),
highlight: selectIds.includes(item.id), highlight: selectIds.includes(item.id),
@ -136,6 +137,7 @@
<div v-if="item._load" class="file-load"><Loading/></div> <div v-if="item._load" class="file-load"><Loading/></div>
</div> </div>
<div v-else class="file-name" :title="item.name">{{$A.getFileName(item)}}</div> <div v-else class="file-name" :title="item.name">{{$A.getFileName(item)}}</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>

20
resources/assets/sass/pages/page-file.scss vendored
View File

@ -347,11 +347,14 @@
display: grid; display: grid;
justify-content: space-between; justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px); grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 12px; row-gap: 2px;
column-gap: 12px;
> li { > li {
list-style: none; list-style: none;
width: 100px; width: 100px;
height: 110px; height: 124px;
}
.file-item {
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
@ -382,16 +385,18 @@
.file-name { .file-name {
display: block; display: block;
width: 100%; width: 100%;
height: 20px; line-height: 16px;
line-height: 20px;
color: $primary-text-color; color: $primary-text-color;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
margin-bottom: 5px; margin: 11px 0 5px;
padding: 0 6px; padding: 0 6px;
overflow: hidden; word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.file-check { .file-check {
opacity: 0; opacity: 0;
@ -421,6 +426,7 @@
} }
} }
.file-icon { .file-icon {
flex-shrink: 0;
display: inline-block; display: inline-block;
width: 64px; width: 64px;
height: 64px; height: 64px;