You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1059 lines
24 KiB
1059 lines
24 KiB
<template>
|
|
<view class="deepMate-page">
|
|
<!-- 顶部导航栏 - 固定定位 -->
|
|
<view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
|
<view class="header-left">
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/f91e09b5987802185e7679055dafd272.svg"
|
|
class="icon"
|
|
></image>
|
|
</view>
|
|
<view class="header-center">
|
|
<text class="title">DeepMate</text>
|
|
</view>
|
|
<view class="header-right">
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg"
|
|
class="icon"
|
|
></image>
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/099903c4aabf5713488b5cb60815e3f7.svg"
|
|
class="icon"
|
|
></image>
|
|
<!-- 新增新会话按钮
|
|
<button class="new-chat-button" @click="newChat">
|
|
<text class="new-chat-text">新会话</text>
|
|
</button> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- 顶部固定区域占位符 -->
|
|
<view class="banner-placeholder"></view>
|
|
|
|
<view
|
|
class="banner-panel"
|
|
:class="messages.length === 0 ? '' : 'panelShow'"
|
|
:style="{ paddingTop: safeAreaInsets?.top + 'px' }"
|
|
>
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg"
|
|
class="pray-banner"
|
|
:class="messages.length === 0 ? '' : 'show'"
|
|
:style="{ paddingTop: safeAreaInsets?.top + 'px' }"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="contain">
|
|
<!-- 机器人头像和欢迎语 -->
|
|
<view class="robot-container">
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
|
|
class="robot-avatar"
|
|
></image>
|
|
<view class="welcome-message">
|
|
<text class="greeting">Hi, 我是您的股市随身顾问~</text>
|
|
<text class="description"
|
|
>个股诊断、市场情绪解读，都可以找我。</text
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能标签栏 -->
|
|
<view
|
|
class="function-tabs"
|
|
v-if="messages.length === 0"
|
|
scroll-x="true"
|
|
show-scrollbar="false"
|
|
>
|
|
<view class="tab-item">个股诊断</view>
|
|
<view class="tab-item">市场情绪温度计</view>
|
|
<view class="tab-item">买卖时机提示</view>
|
|
<view class="tab-item">个股</view>
|
|
</view>
|
|
|
|
<!-- 特斯拉推荐卡片 -->
|
|
<view class="recommend-card" v-if="messages.length === 0">
|
|
<view class="arrow" v-if="messages.length === 0"></view>
|
|
<view class="card-content">
|
|
<image
|
|
src="../../static/images/tesla-logo.png"
|
|
class="logo"
|
|
></image>
|
|
<view class="card-text">
|
|
<text class="main-question">当前特斯拉该如何布局？</text>
|
|
<text class="stock-code">TSLA</text>
|
|
</view>
|
|
<image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg"
|
|
class="arrow-icon"
|
|
@click="goBlank"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 可能感兴趣的话题 -->
|
|
<view v-if="messages.length === 0" class="interest-section">
|
|
<text class="section-title">- 您可能感兴趣 -</text>
|
|
<view class="topics-list">
|
|
<view class="topic-item" v-for="topic in hotTopics" :key="topic.id">
|
|
<image :src="topic.icon" class="tag-icon"></image>
|
|
<text class="topic-text" @click="sendMessageList(topic.text)">{{
|
|
topic.text
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 聊天区域 -->
|
|
<view class="chat-container" v-if="messages.length > 0">
|
|
<!-- 给聊天容器添加滚动引用 -->
|
|
<scroll-view
|
|
class="chat-scroll-view"
|
|
scroll-y="true"
|
|
:scroll-top="scrollTop"
|
|
:style="{ paddingTop: safeAreaInsets?.top + 'px' }"
|
|
>
|
|
<view class="message-list" id="messageList">
|
|
<view
|
|
v-for="(message, index) in messages"
|
|
:key="index"
|
|
:class="
|
|
message.isUser ? 'message user-message' : 'message bot-message'
|
|
"
|
|
>
|
|
<!-- 会话图标 -->
|
|
<text
|
|
:class="
|
|
message.isUser
|
|
? 'fa-solid fa-user message-icon'
|
|
: 'fa-solid fa-robot message-icon'
|
|
"
|
|
></text>
|
|
<!-- 会话内容 -->
|
|
<view class="message-content">
|
|
<!-- loading -->
|
|
<view
|
|
class="loading-dots"
|
|
v-if="message.isThinking || !message.isUser"
|
|
>
|
|
<div class="thinking-process">
|
|
<div class="thinking-header">
|
|
<div class="thinking-icon">∞</div>
|
|
<div class="thinking-title">深度思考 正在思考</div>
|
|
<div class="thinking-count">25 个结果</div>
|
|
<div class="thinking-toggle" @click="toggleThinking">
|
|
<span v-if="showThinking">↑</span>
|
|
<span v-else>↓</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="showThinking" class="thinking-content">
|
|
<div class="thinking-item">
|
|
<div class="item-status">
|
|
<span class="checkmark">✓</span>
|
|
</div>
|
|
<div class="item-text">问题分析完成</div>
|
|
</div>
|
|
<div class="thinking-item">
|
|
<div class="item-status">
|
|
<span class="checkmark">✓</span>
|
|
</div>
|
|
<div class="item-text">收集相关信息</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<!-- 使用 rich-text 渲染 Markdown 内容 -->
|
|
<rich-text v-if="!message.isUser" class="message-text" :nodes="renderMarkdown(message.content)"></rich-text>
|
|
<text v-else class="message-text">{{ message.content }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 输入框区域 -->
|
|
<view class="input-area">
|
|
<view class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
placeholder="请输入股票代码/名称，获取AI洞察"
|
|
placeholder-style="color:#fff;opacity:1"
|
|
class="input-field"
|
|
v-model="inputMessage"
|
|
@confirm="sendMessage"
|
|
/>
|
|
<image class="send-button" @click="sendMessage" :disabled="isSending">
|
|
<!-- <image
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg"
|
|
class="send-icon"
|
|
></image> -->
|
|
</image>
|
|
</view>
|
|
<text class="disclaimer"
|
|
>以上数据由AI生成，不作为最终投资建议，决策需独立！</text
|
|
>
|
|
</view>
|
|
|
|
<image
|
|
class="back-to-top"
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/ba357635d2bb480241952bb1cabacd73.svg"
|
|
@click="scrollToTop"
|
|
></image>
|
|
<footerBar class="static-footer" :type="type"></footerBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { safeAreaInsets } = uni.getSystemInfoSync();
|
|
|
|
import { ref, onMounted, nextTick, watch } from "vue";
|
|
import footerBar from "../../components/footerBar-cn.vue";
|
|
import marked from "marked"; // 引入 marked 库
|
|
// 设置 marked 选项
|
|
marked.setOptions({
|
|
renderer: new marked.Renderer(),
|
|
highlight: null, // 如果需要代码高亮，可以设置适当的函数
|
|
langPrefix: 'language-',
|
|
pedantic: false,
|
|
gfm: true,
|
|
breaks: false,
|
|
sanitize: false,
|
|
smartLists: true,
|
|
smartypants: false,
|
|
xhtml: false
|
|
});
|
|
|
|
// 创建一个用于渲染 Markdown 的函数
|
|
const renderMarkdown = (content) => {
|
|
if (!content) return '';
|
|
return marked.parse(content);
|
|
};
|
|
|
|
const type = ref("member");
|
|
const inputMessage = ref("");
|
|
const showThinking = ref(true);
|
|
const isSending = ref(false);
|
|
const uuid = ref("");
|
|
const messages = ref([]);
|
|
const scrollTop = ref(0); // 用于控制scroll-view的滚动位置
|
|
const dataInfo = ref("")
|
|
|
|
const hotTopics = ref([
|
|
{
|
|
id: 1,
|
|
text: "英伟达(NVDA)股票情绪温度？",
|
|
icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
|
|
},
|
|
{
|
|
id: 2,
|
|
text: "博通(AVGO)明天还能涨吗？",
|
|
icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
|
|
},
|
|
{
|
|
id: 3,
|
|
text: "为什么Fluence Energy(FLNC)会暴涨？",
|
|
icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
|
|
},
|
|
{
|
|
id: 4,
|
|
text: "为什么Fluence Energy(FLNC)会暴涨？",
|
|
icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
|
|
},
|
|
]);
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
initUUID();
|
|
// 如果有历史消息，滚动到底部
|
|
if (messages.value.length > 0) {
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 200);
|
|
}
|
|
});
|
|
|
|
// 监听消息变化，当有新消息时自动滚动到最新消息
|
|
watch(
|
|
messages,
|
|
(newMessages) => {
|
|
// 延迟执行滚动，确保DOM更新完成
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 100);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
// 初始化 UUID
|
|
const initUUID = () => {
|
|
let storedUUID = uni.getStorageSync("user_uuid");
|
|
if (!storedUUID) {
|
|
storedUUID = generateUUID();
|
|
uni.setStorageSync("user_uuid", storedUUID);
|
|
}
|
|
uuid.value = storedUUID;
|
|
};
|
|
|
|
// 生成简单UUID
|
|
const generateUUID = () => {
|
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
|
var r = (Math.random() * 16) | 0,
|
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
return v.toString(16);
|
|
});
|
|
};
|
|
|
|
// 新会话
|
|
const newChat = () => {
|
|
messages.value = [];
|
|
uni.removeStorageSync("user_uuid");
|
|
initUUID();
|
|
};
|
|
|
|
// 跳转到空白页
|
|
const goBlank = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/blank/blank",
|
|
});
|
|
};
|
|
|
|
// 发送消息
|
|
const sendMessage = async () => {
|
|
if (inputMessage.value.trim() === "" || isSending.value) return;
|
|
|
|
const res = await getDataInfo();
|
|
console.log("数据格式为"+dataInfo.value);
|
|
|
|
|
|
const userMessage = {
|
|
content: inputMessage.value,
|
|
isUser: true,
|
|
isThinking: false,
|
|
isTyping: false,
|
|
};
|
|
|
|
messages.value.push(userMessage);
|
|
inputMessage.value = "";
|
|
|
|
// 滚动到底部
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 100);
|
|
|
|
// 模拟机器人回复
|
|
simulateBotResponse(userMessage.content);
|
|
};
|
|
|
|
// 发送消息
|
|
const sendMessageList = (listMessage) => {
|
|
console.log(listMessage);
|
|
|
|
const userMessage = {
|
|
content: listMessage,
|
|
isUser: true,
|
|
isThinking: false,
|
|
isTyping: false,
|
|
};
|
|
|
|
messages.value.push(userMessage);
|
|
inputMessage.value = "";
|
|
|
|
// 滚动到底部
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 100);
|
|
|
|
// 模拟机器人回复
|
|
simulateBotResponse(userMessage.content);
|
|
};
|
|
|
|
// 模拟机器人回复
|
|
const simulateBotResponse = (userMessage) => {
|
|
isSending.value = true;
|
|
|
|
// 添加机器人加载消息
|
|
const botMsg = {
|
|
content: "",
|
|
isUser: false,
|
|
isTyping: true,
|
|
isThinking: false,
|
|
};
|
|
|
|
messages.value.push(botMsg);
|
|
|
|
// 滚动到底部
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 100);
|
|
|
|
// 模拟流式响应
|
|
let responseText = `我已经收到您的消息: "${userMessage}"。
|
|
## 股票分析报告
|
|
|
|
### 股票名称: Tesla Inc. (TSLA)
|
|
|
|
- **当前价格**: 448.980
|
|
- **更新时间**: 23/10/2025
|
|
- **今日无变盘点**
|
|
|
|
### 技术分析
|
|
- **CFTL**: 当前牵牛绳为红色，处于龙线区域，最近出现“牛刀小试”，度牛线目前处于青绿色区域。
|
|
- **空间预测**:
|
|
- 预测低一值: 413.364
|
|
- 预测高一值: 426.636
|
|
- 预测低二值: 421.670
|
|
- 预测高二值: 448.314
|
|
- **能量分析**: AI智能均线多头排列，当前卖盘小于买盘
|
|
|
|
### 资金与主力
|
|
- **主力分析**:
|
|
1. 该股庄家中长期筹码成本价格为 356.036，短期资金成本价格为 406.429。该股筹码分散，当日筹码成本价格为 439.322。
|
|
2. 近日没有出现主力集中吸筹。
|
|
3. 近期主力持仓比例大于散户持仓比例。当日主力持仓增加。当日散户持仓减少。
|
|
|
|
### 综合评价
|
|
- **个股走势评价**:
|
|
- 该股整体趋势向好，出现暴涨的可能性较大，当前如果已经持有该股票，可以继续持股观察，如果尚未持有该股票，可持续进行观察，目前处于机会的初期，处于反弹阶段，可以分步建仓！
|
|
|
|
- **核心证据链**:
|
|
- 资金共识：当日多方资金流入。
|
|
- 趋势动能：该股中长期处于上升趋势，短期处于弱势状态。
|
|
|
|
- **牛股评级**: ★★★☆☆
|
|
- **暴涨概率**: 60%
|
|
- **风险评估**: 非常安全
|
|
- **安全边际**: 432.671~458.057
|
|
- **黄金价域**: 427.995~440.835`;
|
|
let index = 0;
|
|
|
|
const typeWriter = () => {
|
|
if (index < responseText.length) {
|
|
// 使用 Vue 的响应式更新机制
|
|
messages.value[messages.value.length - 1].content =
|
|
responseText.substring(0, index + 1);
|
|
index++;
|
|
|
|
// 滚动到底部，更频繁地触发滚动以适应文本增长
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 20);
|
|
|
|
setTimeout(typeWriter, 30);
|
|
} else {
|
|
messages.value[messages.value.length - 1].isTyping = false;
|
|
isSending.value = false;
|
|
// 最后确保滚动到底部
|
|
setTimeout(() => {
|
|
scrollToBottom();
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
setTimeout(typeWriter, 500);
|
|
};
|
|
|
|
// 滚动到底部
|
|
const scrollToBottom = () => {
|
|
// 使用scroll-view的scrollTop属性来控制滚动
|
|
const query = uni.createSelectorQuery();
|
|
query.select("#messageList").boundingClientRect();
|
|
|
|
query.exec((res) => {
|
|
if (res[0]) {
|
|
// 设置scrollTop为消息列表的高度，实现滚动到底部
|
|
scrollTop.value = res[0].height;
|
|
}
|
|
});
|
|
};
|
|
|
|
const scrollToTop = () => {
|
|
// 滚动到顶部
|
|
scrollTop.value = 0;
|
|
};
|
|
|
|
const toggleThinking = () => {
|
|
showThinking.value = !showThinking.value;
|
|
};
|
|
|
|
|
|
|
|
// function getDataInfo() {
|
|
// return uni.request({
|
|
// url: 'http://localhost:8888/ka',
|
|
// data: {},
|
|
// header: {
|
|
// Accept: 'application/json',
|
|
// 'Content-Type': 'application/json',
|
|
// 'X-Requested-With': 'XMLHttpRequest'
|
|
// },
|
|
// method: 'GET',
|
|
// sslVerify: true,
|
|
// success: (res) => {
|
|
// console.log(res.data);
|
|
// res.data.forEach(item => {
|
|
// console.log("item是"+item);
|
|
// dataInfo.value = item.name;
|
|
// });
|
|
|
|
// },
|
|
// fail: (error) => {}
|
|
// })
|
|
// }
|
|
</script>
|
|
|
|
<style scoped>
|
|
.deepMate-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
max-height: 100vh; /* 限制最大高度 */
|
|
background-color: #ffffff;
|
|
padding: 0; /* 移除padding，避免影响布局 */
|
|
position: relative;
|
|
overflow: hidden; /* 禁止页面整体滚动 */
|
|
-webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
|
|
}
|
|
|
|
/* 顶部导航栏 - 固定定位 */
|
|
.header {
|
|
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: 999;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 顶部固定区域占位符 */
|
|
.header-placeholder {
|
|
height: 120rpx; /* 与header高度一致 */
|
|
}
|
|
|
|
/* 顶部固定区域占位符 */
|
|
.banner-placeholder {
|
|
height: 80rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
|
|
}
|
|
|
|
.header-left,
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-left .icon,
|
|
.header-right .icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.header-center .title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.new-chat-button {
|
|
background-color: #ff6600;
|
|
border: none;
|
|
border-radius: 8rpx;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.new-chat-text {
|
|
color: white;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
overflow-y: hidden; /* 禁止主内容区域滚动 */
|
|
margin-top: 20rpx;
|
|
margin-bottom: 250rpx; /* 为底部输入区域留出空间 */
|
|
max-height: calc(100vh - 200rpx); /* 确保内容区域不会超出视口 */
|
|
-webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
|
|
}
|
|
|
|
.robot-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.robot-avatar {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.welcome-message {
|
|
flex: 1;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 32rpx;
|
|
margin-left: 50rpx;
|
|
top: 40rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.description {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 36rpx;
|
|
margin-top: 10rpx;
|
|
margin-left: 45rpx;
|
|
}
|
|
|
|
.function-tabs {
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 700;
|
|
color: #666666;
|
|
background-color: #fffefe;
|
|
margin-right: 20rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #ff6600;
|
|
background-color: #fff;
|
|
border: 1rpx solid #ff6600;
|
|
}
|
|
|
|
.recommend-card {
|
|
background: url("https://d31zlh4on95l9h.cloudfront.net/images/4da1d629a55c307c3605ca15bf15189a.svg");
|
|
background-repeat: no-repeat;
|
|
/* border-radius: 20rpx; */
|
|
padding: 40rpx;
|
|
margin-bottom: 30rpx;
|
|
/* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background-color: #ff0000;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.card-text {
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.main-question {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.stock-code {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #ff3b30;
|
|
background-color: #ffffff;
|
|
padding: 2rpx 15rpx;
|
|
border-radius: 12rpx;
|
|
margin-top: 8rpx;
|
|
width: fit-content;
|
|
border: 1rpx solid #ff3b30;
|
|
}
|
|
|
|
.arrow-icon {
|
|
background: url("https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg");
|
|
background-repeat: no-repeat;
|
|
left: 0.5rem;
|
|
top: 1.8rem;
|
|
background-size: 100% 100%;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.interest-section {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.topics-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.topic-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 20rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 15rpx;
|
|
width: fit-content;
|
|
}
|
|
|
|
.tag-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.topic-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
/* 聊天区域样式 */
|
|
.chat-container {
|
|
margin-top: 30rpx;
|
|
border-radius: 10rpx;
|
|
height: fit-content;
|
|
/* overflow-y: auto; */
|
|
}
|
|
|
|
.chat-scroll-view {
|
|
height: calc(80vh - 250rpx); /* 根据需要调整高度 */
|
|
margin-top: 120rpx;
|
|
}
|
|
|
|
.message-list {
|
|
/* padding: 20rpx; */
|
|
/* margin-top: 200rpx; */
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.user-message {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.message-icon {
|
|
font-size: 24rpx;
|
|
margin: 0 10rpx;
|
|
padding: 10rpx;
|
|
border-radius: 50%;
|
|
background-color: #ddd;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-message .message-icon {
|
|
background-color: #007aff;
|
|
color: white;
|
|
}
|
|
|
|
.bot-message .message-icon {
|
|
background-color: #34c759;
|
|
color: white;
|
|
}
|
|
|
|
.message-content {
|
|
max-width: 70%;
|
|
position: relative;
|
|
}
|
|
|
|
.user-message .message-content {
|
|
background-color: #007aff;
|
|
border-radius: 10rpx;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.bot-message .message-content {
|
|
background-color: #f0f0f0;
|
|
border-radius: 10rpx;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.message-text {
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.user-message .message-text {
|
|
color: white;
|
|
}
|
|
|
|
.bot-message .message-text {
|
|
color: #333;
|
|
}
|
|
|
|
.loading-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
background-color: #666;
|
|
border-radius: 50%;
|
|
margin: 0 4rpx;
|
|
animation: loading 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.user-message .dot {
|
|
background-color: white;
|
|
}
|
|
|
|
.dot:nth-child(1) {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.input-area {
|
|
position: fixed;
|
|
bottom: 70rpx;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 40rpx 80rpx 40rpx;
|
|
background-color: #ffffff;
|
|
z-index: 999;
|
|
-webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
|
|
}
|
|
|
|
.input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 20rpx;
|
|
background-color: rgb(220, 31, 29);
|
|
border-radius: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 50rpx;
|
|
}
|
|
|
|
.mic-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 60rpx;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.input-field::placeholder {
|
|
color: #ffffff !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.send-button {
|
|
background: url("https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
padding: 0;
|
|
border: 1rpx solid transparent;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.send-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.disclaimer {
|
|
font-size: 15rpx;
|
|
color: #4d4c4c;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 15rpx;
|
|
}
|
|
.banner-panel {
|
|
position: relative;
|
|
height: 480rpx; /* 拉长容器，灰色背景跟随变高 */
|
|
overflow: hidden; /* 让圆角和内部层剪裁一致 */
|
|
border-radius: 15rpx;
|
|
}
|
|
.panelShow {
|
|
height: 12%;
|
|
position: fixed;
|
|
top: 70rpx;
|
|
z-index: 999;
|
|
width: 95%;
|
|
}
|
|
|
|
.pray-banner {
|
|
position: absolute;
|
|
/* background-size: 100% 100%; */
|
|
inset: 0; /* 顶部、底部、左、右都贴合容器 */
|
|
width: 100%;
|
|
height: 88%;
|
|
border-radius: 15rpx;
|
|
z-index: 1; /* 在灰底之上、内容之下 */
|
|
}
|
|
|
|
.contain {
|
|
margin: 0 20rpx;
|
|
gap: 5rpx;
|
|
}
|
|
.banner-panel .robot-container,
|
|
.banner-panel .function-tabs,
|
|
.banner-panel .recommend-card {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.back-to-top {
|
|
position: fixed;
|
|
right: 30rpx;
|
|
bottom: 35%;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
z-index: 1000;
|
|
}
|
|
.back-to-top:active {
|
|
transform: scale(0.96);
|
|
}
|
|
.static-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
}
|
|
/* 顶部固定区域占位符 */
|
|
.banner-placeholder {
|
|
height: 120rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
|
|
}
|
|
|
|
.thinking-process {
|
|
margin: 10px 0;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.thinking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.thinking-icon {
|
|
font-size: 16px;
|
|
margin-right: 8px;
|
|
color: #d47c45;
|
|
}
|
|
|
|
.thinking-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #d47c45;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.thinking-count {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.thinking-toggle {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.thinking-content {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.thinking-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.item-status {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background-color: #f0f0f0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.checkmark {
|
|
font-size: 10px;
|
|
color: #ff0000;
|
|
}
|
|
|
|
.item-text {
|
|
font-size: 12px;
|
|
color: #333;
|
|
}
|
|
</style>
|