From e1a6e3369ad10422cefb3829866cf3830eefe284 Mon Sep 17 00:00:00 2001
From: dongqian <3475123872@qq.com>
Date: Sat, 7 Jun 2025 15:29:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=95=E5=9B=BE=E6=98=BE=E7=A4=BA=E8=82=A1?=
 =?UTF-8?q?=E5=B8=82=E6=B8=A9=E5=BA=A6=E8=AE=A1=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js             |    7 +
 src/views/AiEmotion.vue         |   51 +-
 src/views/Emotionsmodel.vue     |    2 +-
 src/views/marketTemperature.vue | 1508 +++++++++++++++++++++++++++++++++++++++
 src/views/smallTitle.vue        |  107 +++
 5 files changed, 1672 insertions(+), 3 deletions(-)
 create mode 100644 src/views/marketTemperature.vue
 create mode 100644 src/views/smallTitle.vue

diff --git a/src/router/index.js b/src/router/index.js
index f545bd4..cd0de5d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -61,6 +61,13 @@ const routes = [
         name: 'emotionsEcharts',
         component: () => import('@/views/emotionsEcharts.vue')
 
+    },
+    {
+
+        path: '/marketTemperature',
+        name: 'marketTemperature',
+        component: () => import('@/views/marketTemperature.vue')
+
     }
 
 ]
diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index 8f99b64..7662751 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="ai-emotion-container">
         <!-- 消息显示区域 -->
+          <div class="03">
+      <marketTemperature/>
+        </div>
+               </div>
         <div class="user-input-display">
             <div v-for="(message, index) in messages" :key="index" class="message-container">
                 <!-- 用户输入内容 -->
@@ -13,7 +17,6 @@
                 </div>
             </div>
         </div>
-
         <!-- 输入框和发送按钮 -->
         <div class="input-container fixed-bottom">
             <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
@@ -31,7 +34,7 @@
         <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控">
         <!-- 温度计图表 -->
         <div class="class03">
-
+      <marketTemperature/>
         </div>
         <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码">
         <!-- 情绪解码器图表 -->
@@ -70,6 +73,7 @@ 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';
 
 
 const emoEnergyConverterRef = ref(null)
