KTeam/kt-template-online-web
1
0
Fork 0
mirror of https://github.com/KwiTsukasa/kt-template-online-web.git synced 2026-05-27 16:35:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 优化卡片封面预览

Browse Source
This commit is contained in:
sunlei 2026-05-16 13:32:07 +08:00
parent 5620c52142
commit 473c8f84ec
1 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/modules/chartList/ChartList.vue
View File

@ -1,5 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { Button, Card, Descriptions, DescriptionsItem, Empty, message, Pagination, Popconfirm, Spin, Tooltip } from "ant-design-vue"; import {
Button,
Card,
Descriptions,
DescriptionsItem,
Empty,
Image as AImage,
message,
Pagination,
Popconfirm,
Spin,
Tooltip,
} from "ant-design-vue";
import { DeleteOutlined, ShareAltOutlined } from "@ant-design/icons-vue"; import { DeleteOutlined, ShareAltOutlined } from "@ant-design/icons-vue";
import { onBeforeUnmount, onMounted, reactive } from "vue"; import { onBeforeUnmount, onMounted, reactive } from "vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
@ -196,8 +208,17 @@ const handleRemove = async (id: string) => {
</div> </div>
</template> </template>
<template #cover> <template #cover>
<div class="chart-cover" @click="chartClick(item.id)"> <div
<img :src="item.image" class="chart-image" v-if="item.image" /> class="chart-cover"
:class="{ 'is-empty': !item.image }"
@click="!item.image && chartClick(item.id)"
>
<AImage
v-if="item.image"
:src="item.image"
class="chart-image"
:preview="true"
/>
<Empty v-else class="chart-empty" description="暂无图片" /> <Empty v-else class="chart-empty" description="暂无图片" />
</div> </div>
</template> </template>
@ -322,15 +343,39 @@ const handleRemove = async (id: string) => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 160px; height: 180px;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border);
background: var(--app-cover-bg); background: var(--app-cover-bg);
cursor: default;
}
.chart-cover.is-empty {
cursor: pointer;
} }
.chart-image { .chart-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; }
:deep(.chart-cover .ant-image) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
:deep(.chart-cover .ant-image-img) {
width: 100%;
height: 100%;
object-fit: contain;
}
:deep(.chart-cover .ant-image-mask) {
border-radius: 6px;
} }
.chart-empty { .chart-empty {