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

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

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