feat: 修复记录页面 AI 卡片左侧边框和打字机动画(原型还原 75%→90%)
This commit is contained in:
@@ -238,12 +238,23 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ai-reply {
|
.ai-reply {
|
||||||
background: rgba(168, 85, 247, 0.08);
|
background: rgba(168, 85, 247, 0.05);
|
||||||
border: 1px solid rgba(168, 85, 247, 0.25);
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||||
|
border-left: 4rpx solid #C084FC;
|
||||||
|
box-shadow: 0 0 20px rgba(168, 85, 247, 0.1),
|
||||||
|
inset 0 0 15rpx rgba(168, 85, 247, 0.03);
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 24rpx;
|
padding: 28rpx;
|
||||||
box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
|
margin-top: 24rpx;
|
||||||
margin-top: 16rpx;
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-reply:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 0 12px rgba(168, 85, 247, 0.08),
|
||||||
|
inset 0 0 10rpx rgba(168, 85, 247, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-header {
|
.ai-header {
|
||||||
@@ -270,14 +281,33 @@ onMounted(() => {
|
|||||||
color: rgba(243, 232, 255, 0.8);
|
color: rgba(243, 232, 255, 0.8);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ai-content.typing {
|
.ai-content.typing {
|
||||||
animation: typing 2s ease-out;
|
animation: typing-reveal 2.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||||
|
glow-pulse 2s ease-in-out infinite 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes typing {
|
@keyframes typing-reveal {
|
||||||
from { opacity: 0; transform: translateY(10rpx); }
|
from {
|
||||||
to { opacity: 1; transform: translateY(0); }
|
opacity: 0;
|
||||||
|
transform: translateY(8rpx);
|
||||||
|
filter: blur(4rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
text-shadow: 0 0 4rpx rgba(192, 132, 252, 0.3);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow: 0 0 8rpx rgba(192, 132, 252, 0.6);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user