style(component): 优化CoiEmpty空状态组件主题色适配
- 移除硬编码的紫色,使用CSS变量 var(--primary-color) 跟随系统主题 - 优化装饰性背景元素使用 color-mix 实现动态主题色透明效果 - 移除 coi-empty__action-btn 硬编码样式类,使用 NButton 原生主题色 - 确保空状态组件在主题切换时能正确适配颜色 - 统一深色模式下的主题色显示效果
This commit is contained in:
parent
1b3b14aa36
commit
042823ab8e
@ -32,7 +32,6 @@
|
|||||||
:type="actionType"
|
:type="actionType"
|
||||||
:size="actionButtonSize"
|
:size="actionButtonSize"
|
||||||
round
|
round
|
||||||
class="coi-empty__action-btn"
|
|
||||||
@click="handleAction"
|
@click="handleAction"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
@ -203,7 +202,7 @@ function handleAction() {
|
|||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
animation: pulse 3s ease-in-out infinite;
|
animation: pulse 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@ -211,7 +210,7 @@ function handleAction() {
|
|||||||
.coi-empty__icon {
|
.coi-empty__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: #8b5cf6;
|
color: var(--primary-color);
|
||||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
|
||||||
animation: float 4s ease-in-out infinite;
|
animation: float 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@ -242,44 +241,11 @@ function handleAction() {
|
|||||||
animation: slideInUp 0.6s ease-out 0.6s both;
|
animation: slideInUp 0.6s ease-out 0.6s both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__action-btn {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-btn::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
||||||
transition: left 0.6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-btn:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-btn:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-icon {
|
.coi-empty__action-icon {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__action-btn:hover .coi-empty__action-icon {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 装饰性背景元素 */
|
/* 装饰性背景元素 */
|
||||||
.coi-empty__decorations {
|
.coi-empty__decorations {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -294,7 +260,7 @@ function handleAction() {
|
|||||||
.decoration-circle {
|
.decoration-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 5%, transparent) 0%, color-mix(in srgb, var(--primary-color) 3%, transparent) 100%);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
animation: float 6s ease-in-out infinite;
|
animation: float 6s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@ -416,11 +382,6 @@ function handleAction() {
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty--large .coi-empty__action-btn {
|
|
||||||
padding: 14px 28px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 动画定义 */
|
/* 动画定义 */
|
||||||
@keyframes fadeInUp {
|
@keyframes fadeInUp {
|
||||||
from {
|
from {
|
||||||
@ -484,12 +445,12 @@ function handleAction() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__icon-bg {
|
.coi-empty__icon-bg {
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, color-mix(in srgb, var(--primary-color) 10%, transparent) 100%);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__icon {
|
.coi-empty__icon {
|
||||||
color: #a78bfa;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__title {
|
.coi-empty__title {
|
||||||
@ -501,17 +462,10 @@ function handleAction() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.decoration-circle {
|
.decoration-circle {
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
|
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__action-btn {
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-btn:hover {
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@ -547,12 +501,5 @@ function handleAction() {
|
|||||||
animation: none !important;
|
animation: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coi-empty__action-btn {
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coi-empty__action-btn:hover {
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user