Skip to content
This repository has been archived by the owner on Jan 21, 2024. It is now read-only.

Refine image style in attachment page #374

Merged
merged 1 commit into from
Nov 9, 2021
Merged

Refine image style in attachment page #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/components/Attachment/AttachmentSelectDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,22 @@
<a-divider />
<a-row type="flex" align="middle">
<a-col :span="24">
<a-spin :spinning="loading">
<a-spin :spinning="loading" class="attachments-group">
<a-empty v-if="attachments.length === 0" />
<div
v-else
class="attach-item"
class="attach-item attachments-group-item"
v-for="(item, index) in attachments"
:key="index"
@click="handleSelectAttachment(item)"
>
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
</a-spin>
</a-col>
Expand Down
19 changes: 19 additions & 0 deletions src/styles/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -862,6 +862,25 @@ body {
top: 0;
}

// 附件图片样式
.attachments-group {
&-item {
padding: 0;
height: 140px;
&-img {
display: block;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.attachments-group &-type {
font-size: 38px;
text-transform: capitalize;
}
}
}

.ant-affix {
z-index: 1000 !important;
}
Expand Down
12 changes: 9 additions & 3 deletions src/views/attachment/AttachmentList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
</a-col>
<a-col :span="24">
<a-list
class="attachments-group"
:grid="{ gutter: 12, xs: 2, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
:dataSource="formattedDatas"
:loading="listLoading"
Expand All @@ -82,9 +83,14 @@
@click="handleShowDetailDrawer(item)"
@contextmenu.prevent="handleContextMenu($event, item)"
>
<div class="attach-thumb">
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<div class="attach-thumb attachments-group-item">
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
<a-card-meta class="p-3">
<ellipsis :length="isMobile() ? 12 : 16" tooltip slot="description">{{ item.name }}</ellipsis>
Expand Down
13 changes: 9 additions & 4 deletions src/views/attachment/components/AttachmentDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,23 @@
<a-divider />
<a-row type="flex" align="middle">
<a-col :span="24">
<a-spin :spinning="loading">
<a-spin :spinning="loading" class="attachments-group">
<a-empty v-if="formattedDatas.length === 0" />
<div
v-else
class="attach-item"
class="attach-item attachments-group-item"
v-for="(item, index) in formattedDatas"
:key="index"
@click="handleShowDetailDrawer(item)"
@contextmenu.prevent="handleContextMenu($event, item)"
>
<span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
<img :src="item.thumbPath" v-show="handleJudgeMediaType(item)" loading="lazy" />
<span v-if="!handleJudgeMediaType(item)" class="attachments-group-item-type">{{ item.suffix }}</span>
<span
v-else
class="attachments-group-item-img"
:style="`background-image:url(${item.thumbPath})`"
loading="lazy"
/>
</div>
</a-spin>
</a-col>
Expand Down