study/ClipboardManager
1
0
Fork 0
mirror of https://github.com/ZiuChen/ClipboardManager.git synced 2025-06-09 07:24:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: #5 #11 图片右侧多余图块 移除数据底部色块 调整图片边框样式

Browse Source
This commit is contained in:
ZiuChen 2022-08-17 23:01:24 +08:00
parent 3aa9551414
commit b5efda6a82
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/cpns/ClipItemList.vue
View File

@ -25,7 +25,7 @@
<div>{{ item.data.slice(0, 500).trim() }}</div> <div>{{ item.data.slice(0, 500).trim() }}</div>
</template> </template>
<template v-if="item.type === 'image'"> <template v-if="item.type === 'image'">
<img :src="item.data" alt="Image" /> <img class="clip-data-image" :src="item.data" alt="Image" />
<div class="clip-data-status">{{ item.size }}</div> <div class="clip-data-status">{{ item.size }}</div>
</template> </template>
<template v-if="item.type === 'file'"> <template v-if="item.type === 'file'">

12
src/style/cpns/clip-item-list.less
View File

@ -45,16 +45,20 @@
white-space: pre-wrap; white-space: pre-wrap;
flex-direction: column; flex-direction: column;
color: @text-color; color: @text-color;
background-color: @bg-color; img.clip-data-image {
img { max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
max-height: 150px;
max-width: 90%; max-width: 90%;
padding: 5px;
background-color: @text-color-lighter;
border-radius: 5px;
} }
.clip-data-status { .clip-data-status {
position: absolute; position: absolute;
width: fit-content; width: fit-content;
color: @bg-color; color: @bg-color;
background-color: @text-color; background-color: @text-color-lighter;
border-radius: 5px;
padding: 3px;
} }
} }
} }