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

发现删除，飘屏删除，标签页样式修改，禁止横屏滚动，金色轮盘样式适配

ds_hxl
no99 3 weeks ago
parent
7bb0675378
commit
98899d1e0d
6 changed files with 678 additions and 615 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. 2
      src/views/AIchat.vue
  2. 313
      src/views/AiEmotion.vue
  3. 4
      src/views/DBQBmodel.vue
  4. 4
      src/views/Emotionsmodel.vue
  5. 6
      src/views/Selectmodel.vue
  6. 30
      src/views/homePage.vue

2
src/views/AIchat.vue
View File

@ -4566,7 +4566,7 @@ onUnmounted(() => {
<div class="gif-area">
<img :src="currentGif" alt="AI动画" />
<div class="marquee-container">
<div class="marquee-container" v-if="false">
<div id="top" class="marquee-row top" @mouseenter="floatingTopMouseEnter" @mouseleave="floatingTopMouseLeave">
<div v-for="(questions, index) in questionsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
@click="showQuestions(questions)">

313
src/views/AiEmotion.vue
View File

@ -1,14 +1,26 @@
<template>
<div class="ai-emotion-container">
<div class="ai-emotion-container" ref="userInputDisplayRef">
<!-- 金轮 -->
<div class="golden-wheel">
<img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" :class="{ 'rotating-image': isRotating }">
<img
src="@/assets/img/AiEmotion/金轮.png"
class="golden-wheel-img"
alt="金轮图标"
:class="{ 'rotating-image': isRotating }"
/>
</div>
<!-- 消息显示区域 -->
<div class="user-input-display" ref="userInputDisplayRef">
<div v-for="(message, index) in messages" :key="index" class="message-container">
<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">
<div
v-if="message.sender === 'user'"
class="message-bubble user-message"
>
{{ message.text }}
</div>
<!-- AI返回结果 -->
@ -28,24 +40,27 @@
</div> -->
</div>
<!-- 渲染整个页面 -->
<div v-if="isPageLoaded" class="class01">
<div class="class00">
<!-- 四维矩阵图 -->
<div class="class02">
<div class="span01">
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
{{ stockName }}{{ stockName ? "量子四维矩阵图" : "" }}
</div>
<span class="span02">{{ displayDate }}</span>
</div>
<div class="class0201">
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标" />
</div>
<!-- 温度计图表 -->
<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="class003" style="padding-top: 7rem; padding-left: 12rem">
<img
src="@/assets/img/AiEmotion/温度计.png"
alt="温度计图标"
style="float: left; padding-left: 5rem"
/>
<div class="div00">
<div class="div01">galg</div>
<div class="div02">hkjkl</div>
@ -55,66 +70,77 @@
</div>
</div>
<div class="class0301">
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标" />
</div>
<!-- 情绪解码器图表 -->
<div class="class04">
<div class="class0401">
<img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
<img
src="@/assets/img/AiEmotion/emotionDecod.png"
alt="情绪解码器图标"
/>
</div>
<div class="class0402">
<emotionDecod ref="emotionDecodRef"></emotionDecod>
</div>
</div>
<div class="class0403">
<img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
<img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标" />
</div>
<!-- 情绪探底雷达图表 -->
<div class="class05">
<div class="class0502">
<img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
<img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表" />
</div>
<div class="class0503">
<emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
<emotionalBottomRadar
ref="emotionalBottomRadarRef"
></emotionalBottomRadar>
</div>
</div>
<div class="class0501">
<img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
<img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利" />
</div>
<!-- 情绪能量转化器图表 -->
<div class="class06">
<div class="class0601">
<img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
<img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标" />
</div>
<emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
</div>
<!-- 核心看点 -->
<div class="class0702">
<img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
<img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样" />
</div>
<div class="bk-image">
<div class="text-container">
<p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
<p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p>
<p>
情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达
</p>
<p>
情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码
</p>
<p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p>
<p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p>
<p>
情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流
</p>
</div>
</div>
<!-- 核心逻辑 -->
<div class="class0700">
<img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
<img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样" />
</div>
<div class="class08">
<div class="lz-img">
<img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
<img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题" />
</div>
<div class="scaled-img">
<img src="@/assets/img/AiEmotion/tree02.png" alt="树图片">
<img src="@/assets/img/AiEmotion/tree02.png" alt="树图片" />
</div>
</div>
<!-- 场景应用 -->
<div class="class09">
<img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
<img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题" />
<div class="bk-image">
<!-- <div class="text-container">
<p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
@ -131,33 +157,33 @@
</template>
<script setup>
import { ref, reactive } from 'vue';
import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
import axios from 'axios';
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 blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
const stockName = ref(''); // 存储股票名称
import { ref, reactive } from "vue";
import { getReplyAPI } from "@/api/AiEmotionApi.js"; // 导入工作流接口方法
import axios from "axios";
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 blueBorderImg from "@/assets/img/AiEmotion/blueBorder.png"; //导入蓝色背景框图片
const stockName = ref(""); // 存储股票名称
const marketTemperatureRef = ref(null); // 引用市场温度计组件
const emoEnergyConverterRef = ref(null)
const emotionDecodRef = ref(null)
const emotionalBottomRadarRef = ref(null)
const userInput = ref('');
const emoEnergyConverterRef = ref(null);
const emotionDecodRef = ref(null);
const emotionalBottomRadarRef = ref(null);
const userInput = ref("");
const messages = ref([]);
const displayDate = ref(''); // 用于存储显示的日期
const displayDate = ref(""); // 用于存储显示的日期
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转
const userInputDisplayRef = ref(null);//消息区域的引用
const isRotating = ref(false); //控制旋转
const userInputDisplayRef = ref(null); //消息区域的引用
//导出方法供外部使用
defineExpose({handleSendMessage})
defineExpose({ handleSendMessage });
// 从本地存储中加载对话历史的方法
const loadMessagesFromLocalStorage = () => {
const storedMessages = localStorage.getItem('chatMessages');
const storedMessages = localStorage.getItem("chatMessages");
if (storedMessages) {
messages.value = JSON.parse(storedMessages);
}
@ -165,7 +191,7 @@ const loadMessagesFromLocalStorage = () => {
// 将对话历史保存到本地存储的方法
const saveMessagesToLocalStorage = () => {
localStorage.setItem('chatMessages', JSON.stringify(messages.value));
localStorage.setItem("chatMessages", JSON.stringify(messages.value));
};
// 触发图片旋转的方法
@ -179,34 +205,34 @@ function startImageRotation() {
// 更新 span01 中股票名字的方法
function updateSpan01() {
nextTick(() => {
const span01 = document.querySelector('.span01');
const span01 = document.querySelector(".span01");
if (span01) {
span01.textContent = `${stockName.value}量子四维矩阵图`;
}
});
}
// 发送消息方法
async function handleSendMessage(input) {
console.log('发送内容:', input);
console.log("发送内容:", input);
// 检查用户输入内容是否为空
if (input.trim()) {
const userMessage = reactive({ sender: 'user', text: input });
const userMessage = reactive({ sender: "user", text: input });
messages.value.push(userMessage);
userInput.value = ''; // 清空输入框
userInput.value = ""; // 清空输入框
// 添加等待提示信息
messages.value.push({
sender: 'ai',
text: '数据加载中，请稍候...'
sender: "ai",
text: "数据加载中，请稍候...",
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
userInputDisplayRef.value.scrollTop =
userInputDisplayRef.value.scrollHeight;
}
});
@ -218,49 +244,50 @@ async function handleSendMessage(input) {
const params = {
content: userMessage.text,
userData: {
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
language: 'cn',
brainPrivilegeState: '1',
swordPrivilegeState: '1',
stockForecastPrivile: '1',
spaceForecastPrivile: '1',
aibullPrivilegeState: '1',
aigoldBullPrivilegeS: '1',
airadarPrivilegeStat: '1',
marketList: 'hk,cn,usa,my,sg,vi,in,gb',
token:
"9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
language: "cn",
brainPrivilegeState: "1",
swordPrivilegeState: "1",
stockForecastPrivile: "1",
spaceForecastPrivile: "1",
aibullPrivilegeState: "1",
aigoldBullPrivilegeS: "1",
airadarPrivilegeStat: "1",
marketList: "hk,cn,usa,my,sg,vi,in,gb",
},
};
const result = await getReplyAPI(params);
const response = await result.json(); // 解析返回的 JSON 数据
console.log('工作流接口返回数据:', response);
console.log("工作流接口返回数据:", response);
// 解析 data 字段
const parsedData = JSON.parse(response.data); // 将字符串形式的 JSON 转换为对象
console.log('解析后的数据:', parsedData);
console.log("解析后的数据:", parsedData);
if (parsedData && parsedData.market && parsedData.code) {
console.log('工作流接口返回股票信息:', parsedData);
console.log("工作流接口返回股票信息:", parsedData);
// 更新股票名称
stockName.value = parsedData.name || '未知股票';
stockName.value = parsedData.name || "未知股票";
// 请求数据接口
fetchData(parsedData.code, parsedData.market);
// 更新 span01 的内容
updateSpan01();
} else {
console.error('工作流接口返回非股票信息:', parsedData.refuse);
console.error("工作流接口返回非股票信息:", parsedData.refuse);
messages.value.push({
sender: 'ai',
text: `工作流接口返回信息: ${parsedData.refuse || '未知错误'}`,
sender: "ai",
text: `工作流接口返回信息: ${parsedData.refuse || "未知错误"}`,
});
}
} catch (error) {
console.error('请求工作流接口失败:', error);
console.error("请求工作流接口失败:", error);
messages.value.push({
sender: 'ai',
text: '工作流接口请求失败，请稍后再试。',
sender: "ai",
text: "工作流接口请求失败，请稍后再试。",
});
} finally {
// 停止图片旋转
@ -271,14 +298,15 @@ async function handleSendMessage(input) {
}
} else {
messages.value.push({
sender: 'ai',
text: '请输入内容后再发送。',
sender: "ai",
text: "请输入内容后再发送。",
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
userInputDisplayRef.value.scrollTop =
userInputDisplayRef.value.scrollHeight;
}
});
}
@ -289,69 +317,71 @@ async function fetchData(code, market) {
try {
const stockDataParams = {
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
market: 'usa',
code: 'TSLA',
language: 'cn',
version: version1.value
token:
"9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
market: "usa",
code: "TSLA",
language: "cn",
version: version1.value,
};
const stockDataResult = await axios.post(
'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',
"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',
"Content-Type": "application/json",
},
}
);
const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
console.log('图表数据接口返回数据:', stockDataResponse.data);
console.log("图表数据接口返回数据:", stockDataResponse.data);
if (stockDataResponse.code === 200 && stockDataResponse.data) {
messages.value.push({
sender: 'ai',
sender: "ai",
text: `股票数据已成功获取`,
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
userInputDisplayRef.value.scrollTop =
userInputDisplayRef.value.scrollHeight;
}
});
console.log('1111111111111111111111')
console.log("1111111111111111111111");
// 调用渲染图表的方法
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');
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 {
messages.value.push({
sender: 'ai',
text: '图表数据接口返回数据不完整，请稍后再试。',
sender: "ai",
text: "图表数据接口返回数据不完整，请稍后再试。",
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
userInputDisplayRef.value.scrollTop =
userInputDisplayRef.value.scrollHeight;
}
});
}
} catch (error) {
messages.value.push({
sender: 'ai',
text: '图表数据接口请求失败，请稍后再试。',
sender: "ai",
text: "图表数据接口请求失败，请稍后再试。",
});
}
}
@ -361,49 +391,63 @@ function renderCharts(data) {
nextTick(() => {
// 渲染股市温度计图表
if (marketTemperatureRef.value && data.GSWDJ) {
console.log('开始渲染股市温度计图表');
console.log('股市温度计数据', data.GSWDJ)
console.log("开始渲染股市温度计图表");
console.log("股市温度计数据", data.GSWDJ);
marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
console.log('股市温度计图表已渲染');
console.log("股市温度计图表已渲染");
}
// 渲染情绪解码器图表
if (emotionDecodRef.value && data.QXJMQ) {
console.log('开始渲染情绪解码器图表');
console.log('情绪解码器数据', data.QXJMQ)
console.log("开始渲染情绪解码器图表");
console.log("情绪解码器数据", data.QXJMQ);
emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
console.log('情绪解码器图表已渲染');
console.log("情绪解码器图表已渲染");
}
// 渲染情绪探底雷达图表
if (emotionalBottomRadarRef.value && data.QXTDLD) {
console.log('开始渲染情绪探底雷达图表');
console.log('数据', data.QXTDLD)
emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
console.log('情绪探底雷达图表已渲染');
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);
console.log("开始渲染情绪能量转化器图表");
console.log("KLine20:", data.KLine20);
console.log("QXNLZHQ:", data.QXNLZHQ);
emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
console.log('情绪能量转化器图表已渲染');
console.log("情绪能量转化器图表已渲染");
}
});
}
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;
};
// setInterval(() =>{
// scrollToBottom();
// },1000);
// 页面挂载完成后触发图片旋转
onMounted(() => {
startImageRotation();
loadMessagesFromLocalStorage();//加载历史对话
loadMessagesFromLocalStorage(); //加载历史对话
});
</script>
<style scoped>
.class003 .div02{
background-image: url('@/assets/img/AiEmotion/redBorder.png');
.class003 .div02 {
background-image: url("@/assets/img/AiEmotion/redBorder.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
@ -415,8 +459,8 @@ onMounted(() => {
font-size: 24px;
color: white;
}
.class003 .div01{
background-image: url('@/assets/img/AiEmotion/blueBorder.png');
.class003 .div01 {
background-image: url("@/assets/img/AiEmotion/blueBorder.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
@ -428,6 +472,18 @@ onMounted(() => {
font-size: 24px;
color: white;
}
.golden-wheel {
width: 100%;
display: flex;
justify-content: center;
}
.golden-wheel-img {
width: 60%;
max-width: 500px;
height: auto;
}
/* 定义旋转动画 */
@keyframes rotate {
from {
@ -446,7 +502,7 @@ onMounted(() => {
}
.bk-image {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
background-size: 100% 100%;
/* background-position: center; */
background-repeat: no-repeat;
@ -478,7 +534,7 @@ onMounted(() => {
}
.class07 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
/* 使用导入的背景图片 */
background-size: cover;
/* 确保背景图片完整显示 */
@ -506,7 +562,6 @@ onMounted(() => {
.class0503 {
width: 80%;
margin: 0 auto;
}
.class0402 {
@ -572,18 +627,17 @@ onMounted(() => {
}
.class08 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 95%;
height: auto;
min-height: 40rem;
margin: 0 auto;
}
.class06 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 确保背景图片完整显示 */
@ -599,7 +653,7 @@ onMounted(() => {
}
.class05 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 确保背景图片完整显示 */
@ -615,7 +669,7 @@ onMounted(() => {
}
.class04 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 确保背景图片完整显示 */
@ -631,7 +685,7 @@ onMounted(() => {
}
.class03 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-image: url("@/assets/img/AiEmotion/bk03.png");
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 确保背景图片完整显示 */
@ -645,7 +699,7 @@ onMounted(() => {
/* 设置最小高度，确保图片显示 */
margin: 0 auto;
}
.class00{
.class00 {
background-size: 100% 100%;
/* 确保背景图片完整显示 */
background-repeat: no-repeat;
@ -666,7 +720,7 @@ onMounted(() => {
}
.span01 {
background-image: url('@/assets/img/AiEmotion/bk01.png');
background-image: url("@/assets/img/AiEmotion/bk01.png");
/* 使用导入的背景图片 */
background-size: cover;
/* 背景图片覆盖整个容器 */
@ -703,7 +757,6 @@ onMounted(() => {
margin: 0 auto;
/* 居中容器 */
margin-bottom: 10rem;
}
.ai-emotion-container {

4
src/views/DBQBmodel.vue
View File

@ -50,8 +50,8 @@ const goToHomePage = () => {
<style scoped>
.homepage {
width: 100vw;
min-height: 100vh;
/* width: 100vw; */
/* min-height: 100vh; */
background-size: cover;
background-position: center;
background-repeat: no-repeat;

4
src/views/Emotionsmodel.vue
View File

@ -51,8 +51,8 @@ const goToAiEmotion = () => {
<style scoped>
.homepage {
width: 100vw;
min-height: 100vh;
/* width: 100vw; */
/* min-height: 100vh; */
background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
background-size: cover;
background-position: center;

6
src/views/Selectmodel.vue
View File

@ -52,14 +52,14 @@ const goToEmotionsmodel = () => {
<style scoped>
.homepage {
width: 100vw;
min-height: 100vh;
/* width: 100vw; */
/* min-height: 100vh; */
background-color: #000cfc;
background-image: url('@/assets/img/Selectmodel/-s-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;

30
src/views/homePage.vue
View File

@ -55,10 +55,10 @@ const tabs = computed(() => [
name: "AIchat",
label: "夺宝奇兵大模型",
},
{
name: "AIfind",
label: "发现",
},
// {
// name: "AIfind",
// label: "发现",
// },
{
name: "AiEmotion",
label: "AI情绪大模型"
@ -214,7 +214,7 @@ const tabContent = ref(null);
const isScrolling = ref(false); //判断用户是否在滚动
const smoothScrollToBottom = async () => {
// console.log('调用滚动到底部的方法')
console.log('调用滚动到底部的方法')
// await nextTick();
const container = tabContent.value;
// console.log(container, 'container')
@ -623,9 +623,12 @@ onMounted(async () => {
.tab-container {
display: flex;
gap: 30px;
margin-right: 40px;
margin-left: 40px;
margin-bottom: 10px;
padding: 0 20px;
justify-content: flex-end;
justify-content: space-between;
height: 100%;
/* 新增右对齐 */
}
@ -633,19 +636,26 @@ onMounted(async () => {
cursor: pointer;
padding: 8px 12px;
font-size: clamp(18px, 3vw, 20px);
color: #999;
/* color: #999; */
color: #fff;
transition: all 0.3s;
border-bottom: 2px solid transparent;
font-weight: bold;
}
.tab-item.active {
color: #000;
border-color: #000;
/* color: #000;
border-color: #000; */
background: linear-gradient(0deg, #ffffff, #fec13e);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
border-color: #fec13e;
}
.tab-item:not(.active):hover {
color: #666;
color: #999999;
}
.tab-content {

Write Preview
Loading…
Cancel
Save