更新股票报价功能,调整数据获取方式并优化组件样式,确保信息动态展示。
This commit is contained in:
parent
bda93351eb
commit
1976c7d9da
@ -1,17 +1,22 @@
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { createGlobalState, useLocalStorage } from '@vueuse/core'
|
import { createGlobalState, useLocalStorage } from '@vueuse/core'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
export const useStockQuote = createGlobalState(() => {
|
|
||||||
const stockQuote = useLocalStorage('stockQuote', {})
|
|
||||||
const getStockQuate= async()=>{
|
|
||||||
const res = await axios.post('http://saas-test.szjixun.cn/api/chart/forward/test')
|
|
||||||
console.log('res',res);
|
|
||||||
stockQuote.value.Open=res.data.nodes?.[2]?.data?.[10]
|
|
||||||
stockQuote.value.Volume=res.data.nodes?.[1]?.data?.[21]
|
|
||||||
stockQuote.value.DayRange=[res.data.nodes?.[2]?.data?.[10],res.data.nodes?.[2]?.data?.[11]]
|
|
||||||
stockQuote.value.WeekRange=[res.data.nodes?.[2]?.data?.[31],res.data.nodes?.[1]?.data?.[30]]
|
|
||||||
|
|
||||||
console.log('stockQuote.value',stockQuote.value);
|
export const useStockQuote = createGlobalState(() => {
|
||||||
|
const stockQuote = useLocalStorage('stockQuote', {
|
||||||
|
"Open": "",
|
||||||
|
"Volume": "",
|
||||||
|
"DayRange": "",
|
||||||
|
"WeekRange": "",
|
||||||
|
"MarketCap": "",
|
||||||
|
"change": [
|
||||||
|
"",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const getStockQuate= async()=>{
|
||||||
|
const res = await axios.get('http://localhost:3213/api/minm/open')
|
||||||
|
stockQuote.value=res.data
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
getStockQuate,
|
getStockQuate,
|
||||||
|
@ -7,11 +7,13 @@ import customFooter from '@/components/customFooter/index.vue'
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="flex flex-col h-screen">
|
||||||
<customHeader></customHeader>
|
<customHeader></customHeader>
|
||||||
<div style="margin: 80px 0;">
|
<div class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1" style="margin: 80px 0;">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
<customFooter></customFooter>
|
<customFooter></customFooter>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -1,15 +1,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {useStockQuote} from '@/store/stock-quote/index.js'
|
import {useStockQuote} from '@/store/stock-quote/index.js'
|
||||||
const useStock=useStockQuote()
|
const {getStockQuate,stockQuote}=useStockQuote()
|
||||||
useStock.getStockQuate()
|
|
||||||
|
getStockQuate()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="header">
|
|
||||||
</header>
|
|
||||||
<main
|
<main
|
||||||
ref="main"
|
ref="main"
|
||||||
class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 bg-gradient-to-br from-primary/10 to-white/80 p-12 rounded-3xl shadow-2xl animate-bounce-in"
|
class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 p-12 rounded-3xl animate-bounce-in"
|
||||||
>
|
>
|
||||||
<!-- 左侧大号价格 -->
|
<!-- 左侧大号价格 -->
|
||||||
<section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
|
<section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
|
||||||
@ -20,32 +19,30 @@ useStock.getStockQuate()
|
|||||||
<section class="grid grid-cols-2 gap-8">
|
<section class="grid grid-cols-2 gap-8">
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Open</div>
|
<div class="text-xs text-gray-400">Open</div>
|
||||||
<div class="text-xl font-bold">$2.00</div>
|
<div class="text-xl font-bold">{{ stockQuote.Open }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Change</div>
|
<div class="text-xs text-gray-400">Change</div>
|
||||||
<div class="text-xl font-bold text-red-500 animate-bounce-in">-0.05 (-2.46%)</div>
|
<div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Day's Range</div>
|
<div class="text-xs text-gray-400">Day's Range</div>
|
||||||
<div class="text-xl font-bold">$1.85 - $2.03</div>
|
<div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">52-Week Range</div>
|
<div class="text-xs text-gray-400">52-Week Range</div>
|
||||||
<div class="text-xl font-bold">$1.85 - $12.60</div>
|
<div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Volume</div>
|
<div class="text-xs text-gray-400">Volume</div>
|
||||||
<div class="text-xl font-bold">23.5K</div>
|
<div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-xs text-gray-400">Market Cap</div>
|
<div class="text-xs text-gray-400">Market Cap</div>
|
||||||
<div class="text-xl font-bold">$1.2M</div>
|
<div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
|
||||||
</footer>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
Loading…
Reference in New Issue
Block a user