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') }}
</a-tag>
<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 />
</a-button>
<a-button type="text" shape="circle" danger @click="removeCandidate(row.id)">
@@ -1297,19 +1297,20 @@ function backToBrands(): void {
}
.tool-ai-fill {
background: linear-gradient(135deg, #1677ff, #722ed1) !important;
background: #1677ff !important;
border: none !important;
color: #ffffff !important;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(114, 46, 209, 0.25);
transition: all 0.3s ease;
height: 40px;
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
transition: all 0.2s ease;
padding: 0 16px;
}
.tool-ai-fill:hover {
background: linear-gradient(135deg, #2563eb, #8b5cf6) !important;
box-shadow: 0 6px 16px rgba(114, 46, 209, 0.4);
.tool-ai-fill:hover:not([disabled]) {
background: #0958d9 !important;
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
transform: translateY(-1px);
}
@@ -1329,7 +1330,6 @@ function backToBrands(): void {
.tool-estimate {
min-width: 168px;
padding: 8px 12px;
color: #475569;
font-size: 13px;
@@ -1545,6 +1545,11 @@ function backToBrands(): void {
opacity: 1;
}
.action-btn-edit:hover {
color: #52c41a !important;
background: #f6ffed !important;
}
.wizard-page__footer {
position: sticky;
bottom: 0;
apps/admin-web/src/views/BrandsView.vue
+4 -3
View File
@@ -449,7 +449,7 @@ async function invalidateBrandQueries(): Promise<void> {
</div>
<div class="brand-card__actions">
<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 />
</a-button>
</a-tooltip>
@@ -523,7 +523,7 @@ async function invalidateBrandQueries(): Promise<void> {
<template v-else-if="column.key === 'actions'">
<div class="table-actions-row">
<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 />
</a-button>
</a-tooltip>
@@ -550,7 +550,7 @@ async function invalidateBrandQueries(): Promise<void> {
</a>
</div>
<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 />
</a-button>
<a-popconfirm @confirm="competitorMutations.remove.mutate(competitor.id)">
@@ -896,4 +896,5 @@ async function invalidateBrandQueries(): Promise<void> {
border-left: 0;
}
}
.action-btn-edit:hover { color: #52c41a !important; background: #f6ffed !important; }
</style>
apps/admin-web/src/views/MediaView.vue
+2 -1
View File
@@ -565,10 +565,11 @@ async function refreshAll(): Promise<void> {
flex-direction: column;
gap: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.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;
transform: translateY(-2px);
}