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

---
 src/views/AiEmotion.vue                    |    5 +-
 src/views/Emotionsmodel.vue                |    2 +-
 src/views/components/marketTemperature.vue | 1580 +++-------------------------
 3 files changed, 168 insertions(+), 1419 deletions(-)

diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index 7662751..f4a67f9 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -1,10 +1,7 @@
 <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">
                 <!-- 用户输入内容 -->
diff --git a/src/views/Emotionsmodel.vue b/src/views/Emotionsmodel.vue
index 8bef924..03c46aa 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("/marketTemperature")
+  router.push("/homePage")
 }
 </script>
 
diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue
index 5202f29..2c5d646 100644
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@@ -1,455 +1,169 @@
 <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>
+  <div class="home">
+    <div class="container">
+      <div class="border3">
+        <section class="chart-section">
+          <div>
+            <div class="trapezoid">
+              <span>NVIDIA</span>
+              <span>NVDA</span>
+            </div>
+            <div ref="KlineCanvs" class="KlineClass"></div>
+          </div>
+        </section>
+      </div>
+
+      <div class="border4">
+        <el-table
+          :data="groupedWDRL"
+          border
+          :row-style="{ height: '8.6vw' }"
+          header-cell-class-name="table_header"
+          :cell-style="tableCellStyle"
+        >
+          <el-table-column
+            v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']"
+            :key="colIndex"
+            :label="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">
+                  <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>
+                </p>
+              </div>
+              <div v-else>
+                <p class="WDRL_date">休市</p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-// import smallTitle from '../component/smallTitle.vue'
+import { ref, onMounted, computed } from '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 KlineCanvs = ref()
+const WDRL = ref([
+  { date: '2025/06/01', stock_temperature: 65, market_temperature: 70 },
+  { date: '2025/06/02', stock_temperature: 50, market_temperature: 55 },
+  { date: '2025/06/03', stock_temperature: 40, market_temperature: 60 },
+  { date: '2025/06/04', stock_temperature: 85, market_temperature: 80 },
+  { date: '2025/06/05', stock_temperature: 95, market_temperature: 90 },
+  { date: '2025/06/06', stock_temperature: 30, market_temperature: 35 },
+  { date: '2025/06/07', stock_temperature: 60, market_temperature: 65 },
+  // 第二周
+  { date: '2025/06/08', stock_temperature: 70, market_temperature: 75 },
+  { date: '2025/06/09', stock_temperature: 80, market_temperature: 85 },
+  { date: '2025/06/10', stock_temperature: 90, market_temperature: 95 },
+  { date: '2025/06/11', stock_temperature: 100, market_temperature: 100 },
+])
 
-// 当前是否为指数
-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 groupedWDRL = computed(() => {
+  const result = []
+  for (let i = 0; i < WDRL.value.length; i += 7) {
+    result.push(WDRL.value.slice(i, i + 7))
+  }
+  return result
 })
-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
+  const weekData = groupedWDRL.value[rowIndex]
+  if (weekData && weekData.length >= dayIndex) {
+    return weekData[dayIndex - 1] || {}
+  }
+  return {}
 }
 
-// 跳转报告页的方法
-// 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 shouldShowDivider(rowIndex, dayIndex) {
+  const data = getDayData(rowIndex, dayIndex)
+  return data?.market_temperature && data?.stock_temperature
 }
-// 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 formatMonth(dateStr) {
+  if (!dateStr) return ''
+  return dateStr.split('/')[1] + '月'
 }
 
-function shouldShowDivider(rowIndex, dayIndex) {
-	const data = getDayData(rowIndex, dayIndex)
-
-	return data?.market_temperature && data?.stock_temperature
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return dateStr.split('/')[2]
 }
-// 动态返回单元格类名
-// 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
+function tableCellStyle({ row, column, rowIndex, columnIndex }) {
+  const data = getDayData(rowIndex, columnIndex + 1)
+  const value = Number(data?.stock_temperature)
+  if (isNaN(value)) return {}
+  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 return { backgroundColor: '#87CEEB', color: 'white' }
 }
-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('|') : '-';
-// }
+onMounted(() => {
+  const chart = echarts.init(KlineCanvs.value)
+  chart.setOption({
+    tooltip: {},
+    legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white' } },
+    xAxis: {
+      data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7'],
+      axisLine: { lineStyle: { color: '#8392A5' } }
+    },
+    yAxis: [{}, {
+      min: 0,
+      max: 100,
+      position: 'right',
+      axisLabel: { color: '#FFA500' },
+      axisLine: { lineStyle: { color: 'purple', width: 2 } }
+    }],
+    color: ['#f00', '#9370DB'],
+    series: [
+      {
+        name: 'K线',
+        type: 'candlestick',
+        data: [[12, 15, 9, 18], [15, 18, 14, 20], [18, 20, 17, 22], [20, 22, 19, 24], [16, 22, 15, 20]],
+        itemStyle: { color: '#0CF49B', color0: '#FD1050' }
+      },
+      {
+        name: '市场温度',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [70, 55, 60, 80, 90, 35, 65]
+      },
+      {
+        name: '股票温度',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [65, 50, 40, 85, 95, 30, 60]
+      }
+    ]
+  })
+})
+onMounted(() => {
+  fetchData()
+});
+
 const fetchData = async () => {
 	try {
 		const response = await axios.post(
-			'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
+			// 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
+            'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',
 			{
-				token: localStorage.getItem('localToken'),
-				market: localStorage.getItem('localMarket'),
-				code: localStorage.getItem('localCode'),
-				language: localStorage.getItem('userLanguage')
+				token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
+				market: 'usa',
+				code: 'TSLA',
+				language: 'cn'
 			},
 			{
 				headers: { 'Content-Type': 'application/json' }
@@ -457,7 +171,10 @@ const fetchData = async () => {
 		)
 
 		if (response.data.code === 200) {
-			Data.value = response.data.data.GSWDJ
+            console.log('打印数据',response.data)
+			Data.value = response.data.data.code
+            consle.log('1111111111111111111111')
+            console.log('打印温度计数据',response.data.data.code)
 			WDRL.value = response.data.data.WDRL
 
 			// 数据清洗并四舍五入
@@ -509,1000 +226,35 @@ const fetchData = async () => {
 		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%);
-// 	}
-// }
+<style scoped>
 .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;
+  min-height: 100vh;
+  background-color: rgb(0, 22, 65);
 }
-
 .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;
-	//   }
-	// }
+  margin: 0 auto;
+  padding: 20px;
+  max-width: 80vw;
 }
-</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;
-	}
+.border3, .border4 {
+  margin-top: 40px;
+  background-color: #1a1a1a;
+  border-radius: 8px;
+  padding: 20px;
 }
-
-/* ✅ 适配：PC大屏 */
-@media (min-width: 1025px) {
-	.introduction,
-	.highlight {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-
-	.highlight h3 {
-		font-size: 1.5rem;
-	}
+.KlineClass {
+  width: 100%;
+  height: 400px;
 }
-
-@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;
-			}
-		}
-	}
+.WDRL_date, .WDRL_data {
+  text-align: center;
+  color: white;
 }
-
-/* 适配手机小屏幕 */
-@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;
-		}
-	}
+.table_header {
+  color: white;
+  background: #2a2a2a;
 }
-</style>
+</style>
\ No newline at end of file