|
@ -1,7 +1,10 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="ai-emotion-container"> |
|
|
<div class="ai-emotion-container"> |
|
|
|
|
|
<!-- 金轮 --> |
|
|
|
|
|
<div class="golden-wheel"> |
|
|
|
|
|
<img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" class="rotating-image"> |
|
|
|
|
|
</div> |
|
|
<!-- 消息显示区域 --> |
|
|
<!-- 消息显示区域 --> |
|
|
|
|
|
|
|
|
<div class="user-input-display"> |
|
|
<div class="user-input-display"> |
|
|
<div v-for="(message, index) in messages" :key="index" class="message-container"> |
|
|
<div v-for="(message, index) in messages" :key="index" class="message-container"> |
|
|
<!-- 用户输入内容 --> |
|
|
<!-- 用户输入内容 --> |
|
@ -21,21 +24,22 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 渲染整个页面 --> |
|
|
<!-- 渲染整个页面 --> |
|
|
<div class="class01"> |
|
|
|
|
|
|
|
|
<div v-if="isPageLoaded" class="class01"> |
|
|
<!-- 四维矩阵图 --> |
|
|
<!-- 四维矩阵图 --> |
|
|
<div class="class02"> |
|
|
<div class="class02"> |
|
|
<div class="span01"> |
|
|
<div class="span01"> |
|
|
{{ stockName || '未选择股票' }} |
|
|
|
|
|
|
|
|
{{ stockName }} |
|
|
</div> |
|
|
</div> |
|
|
<span class="span02"> 2025/06/07</span> |
|
|
|
|
|
|
|
|
<span class="span02">{{ displayDate }}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="class0201"> |
|
|
<div class="class0201"> |
|
|
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标"> |
|
|
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标"> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 温度计图表 --> |
|
|
<!-- 温度计图表 --> |
|
|
<div class="class03"> |
|
|
<div class="class03"> |
|
|
<marketTemperature /> |
|
|
|
|
|
|
|
|
<marketTemperature ref="marketTemperatureRef" /> |
|
|
</div> |
|
|
</div> |
|
|
<div class="class0301"> |
|
|
<div class="class0301"> |
|
|
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标"> |
|
|
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标"> |
|
@ -73,30 +77,44 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 核心看点 --> |
|
|
<!-- 核心看点 --> |
|
|
<div class="class0702"> |
|
|
<div class="class0702"> |
|
|
<img src="@/assets/img/AiEmotion/核心看点.png" alt="核心逻辑字样"> |
|
|
|
|
|
|
|
|
<img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="class07"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bk-image"> |
|
|
|
|
|
<div class="text-container"> |
|
|
|
|
|
<p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p> |
|
|
|
|
|
<p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p> |
|
|
|
|
|
<p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p> |
|
|
|
|
|
<p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 核心逻辑 --> |
|
|
<!-- 核心逻辑 --> |
|
|
<div class="class0700"> |
|
|
<div class="class0700"> |
|
|
<img src="@/assets/img/AiEmotion/核心逻辑.png" alt=""> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="class07000"> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="class0701"> |
|
|
|
|
|
<img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题"> |
|
|
|
|
|
|
|
|
<img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="class08"> |
|
|
<div class="class08"> |
|
|
<img src="@/assets/img/AiEmotion/tree.png" alt="树图片"> |
|
|
|
|
|
|
|
|
<div class="lz-img"> |
|
|
|
|
|
<img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="scaled-img"> |
|
|
|
|
|
<img src="@/assets/img/AiEmotion/tree02.png" alt="树图片"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 场景应用 --> |
|
|
<!-- 场景应用 --> |
|
|
<div class="class09"> |
|
|
<div class="class09"> |
|
|
<img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题"> |
|
|
<img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题"> |
|
|
<div class="bk-image"></div> |
|
|
|
|
|
|
|
|
<div class="bk-image"> |
|
|
|
|
|
<!-- <div class="text-container"> |
|
|
|
|
|
<p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p> |
|
|
|
|
|
<p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p> |
|
|
|
|
|
<p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p> |
|
|
|
|
|
<p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div v-else class="loading"> |
|
|
|
|
|
<p>数据加载中,请稍候...</p> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup> |
|
|
<script setup> |
|
@ -109,12 +127,25 @@ import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // |
|
|
import marketTemperature from '@/views/components/marketTemperature.vue'; |
|
|
import marketTemperature from '@/views/components/marketTemperature.vue'; |
|
|
|
|
|
|
|
|
const stockName = ref(''); // 存储股票名称 |
|
|
const stockName = ref(''); // 存储股票名称 |
|
|
|
|
|
const marketTemperatureRef = ref(null); // 引用市场温度计组件 |
|
|
const emoEnergyConverterRef = ref(null) |
|
|
const emoEnergyConverterRef = ref(null) |
|
|
const emotionDecodRef = ref(null) |
|
|
const emotionDecodRef = ref(null) |
|
|
const emotionalBottomRadarRef = ref(null) |
|
|
const emotionalBottomRadarRef = ref(null) |
|
|
|
|
|
|
|
|
const userInput = ref(''); |
|
|
const userInput = ref(''); |
|
|
const messages = ref([]); |
|
|
const messages = ref([]); |
|
|
|
|
|
const displayDate = ref(''); // 用于存储显示的日期 |
|
|
|
|
|
const isPageLoaded = ref(false); // 控制页面是否显示 |
|
|
|
|
|
|
|
|
|
|
|
// 更新 span01 中股票名字的方法 |
|
|
|
|
|
function updateSpan01() { |
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
const span01 = document.querySelector('.span01'); |
|
|
|
|
|
if (span01) { |
|
|
|
|
|
span01.textContent = `${stockName.value}量子四维矩阵图`; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 请求工作流接口 |
|
|
// 请求工作流接口 |
|
|
async function sendMessage() { |
|
|
async function sendMessage() { |
|
@ -126,6 +157,12 @@ async function sendMessage() { |
|
|
messages.value.push(userMessage); |
|
|
messages.value.push(userMessage); |
|
|
userInput.value = ''; // 清空输入框 |
|
|
userInput.value = ''; // 清空输入框 |
|
|
|
|
|
|
|
|
|
|
|
// 添加等待提示信息 |
|
|
|
|
|
messages.value.push({ |
|
|
|
|
|
sender: 'ai', |
|
|
|
|
|
text: '数据加载中,请稍候...' |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
// 调用工作流接口 |
|
|
// 调用工作流接口 |
|
|
const params = { |
|
|
const params = { |
|
@ -159,6 +196,9 @@ async function sendMessage() { |
|
|
stockName.value = parsedData.name || '未知股票'; |
|
|
stockName.value = parsedData.name || '未知股票'; |
|
|
// 请求数据接口 |
|
|
// 请求数据接口 |
|
|
fetchData(parsedData.code, parsedData.market); |
|
|
fetchData(parsedData.code, parsedData.market); |
|
|
|
|
|
|
|
|
|
|
|
// 更新 span01 的内容 |
|
|
|
|
|
updateSpan01(); |
|
|
} else { |
|
|
} else { |
|
|
console.error('工作流接口返回非股票信息:', parsedData.refuse); |
|
|
console.error('工作流接口返回非股票信息:', parsedData.refuse); |
|
|
messages.value.push({ |
|
|
messages.value.push({ |
|
@ -188,8 +228,8 @@ async function fetchData(code, market) { |
|
|
const stockDataParams = { |
|
|
const stockDataParams = { |
|
|
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A', |
|
|
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A', |
|
|
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs', |
|
|
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs', |
|
|
market: 'my', |
|
|
|
|
|
code: '1295', |
|
|
|
|
|
|
|
|
market: 'usa', |
|
|
|
|
|
code: 'TSLA', |
|
|
language: 'cn', |
|
|
language: 'cn', |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -216,6 +256,17 @@ async function fetchData(code, market) { |
|
|
// 调用渲染图表的方法 |
|
|
// 调用渲染图表的方法 |
|
|
renderCharts(stockDataResponse.data); |
|
|
renderCharts(stockDataResponse.data); |
|
|
console.log('2222222222222222222222') |
|
|
console.log('2222222222222222222222') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置当天日期 |
|
|
|
|
|
const today = new Date(); |
|
|
|
|
|
const year = today.getFullYear(); |
|
|
|
|
|
const month = String(today.getMonth() + 1).padStart(2, '0'); |
|
|
|
|
|
const day = String(today.getDate()).padStart(2, '0'); |
|
|
|
|
|
displayDate.value = `${year}/${month}/${day}`; |
|
|
|
|
|
|
|
|
|
|
|
// 数据和图表加载完成,显示页面 |
|
|
|
|
|
isPageLoaded.value = true; |
|
|
} else { |
|
|
} else { |
|
|
console.error('图表数据接口返回数据不完整'); |
|
|
console.error('图表数据接口返回数据不完整'); |
|
|
messages.value.push({ |
|
|
messages.value.push({ |
|
@ -233,47 +284,131 @@ async function fetchData(code, market) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 渲染组件图表的方法 |
|
|
// 渲染组件图表的方法 |
|
|
|
|
|
// function renderCharts(data) { |
|
|
|
|
|
// nextTick(() => { |
|
|
|
|
|
// // 渲染股市温度计图表 |
|
|
|
|
|
// if (marketTemperatureRef.value && data.GSWDJ) { |
|
|
|
|
|
// console.log('开始渲染股市温度计图表'); |
|
|
|
|
|
// console.log('股市温度计数据', data.GSWDJ) |
|
|
|
|
|
// marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); |
|
|
|
|
|
// console.log('股市温度计图表已渲染'); |
|
|
|
|
|
// } |
|
|
|
|
|
// // 渲染情绪解码器图表 |
|
|
|
|
|
// if (emotionDecodRef.value && data.QXJMQ) { |
|
|
|
|
|
// console.log('开始渲染情绪解码器图表'); |
|
|
|
|
|
// console.log('情绪解码器数据', data.QXJMQ) |
|
|
|
|
|
// emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); |
|
|
|
|
|
// console.log('情绪解码器图表已渲染'); |
|
|
|
|
|
// } |
|
|
|
|
|
// // 渲染情绪探底雷达图表 |
|
|
|
|
|
// if (emotionalBottomRadarRef.value && data.QXTDLD) { |
|
|
|
|
|
// console.log('开始渲染情绪探底雷达图表'); |
|
|
|
|
|
// console.log('数据', data.QXTDLD) |
|
|
|
|
|
// emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); |
|
|
|
|
|
// console.log('情绪探底雷达图表已渲染'); |
|
|
|
|
|
// } |
|
|
|
|
|
// // 渲染情绪能量转化器图表 |
|
|
|
|
|
// if (emoEnergyConverterRef.value && data.QXNLZHQ) { |
|
|
|
|
|
// console.log('开始渲染情绪能量转化器图表'); |
|
|
|
|
|
// console.log('KLine20:', data.KLine20); |
|
|
|
|
|
// console.log('QXNLZHQ:', data.QXNLZHQ); |
|
|
|
|
|
// emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); |
|
|
|
|
|
// console.log('情绪能量转化器图表已渲染'); |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// }); |
|
|
|
|
|
// } |
|
|
function renderCharts(data) { |
|
|
function renderCharts(data) { |
|
|
nextTick(() => { |
|
|
|
|
|
// 渲染情绪解码器图表 |
|
|
|
|
|
if (emotionDecodRef.value && data.QXJMQ) { |
|
|
|
|
|
console.log('开始渲染情绪解码器图表'); |
|
|
|
|
|
console.log('情绪解码器数据', data.QXJMQ) |
|
|
|
|
|
emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); |
|
|
|
|
|
console.log('情绪解码器图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 渲染情绪探底雷达图表 |
|
|
|
|
|
if (emotionalBottomRadarRef.value && data.QXTDLD) { |
|
|
|
|
|
console.log('开始渲染情绪探底雷达图表'); |
|
|
|
|
|
console.log('数据', data.QXTDLD) |
|
|
|
|
|
emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); |
|
|
|
|
|
console.log('情绪探底雷达图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 渲染情绪能量转化器图表 |
|
|
|
|
|
if (emoEnergyConverterRef.value && data.QXNLZHQ) { |
|
|
|
|
|
console.log('开始渲染情绪能量转化器图表'); |
|
|
|
|
|
console.log('KLine20:', data.KLine20); |
|
|
|
|
|
console.log('QXNLZHQ:', data.QXNLZHQ); |
|
|
|
|
|
emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); |
|
|
|
|
|
console.log('情绪能量转化器图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return new Promise((resolve) => { |
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
// 渲染股市温度计图表 |
|
|
|
|
|
if (marketTemperatureRef.value && data.GSWDJ) { |
|
|
|
|
|
console.log('开始渲染股市温度计图表'); |
|
|
|
|
|
console.log('股市温度计数据', data.GSWDJ) |
|
|
|
|
|
marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); |
|
|
|
|
|
console.log('股市温度计图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 渲染情绪解码器图表 |
|
|
|
|
|
if (emotionDecodRef.value && data.QXJMQ) { |
|
|
|
|
|
console.log('开始渲染情绪解码器图表'); |
|
|
|
|
|
console.log('情绪解码器数据', data.QXJMQ) |
|
|
|
|
|
emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); |
|
|
|
|
|
console.log('情绪解码器图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 渲染情绪探底雷达图表 |
|
|
|
|
|
if (emotionalBottomRadarRef.value && data.QXTDLD) { |
|
|
|
|
|
console.log('开始渲染情绪探底雷达图表'); |
|
|
|
|
|
console.log('数据', data.QXTDLD) |
|
|
|
|
|
emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); |
|
|
|
|
|
console.log('情绪探底雷达图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 渲染情绪能量转化器图表 |
|
|
|
|
|
if (emoEnergyConverterRef.value && data.QXNLZHQ) { |
|
|
|
|
|
console.log('开始渲染情绪能量转化器图表'); |
|
|
|
|
|
console.log('KLine20:', data.KLine20); |
|
|
|
|
|
console.log('QXNLZHQ:', data.QXNLZHQ); |
|
|
|
|
|
emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); |
|
|
|
|
|
console.log('情绪能量转化器图表已渲染'); |
|
|
|
|
|
} |
|
|
|
|
|
// 图表渲染完成,resolve 承诺 |
|
|
|
|
|
resolve(); |
|
|
|
|
|
}); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
|
|
|
/* 定义旋转动画 */ |
|
|
|
|
|
@keyframes rotate { |
|
|
|
|
|
from { |
|
|
|
|
|
transform: rotate(0deg); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
to { |
|
|
|
|
|
transform: rotate(360deg); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 应用动画到图片 */ |
|
|
|
|
|
.rotating-image { |
|
|
|
|
|
animation: rotate 5s linear; |
|
|
|
|
|
/* 5 秒完成一次旋转,线性速度*/ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.bk-image { |
|
|
.bk-image { |
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
|
|
|
|
|
|
/* background-position: center; */ |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
width: 95%; |
|
|
width: 95%; |
|
|
height: 70rem; |
|
|
|
|
|
|
|
|
height: 30rem; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
margin-top: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 最后文字的颜色 */ |
|
|
|
|
|
.text-container { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
top: 40%; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
color: white; |
|
|
|
|
|
/* 设置文字颜色 */ |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
/* 文字居中对齐 */ |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text-container p { |
|
|
|
|
|
margin: 10px 0; |
|
|
|
|
|
/* 设置段落间距 */ |
|
|
|
|
|
font-size: 40px; |
|
|
|
|
|
/* 设置字体大小 */ |
|
|
|
|
|
margin-left: 50px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.class07 { |
|
|
.class07 { |
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
/* 使用导入的背景图片 */ |
|
|
/* 使用导入的背景图片 */ |
|
@ -290,16 +425,6 @@ function renderCharts(data) { |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.class07000 { |
|
|
|
|
|
background-image: url(/src/assets/img/AiEmotion/bk03.png); |
|
|
|
|
|
background-size: contain; |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
width: 95%; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
min-height: 70rem; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.class0700 { |
|
|
.class0700 { |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
width: fit-content; |
|
|
width: fit-content; |
|
@ -365,9 +490,27 @@ function renderCharts(data) { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 为需要放大的图片添加样式 */ |
|
|
|
|
|
.scaled-img { |
|
|
|
|
|
transform: scale(2.5); |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.lz-img { |
|
|
|
|
|
margin-bottom: 10rem; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
padding-top: 70px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.class08 { |
|
|
.class08 { |
|
|
|
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
|
|
|
background-size: cover; |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
width: 95%; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
min-height: 40rem; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
width: fit-content; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.class06 { |
|
|
.class06 { |
|
@ -434,6 +577,12 @@ function renderCharts(data) { |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.span02 { |
|
|
|
|
|
margin-left: 500px; |
|
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
|
color: white; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.span01 { |
|
|
.span01 { |
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png'); |
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png'); |
|
|
/* 使用导入的背景图片 */ |
|
|
/* 使用导入的背景图片 */ |
|
@ -451,8 +600,10 @@ function renderCharts(data) { |
|
|
/* 添加圆角 */ |
|
|
/* 添加圆角 */ |
|
|
min-height: 3rem; |
|
|
min-height: 3rem; |
|
|
min-width: 30rem; |
|
|
min-width: 30rem; |
|
|
font-size: 1.5rem; /* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
|
|
text-align: center; /* 文字居中 */ |
|
|
|
|
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
|
/* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
/* 文字居中 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.class01 { |
|
|
.class01 { |
|
|