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-21 16:20:18 +08:00
parent 73cad2900d
commit cffe81c594
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/tools/add_background/add_background.vue
View File

@ -1380,6 +1380,10 @@ const removeHistoryItem = (index: number) => {
border: 2px solid transparent; border: 2px solid transparent;
transition: all 0.15s ease; transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
align-items: center;
justify-content: center;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
@ -1388,8 +1392,6 @@ const removeHistoryItem = (index: number) => {
} }
&.active { &.active {
border-color: #1fc76f;
box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.3);
transform: scale(1.15); transform: scale(1.15);
&::after { &::after {
@ -1397,12 +1399,11 @@ const removeHistoryItem = (index: number) => {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) rotate(45deg);
width: 8px; width: 8px;
height: 8px; height: 14px;
background: white; border: solid #1fc76f;
border-radius: 50%; border-width: 0 2.5px 2.5px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
} }
} }
} }
@ -1793,7 +1794,7 @@ const removeHistoryItem = (index: number) => {
.common-colors-grid { .common-colors-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 10px; gap: 10px;
} }
@ -2054,6 +2055,12 @@ const removeHistoryItem = (index: number) => {
.shade-item { .shade-item {
width: 32px; width: 32px;
height: 32px; height: 32px;
&.active::after {
width: 7px;
height: 12px;
border-width: 0 2px 2px 0;
}
} }
.toolbar-actions { .toolbar-actions {
@ -2173,7 +2180,7 @@ const removeHistoryItem = (index: number) => {
} }
.common-colors-grid { .common-colors-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
</style> </style>