feat: 百科rag
This commit is contained in:
Blizzard
@@ -0,0 +1,265 @@
|
||||
/** pages/wiki/chat/index.wxss **/
|
||||
.chat-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #EEF3E5 0%, #F4F6F0 35%, #F4F6F0 100%);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 20rpx 24rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* ── Welcome ── */
|
||||
.welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 20rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.welcome-glow {
|
||||
position: absolute;
|
||||
top: -60rpx;
|
||||
width: 480rpx;
|
||||
height: 480rpx;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(85,139,47,0.15) 0%, rgba(85,139,47,0.04) 50%, transparent 75%);
|
||||
pointer-events: none;
|
||||
animation: glowPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.8; }
|
||||
50% { transform: scale(1.08); opacity: 1; }
|
||||
}
|
||||
|
||||
.welcome-icon { font-size: 88rpx; margin-bottom: 12rpx; position: relative; }
|
||||
|
||||
.anim-float { animation: floatUp 3s ease-in-out infinite; }
|
||||
|
||||
@keyframes floatUp {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12rpx); }
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 42rpx;
|
||||
font-weight: 800;
|
||||
color: #2E7D32;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.welcome-sub {
|
||||
font-size: 24rpx;
|
||||
color: #90A4AE;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255,255,255,0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2rpx 12rpx rgba(85,139,47,0.08);
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #558B2F;
|
||||
margin-bottom: 32rpx;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.history-entry:active {
|
||||
transform: scale(0.96);
|
||||
background: #F0F7EB;
|
||||
}
|
||||
|
||||
/* Quick Ask Grid */
|
||||
.quick-grid {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.quick-card {
|
||||
background: rgba(255,255,255,0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
box-shadow: 0 2rpx 16rpx rgba(85,139,47,0.06);
|
||||
border: 1rpx solid rgba(85,139,47,0.06);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.quick-card:active {
|
||||
transform: scale(0.96);
|
||||
background: #F0F7EB;
|
||||
border-color: rgba(85,139,47,0.15);
|
||||
}
|
||||
|
||||
.qc-emoji { font-size: 40rpx; }
|
||||
|
||||
.qc-text {
|
||||
font-size: 25rpx;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* ── Message Row ── */
|
||||
.msg-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 12rpx;
|
||||
animation: fadeSlideIn 0.25s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; transform: translateY(16rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.msg-row.user { flex-direction: row-reverse; }
|
||||
|
||||
.ai-avatar-wrap {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(85,139,47,0.12);
|
||||
}
|
||||
|
||||
.ai-avatar-emoji { font-size: 32rpx; }
|
||||
|
||||
/* ── Bubbles ── */
|
||||
.msg-bubble {
|
||||
max-width: 78%;
|
||||
padding: 22rpx 26rpx;
|
||||
border-radius: 24rpx;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.msg-bubble.ai {
|
||||
max-width: 88%;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
border-top-left-radius: 6rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.msg-bubble.user {
|
||||
background: linear-gradient(135deg, #558B2F, #7CB342);
|
||||
border-top-right-radius: 6rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(85,139,47,0.2);
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
font-size: 29rpx;
|
||||
line-height: 1.7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ai-text {
|
||||
font-size: 29rpx;
|
||||
line-height: 1.85;
|
||||
color: #1F2937;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* ── Typing ── */
|
||||
.typing-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #A5D6A7;
|
||||
animation: bounce 1.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) { animation-delay: 0.16s; }
|
||||
.dot:nth-child(3) { animation-delay: 0.32s; }
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.typing-label {
|
||||
font-size: 22rpx;
|
||||
color: #90A4AE;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Input ── */
|
||||
.input-area {
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
border-top: 1rpx solid rgba(0,0,0,0.03);
|
||||
padding: 14rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 78rpx;
|
||||
background: #F0F4E8;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 28rpx;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 50%;
|
||||
background: #D1D5DB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.send-btn.active {
|
||||
background: linear-gradient(135deg, #558B2F, #7CB342);
|
||||
box-shadow: 0 4rpx 20rpx rgba(85,139,47,0.35);
|
||||
}
|
||||
|
||||
.send-btn:active { transform: scale(0.85); }
|
||||
|
||||
.safe-bottom {
|
||||
height: calc(14rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
Reference in New Issue
Block a user