From dd79da1199c1bd4cfcebf547830e20dc1fa119b6 Mon Sep 17 00:00:00 2001 From: Peanut Date: Mon, 16 Mar 2026 22:58:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=9B=9E=E6=BA=AF?= =?UTF-8?q?=E8=BF=87=E5=8E=BB=E9=A1=B5=E9=9D=A2=2090%=20=E5=8E=9F=E5=9E=8B?= =?UTF-8?q?=E8=BF=98=E5=8E=9F=20-=20=E9=87=91=E8=89=B2=E7=8E=BB=E7=92=83?= =?UTF-8?q?=E6=80=81=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=89=93=E5=AD=97=E6=9C=BA?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mini-program/src/pages/main/RecordView.vue | 149 +++++++++++++++------ 1 file changed, 109 insertions(+), 40 deletions(-) diff --git a/mini-program/src/pages/main/RecordView.vue b/mini-program/src/pages/main/RecordView.vue index dfa7a11..e2ce8ca 100644 --- a/mini-program/src/pages/main/RecordView.vue +++ b/mini-program/src/pages/main/RecordView.vue @@ -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; } }