/** 修改自定义的关闭和最小化图标的样式 */
:deep(.hover-box) {
@apply w-28px h24px flex-center hover:bg-#e7e7e7;
svg {
color: #404040;
}
}
:deep(.action-close) {
svg {
color: #404040;
}
}
/** 改变输入框中的位置 */
:deep(.n-input .n-input__input, .n-input .n-input__textarea) {
margin-left: 22px;
}
/** 隐藏naive UI的滚动条 */
:deep(
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar,
.n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar
) {
display: none;
}
// 登录页面的头像容器 @author mint
.avatar-container {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto;
&::after {
content: '';
position: absolute;
inset: -10px;
background: rgba(107, 78, 171, 0.25);
border-radius: 50%;
z-index: -1;
filter: blur(10px);
animation: subtle-pulse 3s ease-in-out infinite;
}
.n-avatar {
position: relative;
z-index: 1;
transform: translateY(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(107, 78, 171, 0.2);
background: linear-gradient(135deg, #ffffff 0%, #f8f6ff 100%);
border: 2px solid rgba(255, 255, 255, 0.9);
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(107, 78, 171, 0.25);
}
}
}
@keyframes subtle-pulse {
0%, 100% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
// 输入框动画
.input-container {
position: relative;
transition: all 0.3s ease;
.n-input {
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(107, 78, 171, 0.1);
&:hover, &:focus {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-1px);
border-color: rgba(107, 78, 171, 0.3);
box-shadow: 0 4px 12px rgba(107, 78, 171, 0.1);
}
}
}
// 按钮动画
.login-button {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
}
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(107, 78, 171, 0.2);
&::before {
left: 100%;
}
}
&:active {
transform: translateY(1px);
}
}
// 底部链接动画
.bottom-link {
position: relative;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: currentColor;
transition: width 0.3s ease;
}
&:hover::after {
width: 100%;
}
}
// 账号选择框动画
.account-box {
animation: slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
.account-item {
transition: all 0.2s ease;
&:hover {
background: rgba(107, 78, 171, 0.1);
transform: translateX(4px);
}
}
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

样式优化
2025年01月29日 17:37