peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成回溯过去页面 90% 原型还原 - 金色玻璃态样式和打字机动画

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