root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin-web): refine edit button hover and card shadow polish
Frontend CI / Frontend (push) Successful in 4m21s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-05-13 20:12:36 +08:00
parent 887f5b672e
commit 8890cd1ca4
3 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/views/BrandQuestionCreateView.vue
+13 -8
View File
@@ -1006,7 +1006,7 @@ function backToBrands(): void {
{{ t('brands.questions.badges.tooShort') }} {{ t('brands.questions.badges.tooShort') }}
</a-tag> </a-tag>
<div class="candidate-row__actions"> <div class="candidate-row__actions">
<a-button type="text" shape="circle" @click="startEditingCandidate(row.id)"> <a-button type="text" shape="circle" class="action-btn-edit" @click="startEditingCandidate(row.id)">
<EditOutlined /> <EditOutlined />
</a-button> </a-button>
<a-button type="text" shape="circle" danger @click="removeCandidate(row.id)"> <a-button type="text" shape="circle" danger @click="removeCandidate(row.id)">
@@ -1297,19 +1297,20 @@ function backToBrands(): void {
} }
.tool-ai-fill { .tool-ai-fill {
background: linear-gradient(135deg, #1677ff, #722ed1) !important; background: #1677ff !important;
border: none !important; border: none !important;
color: #ffffff !important; color: #ffffff !important;
font-weight: 600; font-weight: 600;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(114, 46, 209, 0.25); height: 40px;
transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
transition: all 0.2s ease;
padding: 0 16px; padding: 0 16px;
} }
.tool-ai-fill:hover { .tool-ai-fill:hover:not([disabled]) {
background: linear-gradient(135deg, #2563eb, #8b5cf6) !important; background: #0958d9 !important;
box-shadow: 0 6px 16px rgba(114, 46, 209, 0.4); box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -1329,7 +1330,6 @@ function backToBrands(): void {
.tool-estimate { .tool-estimate {
min-width: 168px;
padding: 8px 12px; padding: 8px 12px;
color: #475569; color: #475569;
font-size: 13px; font-size: 13px;
@@ -1545,6 +1545,11 @@ function backToBrands(): void {
opacity: 1; opacity: 1;
} }
.action-btn-edit:hover {
color: #52c41a !important;
background: #f6ffed !important;
}
.wizard-page__footer { .wizard-page__footer {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
apps/admin-web/src/views/BrandsView.vue
+4 -3
View File
@@ -449,7 +449,7 @@ async function invalidateBrandQueries(): Promise<void> {
</div> </div>
<div class="brand-card__actions"> <div class="brand-card__actions">
<a-tooltip :title="t('common.edit')"> <a-tooltip :title="t('common.edit')">
<a-button type="text" shape="circle" size="small" @click.stop="openBrandModal(brand)"> <a-button type="text" shape="circle" size="small" class="action-btn-edit" @click.stop="openBrandModal(brand)">
<EditOutlined /> <EditOutlined />
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@@ -523,7 +523,7 @@ async function invalidateBrandQueries(): Promise<void> {
<template v-else-if="column.key === 'actions'"> <template v-else-if="column.key === 'actions'">
<div class="table-actions-row"> <div class="table-actions-row">
<a-tooltip :title="t('common.edit')"> <a-tooltip :title="t('common.edit')">
<a-button type="text" shape="circle" size="small" @click="openQuestionEditModal(record)"> <a-button type="text" shape="circle" size="small" class="action-btn-edit" @click="openQuestionEditModal(record)">
<EditOutlined /> <EditOutlined />
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@@ -550,7 +550,7 @@ async function invalidateBrandQueries(): Promise<void> {
</a> </a>
</div> </div>
<div class="inline-actions"> <div class="inline-actions">
<a-button type="text" shape="circle" size="small" @click="openCompetitorModal(competitor)"> <a-button type="text" shape="circle" size="small" class="action-btn-edit" @click="openCompetitorModal(competitor)">
<EditOutlined /> <EditOutlined />
</a-button> </a-button>
<a-popconfirm @confirm="competitorMutations.remove.mutate(competitor.id)"> <a-popconfirm @confirm="competitorMutations.remove.mutate(competitor.id)">
@@ -896,4 +896,5 @@ async function invalidateBrandQueries(): Promise<void> {
border-left: 0; border-left: 0;
} }
} }
.action-btn-edit:hover { color: #52c41a !important; background: #f6ffed !important; }
</style> </style>
apps/admin-web/src/views/MediaView.vue
+2 -1
View File
@@ -565,10 +565,11 @@ async function refreshAll(): Promise<void> {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
} }
.media-card:hover { .media-card:hover {
box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.05); box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.08);
border-color: transparent; border-color: transparent;
transform: translateY(-2px); transform: translateY(-2px);
} }