vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页和去背景页面的历史记录缩略图删除按钮风格样式

Browse Source
This commit is contained in:
jingrow 2026-01-22 13:51:23 +08:00
parent 8d67c28f61
commit 163d5d9d70
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/HomePage.vue
View File

@ -2495,8 +2495,8 @@ onUnmounted(() => {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 0;
overflow-y: visible;
padding: 10px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
@ -2576,7 +2576,7 @@ onUnmounted(() => {
height: 100%;
border-radius: 8px;
border: 2px solid #e5e7eb;
overflow: hidden;
overflow: visible;
position: relative;
background:
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@ -2592,6 +2592,7 @@ onUnmounted(() => {
height: 100%;
object-fit: contain;
display: block;
border-radius: 6px;
}
&:hover {
@ -2600,13 +2601,13 @@ onUnmounted(() => {
.history-delete-btn {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
border-radius: 999px;
border: none;
background: rgba(15, 23, 42, 0.6);
border: 2px solid white;
background: #ef4444;
color: white;
display: inline-flex;
align-items: center;
@ -2617,6 +2618,8 @@ onUnmounted(() => {
cursor: pointer;
font-size: 0;
line-height: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 10;
&::before,
&::after {
@ -2918,7 +2921,7 @@ onUnmounted(() => {
.history-scroll-container {
gap: 8px;
padding: 0 8px;
padding: 10px 8px;
}
.toolbar-btn {

23
src/views/tools/remove_background/remove_background.vue
View File

@ -1403,8 +1403,8 @@ const removeHistoryItem = (index: number) => {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 0;
overflow-y: visible;
padding: 10px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
@ -1484,7 +1484,7 @@ const removeHistoryItem = (index: number) => {
height: 100%;
border-radius: 8px;
border: 2px solid #e5e7eb;
overflow: hidden;
overflow: visible;
position: relative;
background:
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@ -1500,6 +1500,7 @@ const removeHistoryItem = (index: number) => {
height: 100%;
object-fit: contain;
display: block;
border-radius: 6px;
}
&:hover {
@ -1508,13 +1509,13 @@ const removeHistoryItem = (index: number) => {
.history-delete-btn {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
height: 18px;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
border-radius: 999px;
border: none;
background: rgba(15, 23, 42, 0.6);
border: 2px solid white;
background: #ef4444;
color: white;
display: inline-flex;
align-items: center;
@ -1525,6 +1526,8 @@ const removeHistoryItem = (index: number) => {
cursor: pointer;
font-size: 0;
line-height: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 10;
&::before,
&::after {
@ -1630,7 +1633,7 @@ const removeHistoryItem = (index: number) => {
.history-scroll-container {
gap: 8px;
padding: 0 8px;
padding: 10px 8px;
}
.toolbar-btn {