@@ -218,6 +222,49 @@ function renderCharts(data) {
 
 <style scoped>
 
+/* 获取报告图按钮样式 */
+
+/* .home { */
+	/* background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/965055c0b964cf80a7b9b18557dbdfc6.png');
+	background-size: cover;
+
+	.top {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	} */
+
+	/* .content-container {
+		margin-top: 30px;
+		background: rgba(0, 0, 0, 0.4);
+		border: 2px solid #00cfff;
+		margin-top: 30px;
+		width: 70vw;
+		max-width: 700px;
+		margin: 0 auto;
+		padding: 20px;
+		background: rgba(0, 0, 0, 0.5);
+		border: 2px solid #00cfff;
+		border-radius: 12px;
+	} */
+	/* .content-container /deep/ .introduction {
+		display: none;
+	}
+	.content-container /deep/ .title-text {
+		display: none;
+	}
+	.content-container /deep/ .title-line {
+		display: none;
+	}
+	.content-container /deep/ .highlight {
+		display: none;
+	}
+	.content-container /deep/ .emotionPic {
+		display: none;
+	}
+} */
+
+
 .class0401 {
     background-image: url('@/assets/img/AiEmotion/解码器.png'); /* 设置背景图片 */
     background-size: contain; /* 背景图片覆盖整个容器 */
diff --git a/src/views/Emotionsmodel.vue b/src/views/Emotionsmodel.vue
index 03c46aa..8bef924 100644
--- a/src/views/Emotionsmodel.vue
+++ b/src/views/Emotionsmodel.vue
@@ -45,7 +45,7 @@ const goToAiEmotion = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
   sessionStorage.setItem("activeTabAI", "AiEmotion")
   sessionStorage.setItem("activeIndexAI", "2")
-  router.push("/homePage")
+  router.push("/marketTemperature")
 }
 </script>
 
diff --git a/src/views/marketTemperature.vue b/src/views/marketTemperature.vue
new file mode 100644
index 0000000..d3002a4
--- /dev/null
+++ b/src/views/marketTemperature.vue
@@ -0,0 +1,1508 @@
+<template>
+	<div class="home">
+		<div class="home-bgc">
+			<div class="container">
+				<header class="top">
+					<!-- 搜索框 修改-->
+				</header>
+				<main class="content">
+					<div class="border1">
+						<div
+							class="dial1"
+							:style="{
+								backgroundImage:
+									data2 >= 50
+										? 'url(https://d31zlh4on95l9h.cloudfront.net/images/4b13888d57ee79fa83a94fe5b3a72001.png)'
+										: 'url(https://d31zlh4on95l9h.cloudfront.net/images/f11785d8113bac15638a7e3c90086af9.png)'
+							}"
+						>
+							{{ data2 }}
+						</div>
+						<div
+							class="dial2"
+							:style="{
+								backgroundImage:
+									data1 >= 50
+										? 'url(https://d31zlh4on95l9h.cloudfront.net/images/4b13888d57ee79fa83a94fe5b3a72001.png)'
+										: 'url(https://d31zlh4on95l9h.cloudfront.net/images/f11785d8113bac15638a7e3c90086af9.png)'
+							}"
+						>
+							{{ data1 }}
+						</div>
+						<div class="text1">{{ translate('StockTemperature') }}</div>
+						<div class="text2">{{ translate('MarketTemperature') }}</div>
+						<div class="text3">{{ data3 }}</div>
+					</div>
+					<div class="border2" :style="{ color: tempInfo1.color }">
+						{{ translate('StockPopularity') }} {{ translate('current1_1') }}{{ data2 }},{{
+							translate(tempInfo1.text)
+						}}
+					</div>
+					<div class="border2" :style="{ color: tempInfo2.color }">
+						{{ translate('MarketTemperature') }} {{ translate('current2_1') }}{{ data1 }},{{
+							translate(tempInfo2.text)
+						}}
+					</div>
+					<div>
+						<smallTitle titleKey="StockMarketTemperatureTrend" />
+					</div>
+					<div class="name"></div>
+					<div class="border3">
+						<section class="chart-section">
+							<div>
+								<div class="trapezoid">
+									<span>{{ StockInformation.Name }}</span>
+									<span>{{ StockInformation.Code }}</span>
+								</div>
+								<img
+									v-if="showLoading"
+									alt="加载中"
+									src="../../assets/img/huntingSword/loading.gif"
+									class="loading-img"
+								/>
+								<div ref="KlineCanvs" class="KlineClass"></div>
+							</div>
+						</section>
+					</div>
+					<div class="border2" :style="{ color: tempInfo2.color }">
+						{{ translate('TemperatureTrend') }}
+					</div>
+					<!-- <el-button @click="toggleChartDisplay">点击查看股市温度趋势</el-button> -->
+					<div>
+						<smallTitle titleKey="StockMarketTemperatureCalendar" />
+					</div>
+					<div class="name">{{ currentDate }}</div>
+					<div class="border4">
+						<el-table
+							:data="groupedWDRL"
+							border
+							:row-style="{ height: '8.6vw' }"
+							header-cell-class-name="table_header"
+							:cell-style="tableCellStyle"
+						>
+							<!-- 循环渲染 7 列（周一至周日） -->
+							<el-table-column
+								v-for="(day, colIndex) in ['yi', 'er', 'san', 'si', 'wu', 'liu', 'ri']"
+								:key="colIndex"
+								:label="translate(day)"
+							>
+								<template #default="{ $index: rowIndex }">
+									<div v-if="getDayData(rowIndex, colIndex + 1)">
+										<p class="WDRL_date">
+											{{ formatDate(getDayData(rowIndex, colIndex + 1).date) }}
+											<span class="month-display">
+												{{ formatMonth(getDayData(rowIndex, colIndex + 1).date) }}
+											</span>
+										</p>
+										<p class="WDRL_data">
+											<!-- 如果是指数，只显示 market温度 -->
+											<template v-if="isIndexCode">
+												<span v-if="getDayData(rowIndex, colIndex + 1)?.market_temperature">
+													{{ getDayData(rowIndex, colIndex + 1).market_temperature }}
+												</span>
+											</template>
+
+											<!-- 如果是个股，显示 stock | market -->
+											<template v-else>
+												<template v-if="isBothRest(rowIndex, colIndex + 1)" class="myclass">
+													休市
+												</template>
+												<template v-else>
+													<span v-if="getDayData(rowIndex, colIndex + 1)?.stock_temperature">
+														{{ getDayData(rowIndex, colIndex + 1).stock_temperature }}
+													</span>
+													<span v-if="shouldShowDivider(rowIndex, colIndex + 1)"> | </span>
+													<span v-if="getDayData(rowIndex, colIndex + 1)?.market_temperature">
+														{{ getDayData(rowIndex, colIndex + 1).market_temperature }}
+													</span>
+												</template>
+											</template>
+										</p>
+									</div>
+									<!-- 无数据时（工作日显示休市） -->
+									<div v-else-if="shouldShowRest(rowIndex, colIndex + 1)">
+										<p class="WDRL_date">休市</p>
+									</div>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+					<div class="border5">
+						<div class="border5-text1">{{ translate('TemperatureCalendar') }}</div>
+						<div class="border5-text2">
+							<div class="temp-item">
+								<span class="level">冰点区：0~20</span><span class="color">对应颜色：浅蓝色</span>
+							</div>
+							<div class="temp-item">
+								<span class="level">回暖区：20~50</span><span class="color"> 对应颜色：绿色</span>
+							</div>
+							<div class="temp-item">
+								<span class="level">温热区：50~70</span><span class="color"> 对应颜色：紫色</span>
+							</div>
+							<div class="temp-item">
+								<span class="level">高温区：70~90</span><span class="color"> 对应颜色：橙色</span>
+							</div>
+							<div class="temp-item">
+								<span class="level">沸点区：90~100</span><span class="color"> 对应颜色：红色</span>
+							</div>
+							<div class="temp-note">
+								当搜索的股票为个股时，展示【个股温度｜指数温度】，按照个股的温度展示颜色；<br />
+								当搜索的为指数时，展示【指数数据】，按照指数的温度展示颜色。
+							</div>
+						</div>
+					</div>
+					<div>
+						<smallTitle titleKey="FunctionOverview" />
+					</div>
+					<div class="introduction">
+						<ol>
+							<li>
+								<span class="temptext">温度数值:</span
+								><span class="temp-range hot">温度数值:90~100(沸点区)</span>
+								<br />市场极度狂热，价格剧烈波动，易现“加速冲顶”与暴跌风险。强烈警惕！逢高减仓，防范踩踏。
+							</li>
+							<li>
+								<span class="temptext">温度数值:</span
+								><span class="temp-range high">温度数值:70~90(高温区)</span>
+								<br />情绪持续升温，股价加速上涨，但潜在风险也在同步累积保持冷静，分批兑现，警惕回调。
+							</li>
+							<li>
+								<span class="temptext">温度数值:</span
+								><span class="temp-range warm">温度数值:50~70(温热区)</span>
+								<br />情绪积极向上，资金稳步进场，趋势健康，量价配合良好。积极跟随趋势，顺势而为。
+							</li>
+							<li>
+								<span class="temptext">温度数值:</span
+								><span class="temp-range mild">温度数值:20~50(回暖区)</span>
+								<br />市场逐步摆脱冰点，震荡筑底，情绪分歧大，主力吸筹等与散户观望并存。做好准备，精选标的，伺机加仓。
+							</li>
+							<li>
+								<span class="temptext">温度数值:</span
+								><span class="temp-range cold">温度数值:0~20(冰点区)</span>
+								<br />情绪冰冷，信心缺失，市场悲观恐慌，杀跌频发，往往是机会孕育的起点。反人性布局，逢低潜伏潜力股。
+							</li>
+						</ol>
+					</div>
+
+					<div>
+						<smallTitle titleKey="FeatureHighlights" />
+					</div>
+					<div class="highlight">
+						<h3>量化“情绪热度”的智能工具！</h3>
+						<p>
+							在股市中，影响涨跌的不只是基本面与技术面，更关键的是情绪面。情绪影响资金流向，
+							资金推动股价，股价变化反映市场热度，而市场热度的高低反应在股民的情绪波动中。
+							股市温度计，正是用来量化这种“情绪热度”！帮助你读懂市场情绪，抢占先机！
+						</p>
+					</div>
+				</main>
+			</div>
+		</div>
+		<el-dialog v-model="helpVisible" class="helpDialog" style="width: 300px">
+			<div style="text-align: center; font-size: 25px; font-weight: bold">AI情绪大模型</div>
+			<div style="margin-top: 25px; font-size: 18px; text-indent: 2em">
+				通过7大维度重构解析矩阵，利用人性波动规律，捕捉市场情绪奇点，用AI重构交易法则，重新定义智能投资新时代！
+			</div>
+			<div style="font-size: 18px; text-indent: 2em">
+				AI情绪大模型即将上线，更多功能，敬请期待！
+			</div>
+			<div style="margin-top: 25px; font-size: 17px">弘历智能研发团队祝您使用愉快！</div>
+			<div style="height: 50px"></div>
+		</el-dialog>
+		<!-- 获取报告图 -->
+		<!-- <div class="getReport">
+			<div class="getReport-bn"></div>
+			<div @click="goToReport()" class="getReport-text">点击获取股票情绪测评报告→</div>
+		</div> -->
+	</div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+// import smallTitle from '../component/smallTitle.vue'
+import axios from 'axios'
+import { useDataStore } from '@/store/dataList'
+import { storeToRefs } from 'pinia'
+import { useLanguage } from '@/utils/languageService'
+import { useRouter, useRoute } from 'vue-router'
+import { min } from 'lodash'
+import { setHeight } from '@/utils/setHeight'
+
+function isBothRest(rowIndex, colIndex) {
+	const data = getDayData(rowIndex, colIndex)
+	return data && data.stock_temperature === '休市' && data.market_temperature === '休市'
+}
+
+// 指数代码集合（可补充）
+const indexCodes = [
+	'NDX',
+	'DJIA',
+	'SPX',
+	'STI',
+	'KLSE',
+	'TSX',
+	'N225',
+	'KS11',
+	'JKSE',
+	'1A0001',
+	'HSI',
+	'I63',
+	'VNINDE'
+]
+
+// 当前是否为指数
+const isIndexCode = computed(() => {
+	const code = localStorage.getItem('localCode')
+	return indexCodes.includes(code)
+})
+const windowHeight = ref(window.innerHeight) // 响应式变量存储窗口高度
+// 更新窗口高度
+const updateHeight = () => {
+	windowHeight.value = window.innerHeight // 更新响应式变量
+}
+onMounted(() => {
+	window.addEventListener('resize', updateHeight) // 监听窗口变化
+})
+const KlineCanvs = ref() // Echarts实例
+const dataStore = useDataStore()
+const { priceDataList } = storeToRefs(dataStore)
+const { translate, t } = useLanguage()
+t.value = t.value || { suoxie: 'cn' }
+const helpVisible = ref(false)
+const zhiyin = () => {
+	helpVisible.value = !helpVisible.value
+}
+
+const roundedData = ref([])
+const WDRL = ref([])
+function getDayData(rowIndex, dayIndex) {
+	const weekData = groupedWDRL.value[rowIndex]
+	if (weekData && weekData.length >= dayIndex) {
+		return weekData[dayIndex - 1] // 返回对应列的数据
+	}
+	return null
+}
+
+// 跳转报告页的方法
+// async function goToReport() {
+// 	await router.push({
+// 		path: '/reports'
+// 	})
+// }
+// 将 WDRL 数据按 7 天一组拆分
+const groupedWDRL = computed(() => {
+	const result = []
+	for (let i = 0; i < WDRL.value.length; i += 7) {
+		result.push(WDRL.value.slice(i, i + 7))
+	}
+	return result
+})
+// 格式化日期，返回月份
+function formatMonth(dateStr) {
+	if (!dateStr) return ''
+	// 假设 dateStr 格式为 "2025/05/13"
+	const month = dateStr.split('/')[1] // 获取月份 "05"
+	const monthMap = {
+		'01': '一月',
+		'02': '二月',
+		'03': '三月',
+		'04': '四月',
+		'05': '五月',
+		'06': '六月',
+		'07': '七月',
+		'08': '八月',
+		'09': '九月',
+		10: '十月',
+		11: '十一月',
+		12: '十二月'
+	}
+	return monthMap[month] || '' // 返回中文月份
+}
+function formatDate(dateStr) {
+	if (!dateStr) return ''
+	// 假设 dateStr 格式为 "2025/05/13"
+	return dateStr.split('/')[2] // 返回 "13"
+}
+// function shouldShowRest(rowIndex, dayIndex) {
+// 	const data = getDayData(rowIndex, dayIndex)
+// 	// 有数据就不显示“休市”
+// 	if (data && (data.stock_temperature || data.market_temperature)) return false
+// 	// 获取这格子的日期（根据第一天是周几推算）
+// 	const flatIndex = rowIndex * 7 + (dayIndex - 1)
+// 	const targetDay = WDRL.value[flatIndex]
+// 	if (!targetDay || !targetDay.date) return false
+// 	const [year, month, day] = targetDay.date.split('/').map(Number)
+// 	if (!year || !month || !day) return false
+// 	const dateObj = new Date(year, month - 1, day)
+// 	const today = new Date()
+// 	if (dateObj.getMonth() !== today.getMonth() || dateObj.getFullYear() !== today.getFullYear()) {
+// 		return false // 非本月
+// 	}
+// 	const weekday = dateObj.getDay()
+// 	return weekday >= 1 && weekday <= 5 // 周一至周五为工作日
+// }
+
+function shouldShowRest(rowIndex, dayIndex) {
+	const data = getDayData(rowIndex, dayIndex)
+	// 有数据就不显示“休市”
+	if (data && (data.stock_temperature || data.market_temperature)) return false
+
+	// 获取这格子的日期（根据第一天是周几推算）
+	const flatIndex = rowIndex * 7 + (dayIndex - 1)
+	const targetDay = WDRL.value[flatIndex]
+	if (!targetDay || !targetDay.date) return false
+
+	const [year, month, day] = targetDay.date.split('/').map(Number)
+	if (!year || !month || !day) return false
+
+	const dateObj = new Date(year, month - 1, day)
+	const today = new Date()
+
+	// 判断是否为本月
+	if (dateObj.getMonth() !== today.getMonth() || dateObj.getFullYear() !== today.getFullYear()) {
+		return false // 非本月
+	}
+
+	// 判断是否为工作日（周一至周五）
+	const weekday = dateObj.getDay()
+	return weekday >= 1 && weekday <= 5 // 周一至周五为工作日
+}
+
+function shouldShowDivider(rowIndex, dayIndex) {
+	const data = getDayData(rowIndex, dayIndex)
+
+	return data?.market_temperature && data?.stock_temperature
+}
+// 动态返回单元格类名
+// function tableCellStyle({ row, column, rowIndex, columnIndex }) {
+// 	let data = getDayData(rowIndex, columnIndex + 1)
+// 	if (data && data.stock_temperature && data.market_temperature) {
+// 		const stock = Number(data.stock_temperature)
+// 		const market = Number(data.market_temperature)
+// 		if (stock > market) {
+// 			return {
+// 				backgroundColor: '#BD10E0',
+// 				color: 'white'
+// 			}
+// 		} else if (stock < market) {
+// 			return { backgroundColor: '#0076FF', color: 'white' }
+// 		}
+// 	}
+// 	return {} // 默认样式
+// }
+const mode = ref('stock')
+function tableCellStyle({ row, column, rowIndex, columnIndex }) {
+	let data = getDayData(rowIndex, columnIndex + 1)
+	if (!data) return {}
+	let value = null
+	if (mode.value === 'stock') {
+		value = Number(data.stock_temperature)
+		console.log('股票温度:', value)
+	} else {
+		value = Number(data.market_temperature)
+	}
+
+	if (isNaN(value))
+		return {
+			backgroundColor: '#4b759f',
+			color: 'white'
+		}
+
+	// 区间染色
+	if (value >= 90) return { backgroundColor: '#BD0000', color: 'white' } // 红（沸点）
+	else if (value >= 70) return { backgroundColor: '#FF5638', color: 'white' } // 橙（高温）
+	else if (value >= 50) return { backgroundColor: '#C929E6', color: 'white' } // 紫（温热）
+	else if (value >= 20) return { backgroundColor: '#00AB00', color: 'white' } // 绿（回暖）
+	else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' } // 浅蓝（冰点）
+	else return { backgroundColor: '#4b759f', color: 'white' }
+	// else return
+}
+const today = new Date()
+const currentDate = `${String(today.getMonth() + 1).padStart(2, '0')}/${today.getFullYear()}`
+
+const tempInfo1 = computed(() => getTempInfo(data1.value)) //大盘温度
+const tempInfo2 = computed(() => getTempInfo(data2.value)) //个股温度
+// 计算区间文本和颜色
+function getTempInfo(value) {
+	if (value >= 90) return { text: 'current1', color: '#FF4500' } // 红
+	else if (value >= 70) return { text: 'current2', color: '#FF4500' } // 橙红
+	else if (value >= 50) return { text: 'current3', color: '#FFD700' } // 黄
+	else if (value >= 20) return { text: 'current4', color: '#00BFFF' } // 浅蓝
+	else return { text: 'current5', color: '#00EEFF' } // 青
+}
+const chartContainer = ref(null)
+const Data = ref([])
+// 定义响应式变量存储最后两个数字
+const data1 = ref() //大盘温度
+const data2 = ref() //个股温度
+const data3 = ref()
+// const getDayData = (dayIndex) => {
+//     // 假设数据是按周一到周五顺序排列的
+//     const dataIndex = dayIndex - 1;
+//     return roundedData.value[dataIndex] ? roundedData.value[dataIndex].join('|') : '-';
+// }
+const fetchData = async () => {
+	try {
+		const response = await axios.post(
+			'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
+			{
+				token: localStorage.getItem('localToken'),
+				market: localStorage.getItem('localMarket'),
+				code: localStorage.getItem('localCode'),
+				language: localStorage.getItem('userLanguage')
+			},
+			{
+				headers: { 'Content-Type': 'application/json' }
+			}
+		)
+
+		if (response.data.code === 200) {
+			Data.value = response.data.data.GSWDJ
+			WDRL.value = response.data.data.WDRL
+
+			// 数据清洗并四舍五入
+			roundedData.value = Data.value.map(([date, num1, num2]) => [
+				date,
+				Math.round(num1),
+				Math.round(num2)
+			])
+
+			// 取最后一条数据
+			const lastTwoNumbers = roundedData.value.at(-1)
+			data1.value = lastTwoNumbers[1] // 市场温度
+			data3.value = lastTwoNumbers[0] // 日期
+
+			// 指数代码判断逻辑
+			const indexCodes = [
+				'NDX',
+				'DJIA',
+				'SPX',
+				'STI',
+				'KLSE',
+				'TSX',
+				'N225',
+				'KS11',
+				'JKSE',
+				'1A0001',
+				'HSI',
+				'I63',
+				'VNINDE'
+			]
+			const currentCode = localStorage.getItem('localCode')
+
+			if (indexCodes.includes(currentCode)) {
+				data2.value = 'NA' // 股票温度为 NA
+			} else {
+				data2.value = lastTwoNumbers[2] // 股票温度
+			}
+
+			// 渲染图表
+			if (priceDataList.value) {
+				const currentData = JSON.parse(JSON.stringify(toRaw(priceDataList.value)))
+				KlineCanvsEcharts(currentData)
+			}
+		} else {
+			ElMessage.error(response.data.msg || '请求失败')
+		}
+	} catch (error) {
+		console.error('API Error:', error)
+		ElMessage.error('网络请求失败')
+	}
+}
+// 组件挂载时自动执行
+// onMounted(fetchData)
+onBeforeMount(fetchData)
+const { swordDataList, showALLData } = storeToRefs(dataStore)
+const tableData = []
+watch(
+	showALLData,
+	(newValue) => {
+		const currentData = JSON.parse(JSON.stringify(toRaw(newValue)))
+		if (currentData) {
+			nextTick(() => {
+				fnGetDataShow(currentData)
+			})
+		}
+	},
+	{ immediate: true, deep: true }
+)
+let StockInformation = ref({})
+const fnGetDataShow = (data) => {
+	StockInformation.value = data.StockInformation
+}
+
+watch(
+	priceDataList,
+	(newValue) => {
+		const currentData = JSON.parse(JSON.stringify(toRaw(newValue))) // 深拷贝防止切换回来数据更改
+		if (currentData) {
+			nextTick(() => {
+				KlineCanvsEcharts(currentData)
+			})
+		}
+	},
+	{ immediate: true, deep: true }
+)
+// 监听数据变化或语言变化
+watch(
+	() => t.value,
+	(newLang) => {
+		// 更新 textEcharts 内容并重新渲染图表
+		if (priceDataList.value) {
+			const currentData = JSON.parse(JSON.stringify(toRaw(priceDataList.value)))
+			nextTick(() => {
+				KlineCanvsEcharts(currentData)
+			})
+		}
+	},
+	{ immediate: true, deep: true }
+)
+async function KlineCanvsEcharts(datatok) {
+	const textEcahrts = t.value
+	const data = datatok.KLine20
+
+	// 切割数据方法
+	const spliteDate = (a) => {
+		const categoryData = []
+		let value = []
+		for (let i = 0; i < a.length; i++) {
+			categoryData.push(a[i].splice(0, 1)[0])
+			value.push(a[i])
+		}
+		return { categoryData, value }
+	}
+	const dealData = spliteDate(data)
+
+	// 处理折线数据
+	const lineData1 = roundedData.value.map((item) => item[1])
+	const lineData2 = roundedData.value.map((item) => item[2])
+	const showStockLine = !(
+		lineData1.length === lineData2.length && lineData1.every((v, i) => v === lineData2[i])
+	)
+	const series = [
+		{
+			type: 'candlestick',
+			name: 'K线',
+			data: dealData.value,
+			yAxisIndex: 0,
+			itemStyle: {
+				normal: {
+					color0: '#FD1050',
+					color: '#0CF49B',
+					borderColor0: '#FD1050',
+					borderColor: '#0CF49B'
+				}
+			}
+		},
+		{
+			name: '市场温度',
+			type: 'line',
+			data: lineData1,
+			yAxisIndex: 1,
+			symbol: 'circle',
+			symbolSize: 6,
+			smooth: true,
+			lineStyle: { width: 2 },
+			emphasis: { lineStyle: { width: 3 } }
+		}
+	]
+
+	if (showStockLine) {
+		series.push({
+			name: '股票温度',
+			type: 'line',
+			data: lineData2,
+			yAxisIndex: 1,
+			symbol: 'circle',
+			symbolSize: 6,
+			smooth: true,
+			lineStyle: { width: 2 },
+			emphasis: {
+				lineStyle: {
+					color: '#ffffff',
+					width: 3
+				}
+			}
+		})
+	}
+	// 给配置项
+	const KlineOption = {
+		title: {
+			text: '',
+			left: 0
+		},
+		tooltip: {
+			trigger: 'axis',
+			formatter: function (a) {
+				let def = a[0].name
+
+				// K线数据
+				if (a[0].seriesType === 'candlestick') {
+					def +=
+						'<br/>' +
+						textEcahrts.kai +
+						a[0].data[1] +
+						'<br/>' +
+						textEcahrts.shou +
+						a[0].data[2] +
+						'<br/>' +
+						textEcahrts.di +
+						a[0].data[3] +
+						'<br/>' +
+						textEcahrts.gao +
+						a[0].data[4]
+				}
+
+				// 折线数据
+				a.forEach((item) => {
+					if (item.seriesType === 'line') {
+						def += '<br/>' + item.seriesName + ': ' + item.value
+					}
+				})
+
+				return def
+			},
+			axisPointer: {
+				animation: false,
+				type: 'line',
+				linestyle: {
+					color: '#376df4',
+					width: 2,
+					opacity: 1
+				}
+			}
+		},
+		legend: {
+			data: [
+				{
+					name: 'K线',
+					// icon: 'rect',
+					textStyle: {
+						color: 'white'
+					}
+				},
+				{
+					name: '市场温度',
+					// icon: 'circle',
+					textStyle: {
+						color: 'white'
+					}
+				},
+				{
+					name: '股票温度',
+					// icon: 'circle',
+					textStyle: {
+						color: 'white'
+					}
+				}
+			],
+			color: 'white',
+			selected: {
+				K线: true,
+				市场温度: true,
+				股票温度: true
+			},
+			// left: '220vw',
+			top: '60vw'
+		},
+		xAxis: {
+			type: 'category',
+			data: dealData.categoryData,
+			axisLine: { lineStyle: { color: '#8392A5' } }
+		},
+		grid: {
+			left: '12%',
+			right: '10%',
+			bottom: '60vw',
+			top: '18%'
+		},
+		yAxis: [
+			// 左侧Y轴（K线使用）
+			{
+				scale: true,
+				axisLabel: {
+					formatter: function (value) {
+						return value
+					}
+				},
+				axisLine: {
+					lineStyle: { color: '#8392A5' },
+					show: true
+				},
+				splitLine: {
+					show: false
+				}
+			},
+			// 右侧Y轴（折线使用）
+			{
+				scale: true,
+				position: 'right',
+				min: 1,
+				max: 100,
+				axisLabel: {
+					formatter: function (value) {
+						return value
+					},
+					color: '#FFA500'
+				},
+				axisLine: {
+					lineStyle: {
+						color: 'purple',
+						width: 2
+					},
+					show: true
+				},
+				splitLine: {
+					show: false
+				}
+			}
+		],
+		color: ['#f00', '#9370DB'],
+		dataZoom: [
+			{
+				textStyle: {
+					color: '#8392A5'
+				},
+				handleIcon:
+					'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+				handleSize: '80%',
+				dataBackground: {
+					areaStyle: {
+						color: '#8392A5'
+					},
+					lineStyle: {
+						opacity: 0.8,
+						color: '#8392A5'
+					}
+				},
+				handleStyle: {
+					color: '#fff',
+					shadowBlur: 3,
+					shadowColor: 'rgba(0, 0, 0, 0.6)',
+					shadowOffsetX: 2,
+					shadowOffsetY: 2
+				}
+			},
+			{
+				show: false,
+				type: 'slider'
+			},
+			{
+				type: 'inside'
+			}
+		],
+		animation: true,
+		series: series
+	}
+	// 	const chart = echarts.init(KlineCanvs.value)
+	// chart.clear() // 清空旧图表
+	// chart.setOption(KlineOption) // 设置新图表
+
+	// 创建图表实例
+	const KlineCanvsChart = echarts.init(KlineCanvs.value)
+	KlineCanvsChart.setOption(KlineOption)
+
+	// 窗口大小变化时重置图表大小
+	window.addEventListener('resize', () => {
+		KlineCanvsChart.resize()
+	})
+
+	return KlineCanvsChart // 返回图表实例以便外部控制
+}
+</script>
+
+<style scoped lang="less">
+/* 获取报告图按钮样式 */
+// .getReport {
+// 	background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/f111e488ad3efb5af20d6c25b1bfd7b4.png');
+// 	position: fixed;
+// 	background-repeat: no-repeat;
+// 	background-size: 100% 80%;
+// 	background-position: center;
+// 	bottom: -3vw;
+// 	left: 50%;
+// 	transform: translateX(-50%);
+// 	width: 50vw;
+// 	height: 13vw;
+// 	.getReport-text {
+// 		color: #fff; /* 文字颜色 */
+// 		text-align: center; /* 文字居中 */
+// 		font-size: 2vw; /* 字体大小 */
+// 		z-index: 1; /* 层级高于背景图 */
+// 		position: absolute;
+// 		top: 36%;
+// 		left: 50%;
+// 		width: 100%;
+// 		transform: translate(-50%, -50%);
+// 	}
+// }
+.home {
+	min-height: 100vh;
+	background-color: rgb(0, 22, 65);
+
+	&-bgc {
+		width: 100%;
+		min-height: 100%;
+		background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/9127b508676df658e270b0bc558d533d.png);
+		background-size: 100%;
+		background-repeat: no-repeat;
+	}
+}
+
+.top {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	// margin-bottom: 30px;
+}
+
+.container {
+	margin: 0 auto;
+	padding: 20px;
+	max-width: 70vw;
+
+	.content {
+		// margin: 0 auto;
+		// padding: 20px;
+		max-width: 70vw;
+
+		.border1 {
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/8f29990b26b64a3ca53a21096fc820c1.png);
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			width: 60vw;
+			height: 220px;
+			position: relative;
+			left: -10px;
+
+			.dial1 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/4b13888d57ee79fa83a94fe5b3a72001.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				position: absolute;
+				top: 4vw;
+				left: 3vw;
+				width: 22vw;
+				height: 22vw;
+				color: white;
+				font-size: 30px;
+				text-align: center;
+				padding-top: 8vw;
+			}
+
+			.dial2 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/f11785d8113bac15638a7e3c90086af9.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				position: absolute;
+				top: 4vw;
+				left: 35vw;
+				width: 22vw;
+				height: 22vw;
+				color: white;
+				font-size: 30px;
+				text-align: center;
+				padding-top: 8vw;
+			}
+
+			.text1 {
+				color: white;
+				position: absolute;
+				font-size: 18px;
+				top: 75%;
+				left: 15.5%;
+			}
+
+			.text2 {
+				color: white;
+				position: absolute;
+				font-size: 18px;
+				top: 75%;
+				left: 68%;
+			}
+
+			.text3 {
+				color: white;
+				position: absolute;
+				font-size: 20px;
+				top: 30%;
+				left: 38%;
+			}
+		}
+
+		.border2 {
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/f5d918c1e2527ccb6575c68019653107.png);
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			width: 57vw;
+			height: 43px;
+			// color: #00EEFF;
+			font-size: 16px;
+			padding-left: 30px;
+			padding-top: 5px;
+			display: none;
+		}
+
+		.name {
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/6a1b1c687f0992087b815dff0897ce05.png);
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			position: absolute;
+			width: 13vw;
+			height: 6vw;
+			left: 43%;
+			margin-top: 10px;
+			z-index: 1;
+			color: white;
+			text-align: center;
+			font-size: 2.5vw;
+			padding-top: 8px;
+		}
+
+		.border3 {
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/4740746548b849717f04614463fbc4d2.png);
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			width: 57vw;
+			height: 270px;
+			margin-top: 50px;
+			position: relative;
+			z-index: 2;
+
+			.chart {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+
+			.trapezoid {
+				text-align: center;
+				color: white;
+				position: absolute;
+				width: 10vw;
+				left: 41%;
+				top: -32px;
+				font-size: 1.5vw;
+			}
+
+			.KlineClass {
+				position: absolute;
+				width: 58vw;
+				height: 100%;
+				left: 0;
+				bottom: 5%;
+			}
+		}
+
+		.border4 {
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/2ede20bc2da5b4bea1a0daf0e3193823.png);
+			background-size: 100%;
+			background-position: center;
+			background-repeat: no-repeat;
+			width: 57vw;
+			height: 430px;
+			margin-top: 25px;
+			position: relative;
+			z-index: 2;
+			.el-table {
+				// /deep/.cell {
+				// 	line-height: 30px;
+				// }
+				/deep/.el-table__cell {
+					text-align: center;
+					font-size: 1.5vw;
+				}
+				/deep/ .table_header {
+					height: 4vw;
+				}
+				/deep/ .el-table__header {
+					.cell {
+						line-height: 30px;
+					}
+				}
+				top: 5vw;
+				width: 55.5vw;
+				height: 47vw;
+				margin-left: 0.9vw;
+				position: absolute;
+			}
+
+			.WDRL_date {
+				margin-top: 2px;
+				/* 将文字往上移动 */
+				text-align: center;
+				font-size: 1.6vw;
+				font-weight: bold;
+				padding-top: 0%;
+
+				.month-display {
+					position: absolute;
+					top: 0;
+					right: 0;
+					font-size: 1vw;
+					color: rgb(58, 58, 58);
+				}
+			}
+
+			.WDRL_data {
+				height: 100%;
+				margin-top: 5px;
+				text-align: center;
+				font-size: 1vw;
+				font-weight: bold;
+			}
+
+			.temperature-cell {
+			}
+
+			/* 穿透 el-table 的单元格样式 */
+			/deep/ .market-hot-cell {
+				background-color: #da2020 !important;
+				/* 浅红色 */
+			}
+
+			/deep/ .stock-hot-cell {
+				background-color: #4a31d4 !important;
+				/* 浅绿色 */
+			}
+		}
+
+		.border5 {
+			position: relative;
+			background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/414c6163a6bb7013add2ec026ceb5539.png);
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			width: 100%;
+			max-width: 57vw;
+			margin: 0 auto;
+			padding: 2vw;
+			box-sizing: border-box;
+			height: auto;
+
+			.border5-text1 {
+				font-size: 2vw;
+				color: white;
+				position: absolute;
+				top: 5.5vw;
+				left: 3.5vw;
+				white-space: nowrap;
+			}
+
+			.border5-text2 {
+				margin-left: 14vw;
+				font-family: 'Microsoft Yahei', sans-serif;
+				color: #fff;
+				font-size: 1.2rem;
+				line-height: 1rem;
+				box-sizing: border-box;
+
+				.temp-item {
+					margin-bottom: 0.6rem;
+					display: flex;
+					justify-content: flex-start;
+					flex-wrap: wrap;
+					font-weight: 500;
+				}
+
+				.level {
+					font-weight: bold;
+					margin-right: 0.5rem;
+					white-space: nowrap;
+				}
+
+				.color {
+					font-weight: bold;
+					margin-left: 0.5rem;
+					white-space: nowrap;
+				}
+
+				.temp-note {
+					font-size: 1.2rem;
+					line-height: 1.5rem;
+					margin-top: 1.2rem;
+					color: #ddd;
+					margin-bottom: 5%;
+				}
+			}
+		}
+
+		.introduction,
+		.highlight {
+			color: #fff;
+			font-size: 16px;
+			line-height: 1.8;
+			padding: 16px;
+		}
+
+		.introduction ol {
+			list-style: decimal;
+			padding-left: 20px;
+		}
+
+		.temp-range {
+			font-weight: bold;
+		}
+
+		.temp-range.hot {
+			color: #ff3333;
+		}
+
+		.temp-range.high {
+			color: #ff9900;
+		}
+
+		.temp-range.warm {
+			color: #cc66ff;
+		}
+
+		.temp-range.mild {
+			color: #33cc33;
+		}
+
+		.temp-range.cold {
+			color: #66ccff;
+		}
+
+		.highlight h3 {
+			text-align: center;
+			font-size: 2rem;
+			font-weight: bold;
+			margin-bottom: 1rem;
+			color: #ffffff;
+		}
+
+		.highlight p {
+			text-indent: 1.5rem;
+			// font-size: ;
+		}
+	}
+
+	// /* ✅ 适配：平板 */
+	// @media (min-width: 768px) and (max-width: 1024px) {
+	//   .introduction, .highlight {
+	//     font-size: 15px;
+	//     padding: 14px;
+	//   }
+	// }
+
+	// /* ✅ 适配：PC大屏 */
+	// @media (min-width: 1025px) {
+	//   .introduction, .highlight {
+	//     max-width: 800px;
+	//     margin: 0 auto;
+	//   }
+	// }
+}
+</style>
+<style scoped lang="less">
+/* ✅ 适配：平板 */
+@media (min-width: 768px) and (max-width: 1024px) {
+	.introduction,
+	.highlight {
+		font-size: 15px;
+		padding: 14px;
+	}
+
+	.highlight h3 {
+		font-size: 1.5rem;
+	}
+
+	.border5-text2 {
+		font-size: 1rem;
+		line-height: 1.6rem;
+		padding: 1.2rem;
+	}
+
+	.border5 {
+		height: 21rem;
+	}
+}
+
+/* ✅ 适配：PC大屏 */
+@media (min-width: 1025px) {
+	.introduction,
+	.highlight {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
+	.highlight h3 {
+		font-size: 1.5rem;
+	}
+}
+
+@media (max-width: 768px) {
+	.container {
+		margin: 0 auto;
+		padding: 20px;
+		max-width: 100vw;
+
+		.content {
+			margin: 0 auto;
+			// padding: 20px;
+			max-width: 70vw;
+
+			.border1 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/8f29990b26b64a3ca53a21096fc820c1.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				left: -75px;
+				width: 90vw;
+				height: 300px;
+				position: relative;
+
+				.dial1 {
+					// background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/4b13888d57ee79fa83a94fe5b3a72001.png);
+					background-size: cover;
+					background-position: center;
+					background-repeat: no-repeat;
+					position: absolute;
+					top: 4vw;
+					left: 10vw;
+					width: 30vw;
+					height: 30vw;
+					padding-top: 12vw;
+				}
+
+				.dial2 {
+					// background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/f11785d8113bac15638a7e3c90086af9.png);
+					background-size: cover;
+					background-position: center;
+					background-repeat: no-repeat;
+					position: absolute;
+					top: 4vw;
+					left: 52vw;
+					width: 30vw;
+					height: 30vw;
+					padding-top: 12vw;
+				}
+
+				.text1 {
+					color: white;
+					position: absolute;
+					font-size: 18px;
+					top: 75%;
+					left: 20.5%;
+				}
+
+				.text2 {
+					color: white;
+					position: absolute;
+					font-size: 18px;
+					top: 75%;
+					left: 67.5%;
+				}
+
+				.text3 {
+					color: white;
+					position: absolute;
+					font-size: 20px;
+					top: 35%;
+					left: 42%;
+				}
+			}
+
+			.border2 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/f5d918c1e2527ccb6575c68019653107.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				width: 95vw;
+				height: 70px;
+				// color: #00EEFF;
+				font-size: 18px;
+				margin-left: -18%;
+				padding-left: 50px;
+				padding-top: 9px;
+			}
+
+			.name {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/6a1b1c687f0992087b815dff0897ce05.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				position: absolute;
+				width: 23vw;
+				height: 11vw;
+				left: 38%;
+				margin-top: 10px;
+				z-index: 1;
+				padding-top: 0.7rem;
+				font-size: 0.8rem;
+			}
+
+			.border3 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/4740746548b849717f04614463fbc4d2.png);
+				background-size: cover;
+				background-position: center;
+				background-repeat: no-repeat;
+				width: 95vw;
+				height: 450px;
+				margin-top: 88px;
+				position: relative;
+				left: -18%;
+				z-index: 2;
+
+				.chart {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+				}
+
+				.trapezoid {
+					text-align: center;
+					color: white;
+					position: absolute;
+					width: 20vw;
+					left: 39.5%;
+					top: -65px;
+					font-size: 12px;
+
+					span {
+						display: block;
+						font-size: 0.7rem;
+					}
+				}
+
+				.KlineClass {
+					position: absolute;
+					width: 90vw;
+					height: 100%;
+					left: 3vw;
+					bottom: 5%;
+				}
+			}
+
+			.border4 {
+				background-image: url(https://d31zlh4on95l9h.cloudfront.net/images/2ede20bc2da5b4bea1a0daf0e3193823.png);
+				background-size: 100%;
+				background-position: center;
+				background-repeat: no-repeat;
+				width: 95vw;
+				height: 630px;
+				margin-top: 78px;
+				position: relative;
+				left: -18%;
+				z-index: 2;
+
+				.el-table {
+					/deep/ .table_header {
+						height: 5vw;
+					}
+
+					/deep/ .el-table__header th,
+					/deep/ .el-table__body td {
+						width: auto !important;
+						/* 小屏幕下自动调整 */
+					}
+
+					top: 15px;
+					width: 93vw !important;
+					height: 80vw;
+					margin-left: 0.9vw;
+					position: absolute;
+				}
+
+				.WDRL_date {
+					text-align: center;
+					font-size: 2vw;
+					font-weight: bold;
+				}
+
+				.WDRL_data {
+					text-align: center;
+					font-size: 1.5vw;
+					font-weight: bold;
+				}
+
+				.temperature-cell {
+				}
+
+				/* 穿透 el-table 的单元格样式 */
+				/deep/ .market-hot-cell {
+					background-color: #da2020 !important;
+					/* 浅红色 */
+				}
+
+				/deep/ .stock-hot-cell {
+					background-color: #4a31d4 !important;
+					/* 浅绿色 */
+				}
+			}
+
+			.border5 {
+				height: auto;
+
+				.border5-text2 {
+					margin-left: 0 !important;
+					padding: 0 0.3rem;
+					font-size: 0.7rem;
+					line-height: 1rem;
+					white-space: normal;
+					word-break: break-word;
+					text-align: left;
+					margin-top: 9%;
+
+					.temp-item {
+						display: flex !important;
+						flex-direction: row !important;
+						/* 水平排列 */
+						justify-content: flex-start;
+						align-items: center !important;
+						margin-bottom: 0.6rem;
+						flex-wrap: wrap;
+						/* 小屏幕自动换行 */
+					}
+
+					.temp-item .level {
+						font-weight: bold;
+						margin-right: 0.5rem;
+						white-space: nowrap;
+						/* 避免文字拆开 */
+					}
+
+					.temp-item .color {
+						font-weight: bold;
+						margin-left: 0.5rem;
+					}
+
+					.temp-note {
+						font-size: 0.8rem;
+						margin-bottom: 12%;
+					}
+				}
+			}
+
+			.highlight h3 {
+				font-size: 0.5rem;
+			}
+		}
+	}
+}
+
+/* 适配手机小屏幕 */
+@media (max-width: 480px) {
+	.border5-text2 {
+		font-size: 0.8rem;
+		line-height: 1.4rem;
+
+		.temp-item {
+			flex-direction: column !important;
+			/* 更小屏幕下竖排 */
+			align-items: flex-start !important;
+		}
+	}
+}
+</style>
diff --git a/src/views/smallTitle.vue b/src/views/smallTitle.vue
new file mode 100644
index 0000000..2a80a07
--- /dev/null
+++ b/src/views/smallTitle.vue
@@ -0,0 +1,107 @@
+<template>
+	<header class="title">
+		<div class="title-text" :style="fontSize">
+			<img
+				v-if="props.colorBgc"
+				src="@/assets/img/page/title-jn-left.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<div v-if="props.colorBgc">{{ translate(props.titleKey) }}</div>
+			<img
+				v-if="props.colorBgc"
+				src="@/assets/img/page/title-jn-right.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<img
+				v-if="!props.colorBgc"
+				src="@/assets/img/page/title-left.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<div v-if="!props.colorBgc">{{ translate(props.titleKey) }}</div>
+			<img
+				v-if="!props.colorBgc"
+				src="@/assets/img/page/title-right.png"
+				alt=""
+				class="title-text-img"
+			/>
+		</div>
+		<div class="title-line">
+			<img src="@/assets/img/page/line.png" class="title-line-img" />
+		</div>
+	</header>
+</template>
+
+<script setup>
+import { useLanguage } from '@/utils/languageService'
+import { defineProps, computed } from 'vue'
+
+// 获取翻译函数和语言状态
+const { translate, t } = useLanguage()
+
+// 定义 props 接收传入的标题
+const props = defineProps({
+	titleKey: {
+		type: String,
+		required: true
+	},
+	colorBgc: {
+		type: String,
+		required: true
+	}
+})
+// 定义 fontSize 的类型，并确保 computed 返回正确的类型
+const fontSize = computed(() => {
+	if (t.value?.suoxie === 'en' || t.value?.suoxie === 'th') {
+		// 手机尺寸
+		if (window.innerWidth < 768) {
+			return { fontSize: '3vw' }
+		} else {
+			return { fontSize: '1.5vw' }
+		}
+	} else {
+		// 简体或者繁体
+		if (window.innerWidth < 768) {
+			return { fontSize: '3.5vw' }
+		} else {
+			return { fontSize: '1.5vw' }
+		}
+	}
+})
+</script>
+
+<style scoped lang="less">
+.title {
+	position: relative;
+	.title-text {
+		font-size: 3vw;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: center;
+		color: white;
+		.title-text-img {
+			width: 10%;
+		}
+	}
+	.title-line {
+		text-align: center;
+		position: absolute;
+		bottom: -1vw;
+		left: 50%; /* 将左边距设置为 50% */
+		transform: translateX(-50%); /* 使用 transform 来将元素水平居中 */
+		width: 85%;
+		.title-line-img {
+			width: 100%;
+			height: auto;
+		}
+	}
+}
+@media (min-width: 768px) {
+	.title-text-img {
+		width: 6% !important;
+	}
+}
+</style>