hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改样式

ds_hxl
dongqian 3 weeks ago
parent
7bb0675378
commit
d88b61cb59
4 changed files with 160 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 177
      src/views/AiEmotion.vue
  2. 3
      src/views/components/emoEnergyConverter.vue
  3. 1
      src/views/components/emotionDecod.vue
  4. 8
      src/views/components/emotionalBottomRadar.vue

177
src/views/AiEmotion.vue
View File

@ -34,8 +34,16 @@
<div class="class00">
<!-- 四维矩阵图 -->
<div class="class02">
<div class="span01">
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
<div class="container">
<img class="item" :src="item" alt="思维矩阵图片" />
<div class="span01" style="
position: relative;
top: 0.5rem;
left: -14rem;
transform: translate(-50%, -50%);
">
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
</div>
</div>
<span class="span02">{{ displayDate }}</span>
</div>
@ -45,22 +53,26 @@
<!-- 温度计图表 -->
<div class="class03">
<div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
<img src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标" style="float: left;padding-left: 5rem;">
<div class="content1">
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
<span class="title1">股票温度计</span>
</div>
<div class="div00">
<div class="div01">galg</div>
<div class="div02">hkjkl</div>
<div class="div01">个股温度：{{ data1 ?? "NA" }}</div>
<div class="div02">大盘温度：{{ data2 }}</div>
</div>
</div>
<marketTemperature ref="marketTemperatureRef" />
</div>
</div>
<div class="class0301">
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
</div>
<div class="class0301">
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
</div>
<!-- 情绪解码器图表 -->
<div class="class04">
<div class="class0401">
<img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
<img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
<span class="title2">情绪解码器</span>
</div>
<div class="class0402">
<emotionDecod ref="emotionDecodRef"></emotionDecod>
@ -72,7 +84,8 @@
<!-- 情绪探底雷达图表 -->
<div class="class05">
<div class="class0502">
<img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
<img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
<span class="title3">情绪探底雷达</span>
</div>
<div class="class0503">
<emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
@ -84,9 +97,12 @@
<!-- 情绪能量转化器图表 -->
<div class="class06">
<div class="class0601">
<img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
<img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
<span class="title4">情绪能量转化器</span>
</div>
<div class="class0603">
<emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
</div>
<emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
</div>
<!-- 核心看点 -->
<div class="class0702">
@ -134,6 +150,7 @@
import { ref, reactive } from 'vue';
import { getReplyAPI } 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'; // 导入情绪能量转化器组件
@ -151,9 +168,10 @@ const displayDate = ref(''); // 用于存储显示的日期
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转
const userInputDisplayRef = ref(null);//消息区域的引用
const data1 = ref(null); // 个股温度
const data2 = ref(); // 大盘温度
//导出方法供外部使用
defineExpose({handleSendMessage})
defineExpose({ handleSendMessage })
// 从本地存储中加载对话历史的方法
const loadMessagesFromLocalStorage = () => {
@ -316,7 +334,16 @@ async function fetchData(code, market) {
sender: 'ai',
text: `股票数据已成功获取`,
});
// 数据清洗并四舍五入xx
const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [
date,
Math.round(num1),
Math.round(num2)
]).at(-1);
console.log('111111111111111111111111111')
// 取最后一条数据
data1.value = lastTwoNumbers[1] // 个股温度
data2.value = lastTwoNumbers[2] // 市场温度
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
@ -401,8 +428,7 @@ onMounted(() => {
</script>
<style scoped>
.class003 .div02{
.class003 .div02 {
background-image: url('@/assets/img/AiEmotion/redBorder.png');
background-repeat: no-repeat;
background-size: 100% 100%;
@ -415,7 +441,8 @@ onMounted(() => {
font-size: 24px;
color: white;
}
.class003 .div01{
.class003 .div01 {
background-image: url('@/assets/img/AiEmotion/blueBorder.png');
background-repeat: no-repeat;
background-size: 100% 100%;
@ -428,6 +455,7 @@ onMounted(() => {
font-size: 24px;
color: white;
}
/* 定义旋转动画 */
@keyframes rotate {
from {
@ -504,8 +532,8 @@ onMounted(() => {
}
.class0503 {
width: 80%;
margin: 0 auto;
min-width: 100%;
/* margin: 0 auto; */
}
@ -515,16 +543,45 @@ onMounted(() => {
}
.class0601 {
padding-top: 10rem;
padding-top: 5rem;
text-align: center;
padding-bottom: 6rem;
}
.class0603 {
min-width: 100%;
/* margin: 0 auto; */
}
.class0502 {
padding-top: 5rem;
text-align: center;
padding-bottom: 6rem;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
gap: 1rem;
margin-left: 2rem;
}
.class0601{
padding-top: 5rem;
text-align: center;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
gap: 1rem;
margin-left: 2rem;
}
.img03{
width: 10rem;
height: 10rem;
margin-left: 40rem;
}
.img04{
width: 10rem;
height: 10rem;
margin-left: 40rem;
}
.class0701 {
margin: 0 auto;
width: fit-content;
@ -553,8 +610,38 @@ onMounted(() => {
.class0401 {
padding-top: 5rem;
text-align: center;
display: flex;
flex-direction: column;
/* 竖向排列元素 */
gap: 1rem;
margin-left: 2rem;
}
.class0502{
}
.img02{
width: 10rem;
height: 10rem;
margin-left: 40rem;
}
.title2{
color: white;
font-size: 2rem;
font-weight: bold;
margin-left: -4rem;
}
.title3{
color: white;
font-size: 2rem;
font-weight: bold;
margin-left: -4rem;
}
.title4{
color: white;
font-size: 2rem;
font-weight: bold;
margin-left: -4rem;
}
.class09 {
text-align: center;
}
@ -644,8 +731,14 @@ onMounted(() => {
min-height: 70rem;
/* 设置最小高度，确保图片显示 */
margin: 0 auto;
/* display: flex;
flex-direction:row;
align-items: center;
padding: 1rem;
gap: 1rem; */
}
.class00{
.class00 {
background-size: 100% 100%;
/* 确保背景图片完整显示 */
background-repeat: no-repeat;
@ -659,14 +752,47 @@ onMounted(() => {
margin: 0 auto;
}
.content1 {
display: flex;
flex-direction: column;
/* 竖向排列元素 */
gap: 1rem;
margin-left: 2rem;
}
.title1 {
color: white;
font-size: 2.5rem;
font-weight: bold;
margin-left: -1rem;
}
.img01 {
width: 10rem;
height: 10rem;
}
.div00 {
display: flex;
flex-direction: column;
/* 竖向排列元素 */
margin-left: 30rem;
gap: 1rem;
margin-top: -10rem;
width: 70rem;
height: 10rem;
}
.span02 {
font-size: 1.5rem;
color: white;
float: right;
margin-top: -90px;
}
.span01 {
background-image: url('@/assets/img/AiEmotion/bk01.png');
/* background-image: url('@/assets/img/AiEmotion/bk01.png'); */
/* 使用导入的背景图片 */
background-size: cover;
/* 背景图片覆盖整个容器 */
@ -686,6 +812,7 @@ onMounted(() => {
/* 增加字体大小以便更清晰显示股票名称 */
text-align: center;
/* 文字居中 */
}
.class01 {

3
src/views/components/emoEnergyConverter.vue
View File

@ -439,7 +439,8 @@ onBeforeUnmount(() => {
</script>
<style scoped>
#qxnlzhqEcharts {
width: 100%;
min-width: 100%;
height: 700px;
margin-left: -1rem;
}
</style>

1
src/views/components/emotionDecod.vue
View File

@ -340,6 +340,7 @@ onBeforeUnmount(() => {
// 组件卸载时销毁图表
if (KlineCanvsChart) {
KlineCanvsChart.dispose();
}
});
</script>

8
src/views/components/emotionalBottomRadar.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="bottomRadarRef" id="bottomRadarChart"></div>
<div ref="bottomRadarRef" id="bottomRadarChart" style="heigh: 100%; width: 100%;"></div>
</template>
<script setup>
@ -554,8 +554,10 @@ onBeforeUnmount(() => {
<style>
#bottomRadarChart{
width: 100%;
height: 1040px;
min-width: 100%;
/* min-height: 100%; */
height:1040px;
/* padding-bottom: 3rem; */
}
</style>
Write Preview
Loading…
Cancel
Save