|
|
|
@ -30,7 +30,7 @@ |
|
|
|
<!-- 四维矩阵图 --> |
|
|
|
<div class="class02"> |
|
|
|
<div class="container"> |
|
|
|
<img class="item" :src="item" alt="思维矩阵图片" /> |
|
|
|
<!-- <img class="item" :src="item" alt="思维矩阵图片" /> --> |
|
|
|
<div class="span01"> |
|
|
|
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }} |
|
|
|
</div> |
|
|
|
@ -206,6 +206,8 @@ const displayedTexts = ref({ |
|
|
|
disclaimer: '' |
|
|
|
}); |
|
|
|
const typewriterTimers = ref([]); |
|
|
|
// 记录每个股票是否已经显示过打字机效果 |
|
|
|
const stockTypewriterShown = ref(new Map()); |
|
|
|
|
|
|
|
// 音频播放相关数据 |
|
|
|
const audioUrl = ref(''); |
|
|
|
@ -248,10 +250,35 @@ const parsedConclusion = computed(() => { |
|
|
|
watch(currentStock, (newStock) => { |
|
|
|
if (newStock && newStock.apiData) { |
|
|
|
isPageLoaded.value = true; |
|
|
|
// 停止当前播放的音频 |
|
|
|
stopAudio(); |
|
|
|
// 重置触发状态，允许新股票重新触发效果 |
|
|
|
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内容生成，请注意甄别' |
|
|
|
}; |
|
|
|
} catch (error) { |
|
|
|
console.error('解析结论数据失败:', error); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 如果没有显示过，清空显示文本，等待打字机效果 |
|
|
|
displayedTexts.value = { |
|
|
|
one1: '', |
|
|
|
one2: '', |
|
|
|
@ -260,6 +287,8 @@ watch(currentStock, (newStock) => { |
|
|
|
four: '', |
|
|
|
disclaimer: '' |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
renderCharts(newStock.apiData); |
|
|
|
}); |
|
|
|
@ -317,7 +346,7 @@ function startTypewriterEffect(conclusion) { |
|
|
|
}; |
|
|
|
|
|
|
|
// 定义打字速度（毫秒） |
|
|
|
const typeSpeed = 300; |
|
|
|
const typeSpeed = 250; |
|
|
|
let totalDelay = 0; |
|
|
|
|
|
|
|
// 为每个文本创建打字机效果 |
|
|
|
@ -688,36 +717,40 @@ function startAutoScroll() { |
|
|
|
} |
|
|
|
|
|
|
|
isAutoScrolling.value = true; |
|
|
|
const sections = document.querySelectorAll('.class02, .class03, .class04, .class05, .class06, .class08, .class09'); |
|
|
|
console.log('开始流畅自动滚动'); |
|
|
|
|
|
|
|
let currentIndex = 0; |
|
|
|
// 获取页面总高度 |
|
|
|
const documentHeight = document.documentElement.scrollHeight; |
|
|
|
const windowHeight = window.innerHeight; |
|
|
|
const maxScrollTop = documentHeight - windowHeight; |
|
|
|
|
|
|
|
function scrollToNextSection() { |
|
|
|
if (currentIndex < sections.length) { |
|
|
|
const section = sections[currentIndex]; |
|
|
|
// 滚动参数 |
|
|
|
const scrollDuration = 15000; // 总滚动时间15秒 |
|
|
|
const scrollStep = maxScrollTop / (scrollDuration / 50); // 每50ms滚动的距离 |
|
|
|
let currentScrollTop = 0; |
|
|
|
|
|
|
|
// 使用更平滑的滚动配置 |
|
|
|
section.scrollIntoView({ |
|
|
|
behavior: 'smooth', |
|
|
|
block: 'center', // 改为居中显示，视觉效果更好 |
|
|
|
inline: 'nearest' |
|
|
|
}); |
|
|
|
function smoothScroll() { |
|
|
|
if (currentScrollTop < maxScrollTop) { |
|
|
|
currentScrollTop += scrollStep; |
|
|
|
if (currentScrollTop > maxScrollTop) { |
|
|
|
currentScrollTop = maxScrollTop; |
|
|
|
} |
|
|
|
|
|
|
|
console.log(`滚动到第${currentIndex + 1}个部分`); |
|
|
|
currentSection.value = currentIndex; |
|
|
|
currentIndex++; |
|
|
|
window.scrollTo({ |
|
|
|
top: currentScrollTop, |
|
|
|
behavior: 'auto' // 使用auto而不是smooth，因为我们自己控制滚动 |
|
|
|
}); |
|
|
|
|
|
|
|
// 增加滚动间隔时间，让用户有更多时间观看内容 |
|
|
|
setTimeout(scrollToNextSection, 4000); // 从2秒增加到4秒 |
|
|
|
// 继续滚动 |
|
|
|
setTimeout(smoothScroll, 50); |
|
|
|
} else { |
|
|
|
console.log('自动滚动完成'); |
|
|
|
console.log('流畅自动滚动完成'); |
|
|
|
isAutoScrolling.value = false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 开始滚动前等待2秒，给用户准备时间 |
|
|
|
console.log('自动滚动将在2秒后开始'); |
|
|
|
setTimeout(scrollToNextSection, 2000); |
|
|
|
// 延迟1秒开始滚动 |
|
|
|
setTimeout(smoothScroll, 1000); |
|
|
|
} |
|
|
|
|
|
|
|
// 设置Intersection Observer监听场景应用部分 |
|
|
|
@ -730,11 +763,22 @@ function startAutoScroll() { |
|
|
|
if (entry.isIntersecting && (!hasTriggeredAudio.value || !hasTriggeredTypewriter.value)) { |
|
|
|
console.log('场景应用部分进入视口，开始打字机效果和音频播放'); |
|
|
|
|
|
|
|
// 获取当前股票代码 |
|
|
|
const stockCode = currentStock.value?.stockInfo?.code || currentStock.value?.stockInfo?.symbol; |
|
|
|
|
|
|
|
// 触发打字机效果 |
|
|
|
if (!hasTriggeredTypewriter.value && parsedConclusion.value) { |
|
|
|
if (!hasTriggeredTypewriter.value && parsedConclusion.value && stockCode) { |
|
|
|
// 检查该股票是否已经显示过打字机效果 |
|
|
|
if (!stockTypewriterShown.value.has(stockCode)) { |
|
|
|
console.log('开始场景应用打字机效果'); |
|
|
|
hasTriggeredTypewriter.value = true; |
|
|
|
startTypewriterEffect(parsedConclusion.value); |
|
|
|
// 记录该股票已显示过打字机效果 |
|
|
|
stockTypewriterShown.value.set(stockCode, true); |
|
|
|
} else { |
|
|
|
console.log('该股票已显示过打字机效果，跳过'); |
|
|
|
hasTriggeredTypewriter.value = true; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 触发音频播放 |
|
|
|
@ -814,6 +858,10 @@ function startAutoScroll() { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.container { |
|
|
|
padding-top: 2%; |
|
|
|
} |
|
|
|
|
|
|
|
.class003 { |
|
|
|
padding-top: 8%; |
|
|
|
padding-left: 10%; |
|
|
|
@ -937,7 +985,7 @@ function startAutoScroll() { |
|
|
|
} |
|
|
|
|
|
|
|
.conclusion-title { |
|
|
|
color: #00d4ff; |
|
|
|
color: #fff000; |
|
|
|
font-size: 22px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0 0 15px 0; |
|
|
|
@ -1177,14 +1225,14 @@ function startAutoScroll() { |
|
|
|
color: white; |
|
|
|
font-size: 30px; |
|
|
|
font-weight: bold; |
|
|
|
margin-left: 42%; |
|
|
|
margin-left: 44%; |
|
|
|
} |
|
|
|
|
|
|
|
.title3 { |
|
|
|
color: white; |
|
|
|
font-size: 30px; |
|
|
|
font-weight: bold; |
|
|
|
margin-left: 41%; |
|
|
|
margin-left: 43%; |
|
|
|
} |
|
|
|
|
|
|
|
.title4 { |
|
|
|
@ -1341,16 +1389,17 @@ function startAutoScroll() { |
|
|
|
font-size: 1.5rem; |
|
|
|
color: white; |
|
|
|
float: right; |
|
|
|
margin-top: -3.5rem; |
|
|
|
margin-top: -2%; |
|
|
|
} |
|
|
|
|
|
|
|
.span01 { |
|
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png'); |
|
|
|
/* 使用导入的背景图片 */ |
|
|
|
background-size: 100% 100%; |
|
|
|
/* 背景图片覆盖整个容器 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
/* 防止背景图片重复 */ |
|
|
|
display: inline-block; |
|
|
|
/* display: inline-block; */ |
|
|
|
/* 确保容器是块级元素 */ |
|
|
|
padding: 10px; |
|
|
|
/* 添加内边距以显示内容 */ |
|
|
|
@ -1359,9 +1408,10 @@ function startAutoScroll() { |
|
|
|
font-size: 1.5rem; |
|
|
|
/* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
text-align: center; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
margin-left: -13rem; |
|
|
|
|
|
|
|
/* transform: translate(-50%, -50%); */ |
|
|
|
margin-left: 0; |
|
|
|
width: 30%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.class01 { |
|
|
|
@ -1463,12 +1513,9 @@ function startAutoScroll() { |
|
|
|
|
|
|
|
/* 手机端适配样式 */ |
|
|
|
@media only screen and (max-width: 768px) { |
|
|
|
|
|
|
|
.container { |
|
|
|
margin: 0 auto; |
|
|
|
max-width: 80vw; |
|
|
|
padding-top: 2%; |
|
|
|
} |
|
|
|
|
|
|
|
.title4 { |
|
|
|
color: white; |
|
|
|
font-size: 20px; |
|
|
|
@ -1506,11 +1553,6 @@ function startAutoScroll() { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class02 img { |
|
|
|
width: 70%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.class0201 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
@ -1566,7 +1608,7 @@ function startAutoScroll() { |
|
|
|
font-size: 14px; |
|
|
|
color: white; |
|
|
|
float: right; |
|
|
|
margin-top: -45px; |
|
|
|
margin-top: -6%; |
|
|
|
} |
|
|
|
|
|
|
|
.class03 { |
|
|
|
@ -1603,7 +1645,7 @@ function startAutoScroll() { |
|
|
|
.class02 .container img { |
|
|
|
width: 68%; |
|
|
|
height: auto; |
|
|
|
margin-top: 5%; |
|
|
|
/* margin-top: 5%; */ |
|
|
|
margin-left: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1663,7 +1705,7 @@ function startAutoScroll() { |
|
|
|
} |
|
|
|
|
|
|
|
.conclusion-title { |
|
|
|
color: #00d4ff; |
|
|
|
color: #fff000; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0 0 8px 0; |
|
|
|
@ -1749,7 +1791,7 @@ function startAutoScroll() { |
|
|
|
} |
|
|
|
|
|
|
|
.conclusion-title { |
|
|
|
color: #00d4ff; |
|
|
|
color: #fff000; |
|
|
|
font-size: 22px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0 0 15px 0; |
|
|
|
@ -1894,6 +1936,7 @@ function startAutoScroll() { |
|
|
|
|
|
|
|
.span01 { |
|
|
|
/* 使用导入的背景图片 */ |
|
|
|
background-image: url('@/assets/img/AiEmotion/bk01.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
/* 背景图片覆盖整个容器 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -1907,8 +1950,7 @@ function startAutoScroll() { |
|
|
|
font-size: 14px; |
|
|
|
/* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
text-align: center; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
margin-left: 33%; |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0502, |
|
|
|
|
宋杰
2 weeks ago