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

feat: 各个Item之间分割线在深色模式下的样式 #6

Browse Source
This commit is contained in:
ZiuChen 2022-08-18 14:34:34 +08:00
parent d132342f29
commit 54a6c69a7a
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/cpns/ClipItemList.vue
View File

@ -26,7 +26,7 @@
</template> </template>
<template v-if="item.type === 'image'"> <template v-if="item.type === 'image'">
<img class="clip-data-image" :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 image">{{ item.size }}</div>
</template> </template>
<template v-if="item.type === 'file'"> <template v-if="item.type === 'file'">
<div <div

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

@ -4,13 +4,14 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border: 0px solid @bg-color; border: 0px solid @bg-color;
/* 有上边框占用px 但是不显示(与背景同色) */ margin: 0px 5px;
border-width: 1px 0px 1px 0px; /* 占用px 但是不显示(与背景同色) */
border-color: @bg-color @bg-color #eee @bg-color; border-width: 1px 1px 1px 1px;
border-color: @text-bg-color-lighter @bg-color @text-bg-color-lighter @bg-color;
cursor: pointer; cursor: pointer;
&.active { &.active {
border: 0px solid @primary-color; border: 0px solid @primary-color;
border-width: 1px 0px 1px 0px; border-width: 1px 1px 1px 1px;
background-color: @text-bg-color-lighter; background-color: @text-bg-color-lighter;
} }
.clip-info { .clip-info {
@ -46,19 +47,24 @@
flex-direction: column; flex-direction: column;
color: @text-color; color: @text-color;
img.clip-data-image { img.clip-data-image {
// 此 class用于区分 file的 image
max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框 max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
max-width: 90%; max-width: 90%;
padding: 5px; padding: 5px;
background-color: @text-color-lighter; background-color: @bg-color;
border-radius: 5px; border-radius: 5px;
} }
.clip-data-status { .clip-data-status {
position: absolute; position: absolute;
width: fit-content; width: fit-content;
color: @bg-color; color: @text-color;
background-color: @text-color-lighter; background-color: @primary-color-lighter;
border-radius: 5px; border-radius: 5px;
padding: 3px; padding: 2px;
font-size: 13px;
&.image {
margin: 10px;
}
} }
} }
} }

2
src/views/Main.vue
View File

@ -168,7 +168,7 @@ onMounted(() => {
} }
} }
.clip-break { .clip-break {
height: 55px; height: 60px;
} }
.clip-empty-status { .clip-empty-status {
height: 100%; height: 100%;