You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

866 lines
23 KiB

4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
3 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
4 weeks ago
  1. <template>
  2. <LoginPrompt ref="loginPrompt"></LoginPrompt>
  3. <view class="main">
  4. <!-- 顶部状态栏占位 -->
  5. <view class="top" :style="{height:iSMT+'px'}"></view>
  6. <deepExploration_header></deepExploration_header>
  7. <view class="search">
  8. <input v-model="searchName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
  9. placeholder-style="color: #A6A6A6; font-size: 28rpx;" />
  10. <image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png"
  11. mode="aspectFill"></image>
  12. </view>
  13. <view class="content">
  14. <view class="select">
  15. <image class="img" :src="navItems[currentIndex].icon" mode=""></image>
  16. <view v-for="(item, index) in navItems" :key="index" class="selectItem"
  17. :class="{ active: currentIndex === index }" @click="handleModel(index)">
  18. <button class="btn"></button>
  19. </view>
  20. </view>
  21. <view class="graphAndTxt">
  22. <view class="graph">
  23. <view class="graph_header">
  24. <view class="left">{{stockCode}}</view>
  25. <view class="center">
  26. <text>{{stockName}}</text>
  27. </view>
  28. <view class="right">{{stockTime}}</view>
  29. </view>
  30. <view class="graph_data">
  31. <text>{{stockPrice}}</text>
  32. <text>{{stockChange}}</text>
  33. <text>{{stockAdd}}</text>
  34. </view>
  35. <view class="graph_content">
  36. <view class="charts-box">
  37. <!-- uCharts 蜡烛图组件 -->
  38. <qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
  39. :ontouch="true" :onzoom="true" :key="chartKey" />
  40. </view>
  41. </view>
  42. </view>
  43. <view class="txt">
  44. <view class="txtHeader">
  45. <image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
  46. <text>{{navItems[currentIndex].name}}</text>
  47. </view>
  48. <view class="txtContent">
  49. <view v-if="loading" class="loading">加载中...</view>
  50. <rich-text :nodes="htmlContent"></rich-text>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <!-- 底部切换栏 -->
  56. <footerBar class="static-footer" :type="type"></footerBar>
  57. </view>
  58. </template>
  59. <script setup>
  60. import {
  61. ref,
  62. onMounted,
  63. watch
  64. } from 'vue'
  65. import deepExploration_header from '@/components/deepExploration_header.vue'
  66. import footerBar from '@/components/footerBar.vue'
  67. import {
  68. onLoad
  69. } from '@dcloudio/uni-app'
  70. import {
  71. getModel1First,
  72. getModel1Second,
  73. getModel2First,
  74. getModel2Second,
  75. getModel3First,
  76. getModel3Second,
  77. getModel4First,
  78. getModel4Second,
  79. getModeldefault,
  80. getData
  81. } from '/api/deepExploration/deepExploration.js'
  82. import marked from 'marked'; // 引入 marked 库
  83. import hljs from 'highlight.js';
  84. import 'highlight.js/styles/atom-one-dark.css'; // 可替换为其他主题
  85. import {
  86. useDeepExplorationStore
  87. } from '@/stores/modules/deepExploration'
  88. import {
  89. getUserInfo
  90. } from "@/api/member"
  91. import {
  92. useUserStore
  93. } from '@/stores/modules/userInfo.js'
  94. const deepExplorationStore = useDeepExplorationStore()
  95. const userInfo = getUserInfo()
  96. //历史数据
  97. const historyData = ref({})
  98. //登录弹窗提示ref
  99. const loginPrompt = ref(null)
  100. // 响应式变量定义
  101. const type = ref('deepExploration')
  102. const iSMT = ref(0)
  103. const currentIndex = ref(0)
  104. const navItems = ref([{
  105. name: '主力追踪',
  106. icon: '/static/deepExploration-images/1.png'
  107. },
  108. {
  109. name: '主力雷达',
  110. icon: '/static/deepExploration-images/2.png'
  111. },
  112. {
  113. name: '主力解码',
  114. icon: '/static/deepExploration-images/3.png'
  115. },
  116. {
  117. name: '主力资金流',
  118. icon: '/static/deepExploration-images/4.png'
  119. },
  120. ])
  121. //搜索股票
  122. const searchStock = () => {
  123. htmlContent.value = ''
  124. console.log('搜索参数:', stockName.value, currentIndex.value);
  125. if (currentIndex.value >= 0 && currentIndex.value <= 3) {
  126. handleModels()
  127. } else {
  128. uni.showToast({
  129. title: '请选择模块',
  130. icon: 'none',
  131. duration: 2000
  132. })
  133. }
  134. }
  135. //点击四大模块
  136. const handleModel = async (index) => {
  137. htmlContent.value = ''
  138. currentIndex.value = index
  139. await handleModels()
  140. // await getServerData()
  141. }
  142. const stockName = ref('Tesla Inc.')
  143. const searchName = ref('')
  144. const stockCode = ref('TSLA')
  145. const language = ref('')
  146. const recordId = ref('')
  147. const parentId = ref('')
  148. const stockId = ref('')
  149. const market = ref('')
  150. const stockTime = ref('2025/10/24')
  151. const loading = ref(true);
  152. const error = ref('');
  153. const htmlContent = ref('');
  154. const markdownContent = ref('');
  155. const renderer = new marked.Renderer();
  156. renderer.heading = function(text, level) {
  157. return `<p>${text}</p>`;
  158. };
  159. // 初始化 marked 配置(支持代码高亮)
  160. marked.setOptions({
  161. highlight: (code, lang) => {
  162. if (lang && hljs.getLanguage(lang)) {
  163. return hljs.highlight(code, {
  164. language: lang
  165. }).value;
  166. }
  167. return hljs.highlightAuto(code).value;
  168. },
  169. renderer,
  170. breaks: true, // 换行转<br>
  171. gfm: true, // 支持GitHub flavored Markdown
  172. sanitize: false, // 保留HTML标签(如<span style>)
  173. });
  174. //获取模型数据
  175. const handleModels = async () => {
  176. try {
  177. if (userInfo.isVisitor) {
  178. console.log('是游客');
  179. loginPrompt.value.show()
  180. return
  181. }
  182. console.log('搜了吗');
  183. // markdownContent.value = '\n## 📊 主力追踪分析:\n\n### 🕵️ 主力行为\n\t1. 📊 该股庄家中长期筹码成本价格为 360.249,短期资金成本价格为 412.577。该股筹码分散,当日筹码成本价格为 444.330。\n\t2. 🔍 近日没有出现主力集中吸筹。\n\t3. 📈 近期主力持仓比例大于散户持仓比例。 当日主力持仓增加。 当日散户持仓减少。\n\n### 📊 空间维度:\n\t- 📉 预测低一值: <font color=\"#13c2c2\">443.092</font> \n - 📈 预测高一值: <font color=\"#ff4d4f\">466.458</font>\n\t- 📉 预测低二值: <font color=\"#13c2c2\">447.354</font>\n\t- 📈 预测高二值: <font color=\"#ff4d4f\">462.514</font>\n\t<font color=\"#722ed1\">AI智能均线空头排列,当前卖盘小于买盘</font>\n\n### 综合作战\n\t\t\t<font color=\"#fa8c16\">当前股票处于安全区,牵牛绳为红色,出现蓝色推进K线。</font>\n\t\t\t<font color=\"#eb2f96\">该股整体趋势相对较强,个股正处于推进上涨的关键阶段。若当前持有该股票,建议继续持有,进行持续跟踪。若当前无该股票,建议持续跟踪,等待适当时机再进行介入。</font>\n\n---\n<font color=\"#8c8c8c\">*该内容由AI生成,仅供参考,投资有风险,请注意甄别。*</font>\n '
  184. // htmlContent.value = marked.parse(markdownContent.value);
  185. loading.value = true;
  186. if (searchName.value == '') {
  187. console.log('没有搜索', searchName.value);
  188. handleDefault()
  189. } else {
  190. if (currentIndex.value == 0) {
  191. console.log('搜索', searchName.value);
  192. const result = await getModel1First({
  193. content: searchName.value,
  194. language: "cn",
  195. marketList: "hk,cn,usa,my,sg,vi,in,gb",
  196. model: currentIndex.value + 1
  197. })
  198. console.log('result', result);
  199. if (result.code == 200) {
  200. stockCode.value = result.data.code
  201. // stockName.value = result.data.name
  202. recordId.value = result.data.recordId
  203. parentId.value = result.data.parentId
  204. stockId.value = result.data.stockId
  205. language.value = result.data.language
  206. market.value = result.data.market
  207. const res = await getModel1Second({
  208. language: language.value,
  209. recordId: recordId.value,
  210. parentId: parentId.value,
  211. stockId: stockId.value,
  212. token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
  213. })
  214. if (res.code == 200) {
  215. const rawMarkdown = res.data.markdown;
  216. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  217. markdownContent.value = adaptedMarkdown;
  218. // markdownContent.value = res.data.markdown
  219. htmlContent.value = marked.parse(markdownContent.value);
  220. await getServerData()
  221. }
  222. console.log('res', res);
  223. } else if (result.code == 400) {
  224. markdownContent.value = result.message;
  225. htmlContent.value = marked.parse(markdownContent.value);
  226. } else {
  227. return
  228. }
  229. } else if (currentIndex.value == 1) {
  230. console.log('搜索', searchName.value);
  231. const result = await getModel2First({
  232. content: searchName.value,
  233. language: "cn",
  234. marketList: "hk,cn,usa,my,sg,vi,in,gb",
  235. model: currentIndex.value + 1
  236. })
  237. console.log('result', result);
  238. if (result.code == 200) {
  239. stockCode.value = result.data.code
  240. recordId.value = result.data.recordId
  241. parentId.value = result.data.parentId
  242. stockId.value = result.data.stockId
  243. language.value = result.data.language
  244. market.value = result.data.market
  245. const res = await getModel2Second({
  246. language: language.value,
  247. recordId: recordId.value,
  248. parentId: parentId.value,
  249. stockId: stockId.value,
  250. token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
  251. })
  252. if (res.code == 200) {
  253. const rawMarkdown = res.data.markdown;
  254. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  255. markdownContent.value = adaptedMarkdown;
  256. // markdownContent.value = res.data.markdown
  257. htmlContent.value = marked.parse(markdownContent.value);
  258. await getServerData()
  259. }
  260. console.log('res', res);
  261. } else if (result.code == 400) {
  262. markdownContent.value = result.message;
  263. htmlContent.value = marked.parse(markdownContent.value);
  264. } else {
  265. return
  266. }
  267. } else if (currentIndex.value == 2) {
  268. console.log('搜索', searchName.value);
  269. const result = await getModel3First({
  270. content: searchName.value,
  271. language: "cn",
  272. marketList: "hk,cn,usa,my,sg,vi,in,gb",
  273. model: currentIndex.value + 1
  274. })
  275. console.log('result', result);
  276. if (result.code == 200) {
  277. stockCode.value = result.data.code
  278. // stockName.value = result.data.name
  279. recordId.value = result.data.recordId
  280. parentId.value = result.data.parentId
  281. stockId.value = result.data.stockId
  282. language.value = result.data.language
  283. market.value = result.data.market
  284. const res = await getModel3Second({
  285. language: language.value,
  286. recordId: recordId.value,
  287. parentId: parentId.value,
  288. stockId: stockId.value,
  289. token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
  290. })
  291. if (res.code == 200) {
  292. const rawMarkdown = res.data.markdown;
  293. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  294. markdownContent.value = adaptedMarkdown;
  295. // markdownContent.value = res.data.markdown
  296. htmlContent.value = marked.parse(markdownContent.value);
  297. await getServerData()
  298. }
  299. console.log('res', res);
  300. } else if (result.code == 400) {
  301. markdownContent.value = result.message;
  302. htmlContent.value = marked.parse(markdownContent.value);
  303. } else {
  304. return
  305. }
  306. } else if (currentIndex.value == 3) {
  307. console.log('搜索', searchName.value);
  308. const result = await getModel4First({
  309. content: searchName.value,
  310. language: "cn",
  311. marketList: "hk,cn,usa,my,sg,vi,in,gb",
  312. model: currentIndex.value + 1
  313. })
  314. console.log('result', result);
  315. if (result.code == 200) {
  316. stockCode.value = result.data.code
  317. // stockName.value = result.data.name
  318. recordId.value = result.data.recordId
  319. parentId.value = result.data.parentId
  320. stockId.value = result.data.stockId
  321. language.value = result.data.language
  322. market.value = result.data.market
  323. const res = await getModel4Second({
  324. language: language.value,
  325. recordId: recordId.value,
  326. parentId: parentId.value,
  327. stockId: stockId.value,
  328. token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
  329. })
  330. if (res.code == 200) {
  331. const rawMarkdown = res.data.markdown;
  332. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  333. markdownContent.value = adaptedMarkdown;
  334. // markdownContent.value = res.data.markdown
  335. htmlContent.value = marked.parse(markdownContent.value);
  336. await getServerData()
  337. }
  338. console.log('res', res);
  339. } else if (result.code == 400) {
  340. markdownContent.value = result.message;
  341. htmlContent.value = marked.parse(markdownContent.value);
  342. } else {
  343. return
  344. }
  345. } else {
  346. return
  347. }
  348. }
  349. } catch (e) {
  350. error.value = e.message || '加载失败,请重试';
  351. } finally {
  352. loading.value = false;
  353. }
  354. }
  355. const handleDefault = async () => {
  356. const result = await getModeldefault({
  357. token: "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
  358. model: currentIndex.value + 1
  359. })
  360. if (result.code == 200) {
  361. const rawMarkdown = result.data.markdown;
  362. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  363. markdownContent.value = adaptedMarkdown;
  364. htmlContent.value = marked.parse(markdownContent.value);
  365. } else {
  366. }
  367. }
  368. const stockPrice = ref('435.900')
  369. const stockAdd = ref('22.410')
  370. const stockChange = ref('5.120%')
  371. const chartKey = ref(0);
  372. const getServerData = async () => {
  373. const result = await getData({
  374. market: market.value || '',
  375. code: stockCode.value || '',
  376. language: "cn",
  377. brainPrivilegeState: 1,
  378. marketList: "usa.sg.my.hk.cn.can.vi.th.in.gb"
  379. })
  380. console.log('k线数据', result);
  381. stockName.value = result.data.StockInformation.Name || 'Tesla Inc.'
  382. stockCode.value = result.data.StockInformation.Code || 'TSLA'
  383. stockTime.value = result.data.StockInformation.Time || '2025/10/29'
  384. stockChange.value = result.data.StockInformation.Zhang || '5.120%'
  385. stockAdd.value = result.data.StockInformation.ZhangFu || '22.410'
  386. stockPrice.value = result.data.StockInformation.Price || '435.900'
  387. if (result.data.chartData) {
  388. const rawData = JSON.parse(JSON.stringify(result.data.chartData));
  389. if (rawData.categories.length > 1) { // 确保至少保留一个日期
  390. rawData.categories[rawData.categories.length - 1] = ''; // 删除最后一个日期
  391. console.log('删了;');
  392. }
  393. chartData.value = {
  394. ...rawData
  395. }
  396. chartKey.value++;
  397. console.log('chartData', chartData.value);
  398. }
  399. }
  400. // 1. K线图配置
  401. const opts = ref({
  402. rotate: false,
  403. rotateLock: false,
  404. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
  405. padding: [15, 30, 0, 15],
  406. dataLabel: false,
  407. enableScroll: true,
  408. enableMarkLine: false,
  409. legend: {},
  410. xAxis: {
  411. labelCount: 4,
  412. itemCount: 20,
  413. disableGrid: true,
  414. gridColor: "#CCCCCC",
  415. gridType: "solid",
  416. dashLength: 4,
  417. scrollShow: false,
  418. rotate: 45,
  419. scrollAlign: "left",
  420. scrollColor: "#A6A6A6",
  421. scrollBackgroundColor: "#EFEBEF",
  422. labelColor: "#8C8C8C",
  423. fontSize: 9,
  424. },
  425. yAxis: {
  426. labelColor: "#8C8C8C",
  427. fontSize: 9
  428. },
  429. extra: {
  430. candle: {
  431. color: {
  432. upLine: "#f04864",
  433. upFill: "#f04864",
  434. downLine: "#2fc25b",
  435. downFill: "#2fc25b"
  436. },
  437. average: {
  438. show: false,
  439. name: ["MA5", "MA10", "MA30"],
  440. day: [5, 10, 20],
  441. color: ["#1890ff", "#2fc25b", "#facc14"]
  442. }
  443. },
  444. markLine: {
  445. type: "dash",
  446. dashLength: 5,
  447. data: [{
  448. value: 2150,
  449. lineColor: "#f04864",
  450. showLabel: false
  451. },
  452. {
  453. value: 2350,
  454. lineColor: "#f04864",
  455. showLabel: false
  456. }
  457. ]
  458. },
  459. tooltip: {
  460. showCategory: true
  461. }
  462. }
  463. })
  464. // 2. K线图数据(响应式定义)
  465. const chartData = ref({
  466. categories: [],
  467. series: [{
  468. name: '',
  469. data: []
  470. }]
  471. })
  472. //获取K线数据函数(直接定义,无需methods)
  473. // const getServerData1 = () => {
  474. // // 模拟服务器请求延时
  475. // setTimeout(() => {
  476. // const res = {
  477. // "categories": [
  478. // "2025/10/23",
  479. // "2025/10/24",
  480. // "2025/10/27"
  481. // ],
  482. // series: [{
  483. // "name": "贵州茅台",
  484. // "data": [
  485. // [
  486. // 1455.0,
  487. // 1468.8,
  488. // 1447.2,
  489. // 1467.98
  490. // ],
  491. // [
  492. // 1467.95,
  493. // 1478.88,
  494. // 1449.34,
  495. // 1450.0
  496. // ],
  497. // [
  498. // 1440.0,
  499. // 1452.49,
  500. // 1435.99,
  501. // 1440.41
  502. // ]
  503. // ],
  504. // }]
  505. // }
  506. // // 给响应式变量赋值(需修改.value)
  507. // chartData.value = JSON.parse(JSON.stringify(res))
  508. // }, 500)
  509. // }
  510. let unwatch = null;
  511. // 生命周期钩子:组件挂载后执行(替代onReady)
  512. onMounted(async () => {
  513. iSMT.value = uni.getSystemInfoSync().statusBarHeight
  514. getUserInfo()
  515. await handleModels()
  516. unwatch = watch(
  517. () => deepExplorationStore.deepExplorationInfo, // 监听的目标值(函数返回,避免响应式丢失)
  518. (newVal, oldVal) => {
  519. console.log('deepExplorationInfo 变化了:', newVal)
  520. historyData.value = {
  521. ...newVal
  522. }
  523. console.log(historyData.value.wokeFlowData);
  524. console.log('222', historyData.value.stockData.StockInformation);
  525. //工作流数据
  526. const rawMarkdown = historyData.value.wokeFlowData.One.markdown;
  527. const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
  528. markdownContent.value = adaptedMarkdown;
  529. // markdownContent.value = res.data.markdown
  530. htmlContent.value = marked.parse(markdownContent.value);
  531. //k线
  532. if (historyData.value.stockData.chartData.categories.length > 1) { // 确保至少保留一个日期
  533. historyData.value.stockData.chartData.categories[historyData.value.stockData.chartData.categories.length - 1] = ''; // 删除最后一个日期
  534. }
  535. chartData.value = {
  536. ...JSON.parse(JSON.stringify(historyData.value.stockData.chartData))
  537. }
  538. chartKey.value++;
  539. console.log('chartData', chartData.value);
  540. stockName.value = historyData.value.stockData.StockInformation.Name || 'Tesla Inc.'
  541. stockCode.value = historyData.value.stockData.StockInformation.Code || 'TSLA'
  542. stockTime.value = historyData.value.stockData.StockInformation.Time || '2025/10/29'
  543. stockChange.value = historyData.value.stockData.StockInformation.Zhang || '5.120%'
  544. stockAdd.value = historyData.value.stockData.StockInformation.ZhangFu || '22.410'
  545. stockPrice.value = historyData.value.stockData.StockInformation.Price || '435.900'
  546. currentIndex.value = historyData.value.model-1
  547. }, {
  548. deep: true,
  549. immediate: true
  550. } // 开启深度监听(对象内部属性变化也能触发)
  551. )
  552. })
  553. // 页面加载时执行
  554. onLoad((e) => {
  555. if (e.index) {
  556. // currentIndex.value = e.index - 1
  557. console.log('模块:', currentIndex.value)
  558. }
  559. if (e.stockName) {
  560. searchName.value = e.stockName
  561. console.log('股票名称:', searchName.value)
  562. }
  563. })
  564. </script>
  565. <style scoped lang="scss">
  566. .main {
  567. width: 100%;
  568. min-height: 100vh;
  569. background-color: #fff;
  570. padding-bottom: 120rpx;
  571. .search {
  572. position: relative;
  573. display: flex;
  574. align-items: center;
  575. background-color: #F3F3F3;
  576. width: calc(100% - 60rpx);
  577. height: 80rpx;
  578. border-radius: 50rpx;
  579. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  580. padding: 0 40rpx;
  581. margin: 15rpx 30rpx 0 30rpx;
  582. .seachIcon {
  583. position: absolute;
  584. right: 50rpx;
  585. width: 32rpx;
  586. height: 32rpx;
  587. }
  588. .searchInput {
  589. color: #111;
  590. width: 100%;
  591. }
  592. }
  593. .content {
  594. margin-top: 30rpx;
  595. padding-top: 30rpx;
  596. background-color: rgb(248, 248, 248);
  597. .select {
  598. position: relative;
  599. margin-bottom: -5rpx;
  600. .img {
  601. width: 750rpx;
  602. height: 198rpx;
  603. }
  604. .selectItem {
  605. .btn {
  606. position: absolute;
  607. width: 120rpx;
  608. height: 150rpx;
  609. background-color: transparent;
  610. &::after {
  611. border: none;
  612. }
  613. }
  614. &:nth-of-type(1) .btn {
  615. top: 30rpx;
  616. left: 60rpx;
  617. }
  618. &:nth-of-type(2) .btn {
  619. top: 30rpx;
  620. left: 230rpx;
  621. }
  622. &:nth-of-type(3) .btn {
  623. top: 30rpx;
  624. left: 400rpx;
  625. }
  626. &:nth-of-type(4) .btn {
  627. top: 30rpx;
  628. left: 570rpx;
  629. }
  630. }
  631. }
  632. .graphAndTxt {
  633. background-color: #fff;
  634. border-radius: 50rpx 50rpx 0 0;
  635. padding: 68.6rpx 36.5rpx 0 36.5rpx;
  636. .graph {
  637. border: 1rpx solid #e2e2e2;
  638. border-radius: 30rpx 30rpx 0 0;
  639. .graph_header {
  640. padding: 32rpx 20.5rpx 0 24rpx;
  641. display: flex;
  642. align-items: center;
  643. .left {
  644. color: #333333;
  645. font-family: "PingFang SC";
  646. font-size: 15px;
  647. font-style: normal;
  648. font-weight: 400;
  649. line-height: 15px;
  650. }
  651. .center {
  652. margin-left: 155rpx;
  653. display: flex;
  654. align-items: center;
  655. text {
  656. width: 160rpx;
  657. height: 36rpx;
  658. padding-left: 10rpx;
  659. color: #000000;
  660. white-space: nowrap;
  661. overflow: hidden;
  662. text-overflow: ellipsis;
  663. text-align: center;
  664. font-family: "PingFang SC";
  665. font-size: 18px;
  666. font-style: normal;
  667. font-weight: 500;
  668. line-height: 18px;
  669. }
  670. }
  671. .right {
  672. margin-left: 50rpx;
  673. color: #6a6a6a;
  674. font-family: "PingFang SC";
  675. font-size: 13px;
  676. font-style: normal;
  677. font-weight: 400;
  678. line-height: 15px;
  679. white-space: nowrap;
  680. }
  681. }
  682. .graph_data {
  683. display: flex;
  684. padding: 48rpx 24rpx;
  685. text {
  686. display: flex;
  687. color: #25ba5d;
  688. font-family: "PingFang SC";
  689. font-size: 17px;
  690. line-height: 17px;
  691. }
  692. text:nth-child(2) {
  693. margin-left: 120rpx;
  694. }
  695. text:nth-child(3) {
  696. margin-left: 150rpx;
  697. }
  698. }
  699. .graph_content {
  700. min-height: 500rpx;
  701. .charts-box {
  702. width: 100%;
  703. height: 100%;
  704. overflow: visible;
  705. }
  706. }
  707. }
  708. .txt {
  709. background-color: #F3F3F3;
  710. margin-top: 48rpx;
  711. border-radius: 30rpx;
  712. .txtHeader {
  713. padding: 30rpx 24rpx;
  714. image {
  715. width: 20rpx;
  716. height: 20rpx;
  717. }
  718. text {
  719. margin-left: 5rpx;
  720. background-color: #FFFFFF;
  721. color: #000000;
  722. padding: 5rpx 22rpx;
  723. border-radius: 22rpx;
  724. font-size: 28rpx;
  725. font-weight: 400;
  726. line-height: 37rpx;
  727. }
  728. }
  729. .txtContent {
  730. min-height: 300rpx;
  731. padding: 20rpx 30rpx;
  732. margin-bottom: 100rpx;
  733. ::v-deep * {
  734. box-sizing: border-box;
  735. width: 100% !important; // 强制所有解析后的标签占满容器宽度
  736. white-space: normal !important; // 取消强制不换行
  737. word-wrap: break-word !important; // 长词/长数字自动换行
  738. }
  739. // 标题样式(确保换行)
  740. ::v-deep h2 {
  741. font-size: 32rpx;
  742. color: #333;
  743. margin: 25rpx 0 15rpx;
  744. line-height: 1.5;
  745. }
  746. // 段落样式(核心换行控制)
  747. ::v-deep p {
  748. font-size: 26rpx;
  749. color: #666;
  750. margin: 15rpx 0;
  751. line-height: 1.8; // 增加行高,提升可读性
  752. text-align: justify; // 两端对齐,避免单侧参差不齐
  753. }
  754. // 列表样式(纵向排列)
  755. ::v-deep ul,
  756. ::v-deep ol {
  757. margin: 15rpx 0 15rpx 30rpx;
  758. }
  759. ::v-deep li {
  760. margin: 10rpx 0;
  761. line-height: 1.6;
  762. }
  763. // 加载状态样式
  764. .loading {
  765. text-align: center;
  766. padding: 50rpx 0;
  767. color: #666;
  768. font-size: 26rpx;
  769. }
  770. }
  771. }
  772. }
  773. }
  774. .static-footer {
  775. position: fixed;
  776. bottom: 0;
  777. width: 100%;
  778. }
  779. }
  780. * {
  781. box-sizing: border-box;
  782. }
  783. </style>