feat: 完成回溯过去页面 90% 原型还原 - 金色玻璃态样式和打字机动画
This commit is contained in:
@@ -125,41 +125,67 @@ onMounted(() => {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* ==================== 输入卡片 - 金色玻璃态 ==================== */
|
||||
.input-card {
|
||||
padding: 32rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
flex-shrink: 0;
|
||||
/* 金色玻璃态背景 */
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
|
||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||
border-radius: 48rpx;
|
||||
box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
/* 紫色圆点指示器 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #C084FC;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12rpx rgba(192, 132, 252, 0.6);
|
||||
}
|
||||
|
||||
/* 卡片标题 - 原型标准 */
|
||||
.card-title {
|
||||
font-size: 18rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgba(192, 132, 252, 0.8);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ==================== 输入框样式 - 玻璃态 ==================== */
|
||||
.title-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 32rpx;
|
||||
padding: 0 24rpx;
|
||||
color: rgba(243, 232, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.title-input:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(168, 85, 247, 0.4);
|
||||
box-shadow: 0 0 12rpx rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
|
||||
.title-input::placeholder {
|
||||
@@ -173,42 +199,78 @@ onMounted(() => {
|
||||
.date-value {
|
||||
font-size: 22rpx;
|
||||
color: rgba(168, 85, 247, 0.6);
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: transparent;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 32rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.content-textarea:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.content-textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ==================== 保存按钮 ==================== */
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, rgba(147, 51, 234, 0.4), rgba(124, 58, 237, 0.4));
|
||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||
border-radius: 32rpx;
|
||||
border-radius: 40rpx;
|
||||
color: rgba(243, 232, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.save-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
|
||||
.save-btn.disabled {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
/* ==================== 事件列表 ==================== */
|
||||
.events-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
/* ==================== 事件卡片 ==================== */
|
||||
.event-card {
|
||||
padding: 32rpx;
|
||||
background: rgba(168, 85, 247, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 48rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.event-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 20rpx rgba(168, 85, 247, 0.05);
|
||||
}
|
||||
|
||||
.event-header {
|
||||
@@ -221,12 +283,14 @@ onMounted(() => {
|
||||
.event-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: rgba(243, 232, 255, 0.9);
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.event-date {
|
||||
font-size: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: rgba(168, 85, 247, 0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
@@ -237,77 +301,82 @@ onMounted(() => {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* ==================== AI 回复区域 - 金色玻璃态核心特征 ==================== */
|
||||
.ai-reply {
|
||||
background: rgba(168, 85, 247, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 40rpx;
|
||||
/* 金色玻璃态背景 */
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(232, 121, 249, 0.05));
|
||||
border: 1px solid rgba(168, 85, 247, 0.25);
|
||||
border-top: 2rpx solid rgba(255, 255, 255, 0.1);
|
||||
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;
|
||||
padding: 28rpx;
|
||||
margin-top: 24rpx;
|
||||
inset 0 0 20rpx rgba(168, 85, 247, 0.05);
|
||||
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);
|
||||
inset 0 0 10rpx rgba(168, 85, 247, 0.03);
|
||||
}
|
||||
|
||||
.ai-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
filter: drop-shadow(0 0 8rpx rgba(192, 132, 252, 0.6));
|
||||
}
|
||||
|
||||
.ai-title {
|
||||
font-size: 18rpx;
|
||||
color: rgba(192, 132, 252, 0.8);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ai-content {
|
||||
font-size: 22rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(243, 232, 255, 0.8);
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 打字机动画 - 原型标准 */
|
||||
.ai-content.typing {
|
||||
animation: typing-reveal 2.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
glow-pulse 2s ease-in-out infinite 1s;
|
||||
animation: typing-reveal 2.5s steps(60, end);
|
||||
}
|
||||
|
||||
@keyframes typing-reveal {
|
||||
from {
|
||||
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);
|
||||
}
|
||||
/* 光标闪烁效果（增强打字机感） */
|
||||
.ai-content.typing::after {
|
||||
content: '|';
|
||||
animation: cursor-blink 0.8s steps(2) infinite;
|
||||
color: rgba(192, 132, 252, 0.6);
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user