@font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1234567_abcdefg.eot'); } .content { display: flex; flex-direction: column; height: 100vh; background: #e6f6ff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; padding-top: 0; /* 移除顶部padding */ padding-bottom: 120rpx; /* 为底部输入框留出空间 */ box-sizing: border-box; } /* 底部留白 */ .bottom-space { height: 120rpx; } /* 合并后的顶部区域 */ .header-combined { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; background-color: #ffffff; position: fixed; top: 0; left: 0; right: 0; z-index: 110; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .left-section { flex: 1; display: flex; align-items: center; } .middle-section { flex: 2; display: flex; flex-direction: column; align-items: center; } .right-section { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 10rpx; } .logo-container { display: flex; align-items: center; justify-content: center; margin-bottom: 5rpx; } .logo-icon { font-size: 36rpx; margin-right: 10rpx; } .main-title { font-size: 36rpx; font-weight: bold; color: #3a9eeb; } .sub-title { font-size: 24rpx; color: #666; } .back-btn { display: flex; align-items: center; padding: 16rpx; border-radius: 30rpx; background-color: rgba(0, 153, 255, 0.08); transition: all 0.2s ease; } .back-btn:active { background-color: rgba(0, 153, 255, 0.15); } .back-icon { font-size: 32rpx; color: #0099ff; font-weight: bold; margin-right: 5rpx; } .back-text { font-size: 28rpx; color: #0099ff; font-weight: 500; } .test-btn { display: flex; align-items: center; padding: 10rpx 16rpx; border-radius: 30rpx; background-color: rgba(255, 193, 7, 0.1); transition: all 0.2s ease; } .test-btn:active { background-color: rgba(255, 193, 7, 0.2); } .test-text { font-size: 24rpx; color: #ffc107; font-weight: 500; } .console-btn { display: flex; align-items: center; padding: 10rpx 16rpx; border-radius: 30rpx; background-color: rgba(255, 193, 7, 0.1); transition: all 0.2s ease; } .console-btn:active { background-color: rgba(255, 193, 7, 0.2); } .console-text { font-size: 24rpx; color: #ffc107; font-weight: 500; } .new-chat-btn { display: flex; align-items: center; color: #0099ff; padding: 10rpx 16rpx; border-radius: 30rpx; background-color: rgba(0, 153, 255, 0.08); transition: all 0.2s ease; } .new-chat-btn:active { background-color: rgba(0, 153, 255, 0.15); } .new-chat-icon { font-size: 28rpx; font-weight: bold; margin-right: 5rpx; color: #0099ff; } .new-chat-text { font-size: 24rpx; color: #0099ff; font-weight: 500; } /* 聊天头部 */ .chat-header { padding: 20rpx 30rpx; background-color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid #f0f0f0; margin-top: 120rpx; /* 调整顶部边距,为合并后的标题栏留出空间 */ margin-bottom: 10rpx; position: fixed; top: 0; left: 0; right: 0; z-index: 90; } .assistant-name { display: flex; align-items: center; font-size: 28rpx; color: #333; font-weight: 500; } .dot { width: 12rpx; height: 12rpx; background-color: #4facfe; border-radius: 50%; margin-right: 10rpx; } /* 消息容器 */ .message-container { flex: 1; margin-top: 180rpx; /* 调整顶部边距,为合并后的标题栏和聊天头部留出空间 */ padding-bottom: 120rpx; /* 为底部输入框留出空间 */ } /* 消息列表 */ .message-list { width: 100%; height: calc(100vh - 400rpx); /* 调整高度 */ padding: 20rpx; box-sizing: border-box; } /* 欢迎消息容器样式 */ .welcome-container { background-color: #fff; border-radius: 20rpx; margin-bottom: 30rpx; overflow: hidden; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03); } .welcome-message { display: flex; padding: 30rpx; } .welcome-message .avatar { width: 70rpx; height: 70rpx; border-radius: 50%; overflow: hidden; margin-right: 15rpx; border: 2rpx solid #f5f5f5; flex-shrink: 0; } .welcome-message .message-bubble { background-color: transparent; box-shadow: none; padding: 0; color: #333; line-height: 1.6; flex: 1; } /* 快捷问题 */ .quick-questions { padding: 20rpx; display: flex; flex-direction: column; gap: 16rpx; border-top: 1px solid rgba(0, 0, 0, 0.03); } .quick-question { background-color: #f8fbfe; padding: 24rpx; border-radius: 16rpx; font-size: 32rpx; color: #333; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03); display: flex; align-items: center; position: relative; } .dot-marker { width: 15rpx; height: 15rpx; background-color: #72cbff; border-radius: 50%; margin-right: 20rpx; flex-shrink: 0; } .question-text { flex: 1; font-weight: 500; color: #333; } .arrow-icon { width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(114, 203, 255, 0.1); flex-shrink: 0; color: #72cbff; } .arrow-icon text { color: #72cbff; font-size: 36rpx; font-weight: bold; line-height: 1; } .message-item { margin-bottom: 30rpx; animation: fadeIn 0.3s ease; } .message-header { display: flex; align-items: center; margin-bottom: 10rpx; padding: 0 20rpx; } .message-time { font-size: 22rpx; color: #999; margin-right: 10rpx; } .message-role { font-size: 22rpx; color: #666; } .message-content { display: flex; align-items: flex-start; padding: 0 20rpx; } .avatar { width: 70rpx; height: 70rpx; border-radius: 50%; overflow: hidden; margin-right: 15rpx; border: 2rpx solid #f5f5f5; } .avatar image { width: 100%; height: 100%; } .message-bubble { max-width: 70%; padding: 30rpx; border-radius: 16rpx; font-size: 28rpx; line-height: 1.6; position: relative; word-break: break-word; } .message-bubble rich-text { line-height: 1.6; } .message-bubble b { color: #0099ff; font-weight: 600; } .message-bubble span { display: inline-block; margin: 0 4rpx; } .user .message-content { flex-direction: row-reverse; } .user .avatar { margin-right: 0; margin-left: 15rpx; } .user .message-bubble { background: linear-gradient(135deg, #72cbff 0%, #5bb8eb 100%); color: #fff; border-radius: 16rpx; padding: 30rpx; line-height: 1.6; } .ai .message-bubble { background-color: #fff; color: #333; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03); padding: 30rpx; line-height: 1.6; border-radius: 16rpx; } .ai .message-bubble rich-text { color: #333; line-height: 1.6; } .ai .message-bubble rich-text ol, .ai .message-bubble rich-text ul { padding-left: 40rpx; margin: 10rpx 0; } .ai .message-bubble rich-text ol li, .ai .message-bubble rich-text ul li { margin: 10rpx 0; } /* 思考中动画 */ .thinking-dots { display: flex; align-items: center; height: 40rpx; } .thinking-dots text { font-size: 40rpx; animation: thinking 1s infinite; margin: 0 2rpx; color: #666; } .thinking-dots text:nth-child(2) { animation-delay: 0.2s; } .thinking-dots text:nth-child(3) { animation-delay: 0.4s; } @keyframes thinking { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4rpx); } } /* 输入区域 */ .input-area { display: flex; padding: 15rpx 20rpx; background-color: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.05); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; } .message-input { flex: 1; height: 70rpx; background-color: #f5f7fa; border-radius: 35rpx; padding: 0 30rpx; font-size: 28rpx; color: #333; } .send-btn { width: 140rpx; height: 70rpx; background-color: #72cbff; color: #ffffff; border-radius: 35rpx; margin-left: 15rpx; font-size: 28rpx; display: flex; align-items: center; justify-content: center; padding: 0; } .send-btn:active { background-color: #5bb8eb; } .send-btn[disabled] { background-color: #cccccc; color: #ffffff; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10rpx); } to { opacity: 1; transform: translateY(0); } } /* 系统消息样式 */ .system .message-bubble { background-color: rgba(0, 0, 0, 0.05); color: #666; text-align: center; font-size: 24rpx; padding: 10rpx 20rpx; margin: 20rpx auto; max-width: 80%; border-radius: 30rpx; } .system .avatar { display: none; } .system .message-header { justify-content: center; } /* 旅行计划卡片样式 */ .travel-plan-card { background-color: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); width: 100%; margin: 20rpx 0; } .travel-plan-header { padding: 20rpx; display: flex; justify-content: center; background-color: #f8f8f8; border-bottom: 1px solid #eee; } .plan-logo text { font-size: 32rpx; font-weight: bold; color: #4cd964; } .travel-plan-basic { padding: 30rpx; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .travel-plan-title { margin-bottom: 20rpx; } .travel-plan-title text { font-size: 36rpx; font-weight: bold; color: #333; } .travel-plan-desc { margin-bottom: 20rpx; color: #666; line-height: 1.5; } .travel-plan-feature { margin-bottom: 20rpx; color: #333; line-height: 1.5; } .travel-plan-price { font-weight: bold; color: #72cbff; font-size: 32rpx; } .travel-plan-price text:last-child { font-size: 24rpx; color: #999; margin-left: 10rpx; font-weight: normal; } .travel-plan-schedule { padding: 30rpx; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #f5f5f5; } .calendar-indicator { background-color: #ff6b6b; color: #fff; width: 60rpx; height: 80rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6rpx; margin-right: 20rpx; } .calendar-indicator .month { font-size: 20rpx; line-height: 1; } .calendar-indicator .day { font-size: 32rpx; font-weight: bold; line-height: 1.2; } .schedule-title { font-size: 34rpx; font-weight: bold; color: #333; } .day-indicator { display: flex; align-items: center; padding: 20rpx 30rpx; background-color: #f8fbff; } .pin-icon { font-size: 36rpx; margin-right: 10rpx; color: #72cbff; } .day-text { font-size: 32rpx; color: #72cbff; font-weight: bold; } .travel-details { padding: 20rpx 30rpx; background-color: #fff; } .detail-item { margin-bottom: 20rpx; display: flex; } .detail-label { color: #72cbff; font-size: 28rpx; font-weight: bold; width: 180rpx; flex-shrink: 0; } .detail-value { color: #333; font-size: 28rpx; line-height: 1.5; flex: 1; } .travel-footer { padding: 20rpx 30rpx; background-color: #fff; display: flex; justify-content: space-around; border-top: 1px solid #f0f0f0; } .footer-item { text-align: center; background-color: #f8f8f8; padding: 10rpx 20rpx; border-radius: 30rpx; } .footer-item text { font-size: 24rpx; color: #666; } .travel-note { padding: 20rpx 30rpx; background-color: #f8fbff; border-top: 1px solid #f0f0f0; } .note-label { color: #72cbff; font-weight: bold; font-size: 28rpx; margin-right: 10rpx; } .note-content { color: #666; font-size: 28rpx; line-height: 1.5; } /* 格式化样式 */ .md-heading { color: #0077e6; font-weight: bold; margin: 20rpx 0 10rpx 0; } h1.md-heading { font-size: 36rpx; margin: 24rpx 0 12rpx 0; } h2.md-heading { font-size: 32rpx; margin: 20rpx 0 10rpx 0; } h3.md-heading { font-size: 30rpx; margin: 16rpx 0 8rpx 0; } .enhanced-title { display: flex; align-items: center; margin: 30rpx 0 20rpx 0; background-color: #f8fbff; padding: 16rpx 20rpx; border-radius: 10rpx; } .title-icon { font-size: 36rpx; margin-right: 10rpx; line-height: 1; } .title-text { font-size: 32rpx; color: #0077e6; font-weight: bold; } .enhanced-list-item { display: flex; align-items: flex-start; margin: 16rpx 0; padding-left: 10rpx; } .item-bullet { width: 12rpx; height: 12rpx; background-color: #72cbff; border-radius: 50%; margin: 14rpx 15rpx 0 0; flex-shrink: 0; } .spot-name { color: #0077e6; font-weight: bold; } .bracket-title { color: #0077e6; font-weight: bold; } .price-highlight { color: #ff6b6b; font-weight: bold; } .day-highlight { color: #0099ff; font-weight: bold; } .time-highlight { color: #0099ff; font-weight: bold; } .keyword-highlight { color: #ff9500; font-weight: bold; }