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.
2867 lines
76 KiB
2867 lines
76 KiB
<template>
|
|
<div class="ai-emotion-container" ref="userInputDisplayRef">
|
|
<!-- 金轮 -->
|
|
<div class="golden-wheel">
|
|
<img src="@/assets/img/AiEmotion/金轮.png" class="golden-wheel-img" alt="金轮图标"
|
|
:class="{ 'rotating-image': isRotating }" />
|
|
</div>
|
|
|
|
<!-- 消息显示区域 -->
|
|
<div class="user-input-display">
|
|
<div v-for="(message, index) in messages" :key="index" class="message-container">
|
|
<!-- 用户输入内容 -->
|
|
<div v-if="message.sender === 'user'" class="message-bubble user-message">
|
|
{{ message.text }}
|
|
</div>
|
|
<!-- AI返回结果 -->
|
|
<div v-if="message.sender === 'ai'" class="message-bubble ai-message">
|
|
{{ message.text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 股票标签页 -->
|
|
<StockTabs />
|
|
|
|
<!-- 加载提示 -->
|
|
<div v-if="isLoading" class="loading-container">
|
|
<div class="loading-content">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">AI小财神正在加载图表数据和音频内容，请稍候...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 渲染整个页面 -->
|
|
<div v-if="isPageLoaded" class="class01">
|
|
<div class="class00">
|
|
<!-- 四维矩阵图 -->
|
|
<div class="class02">
|
|
<div class="container">
|
|
<!-- <img class="item" :src="item" alt="思维矩阵图片" /> -->
|
|
<div class="span01">
|
|
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
|
|
</div>
|
|
</div>
|
|
<span class="span02">{{ displayDate }}</span>
|
|
</div>
|
|
<div class="class0201">
|
|
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
|
|
</div>
|
|
<!-- 温度计图表 -->
|
|
<div class="class03">
|
|
<div class="class003">
|
|
<div class="content1">
|
|
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
|
|
<span class="title1">股票温度计</span>
|
|
</div>
|
|
<div class="div00">
|
|
<div class="div01">股票温度：{{ data2 ?? "NA" }}</div>
|
|
<div class="div02">市场温度：{{ data1 }}</div>
|
|
</div>
|
|
</div>
|
|
<marketTemperature ref="marketTemperatureRef" />
|
|
</div>
|
|
</div>
|
|
<div class="class0301">
|
|
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
|
|
</div>
|
|
<!-- 情绪解码器图表 -->
|
|
<div class="class04">
|
|
<div class="class0401">
|
|
<img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
|
|
<span class="title2">情绪解码器</span>
|
|
</div>
|
|
<div class="class0402">
|
|
<emotionDecod ref="emotionDecodRef"></emotionDecod>
|
|
</div>
|
|
</div>
|
|
<div class="class0403">
|
|
<img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
|
|
</div>
|
|
<!-- 情绪探底雷达图表 -->
|
|
<div class="class05">
|
|
<div class="class0502">
|
|
<img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
|
|
<span class="title3">情绪探底雷达</span>
|
|
</div>
|
|
<div class="class0503">
|
|
<emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
|
|
</div>
|
|
</div>
|
|
<div class="class0501">
|
|
<img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
|
|
</div>
|
|
<!-- 情绪能量转化器图表 -->
|
|
<div class="class06">
|
|
<div class="class0601">
|
|
<img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
|
|
<span class="title4">情绪能量转化器</span>
|
|
</div>
|
|
<div class="class0603">
|
|
<emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
|
|
</div>
|
|
</div>
|
|
<!-- 核心看点 -->
|
|
<div class="class0702">
|
|
<img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
|
|
</div>
|
|
<div class="bk-image">
|
|
<div class="text-container">
|
|
<p><span class="title">情绪监控-金融宇宙的【量子检测网络】</span>
|
|
<span class="content">核心任务:构建全市场情绪引力场雷达，实时监测资金流向和情绪波动</span>
|
|
</p>
|
|
<p><span class="title">情绪解码-主力思维的【神经破译矩阵】</span>
|
|
<span class="content">核心任务:解构资金行为的量子密码，破译主力操盘意图和策略布局</span>
|
|
</p>
|
|
<p><span class="title">情绪推演-未来战争的【时空推演舱】</span>
|
|
<span class="content">核心任务:基于情绪数据推演未来走势，预测市场转折点和机会窗口</span>
|
|
</p>
|
|
<p><span class="title">情绪套利-财富裂变的【粒子对撞机】</span>
|
|
<span class="content">核心任务:将情绪差转化为收益粒子流，实现情绪能量的价值转换</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 核心逻辑 -->
|
|
<div class="class0700">
|
|
<img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
|
|
</div>
|
|
<div class="class08">
|
|
<div class="lz-img">
|
|
<img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
|
|
</div>
|
|
<div class="scaled-img">
|
|
<!-- <img src="@/assets/img/AiEmotion/tree02.jpg" alt="树图片"> -->
|
|
</div>
|
|
</div>
|
|
<!-- 场景应用 -->
|
|
<div class="class09" ref="scenarioApplicationRef">
|
|
<img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
|
|
<div class="bk-image">
|
|
<div class="conclusion-container" v-if="parsedConclusion">
|
|
<div class="conclusion-item" v-if="(parsedConclusion.one1 || parsedConclusion.one2) && moduleVisibility.one">
|
|
<h4 class="conclusion-title">{{ displayedTitles.one }}</h4>
|
|
<p class="conclusion-text" v-if="parsedConclusion.one1">{{ displayedTexts.one1 }}</p>
|
|
<p class="conclusion-text" v-if="parsedConclusion.one2">{{ displayedTexts.one2 }}</p>
|
|
</div>
|
|
<div class="conclusion-item" v-if="parsedConclusion.two && moduleVisibility.two">
|
|
<h4 class="conclusion-title">{{ displayedTitles.two }}</h4>
|
|
<p class="conclusion-text">{{ displayedTexts.two }}</p>
|
|
</div>
|
|
<div class="conclusion-item" v-if="parsedConclusion.three && moduleVisibility.three">
|
|
<h4 class="conclusion-title">{{ displayedTitles.three }}</h4>
|
|
<p class="conclusion-text">{{ displayedTexts.three }}</p>
|
|
</div>
|
|
<div class="conclusion-item" v-if="parsedConclusion.four && moduleVisibility.four">
|
|
<h4 class="conclusion-title">{{ displayedTitles.four }}</h4>
|
|
<p class="conclusion-text">{{ displayedTexts.four }}</p>
|
|
</div>
|
|
<!-- AI生成内容免责声明 -->
|
|
<div class="disclaimer-item" v-if="parsedConclusion && moduleVisibility.disclaimer">
|
|
<p class="disclaimer-text">{{ displayedTexts.disclaimer }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="conclusion-placeholder" v-else>
|
|
<p>等待股票分析结论...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
|
|
import { getReplyAPI, getConclusionAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
|
|
import axios from 'axios';
|
|
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
|
|
import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
|
|
import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
|
|
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
|
|
import marketTemperature from '@/views/components/marketTemperature.vue';
|
|
import StockTabs from '@/views/components/StockTabs.vue'; // 导入股票标签页组件
|
|
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
|
|
import { ElMessage } from 'element-plus'; // 接口失败提示已改为对话形式，保留用于输入验证
|
|
import { useEmotionStore } from '@/store/emotion'; // 导入Pinia store
|
|
import { useEmotionAudioStore } from '@/store/emotionAudio.js'; // 导入音频store
|
|
import { useChatStore } from '@/store/chat.js'; // 导入聊天store
|
|
import { Howl, Howler } from 'howler'; // 导入音频播放库
|
|
import { reactive } from 'vue';
|
|
import { marked } from 'marked'; // 引入marked库
|
|
import { useUserStore } from "../store/userPessionCode";
|
|
|
|
// 使用Pinia store
|
|
const emotionStore = useEmotionStore();
|
|
const emotionAudioStore = useEmotionAudioStore();
|
|
const chatStore = useChatStore();
|
|
// 获取权限
|
|
const userStore = useUserStore();
|
|
// 处理refuse数据的函数
|
|
function processRefuseMessage(refuseData) {
|
|
if (!refuseData) return '未知错误';
|
|
|
|
// 如果refuse数据包含Markdown格式，进行转换
|
|
try {
|
|
// 配置marked选项
|
|
marked.setOptions({
|
|
breaks: true, // 支持换行符转换为 <br>
|
|
gfm: true, // 启用 GitHub Flavored Markdown
|
|
sanitize: false, // 不清理 HTML
|
|
smartLists: true, // 智能列表
|
|
smartypants: true, // 智能标点符号
|
|
xhtml: false, // 不使用 XHTML 输出
|
|
});
|
|
|
|
// 将Markdown转换为HTML
|
|
const htmlContent = marked(refuseData);
|
|
|
|
// 移除HTML标签，只保留纯文本用于ElMessage显示
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = htmlContent;
|
|
return tempDiv.textContent || tempDiv.innerText || refuseData;
|
|
} catch (error) {
|
|
console.error('处理refuse消息时出错:', error);
|
|
return refuseData;
|
|
}
|
|
}
|
|
|
|
// 组件引用
|
|
const marketTemperatureRef = ref(null); // 引用市场温度计组件
|
|
const emoEnergyConverterRef = ref(null)
|
|
const emotionDecodRef = ref(null)
|
|
const emotionalBottomRadarRef = ref(null)
|
|
const userInputDisplayRef = ref(null);//消息区域的引用
|
|
|
|
// 响应式数据
|
|
const messages = ref([]);
|
|
const isPageLoaded = ref(false); // 控制页面是否显示
|
|
const isLoading = ref(false); // 控制加载状态
|
|
const isRotating = ref(false);//控制旋转
|
|
const version1 = ref(1); // 版本号
|
|
const conclusionData = ref(''); // 存储第二个工作流接口返回的结论数据
|
|
|
|
// 自动滚动相关数据
|
|
const isAutoScrolling = ref(false);
|
|
const currentSection = ref(0);
|
|
const sectionRefs = ref([]);
|
|
const scenarioApplicationRef = ref(null); // 场景应用部分的引用
|
|
const hasTriggeredAudio = ref(false); // 是否已触发音频播放
|
|
const hasTriggeredTypewriter = ref(false); // 是否已触发打字机效果
|
|
const intersectionObserver = ref(null); // 存储observer实例
|
|
const isUserInitiated = ref(false); // 标记是否为用户主动搜索
|
|
|
|
// 显示的文本内容（用于打字机效果）
|
|
const displayedTexts = ref({
|
|
one1: '',
|
|
one2: '',
|
|
two: '',
|
|
three: '',
|
|
four: '',
|
|
disclaimer: ''
|
|
});
|
|
|
|
// 显示的标题内容（用于打字机效果）
|
|
const displayedTitles = ref({
|
|
one: '',
|
|
two: '',
|
|
three: '',
|
|
four: ''
|
|
});
|
|
|
|
// 模块显示状态
|
|
const moduleVisibility = ref({
|
|
one: false,
|
|
two: false,
|
|
three: false,
|
|
four: false,
|
|
disclaimer: false
|
|
});
|
|
const typewriterTimers = ref([]);
|
|
// 记录每个股票是否已经显示过打字机效果
|
|
const stockTypewriterShown = ref(new Map());
|
|
// 记录每个股票是否已经播放过音频
|
|
const stockAudioPlayed = ref(new Map());
|
|
|
|
// 音频播放相关数据
|
|
const audioUrl = ref('');
|
|
const isAudioPlaying = ref(false);
|
|
|
|
// 计算属性 - 从store获取当前股票数据
|
|
const currentStock = computed(() => emotionStore.activeStock);
|
|
const stockName = computed(() => currentStock.value?.stockInfo.name || "");
|
|
const displayDate = computed(() => {
|
|
if (!currentStock.value?.apiData) return "";
|
|
const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
|
|
return lastData ? lastData[0] : "";
|
|
});
|
|
const data1 = computed(() => {
|
|
if (!currentStock.value?.apiData) return null;
|
|
const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
|
|
return lastData ? Math.round(lastData[1]) : null;
|
|
});
|
|
const data2 = computed(() => {
|
|
if (!currentStock.value?.apiData) return null;
|
|
const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
|
|
return lastData ? Math.round(lastData[2]) : null;
|
|
});
|
|
const currentConclusion = computed(() => {
|
|
return currentStock.value?.conclusionData || '';
|
|
});
|
|
const parsedConclusion = computed(() => {
|
|
if (!currentConclusion.value) return null;
|
|
try {
|
|
return JSON.parse(currentConclusion.value);
|
|
} catch (error) {
|
|
console.error('解析结论数据失败:', error);
|
|
return null;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
// 监听股票列表变化，当列表为空时隐藏页面数据
|
|
watch(() => emotionStore.stockList, (newStockList) => {
|
|
if (newStockList.length === 0) {
|
|
// 当股票列表为空时，隐藏页面数据
|
|
isPageLoaded.value = false;
|
|
// 停止音频播放
|
|
stopAudio();
|
|
// 清理音频URL
|
|
audioUrl.value = '';
|
|
emotionAudioStore.resetAudioState();
|
|
// 清理打字机效果
|
|
clearTypewriterTimers();
|
|
// 重置所有状态
|
|
hasTriggeredAudio.value = false;
|
|
hasTriggeredTypewriter.value = false;
|
|
stockTypewriterShown.value.clear();
|
|
stockAudioPlayed.value.clear();
|
|
// 清理显示的文本和标题
|
|
displayedTexts.value = {
|
|
one1: '',
|
|
one2: '',
|
|
two: '',
|
|
three: '',
|
|
four: '',
|
|
disclaimer: ''
|
|
};
|
|
displayedTitles.value = {
|
|
one: '',
|
|
two: '',
|
|
three: '',
|
|
four: ''
|
|
};
|
|
// 隐藏所有模块
|
|
moduleVisibility.value = {
|
|
one: false,
|
|
two: false,
|
|
three: false,
|
|
four: false,
|
|
disclaimer: false
|
|
};
|
|
console.log('股票列表已清空，页面数据已隐藏');
|
|
}
|
|
}, { deep: true });
|
|
|
|
// 监听当前股票变化，重新渲染图表
|
|
watch(currentStock, (newStock) => {
|
|
if (newStock && newStock.apiData) {
|
|
// 页面加载状态现在由 handleSendMessage 统一控制
|
|
// 停止当前播放的音频
|
|
stopAudio();
|
|
// 清理音频URL，确保不会播放之前股票的音频
|
|
audioUrl.value = '';
|
|
// 清理store中的音频URL，确保不会播放之前股票的音频
|
|
emotionAudioStore.resetAudioState();
|
|
// 清理正在进行的打字机效果定时器
|
|
clearTypewriterTimers();
|
|
// 重置触发状态，让每个股票都能独立触发效果
|
|
hasTriggeredAudio.value = false;
|
|
hasTriggeredTypewriter.value = false;
|
|
|
|
// 获取股票代码作为唯一标识
|
|
const stockCode = newStock.stockInfo?.code || newStock.stockInfo?.symbol;
|
|
|
|
// 检查该股票是否已经显示过打字机效果
|
|
if (stockCode && stockTypewriterShown.value.has(stockCode)) {
|
|
// 如果已经显示过，直接显示完整文本和标题
|
|
if (newStock.conclusionData) {
|
|
try {
|
|
const conclusion = JSON.parse(newStock.conclusionData);
|
|
displayedTexts.value = {
|
|
one1: conclusion.one1 || '',
|
|
one2: conclusion.one2 || '',
|
|
two: conclusion.two || '',
|
|
three: conclusion.three || '',
|
|
four: conclusion.four || '',
|
|
disclaimer: '该内容由AI生成，请注意甄别'
|
|
};
|
|
displayedTitles.value = {
|
|
one: 'L1: 情绪监控',
|
|
two: 'L2: 情绪解码',
|
|
three: 'L3: 情绪推演',
|
|
four: 'L4: 情绪套利'
|
|
};
|
|
// 显示所有有内容的模块
|
|
moduleVisibility.value = {
|
|
one: !!(conclusion.one1 || conclusion.one2),
|
|
two: !!conclusion.two,
|
|
three: !!conclusion.three,
|
|
four: !!conclusion.four,
|
|
disclaimer: true
|
|
};
|
|
|
|
// 提取音频URL但不自动播放，等待用户手动点击
|
|
let voiceUrl = null;
|
|
if (conclusion.url) {
|
|
voiceUrl = conclusion.url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.audioUrl) {
|
|
voiceUrl = conclusion.audioUrl.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.voice_url) {
|
|
voiceUrl = conclusion.voice_url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.audio) {
|
|
voiceUrl = conclusion.audio.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.tts_url) {
|
|
voiceUrl = conclusion.tts_url.toString().trim().replace(/[`\s]/g, '');
|
|
}
|
|
|
|
if (voiceUrl && voiceUrl.startsWith('http')) {
|
|
console.log('切换到已显示股票，准备音频URL但不自动播放:', voiceUrl);
|
|
audioUrl.value = voiceUrl;
|
|
// 同时更新store中的音频URL
|
|
emotionAudioStore.setCurrentAudioUrl(voiceUrl);
|
|
// 不自动播放，等待用户手动点击
|
|
}
|
|
} catch (error) {
|
|
console.error('解析结论数据失败:', error);
|
|
}
|
|
}
|
|
} else {
|
|
// 如果没有显示过，清空显示文本，等待打字机效果
|
|
displayedTexts.value = {
|
|
one1: '',
|
|
one2: '',
|
|
two: '',
|
|
three: '',
|
|
four: '',
|
|
disclaimer: ''
|
|
};
|
|
displayedTitles.value = {
|
|
one: '',
|
|
two: '',
|
|
three: '',
|
|
four: ''
|
|
};
|
|
moduleVisibility.value = {
|
|
one: false,
|
|
two: false,
|
|
three: false,
|
|
four: false,
|
|
disclaimer: false
|
|
};
|
|
|
|
// 即使没有显示过，也需要设置音频URL以便用户手动播放
|
|
if (newStock.conclusionData) {
|
|
try {
|
|
const conclusion = JSON.parse(newStock.conclusionData);
|
|
let voiceUrl = null;
|
|
if (conclusion.url) {
|
|
voiceUrl = conclusion.url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.audioUrl) {
|
|
voiceUrl = conclusion.audioUrl.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.voice_url) {
|
|
voiceUrl = conclusion.voice_url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.audio) {
|
|
voiceUrl = conclusion.audio.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (conclusion.tts_url) {
|
|
voiceUrl = conclusion.tts_url.toString().trim().replace(/[`\s]/g, '');
|
|
}
|
|
|
|
if (voiceUrl && voiceUrl.startsWith('http')) {
|
|
console.log('切换到未显示股票，准备音频URL:', voiceUrl);
|
|
audioUrl.value = voiceUrl;
|
|
// 同时更新store中的音频URL
|
|
emotionAudioStore.setCurrentAudioUrl(voiceUrl);
|
|
}
|
|
} catch (error) {
|
|
console.error('解析结论数据失败:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 只有在页面已加载的情况下才渲染图表
|
|
if (isPageLoaded.value) {
|
|
nextTick(() => {
|
|
renderCharts(newStock.apiData);
|
|
console.log('图表数据已准备完成，开始渲染:', newStock.apiData)
|
|
// 检查场景应用部分是否已经在视口中，如果是则立即触发效果
|
|
setTimeout(() => {
|
|
if (scenarioApplicationRef.value && parsedConclusion.value) {
|
|
const stockCode = newStock.stockInfo?.code || newStock.stockInfo?.symbol;
|
|
|
|
// 如果该股票已经显示过，不需要再处理
|
|
if (stockCode && stockTypewriterShown.value.has(stockCode)) {
|
|
return;
|
|
}
|
|
|
|
const rect = scenarioApplicationRef.value.getBoundingClientRect();
|
|
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
|
|
|
if (isInViewport) {
|
|
console.log('股票切换后检测到场景应用部分在视口中');
|
|
|
|
if (stockCode) {
|
|
// 检查该股票是否是第一次触发
|
|
if (!stockTypewriterShown.value.has(stockCode)) {
|
|
// 该股票第一次：播放音频和打字机效果
|
|
if (audioUrl.value) {
|
|
console.log('该股票第一次进入场景应用，开始打字机效果和音频播放');
|
|
hasTriggeredTypewriter.value = true;
|
|
hasTriggeredAudio.value = true;
|
|
|
|
startTypewriterEffect(parsedConclusion.value);
|
|
|
|
if (!stockAudioPlayed.value.has(stockCode)) {
|
|
console.log('开始音频播放');
|
|
stockAudioPlayed.value.set(stockCode, true);
|
|
playAudio(audioUrl.value);
|
|
}
|
|
|
|
stockTypewriterShown.value.set(stockCode, true);
|
|
} else {
|
|
console.log('音频尚未准备好，等待音频加载完成后再触发效果（股票切换后）');
|
|
return;
|
|
}
|
|
} else {
|
|
// 非第一次或已经触发过：直接显示完整内容，不播放音频和打字机效果
|
|
console.log('非第一次股票切换或已触发过，直接显示完整内容');
|
|
|
|
// 直接显示完整内容
|
|
const conclusion = parsedConclusion.value;
|
|
displayedTexts.value = {
|
|
one1: conclusion.one1 || '',
|
|
one2: conclusion.one2 || '',
|
|
two: conclusion.two || '',
|
|
three: conclusion.three || '',
|
|
four: conclusion.four || '',
|
|
disclaimer: '该内容由AI生成，请注意甄别'
|
|
};
|
|
displayedTitles.value = {
|
|
one: 'L1: 情绪监控',
|
|
two: 'L2: 情绪解码',
|
|
three: 'L3: 情绪推演',
|
|
four: 'L4: 情绪套利'
|
|
};
|
|
moduleVisibility.value = {
|
|
one: !!(conclusion.one1 || conclusion.one2),
|
|
two: !!conclusion.two,
|
|
three: !!conclusion.three,
|
|
four: !!conclusion.four,
|
|
disclaimer: true
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, 500); // 延迟500ms确保数据完全加载
|
|
});
|
|
} else {
|
|
console.log('页面尚未加载完成，等待数据加载完成后再渲染图表');
|
|
}
|
|
} else {
|
|
console.log('股票数据不存在或API数据未加载');
|
|
}
|
|
}, { immediate: true });
|
|
|
|
// 监听parsedConclusion变化，准备数据但不立即触发打字机效果
|
|
watch(parsedConclusion, (newConclusion) => {
|
|
if (newConclusion) {
|
|
console.log('场景应用结论数据:', newConclusion);
|
|
// 不再立即开始打字机效果，等待滚动到场景应用部分时触发
|
|
|
|
// 尝试多种可能的语音URL字段名
|
|
let voiceUrl = null;
|
|
if (newConclusion.url) {
|
|
// 清理URL字符串，去除空格、反引号等特殊字符
|
|
voiceUrl = newConclusion.url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (newConclusion.audioUrl) {
|
|
voiceUrl = newConclusion.audioUrl.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (newConclusion.voice_url) {
|
|
voiceUrl = newConclusion.voice_url.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (newConclusion.audio) {
|
|
voiceUrl = newConclusion.audio.toString().trim().replace(/[`\s]/g, '');
|
|
} else if (newConclusion.tts_url) {
|
|
voiceUrl = newConclusion.tts_url.toString().trim().replace(/[`\s]/g, '');
|
|
}
|
|
|
|
if (voiceUrl && voiceUrl.startsWith('http')) {
|
|
console.log('找到并清理后的语音URL:', voiceUrl);
|
|
audioUrl.value = voiceUrl;
|
|
// 同时更新store中的音频URL
|
|
emotionAudioStore.setCurrentAudioUrl(voiceUrl);
|
|
console.log('音频URL已准备，检查是否需要立即触发效果');
|
|
|
|
// 音频准备好后，只有在用户主动搜索时才自动触发效果
|
|
// 数据恢复时不自动播放音频和打字机效果
|
|
console.log('音频URL已准备完成，等待用户手动触发播放');
|
|
} else {
|
|
console.log('未找到有效的语音URL，原始URL:', newConclusion.url);
|
|
console.log('结论数据中的所有字段:', Object.keys(newConclusion));
|
|
}
|
|
}
|
|
}, { immediate: true });
|
|
|
|
// 打字机效果函数
|
|
function startTypewriterEffect(conclusion) {
|
|
console.log('开始打字机效果，结论数据:', conclusion);
|
|
|
|
// 详细调试各个字段
|
|
console.log('L1字段 - one1:', conclusion.one1);
|
|
console.log('L1字段 - one2:', conclusion.one2);
|
|
console.log('L2字段 - two:', conclusion.two);
|
|
console.log('L3字段 - three:', conclusion.three);
|
|
console.log('L4字段 - four:', conclusion.four);
|
|
|
|
// 清除之前的定时器
|
|
typewriterTimers.value.forEach(timer => clearTimeout(timer));
|
|
typewriterTimers.value = [];
|
|
|
|
// 重置显示文本和状态
|
|
displayedTexts.value = {
|
|
one1: '',
|
|
one2: '',
|
|
two: '',
|
|
three: '',
|
|
four: '',
|
|
disclaimer: ''
|
|
};
|
|
|
|
displayedTitles.value = {
|
|
one: '',
|
|
two: '',
|
|
three: '',
|
|
four: ''
|
|
};
|
|
|
|
moduleVisibility.value = {
|
|
one: false,
|
|
two: false,
|
|
three: false,
|
|
four: false,
|
|
disclaimer: false
|
|
};
|
|
|
|
// 定义打字速度（毫秒）
|
|
const typeSpeed = 200;
|
|
let totalDelay = 0;
|
|
|
|
// 定义模块配置
|
|
const modules = [
|
|
{
|
|
key: 'one',
|
|
title: 'L1: 情绪监控',
|
|
contents: [
|
|
{ key: 'one1', text: conclusion.one1 },
|
|
{ key: 'one2', text: conclusion.one2 }
|
|
]
|
|
},
|
|
{
|
|
key: 'two',
|
|
title: 'L2: 情绪解码',
|
|
contents: [
|
|
{ key: 'two', text: conclusion.two }
|
|
]
|
|
},
|
|
{
|
|
key: 'three',
|
|
title: 'L3: 情绪推演',
|
|
contents: [
|
|
{ key: 'three', text: conclusion.three }
|
|
]
|
|
},
|
|
{
|
|
key: 'four',
|
|
title: 'L4: 情绪套利',
|
|
contents: [
|
|
{ key: 'four', text: conclusion.four }
|
|
]
|
|
}
|
|
];
|
|
|
|
// 按模块顺序处理
|
|
modules.forEach((module) => {
|
|
// 检查模块是否有内容
|
|
const hasContent = module.contents.some(content => content.text && content.text.trim());
|
|
console.log(`模块 ${module.key} 是否有内容:`, hasContent, '内容:', module.contents.map(c => c.text));
|
|
if (!hasContent) return;
|
|
|
|
console.log(`开始显示模块 ${module.key}`);
|
|
// 显示模块
|
|
const showModuleTimer = setTimeout(() => {
|
|
moduleVisibility.value[module.key] = true;
|
|
console.log(`模块 ${module.key} 已设置为可见`);
|
|
}, totalDelay);
|
|
typewriterTimers.value.push(showModuleTimer);
|
|
totalDelay += 100;
|
|
|
|
// 打字机效果显示标题
|
|
const title = module.title;
|
|
for (let i = 0; i <= title.length; i++) {
|
|
const timer = setTimeout(() => {
|
|
displayedTitles.value[module.key] = title.substring(0, i);
|
|
}, totalDelay + i * typeSpeed);
|
|
typewriterTimers.value.push(timer);
|
|
}
|
|
totalDelay += title.length * typeSpeed + 300; // 标题完成后间隔
|
|
|
|
// 打字机效果显示内容
|
|
module.contents.forEach((content) => {
|
|
if (content.text && content.text.trim()) {
|
|
const text = content.text;
|
|
for (let i = 0; i <= text.length; i++) {
|
|
const timer = setTimeout(() => {
|
|
displayedTexts.value[content.key] = text.substring(0, i);
|
|
}, totalDelay + i * typeSpeed);
|
|
typewriterTimers.value.push(timer);
|
|
}
|
|
totalDelay += text.length * typeSpeed + 500; // 内容完成后间隔
|
|
}
|
|
});
|
|
|
|
totalDelay += 800; // 模块间间隔
|
|
});
|
|
|
|
// 添加免责声明的打字机效果（在所有模块显示完成后）
|
|
const disclaimerText = '该内容由AI生成，请注意甄别';
|
|
|
|
// 显示免责声明模块
|
|
const showDisclaimerTimer = setTimeout(() => {
|
|
moduleVisibility.value.disclaimer = true;
|
|
}, totalDelay);
|
|
typewriterTimers.value.push(showDisclaimerTimer);
|
|
totalDelay += 100;
|
|
|
|
// 打字机效果显示免责声明
|
|
for (let i = 0; i <= disclaimerText.length; i++) {
|
|
const timer = setTimeout(() => {
|
|
displayedTexts.value.disclaimer = disclaimerText.substring(0, i);
|
|
}, totalDelay + i * typeSpeed);
|
|
typewriterTimers.value.push(timer);
|
|
}
|
|
}
|
|
|
|
// 清理定时器的函数
|
|
function clearTypewriterTimers() {
|
|
typewriterTimers.value.forEach(timer => clearTimeout(timer));
|
|
typewriterTimers.value = [];
|
|
}
|
|
|
|
// 音频播放函数
|
|
function playAudio(url) {
|
|
console.log('尝试播放音频:', url);
|
|
|
|
if (!url) {
|
|
console.warn('音频URL为空，跳过播放');
|
|
isAudioPlaying.value = false;
|
|
return;
|
|
}
|
|
|
|
// 检查是否启用了语音功能
|
|
console.log('语音功能状态:', emotionAudioStore.isVoiceEnabled);
|
|
if (!emotionAudioStore.isVoiceEnabled) {
|
|
console.log('语音功能已关闭，跳过播放');
|
|
return;
|
|
}
|
|
|
|
console.log('开始创建音频实例...');
|
|
|
|
try {
|
|
// 设置当前音频URL
|
|
emotionAudioStore.setCurrentAudioUrl(url);
|
|
|
|
// 停止之前的音频
|
|
if (emotionAudioStore.nowSound && emotionAudioStore.nowSound.playing()) {
|
|
emotionAudioStore.nowSound.stop();
|
|
}
|
|
|
|
// 创建新的音频实例
|
|
const newSound = new Howl({
|
|
src: [url],
|
|
html5: true,
|
|
format: ['mp3', 'wav'],
|
|
onplay: () => {
|
|
isAudioPlaying.value = true;
|
|
emotionAudioStore.isPlaying = true;
|
|
console.log('开始播放场景应用语音');
|
|
},
|
|
onend: () => {
|
|
isAudioPlaying.value = false;
|
|
emotionAudioStore.isPlaying = false;
|
|
emotionAudioStore.isPaused = false;
|
|
emotionAudioStore.playbackPosition = 0;
|
|
console.log('场景应用语音播放结束');
|
|
},
|
|
onstop: () => {
|
|
isAudioPlaying.value = false;
|
|
emotionAudioStore.isPlaying = false;
|
|
console.log('场景应用语音播放停止');
|
|
},
|
|
onpause: () => {
|
|
isAudioPlaying.value = false;
|
|
emotionAudioStore.isPlaying = false;
|
|
console.log('场景应用语音播放暂停');
|
|
},
|
|
onerror: (error) => {
|
|
isAudioPlaying.value = false;
|
|
emotionAudioStore.isPlaying = false;
|
|
console.error('音频播放错误:', error);
|
|
},
|
|
onload: () => {
|
|
// 音频加载完成，获取时长
|
|
emotionAudioStore.duration = newSound.duration();
|
|
console.log('音频加载完成，时长:', emotionAudioStore.duration);
|
|
}
|
|
});
|
|
|
|
// 保存音频实例到store
|
|
emotionAudioStore.nowSound = newSound;
|
|
emotionAudioStore.setAudioInstance(newSound);
|
|
|
|
// 播放音频
|
|
newSound.play();
|
|
|
|
} catch (error) {
|
|
console.error('创建音频实例失败:', error);
|
|
isAudioPlaying.value = false;
|
|
}
|
|
}
|
|
|
|
// 停止音频播放
|
|
function stopAudio() {
|
|
if (emotionAudioStore.nowSound) {
|
|
emotionAudioStore.nowSound.stop();
|
|
}
|
|
isAudioPlaying.value = false;
|
|
}
|
|
// 触发图片旋转的方法
|
|
function startImageRotation() {
|
|
isRotating.value = true;
|
|
// 如果你想在一段时间后停止旋转，可以添加以下代码
|
|
setTimeout(() => {
|
|
isRotating.value = false;
|
|
}, 5000); // 5 秒后停止旋转
|
|
}
|
|
|
|
|
|
// 发送消息方法
|
|
async function handleSendMessage(input) {
|
|
console.log("发送内容:", input);
|
|
// 标记为用户主动搜索
|
|
isUserInitiated.value = true;
|
|
|
|
// 检查用户输入内容是否为空
|
|
if (!input || !input.trim()) {
|
|
ElMessage.warning("输入内容不能为空");
|
|
return;
|
|
}
|
|
|
|
// 用户输入不为空，立即触发图片旋转逻辑，隐藏历史数据
|
|
isRotating.value = true;
|
|
const previousMessages = [...messages.value]; // 保存历史消息
|
|
messages.value = []; // 清空历史数据
|
|
|
|
// 检查用户剩余次数
|
|
await chatStore.getUserCount(); // 获取最新的用户次数
|
|
if (chatStore.UserCount <= 0) {
|
|
const userMessage = reactive({ sender: 'user', text: input });
|
|
messages.value.push(userMessage);
|
|
const aiMessage = reactive({ sender: 'ai', text: '您的剩余次数为0，无法使用情绪大模型，请联系客服或购买服务包。' });
|
|
messages.value.push(aiMessage);
|
|
// 停止图片旋转，恢复历史数据
|
|
isRotating.value = false;
|
|
messages.value = [...previousMessages, ...messages.value];
|
|
return;
|
|
}
|
|
|
|
// 检查用户是否有使用次数（检查是否有任何权限）
|
|
const hasPermission = userStore.brainPerssion || userStore.swordPerssion ||
|
|
userStore.pricePerssion || userStore.timePerssion ||
|
|
userStore.aibullPerssion || userStore.aiGnbullPerssion ||
|
|
userStore.airadarPerssion;
|
|
|
|
if (!hasPermission) {
|
|
const userMessage = reactive({ sender: 'user', text: input });
|
|
messages.value.push(userMessage);
|
|
const aiMessage = reactive({ sender: 'ai', text: '您当前没有可用权限，请联系客服或购买服务包。' });
|
|
messages.value.push(aiMessage);
|
|
// 停止图片旋转，恢复历史数据
|
|
isRotating.value = false;
|
|
messages.value = [...previousMessages, ...messages.value];
|
|
return;
|
|
}
|
|
|
|
const userMessage = reactive({ sender: 'user', text: input });
|
|
messages.value.push(userMessage);
|
|
|
|
try {
|
|
// 第一步：调用第一个接口验证用户输入内容是否合法
|
|
const params = {
|
|
content: userMessage.text,
|
|
userData: {
|
|
token: localStorage.getItem('localToken'),
|
|
language: "cn",
|
|
brainPrivilegeState: userStore.brainPerssion,
|
|
swordPrivilegeState: userStore.swordPerssion,
|
|
stockForecastPrivilegeState: userStore.pricePerssion,
|
|
spaceForecastPrivilegeState: userStore.timePerssion,
|
|
aibullPrivilegeState: userStore.aibullPerssion,
|
|
aigoldBullPrivilegeState: userStore.aiGnbullPerssion,
|
|
airadarPrivilegeState: userStore.airadarPerssion,
|
|
marketList: userStore.aiGoldMarketList,
|
|
},
|
|
};
|
|
|
|
const result = await getReplyAPI(params);
|
|
const response = await result.json();
|
|
const parsedData = JSON.parse(response.data);
|
|
console.log("第一个接口解析后的数据:", parsedData);
|
|
|
|
// 检查用户输入是否合法
|
|
if (!parsedData || !parsedData.market || !parsedData.code) {
|
|
// 输入不合法，返回refuse信息，停止图片旋转，恢复历史数据
|
|
const aiMessage = reactive({ sender: 'ai', text: processRefuseMessage(parsedData.refuse) });
|
|
messages.value.push(aiMessage);
|
|
isRotating.value = false;
|
|
messages.value = [...previousMessages, ...messages.value];
|
|
return;
|
|
}
|
|
|
|
// 输入合法，继续执行后续处理
|
|
// 设置加载状态，隐藏图表页面
|
|
isLoading.value = true;
|
|
|
|
console.log("工作流接口返回股票信息:", parsedData);
|
|
isPageLoaded.value = false;
|
|
|
|
// 调用第二个工作流接口
|
|
const conclusionParams = {
|
|
content: input.trim(),
|
|
userData: {
|
|
token: localStorage.getItem('localToken'),
|
|
language: "cn",
|
|
marketList: "hk,cn,usa,my,sg,vi,in,gb",
|
|
},
|
|
code: parsedData.code,
|
|
market: parsedData.market,
|
|
};
|
|
// 同时调用第二个数据流接口和fetchData方法
|
|
const [conclusionResult, fetchDataResult] = await Promise.all([
|
|
getConclusionAPI(conclusionParams),
|
|
fetchData(parsedData.code, parsedData.market, parsedData.name || "未知股票", input.trim())
|
|
]);
|
|
|
|
// 处理结论接口返回的数据
|
|
const conclusionResponse = await conclusionResult.json();
|
|
console.log("第二个工作流接口返回数据:", conclusionResponse);
|
|
|
|
// 检查所有数据是否都加载成功
|
|
if (conclusionResponse && conclusionResponse.data && fetchDataResult) {
|
|
// 将结论数据存储到响应式变量和store中
|
|
conclusionData.value = conclusionResponse.data;
|
|
// 将结论数据存储到store中的当前激活股票
|
|
emotionStore.updateActiveStockConclusion(conclusionResponse.data);
|
|
|
|
// 所有数据加载完成，关闭加载状态，显示页面
|
|
isLoading.value = false;
|
|
isPageLoaded.value = true;
|
|
|
|
// 数据获取成功后，重新获取用户次数以实现实时更新
|
|
try {
|
|
await chatStore.getUserCount();
|
|
console.log('数据获取成功后，用户次数已更新');
|
|
} catch (error) {
|
|
console.error('更新用户次数失败:', error);
|
|
}
|
|
|
|
console.log('所有数据加载完成，开始渲染页面');
|
|
|
|
// 确保页面状态更新后触发图表渲染和音频文本
|
|
nextTick(() => {
|
|
if (currentStock.value && currentStock.value.apiData) {
|
|
renderCharts(currentStock.value.apiData);
|
|
console.log('数据加载完成后开始渲染图表');
|
|
|
|
// 只有在用户主动搜索时才自动触发音频和文本
|
|
if (isUserInitiated.value && parsedConclusion.value && audioUrl.value) {
|
|
const stockCode = currentStock.value.stockInfo?.code || currentStock.value.stockInfo?.symbol;
|
|
if (stockCode && !stockTypewriterShown.value.has(stockCode)) {
|
|
console.log('用户主动搜索，立即触发音频和打字机效果');
|
|
startTypewriterEffect(parsedConclusion.value);
|
|
|
|
if (!stockAudioPlayed.value.has(stockCode)) {
|
|
stockAudioPlayed.value.set(stockCode, true);
|
|
playAudio(audioUrl.value);
|
|
}
|
|
stockTypewriterShown.value.set(stockCode, true);
|
|
}
|
|
}
|
|
|
|
// 重置用户主动搜索标志
|
|
isUserInitiated.value = false;
|
|
}
|
|
});
|
|
} else {
|
|
// 数据加载失败，停止图片旋转，恢复历史数据
|
|
isLoading.value = false;
|
|
const aiMessage = reactive({ sender: 'ai', text: '数据加载失败，请重试' });
|
|
messages.value.push(aiMessage);
|
|
isRotating.value = false;
|
|
messages.value = [...previousMessages, ...messages.value];
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
const aiMessage = reactive({ sender: 'ai', text: '请求工作流接口失败，请检查网络连接' });
|
|
messages.value.push(aiMessage);
|
|
// 请求失败时停止图片旋转，恢复历史数据
|
|
isRotating.value = false;
|
|
messages.value = [...previousMessages, ...messages.value];
|
|
return;
|
|
} finally {
|
|
// 停止图片旋转（只有在设置了旋转状态时才需要停止）
|
|
if (isRotating.value) {
|
|
isRotating.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 请求数据接口
|
|
async function fetchData(code, market, stockName, queryText) {
|
|
try {
|
|
const stockDataParams = {
|
|
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
|
|
token: localStorage.getItem('localToken'),
|
|
market: market,
|
|
code: code,
|
|
language: 'cn',
|
|
version: version1.value
|
|
};
|
|
|
|
const stockDataResult = await axios.post(
|
|
"http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData",
|
|
// 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
|
|
stockDataParams,
|
|
{
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
|
|
const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
|
|
console.log('图表数据接口返回数据:', stockDataResponse.data);
|
|
|
|
if (stockDataResponse.code === 200 && stockDataResponse.data) {
|
|
console.log(stockDataResponse.code)
|
|
|
|
// 创建股票数据对象
|
|
const stockData = {
|
|
queryText: queryText,
|
|
stockInfo: {
|
|
name: stockName,
|
|
code: code,
|
|
market: market
|
|
},
|
|
apiData: stockDataResponse.data,
|
|
conclusionData: conclusionData.value, // 包含结论数据
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
// 将股票数据添加到store中
|
|
emotionStore.addStock(stockData);
|
|
return true; // 返回成功标识
|
|
} else {
|
|
const aiMessage = reactive({ sender: 'ai', text: '图表数据请求失败，请检查网络连接' });
|
|
messages.value.push(aiMessage);
|
|
return false; // 返回失败标识
|
|
}
|
|
} catch (error) {
|
|
console.error('fetchData error:', error);
|
|
const aiMessage = reactive({ sender: 'ai', text: '图表数据请求失败，请检查网络连接' });
|
|
messages.value.push(aiMessage);
|
|
return false; // 返回失败标识
|
|
}
|
|
}
|
|
|
|
// 渲染组件图表的方法
|
|
function renderCharts(data) {
|
|
nextTick(() => {
|
|
// 添加小延迟确保DOM完全更新
|
|
setTimeout(() => {
|
|
try {
|
|
// 深拷贝数据避免污染原始数据
|
|
const clonedData = JSON.parse(JSON.stringify(data));
|
|
console.log('已深拷贝数据，避免污染原始数据');
|
|
console.log('所有数据1111111111111：', clonedData)
|
|
// 渲染股市温度计图表
|
|
if (marketTemperatureRef.value && clonedData.GSWDJ) {
|
|
console.log("开始渲染股市温度计图表");
|
|
console.log("股市温度计数据", clonedData.GSWDJ);
|
|
marketTemperatureRef.value.initChart(clonedData.GSWDJ, clonedData.KLine20, clonedData.WDRL);
|
|
console.log("股市温度计图表已渲染");
|
|
}
|
|
// 渲染情绪解码器图表
|
|
if (emotionDecodRef.value && clonedData.QXJMQ) {
|
|
console.log("开始渲染情绪解码器图表");
|
|
console.log("情绪解码器数据", clonedData.QXJMQ);
|
|
emotionDecodRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXJMQ);
|
|
console.log("情绪解码器图表已渲染");
|
|
}
|
|
// 渲染情绪探底雷达图表
|
|
if (emotionalBottomRadarRef.value && clonedData.QXTDLD) {
|
|
console.log("开始渲染情绪探底雷达图表");
|
|
console.log("探底雷达数据", clonedData.QXTDLD);
|
|
emotionalBottomRadarRef.value.initEmotionalBottomRadar(
|
|
clonedData.KLine20,
|
|
clonedData.QXTDLD
|
|
);
|
|
console.log("情绪探底雷达图表已渲染");
|
|
}
|
|
// 渲染情绪能量转化器图表
|
|
if (emoEnergyConverterRef.value && clonedData.QXNLZHQ) {
|
|
console.log("开始渲染情绪能量转化器图表");
|
|
console.log("KLine20:", clonedData.KLine20);
|
|
console.log("QXNLZHQ:", clonedData.QXNLZHQ);
|
|
emoEnergyConverterRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXNLZHQ);
|
|
console.log("情绪能量转化器图表已渲染");
|
|
}
|
|
} catch (error) {
|
|
console.error('图表渲染过程中发生错误:', error);
|
|
const aiMessage = reactive({ sender: 'ai', text: '图表渲染失败，请重试' });
|
|
messages.value.push(aiMessage);
|
|
}
|
|
}, 100); // 100ms延迟确保DOM稳定
|
|
});
|
|
}
|
|
|
|
const scrollToBottom = async () => {
|
|
const container = userInputDisplayRef.value;
|
|
if (!container) return;
|
|
await nextTick();
|
|
console.log(container.scrollHeight, "container.scrollHeight");
|
|
console.log(container.scrollTop, "container.scrollTop");
|
|
console.log(container.offsetHeight, "container.offsetHeight");
|
|
container.scrollTop = container.scrollHeight - container.offsetHeight;
|
|
};
|
|
|
|
|
|
// 检查数据是否已加载完成
|
|
function isDataLoaded() {
|
|
// 检查页面是否已加载
|
|
if (!isPageLoaded.value) {
|
|
console.log('页面数据尚未加载完成');
|
|
return false;
|
|
}
|
|
|
|
// 检查当前股票数据是否存在
|
|
if (!currentStock.value || !currentStock.value.apiData) {
|
|
console.log('股票数据尚未加载完成');
|
|
return false;
|
|
}
|
|
|
|
// 检查图表组件是否已渲染
|
|
const requiredRefs = [
|
|
marketTemperatureRef.value,
|
|
emotionDecodRef.value,
|
|
emotionalBottomRadarRef.value,
|
|
emoEnergyConverterRef.value
|
|
];
|
|
|
|
const allRefsLoaded = requiredRefs.every(ref => ref !== null);
|
|
if (!allRefsLoaded) {
|
|
console.log('图表组件尚未完全加载');
|
|
return false;
|
|
}
|
|
|
|
console.log('所有数据和组件已加载完成，可以开始滚动');
|
|
return true;
|
|
}
|
|
|
|
// 自动滚动函数（已禁用）
|
|
function startAutoScroll() {
|
|
// 自动滚动功能已被禁用
|
|
console.log('自动滚动功能已被禁用');
|
|
return;
|
|
}
|
|
|
|
// 设置Intersection Observer监听场景应用部分
|
|
function setupIntersectionObserver() {
|
|
if (!scenarioApplicationRef.value) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
console.log('场景应用部分进入视口');
|
|
|
|
// 获取当前股票代码
|
|
const stockCode = currentStock.value?.stockInfo?.code || currentStock.value?.stockInfo?.symbol;
|
|
|
|
if (parsedConclusion.value && stockCode) {
|
|
// 检查该股票是否是第一次触发
|
|
if (!stockTypewriterShown.value.has(stockCode)) {
|
|
// 该股票第一次进入视口：只显示文本，不自动播放音频和打字机效果
|
|
console.log('该股票第一次进入场景应用，直接显示完整内容，不自动播放');
|
|
|
|
// 直接显示完整内容，不使用打字机效果
|
|
const conclusion = parsedConclusion.value;
|
|
displayedTexts.value = {
|
|
one1: conclusion.one1 || '',
|
|
one2: conclusion.one2 || '',
|
|
two: conclusion.two || '',
|
|
three: conclusion.three || '',
|
|
four: conclusion.four || '',
|
|
disclaimer: '该内容由AI生成，请注意甄别'
|
|
};
|
|
displayedTitles.value = {
|
|
one: 'L1: 情绪监控',
|
|
two: 'L2: 情绪解码',
|
|
three: 'L3: 情绪推演',
|
|
four: 'L4: 情绪套利'
|
|
};
|
|
// 显示所有有内容的模块
|
|
moduleVisibility.value = {
|
|
one: !!(conclusion.one1 || conclusion.one2),
|
|
two: !!conclusion.two,
|
|
three: !!conclusion.three,
|
|
four: !!conclusion.four,
|
|
disclaimer: true
|
|
};
|
|
|
|
// 记录该股票已显示过，但不播放音频
|
|
stockTypewriterShown.value.set(stockCode, true);
|
|
stockAudioPlayed.value.set(stockCode, true); // 标记为已播放，避免后续自动播放
|
|
} else {
|
|
// 非第一次或已经触发过：直接显示完整内容，不播放音频和打字机效果
|
|
console.log('非第一次进入场景应用或已触发过，直接显示完整内容');
|
|
|
|
// 直接显示完整内容
|
|
const conclusion = parsedConclusion.value;
|
|
displayedTexts.value = {
|
|
one1: conclusion.one1 || '',
|
|
one2: conclusion.one2 || '',
|
|
two: conclusion.two || '',
|
|
three: conclusion.three || '',
|
|
four: conclusion.four || '',
|
|
disclaimer: '该内容由AI生成，请注意甄别'
|
|
};
|
|
displayedTitles.value = {
|
|
one: 'L1: 情绪监控',
|
|
two: 'L2: 情绪解码',
|
|
three: 'L3: 情绪推演',
|
|
four: 'L4: 情绪套利'
|
|
};
|
|
// 显示所有有内容的模块
|
|
moduleVisibility.value = {
|
|
one: !!(conclusion.one1 || conclusion.one2),
|
|
two: !!conclusion.two,
|
|
three: !!conclusion.three,
|
|
four: !!conclusion.four,
|
|
disclaimer: true
|
|
};
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
{
|
|
threshold: 0.3, // 当30%的元素进入视口时触发
|
|
rootMargin: '0px 0px -100px 0px' // 提前100px触发
|
|
}
|
|
);
|
|
|
|
observer.observe(scenarioApplicationRef.value);
|
|
intersectionObserver.value = observer;
|
|
}
|
|
|
|
// 手动触发自动滚动（已禁用）
|
|
function triggerAutoScroll() {
|
|
// 自动滚动功能已被禁用
|
|
console.log('自动滚动功能已被禁用');
|
|
return;
|
|
}
|
|
|
|
// 页面挂载完成后触发图片旋转和设置滚动监听
|
|
onMounted(async () => {
|
|
// 确保获取用户次数
|
|
try {
|
|
await chatStore.getUserCount();
|
|
console.log('情绪大模型页面：用户次数获取成功');
|
|
} catch (error) {
|
|
console.error('情绪大模型页面：获取用户次数失败', error);
|
|
}
|
|
|
|
// 添加全局resize监听器，确保所有图表和容器响应页面宽度变化
|
|
const globalResizeHandler = debounce(() => {
|
|
console.log('AiEmotion页面：窗口大小变化，触发容器和图表resize');
|
|
|
|
// 强制重新计算容器布局
|
|
const mainContainer = document.querySelector('.class01');
|
|
if (mainContainer) {
|
|
// 触发重排，确保容器尺寸正确更新
|
|
mainContainer.style.display = 'none';
|
|
mainContainer.offsetHeight; // 强制重排
|
|
mainContainer.style.display = '';
|
|
}
|
|
|
|
// 触发所有图表组件的resize
|
|
const resizeHandlers = [
|
|
window.emoEnergyConverterResizeHandler,
|
|
window.marketTempResizeHandler,
|
|
window.emotionalBottomRadarResizeHandler,
|
|
window.emotionDecodResizeHandler
|
|
];
|
|
|
|
resizeHandlers.forEach(handler => {
|
|
if (typeof handler === 'function') {
|
|
try {
|
|
handler();
|
|
} catch (error) {
|
|
console.error('AiEmotion页面：图表resize失败', error);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 延迟再次触发图表resize，确保容器尺寸稳定后图表能正确适配
|
|
setTimeout(() => {
|
|
resizeHandlers.forEach(handler => {
|
|
if (typeof handler === 'function') {
|
|
try {
|
|
handler();
|
|
} catch (error) {
|
|
console.error('AiEmotion页面：延迟图表resize失败', error);
|
|
}
|
|
}
|
|
});
|
|
}, 100);
|
|
}, 150); // 150ms防抖延迟
|
|
|
|
// 移除之前的监听器（如果存在）
|
|
if (window.aiEmotionGlobalResizeHandler) {
|
|
window.removeEventListener('resize', window.aiEmotionGlobalResizeHandler);
|
|
}
|
|
|
|
// 添加新的监听器
|
|
window.addEventListener('resize', globalResizeHandler);
|
|
window.aiEmotionGlobalResizeHandler = globalResizeHandler;
|
|
|
|
// 防抖函数定义
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
startImageRotation();
|
|
|
|
// 检查是否有已保存的股票数据需要恢复
|
|
if (emotionStore.stockList.length > 0 && emotionStore.activeStock) {
|
|
console.log('检测到已保存的股票数据，开始恢复页面状态（不自动播放音频）');
|
|
|
|
// 恢复页面加载状态
|
|
isPageLoaded.value = true;
|
|
|
|
// 等待DOM渲染后恢复图表和数据
|
|
nextTick(() => {
|
|
const currentStockData = emotionStore.activeStock;
|
|
if (currentStockData && currentStockData.apiData) {
|
|
console.log('恢复图表数据:', currentStockData.stockInfo.name);
|
|
renderCharts(currentStockData.apiData);
|
|
|
|
// 恢复结论数据但不触发音频和打字机效果
|
|
if (currentStockData.conclusionData) {
|
|
conclusionData.value = currentStockData.conclusionData;
|
|
// 标记该股票的打字机效果和音频已经显示过，避免后续自动触发
|
|
const stockCode = currentStockData.stockInfo?.code || currentStockData.stockInfo?.symbol;
|
|
if (stockCode) {
|
|
stockTypewriterShown.value.set(stockCode, true);
|
|
stockAudioPlayed.value.set(stockCode, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
setupIntersectionObserver();
|
|
});
|
|
} else {
|
|
// 没有保存的数据，正常设置监听器
|
|
nextTick(() => {
|
|
setupIntersectionObserver();
|
|
});
|
|
}
|
|
});
|
|
|
|
// 组件卸载时清理定时器、音频和observer
|
|
onUnmounted(() => {
|
|
clearTypewriterTimers();
|
|
stopAudio();
|
|
|
|
// 重置触发状态
|
|
hasTriggeredAudio.value = false;
|
|
hasTriggeredTypewriter.value = false;
|
|
|
|
// 清理Intersection Observer
|
|
if (intersectionObserver.value) {
|
|
intersectionObserver.value.disconnect();
|
|
intersectionObserver.value = null;
|
|
}
|
|
|
|
// 清理全局resize监听器
|
|
if (window.aiEmotionGlobalResizeHandler) {
|
|
window.removeEventListener('resize', window.aiEmotionGlobalResizeHandler);
|
|
window.aiEmotionGlobalResizeHandler = null;
|
|
}
|
|
});
|
|
|
|
// 声明组件可以触发的事件
|
|
const emit = defineEmits(['updateMessage', 'sendMessage', 'ensureAIchat']);
|
|
|
|
// 导出方法供外部使用
|
|
defineExpose({
|
|
handleSendMessage,
|
|
triggerAutoScroll
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.disclaimer-item {
|
|
p {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding-top: 2%;
|
|
}
|
|
|
|
.class003 {
|
|
padding-top: 8%;
|
|
padding-left: 10%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.div00 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 2%;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.div00::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.class003 .div02 {
|
|
background-image: url('@/assets/img/AiEmotion/redBorder.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 35%;
|
|
min-width: 200px;
|
|
min-height: 40px;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.class003 .div01 {
|
|
background-image: url('@/assets/img/AiEmotion/blueBorder.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 35%;
|
|
min-width: 200px;
|
|
min-height: 40px;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.golden-wheel {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.golden-wheel-img {
|
|
width: 60%;
|
|
max-width: 500px;
|
|
height: auto;
|
|
}
|
|
|
|
|
|
|
|
/* 定义旋转动画 */
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 应用动画到图片 */
|
|
.rotating-image {
|
|
animation: rotate 5s linear;
|
|
/* 5 秒完成一次旋转，线性速度*/
|
|
will-change: transform;
|
|
/* 优化动画性能 */
|
|
}
|
|
|
|
.bk-image {
|
|
background-image: url("@/assets/img/AiEmotion/bk00000.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 95%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
|
|
.conclusion-container {
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
margin: 20px;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
|
|
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
|
|
.conclusion-item {
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 212, 255, 0.5);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.conclusion-title {
|
|
color: #FFD700;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin: 0 0 15px 0;
|
|
text-align: center;
|
|
letter-spacing: 2px;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #00d4ff, transparent);
|
|
}
|
|
}
|
|
|
|
.conclusion-text {
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
line-height: 1.8;
|
|
margin: 0 0 12px 0;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
padding-left: 15px;
|
|
position: relative;
|
|
|
|
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.conclusion-placeholder {
|
|
padding: 30px;
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px dashed rgba(153, 153, 153, 0.3);
|
|
|
|
p {
|
|
color: #999999;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 最后文字的颜色 */
|
|
.text-container {
|
|
position: relative;
|
|
color: white;
|
|
text-align: left;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
margin: 20px;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
|
|
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
}
|
|
|
|
.text-container p {
|
|
margin: 0 auto;
|
|
font-size: 40px;
|
|
margin-left: 0%;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
letter-spacing: 2px;
|
|
border: 1px solid rgba(0, 212, 255, 0.5);
|
|
}
|
|
|
|
.text-container p::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.text-container .title {
|
|
display: block;
|
|
color: #FFD700;
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
margin-bottom: 20px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.text-container .content {
|
|
display: block;
|
|
color: white;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
.class07 {
|
|
background-image: url("@/assets/img/AiEmotion/bk00000.png");
|
|
/* 使用导入的背景图片 */
|
|
background-size: cover;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 95%;
|
|
/* 设置容器宽度 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 70rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.class0700 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0702 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0402 {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.class0603 {
|
|
min-width: 100%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
.class0502 {
|
|
padding-top: 7%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 竖向排列元素 */
|
|
gap: 1rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.class0601 {
|
|
padding-top: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 竖向排列元素 */
|
|
gap: 1rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.img03 {
|
|
width: 10%;
|
|
height: auto;
|
|
margin-left: 43%;
|
|
}
|
|
|
|
.img04 {
|
|
width: 10%;
|
|
height: auto;
|
|
margin-left: 43%;
|
|
}
|
|
|
|
.class0701 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
.class0501 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0403 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0301 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0201 {
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.class0401 {
|
|
padding-top: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 竖向排列元素 */
|
|
gap: 1rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.img02 {
|
|
width: 10%;
|
|
height: auto;
|
|
margin-left: 43%;
|
|
}
|
|
|
|
.title2 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 45%;
|
|
}
|
|
|
|
.title3 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 44.6%;
|
|
}
|
|
|
|
.title4 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 44%;
|
|
}
|
|
|
|
.class09 {
|
|
text-align: center;
|
|
margin-top: 2%;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
/* 为需要放大的图片添加样式 */
|
|
.scaled-img {
|
|
background-image: url('@/assets/img/AiEmotion/tree00000.jpg');
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 70%;
|
|
height: 400px;
|
|
min-height: 35rem;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
.lz-img {
|
|
text-align: center;
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.class08 {
|
|
background-image: url("@/assets/img/AiEmotion/bk00000.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 95%;
|
|
height: auto;
|
|
min-height: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.class06 {
|
|
background-image: url('@/assets/img/AiEmotion/bk00000.png');
|
|
/* 使用导入的背景图片 */
|
|
background-size: 100% 100%;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 100%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 100%;
|
|
/* 确保不超出父容器 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 69rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度计算中 */
|
|
transition: all 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.class05 {
|
|
background-image: url("@/assets/img/AiEmotion/bk00000.png");
|
|
/* 使用导入的背景图片 */
|
|
background-size: 100% 100%;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 100%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 100%;
|
|
/* 确保不超出父容器 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 90rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度计算中 */
|
|
transition: all 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.class04 {
|
|
background-image: url('@/assets/img/AiEmotion/bk00000.png');
|
|
/* 使用导入的背景图片 */
|
|
background-size: 100% 100%;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 100%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 100%;
|
|
/* 确保不超出父容器 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 75rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度计算中 */
|
|
transition: all 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.class03 {
|
|
background-image: url('@/assets/img/AiEmotion/bk00000.png');
|
|
/* 使用导入的背景图片 */
|
|
background-size: 100% 100%;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 100%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 100%;
|
|
/* 确保不超出父容器 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 70rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度计算中 */
|
|
transition: all 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.class00 {
|
|
background-size: 100% 100%;
|
|
/* 确保背景图片完整显示 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
width: 100%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 100%;
|
|
/* 确保不超出父容器 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
min-height: 55rem;
|
|
/* 设置最小高度，确保图片显示 */
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度计算中 */
|
|
transition: all 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
}
|
|
|
|
.content1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 竖向排列元素 */
|
|
gap: 1rem;
|
|
margin-left: 10%;
|
|
}
|
|
|
|
.title1 {
|
|
color: white;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
margin-left: 0%;
|
|
|
|
}
|
|
|
|
.img01 {
|
|
width: 10%;
|
|
height: auto;
|
|
}
|
|
|
|
.div00 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 竖向排列元素 */
|
|
margin-left: 15%;
|
|
gap: 1rem;
|
|
margin-top: -12%;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.span02 {
|
|
font-size: 1.5rem;
|
|
color: white;
|
|
float: right;
|
|
margin-top: -2%;
|
|
}
|
|
|
|
.span01 {
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png');
|
|
/* 使用导入的背景图片 */
|
|
background-size: 100% 100%;
|
|
/* 背景图片覆盖整个容器 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
/* display: inline-block; */
|
|
/* 确保容器是块级元素 */
|
|
padding: 10px;
|
|
/* 添加内边距以显示内容 */
|
|
color: #fff;
|
|
/* 设置文字颜色以确保可读性 */
|
|
font-size: 1.5rem;
|
|
/* 增加字体大小以便更清晰显示股票名称 */
|
|
text-align: center;
|
|
/* transform: translate(-50%, -50%); */
|
|
margin-left: 0;
|
|
width: 30%;
|
|
height: auto;
|
|
}
|
|
|
|
.class01 {
|
|
width: 90%;
|
|
/* 响应式容器宽度 */
|
|
max-width: 1400px;
|
|
/* 设置最大宽度，避免在大屏幕上过度拉伸 */
|
|
min-width: 320px;
|
|
/* 设置最小宽度，确保在小屏幕上可用 */
|
|
min-height: 100px;
|
|
/* 设置最小高度，确保初始显示 */
|
|
height: auto;
|
|
/* 高度根据内容动态变化 */
|
|
padding: 1rem;
|
|
/* 添加内边距，确保内容与边界有间距 */
|
|
box-sizing: border-box;
|
|
/* 包括内边距在宽度和高度计算中 */
|
|
background-color: #2b378d;
|
|
margin: 0 auto;
|
|
/* 居中容器 */
|
|
transition: width 0.3s ease;
|
|
/* 添加平滑过渡效果 */
|
|
margin-bottom: 10rem;
|
|
}
|
|
|
|
.ai-emotion-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.user-input-display {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.message-container {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-message {
|
|
color: #6d22f8;
|
|
background: white;
|
|
font-weight: bold;
|
|
padding: 10px 15px;
|
|
border-radius: 15px;
|
|
max-width: 60%;
|
|
text-align: left;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
margin-left: auto;
|
|
/* 将用户消息推到右边 */
|
|
padding: 20px 20px;
|
|
}
|
|
|
|
.ai-message {
|
|
background-color: #f1f1f1;
|
|
color: #333;
|
|
font-weight: bold;
|
|
padding: 10px 15px;
|
|
border-radius: 15px;
|
|
max-width: 60%;
|
|
text-align: left;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
margin-right: auto;
|
|
/* 将AI消息保持在左边 */
|
|
padding: 20px 20px;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.fixed-bottom {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #f8f9fa;
|
|
padding: 10px 20px;
|
|
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.input-box {
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
width: calc(100% - 120px);
|
|
}
|
|
|
|
.send-button {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background-color: #007bff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.send-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
/* 响应式布局媒体查询 */
|
|
@media only screen and (max-width: 1200px) {
|
|
.class01 {
|
|
width: 95%;
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.span01 {
|
|
width: 40%;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.span02 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* 调整图表容器高度 */
|
|
.class00 {
|
|
min-height: 45rem;
|
|
}
|
|
|
|
.class03 {
|
|
min-height: 60rem;
|
|
}
|
|
|
|
.class04 {
|
|
min-height: 65rem;
|
|
}
|
|
|
|
.class05 {
|
|
min-height: 75rem;
|
|
}
|
|
|
|
.class06 {
|
|
min-height: 58rem;
|
|
}
|
|
|
|
.class08 {
|
|
min-height: 42rem;
|
|
}
|
|
|
|
.scaled-img {
|
|
height: 350px;
|
|
min-height: 30rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 992px) {
|
|
.class01 {
|
|
width: 98%;
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.class003 {
|
|
padding-top: 6%;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.div00 {
|
|
gap: 1%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.class003 .div01,
|
|
.class003 .div02 {
|
|
width: 45%;
|
|
min-width: 180px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* 调整图表容器高度 */
|
|
.class00 {
|
|
min-height: 40rem;
|
|
}
|
|
|
|
.class03 {
|
|
min-height: 55rem;
|
|
}
|
|
|
|
.class04 {
|
|
min-height: 55rem;
|
|
}
|
|
|
|
.class05 {
|
|
min-height: 65rem;
|
|
}
|
|
|
|
.class06 {
|
|
min-height: 50rem;
|
|
}
|
|
|
|
.class08 {
|
|
min-height: 35rem;
|
|
}
|
|
|
|
.scaled-img {
|
|
height: 300px;
|
|
min-height: 25rem;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
/* 手机端适配样式 */
|
|
@media only screen and (max-width: 768px) {
|
|
.class01 {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.container {
|
|
padding-top: 2%;
|
|
}
|
|
|
|
.title4 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 28%;
|
|
}
|
|
|
|
.class0603 {
|
|
min-width: 100%;
|
|
margin-top: 25%;
|
|
}
|
|
|
|
.scaled-img {
|
|
background-image: url('@/assets/img/AiEmotion/tree00000.jpg');
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
text-align: center;
|
|
width:100%;
|
|
margin-top: 4%;
|
|
height: 200px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.title3 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
.title2 {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
/* 图片样式 */
|
|
.golden-wheel img {
|
|
width: 100%;
|
|
}
|
|
|
|
.class0201 img {
|
|
width: 100%;
|
|
}
|
|
|
|
.class0301 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.class0403 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.class0501 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.class0702 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.class0700 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.scaled-img img {
|
|
width: 30%;
|
|
height: auto;
|
|
}
|
|
|
|
.class09 img {
|
|
width: 100%;
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.img01 {
|
|
height: auto;
|
|
margin-left: 7%;
|
|
width: 25%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.title1 {
|
|
font-size: 20px;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
.class02 .span02 {
|
|
font-size: 14px;
|
|
color: white;
|
|
float: right;
|
|
margin-top: -6%;
|
|
}
|
|
|
|
.class03 {
|
|
background-image: url('@/assets/img/AiEmotion/bk00000.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
/* margin-left: -45px; */
|
|
height: auto;
|
|
}
|
|
|
|
.class03 .class003 {
|
|
padding-top: 3rem;
|
|
padding-left: 0rem;
|
|
}
|
|
|
|
.class01 {
|
|
min-height: 100px;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
background-color: #02107d;
|
|
margin-bottom: 10rem;
|
|
}
|
|
|
|
.class04 {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 38rem;
|
|
/* min-height: 51rem; */
|
|
/* margin-left: -39px; */
|
|
/* min-height: 38rem; */
|
|
}
|
|
|
|
/* 调整其他图表容器高度 */
|
|
.class00 {
|
|
min-height: 35rem;
|
|
}
|
|
|
|
.class03 {
|
|
min-height: 45rem;
|
|
}
|
|
|
|
.class05 {
|
|
min-height: 48rem;
|
|
}
|
|
|
|
.class06 {
|
|
min-height: 35rem;
|
|
}
|
|
|
|
.class02 .container img {
|
|
width: 68%;
|
|
height: auto;
|
|
/* margin-top: 5%; */
|
|
margin-left: 0%;
|
|
}
|
|
|
|
.img02 {
|
|
width: 25%;
|
|
height: auto;
|
|
margin-left: 32%;
|
|
}
|
|
|
|
.class0401 {
|
|
padding-top: 3rem;
|
|
}
|
|
|
|
.img03,
|
|
.img04 {
|
|
width: 25%;
|
|
height: auto;
|
|
margin-left: 33%;
|
|
}
|
|
|
|
.text-container p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.lz-img {
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
|
|
img {
|
|
width: 30%;
|
|
height: auto;
|
|
margin-top: 5%;
|
|
}
|
|
}
|
|
|
|
.class08 {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 20rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.bk-image {
|
|
.conclusion-container {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 8px;
|
|
|
|
.conclusion-item {
|
|
margin-bottom: 15px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.conclusion-title {
|
|
color: #FFD700;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin: 0 0 8px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.conclusion-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
margin: 0 0 6px 0;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.conclusion-placeholder {
|
|
padding: 15px;
|
|
text-align: center;
|
|
|
|
p {
|
|
color: #999999;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bk-image {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
margin-top: 0px;
|
|
margin-left: 0;
|
|
|
|
.conclusion-container {
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
margin: 20px;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
|
|
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
|
|
.conclusion-item {
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%);
|
|
border: 1px solid rgba(0, 212, 255, 0.5);
|
|
border-left: 5px solid #00d4ff;
|
|
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.conclusion-title {
|
|
color: #FFD700;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin: 0 0 15px 0;
|
|
text-align: center;
|
|
letter-spacing: 2px;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #00d4ff, transparent);
|
|
}
|
|
}
|
|
|
|
.conclusion-text {
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
line-height: 1.8;
|
|
margin: 0 0 12px 0;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
padding-left: 15px;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '▶';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: #00d4ff;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.conclusion-placeholder {
|
|
padding: 30px;
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px dashed rgba(153, 153, 153, 0.3);
|
|
|
|
p {
|
|
color: #999999;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.disclaimer-item {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
border-top: 1px solid rgba(153, 153, 153, 0.2);
|
|
text-align: center;
|
|
|
|
p.disclaimer-text {
|
|
color: #ffffff !important;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
font-style: italic;
|
|
opacity: 0.8;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.class05 {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 48rem;
|
|
}
|
|
|
|
.class06 {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 35rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.text-container {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
color: white;
|
|
text-align: left;
|
|
padding: 5%;
|
|
}
|
|
|
|
.div00 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 5rem;
|
|
gap: 0;
|
|
margin-top: -6rem;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.class003 .div01 {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 35%;
|
|
min-height: 25px;
|
|
float: left;
|
|
margin-left: 100px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.class003 .div02 {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 35%;
|
|
min-height: 25px;
|
|
float: left;
|
|
margin-left: 100px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.span01 {
|
|
/* 使用导入的背景图片 */
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png');
|
|
background-size: 100% 100%;
|
|
/* 背景图片覆盖整个容器 */
|
|
background-repeat: no-repeat;
|
|
/* 防止背景图片重复 */
|
|
display: inline-block;
|
|
/* 确保容器是块级元素 */
|
|
padding: 10px;
|
|
/* 添加内边距以显示内容 */
|
|
color: #fff;
|
|
/* 设置文字颜色以确保可读性 */
|
|
font-size: 14px;
|
|
/* 增加字体大小以便更清晰显示股票名称 */
|
|
text-align: center;
|
|
width: 50%;
|
|
}
|
|
|
|
.class0502,
|
|
.class0601 {
|
|
padding-top: 10%;
|
|
}
|
|
|
|
.class003 {
|
|
padding-top: 4%;
|
|
padding-left: 2%;
|
|
}
|
|
|
|
.div00 {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.class003 .div01,
|
|
.class003 .div02 {
|
|
width: 80%;
|
|
min-width: 250px;
|
|
font-size: 16px;
|
|
min-height: 35px;
|
|
}
|
|
|
|
.span01 {
|
|
width: 60%;
|
|
font-size: 1.2rem;
|
|
padding: 8px;
|
|
}
|
|
|
|
.span02 {
|
|
font-size: 1.2rem;
|
|
margin-top: -3%;
|
|
}
|
|
|
|
.title1,
|
|
.title2,
|
|
.title3,
|
|
.title4 {
|
|
font-size: 18px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕设备 */
|
|
@media only screen and (max-width: 480px) {
|
|
.class01 {
|
|
width: 100%;
|
|
padding: 0.3rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.div00 {
|
|
flex-direction: column;
|
|
gap: 0.8rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.class003 .div01,
|
|
.class003 .div02 {
|
|
width: 90%;
|
|
min-width: 200px;
|
|
font-size: 14px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.span01 {
|
|
width: 70%;
|
|
font-size: 1rem;
|
|
padding: 6px;
|
|
}
|
|
|
|
.span02 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.golden-wheel-img {
|
|
width: 80%;
|
|
}
|
|
|
|
/* 调整图表容器高度适配超小屏幕 */
|
|
.class00 {
|
|
min-height: 25rem;
|
|
}
|
|
|
|
.class03 {
|
|
min-height: 35rem;
|
|
}
|
|
|
|
.class04 {
|
|
min-height: 30rem;
|
|
}
|
|
|
|
.class05 {
|
|
min-height: 35rem;
|
|
}
|
|
|
|
.class06 {
|
|
min-height: 25rem;
|
|
}
|
|
|
|
.class08 {
|
|
min-height: 15rem;
|
|
}
|
|
|
|
.scaled-img {
|
|
height: 150px;
|
|
min-height: 150px;
|
|
}
|
|
}
|
|
|
|
/* 加载提示样式 */
|
|
.loading-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 60vh;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.loading-content {
|
|
text-align: center;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
|
|
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 4px solid rgba(0, 212, 255, 0.3);
|
|
border-top: 4px solid #00d4ff;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
color: #00d4ff;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5);
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|