Compare commits
No commits in common. "208a426324abaa1f329ecceaa7662f13f0cb26fe" and "f55a24ea63cd5968b37ebef8db3f169372ff7b0f" have entirely different histories.
208a426324
...
f55a24ea63
@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="custom-echarts">
|
|
||||||
<div id="myEcharts" class="myChart"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
|
|
||||||
//初始化eCharts
|
|
||||||
const initEcharts = () => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
var myCharts = echarts.init(document.getElementById('myEcharts'))
|
|
||||||
// 绘制图表
|
|
||||||
myCharts.setOption({
|
|
||||||
title: {
|
|
||||||
text: 'FiEE, Inc. Stock Price History',
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
snap: true,
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatter: function (params) {
|
|
||||||
const p = params[0];
|
|
||||||
return `${p.axisValue}<br/>Price: ${p.data}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: ['2013', '2015', '2017', '2019', '2021', '2023', '2025'],
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
position: 'right',
|
|
||||||
interval: 25,
|
|
||||||
max: 75.0,
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '销量',
|
|
||||||
type: 'line',
|
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#2c6288'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#2c6288'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#F4F6F8'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'slider',
|
|
||||||
show: true,
|
|
||||||
dataBackground: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#2C6288'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 1, color: '#2c6288' },
|
|
||||||
{ offset: 0, color: '#F4F6F8' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectedDataBackground: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#2C6288'
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 1, color: '#2c6288' },
|
|
||||||
{ offset: 0, color: '#F4F6F8' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fillerColor: 'rgba(44, 98, 136, 0.3)',
|
|
||||||
realtime: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initEcharts()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.custom-echarts {
|
|
||||||
.myChart {
|
|
||||||
width: 1000px;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -3,7 +3,7 @@ import { computed } from 'vue'
|
|||||||
import { useWindowSize } from '@vueuse/core'
|
import { useWindowSize } from '@vueuse/core'
|
||||||
|
|
||||||
import size375 from '@/components/customFooter/size375/index.vue'
|
import size375 from '@/components/customFooter/size375/index.vue'
|
||||||
import size768 from '@/components/customFooter/size768/index.vue'
|
import size768 from '@/components/customFooter/size1920/index.vue'
|
||||||
import size1440 from '@/components/customFooter/size1920/index.vue'
|
import size1440 from '@/components/customFooter/size1920/index.vue'
|
||||||
import size1920 from '@/components/customFooter/size1920/index.vue'
|
import size1920 from '@/components/customFooter/size1920/index.vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
@ -15,7 +15,7 @@ const { t } = useI18n()
|
|||||||
|
|
||||||
const viewComponent = computed(() => {
|
const viewComponent = computed(() => {
|
||||||
const viewWidth = width.value
|
const viewWidth = width.value
|
||||||
if (viewWidth <= 500) {
|
if (viewWidth <= 450) {
|
||||||
return size375
|
return size375
|
||||||
} else if (viewWidth <= 1100) {
|
} else if (viewWidth <= 1100) {
|
||||||
return size768
|
return size768
|
||||||
|
|||||||
@ -1,61 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 通用页脚 -->
|
<!-- 通用页脚 -->
|
||||||
<div class="custom-footer">
|
<div class="custom-footer">
|
||||||
<div class="custom-footer-box">
|
<span>Copyright © 2024-2027 FiEE</span>
|
||||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
|
||||||
<div class="footer-links">
|
|
||||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
|
||||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
|
||||||
<span @click="handleLink('cookiesSettings')">Cookies Settings</span>
|
|
||||||
<span @click="handleLink('siteMap')">Site Map</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup></script>
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
//点击跳转到对应的链接页面
|
|
||||||
const handleLink = (link) => {
|
|
||||||
console.log(link)
|
|
||||||
router.push(link)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.custom-footer {
|
.custom-footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 24px 0;
|
||||||
|
color: #888;
|
||||||
|
// font-size: 15px;
|
||||||
|
font-size: 1.05rem;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
|
letter-spacing: 1px;
|
||||||
border-top: 1px solid #ececec;
|
border-top: 1px solid #ececec;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
.custom-footer-box {
|
|
||||||
max-width: 1700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #888;
|
|
||||||
// font-size: 15px;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
padding: 1rem 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
margin: 0.4rem 0 0;
|
|
||||||
span {
|
|
||||||
border-right: 1px solid #d2d2d7;
|
|
||||||
padding: 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
span:nth-last-child(1) {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,63 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 通用页脚 -->
|
<!-- 通用页脚 -->
|
||||||
<div class="custom-footer">
|
<div class="custom-footer">
|
||||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
<span>Copyright © 2024-2027 FiEE</span>
|
||||||
<div class="footer-links-box">
|
|
||||||
<div class="footer-links">
|
|
||||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
|
||||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
|
||||||
</div>
|
|
||||||
<div class="footer-links">
|
|
||||||
<span @click="handleLink('cookiesSettings')">Cookies Settings</span>
|
|
||||||
<span @click="handleLink('siteMap')">Site Map</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
<script setup></script>
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
//点击跳转到对应的链接页面
|
<style scoped lang="scss">
|
||||||
const handleLink = (link) => {
|
.custom-footer {
|
||||||
router.push(link)
|
width: 100%;
|
||||||
}
|
text-align: center;
|
||||||
</script>
|
padding: 120px 0;
|
||||||
|
color: #888;
|
||||||
<style scoped lang="scss">
|
font-size: 75px;
|
||||||
.custom-footer {
|
background: #f7f8fa;
|
||||||
width: 100%;
|
letter-spacing: 5px;
|
||||||
text-align: center;
|
border-top: 5px solid #ececec;
|
||||||
padding: 1rem 0;
|
z-index: 100;
|
||||||
color: #888;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
background: #f7f8fa;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
border-top: 5px solid #ececec;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
.footer-links-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0.6rem 0 0;
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
span {
|
|
||||||
border-right: 1px solid #d2d2d7;
|
|
||||||
padding: 0 0.8rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
min-width: 8.5rem;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
span:nth-last-child(1) {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
</style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 通用页脚 -->
|
|
||||||
<div class="custom-footer">
|
|
||||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
|
||||||
<div class="footer-links">
|
|
||||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
|
||||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
|
||||||
<span @click="handleLink('cookiesSettings')">Cookies Settings</span>
|
|
||||||
<span @click="handleLink('siteMap')">Site Map</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
//点击跳转到对应的链接页面
|
|
||||||
const handleLink = (link) => {
|
|
||||||
console.log(link)
|
|
||||||
router.push(link)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.custom-footer {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px 0;
|
|
||||||
color: #888;
|
|
||||||
// font-size: 15px;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
background: #f7f8fa;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border-top: 1px solid #ececec;
|
|
||||||
z-index: 100;
|
|
||||||
padding: 1rem 0;
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
margin: 0.4rem 0 0;
|
|
||||||
span {
|
|
||||||
border-right: 1px solid #d2d2d7;
|
|
||||||
padding: 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
span:nth-last-child(1) {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -116,26 +116,6 @@ const routes = [
|
|||||||
name: "govern",
|
name: "govern",
|
||||||
component: () => import("@/views/govern/index.vue"),
|
component: () => import("@/views/govern/index.vue"),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/privacyPolicy",
|
|
||||||
name: "privacyPolicy",
|
|
||||||
component: () => import("@/views/footerLinks/privacyPolicy/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/termsOfUse",
|
|
||||||
name: "termsOfUse",
|
|
||||||
component: () => import("@/views/footerLinks/termsOfUse/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/cookiesSettings",
|
|
||||||
name: "cookiesSettings",
|
|
||||||
component: () => import("@/views/footerLinks/cookiesSettings/index.vue"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/siteMap",
|
|
||||||
name: "siteMap",
|
|
||||||
component: () => import("@/views/footerLinks/siteMap/index.vue"),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -1,34 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useWindowSize } from '@vueuse/core'
|
|
||||||
|
|
||||||
import size375 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
|
|
||||||
import size768 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
|
|
||||||
import size1440 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
|
|
||||||
import size1920 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const { width } = useWindowSize()
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const viewComponent = computed(() => {
|
|
||||||
const viewWidth = width.value
|
|
||||||
if (viewWidth <= 450) {
|
|
||||||
return size375
|
|
||||||
} else if (viewWidth <= 1100) {
|
|
||||||
return size768
|
|
||||||
} else if (viewWidth <= 1500) {
|
|
||||||
return size1440
|
|
||||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
|
||||||
return size1920
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="viewComponent" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
1920 cookiesSettings
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
375 cookiesSettings
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useWindowSize } from '@vueuse/core'
|
|
||||||
|
|
||||||
import size375 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
|
|
||||||
import size768 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
|
|
||||||
import size1440 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
|
|
||||||
import size1920 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const { width } = useWindowSize()
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const viewComponent = computed(() => {
|
|
||||||
const viewWidth = width.value
|
|
||||||
if (viewWidth <= 450) {
|
|
||||||
return size375
|
|
||||||
} else if (viewWidth <= 1100) {
|
|
||||||
return size768
|
|
||||||
} else if (viewWidth <= 1500) {
|
|
||||||
return size1440
|
|
||||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
|
||||||
return size1920
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="viewComponent" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
1920 privacyPolicy
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
375 privacyPolicy
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useWindowSize } from '@vueuse/core'
|
|
||||||
|
|
||||||
import size375 from '@/views/footerLinks/siteMap/size375/index.vue'
|
|
||||||
import size768 from '@/views/footerLinks/siteMap/size375/index.vue'
|
|
||||||
import size1440 from '@/views/footerLinks/siteMap/size1920/index.vue'
|
|
||||||
import size1920 from '@/views/footerLinks/siteMap/size1920/index.vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const { width } = useWindowSize()
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const viewComponent = computed(() => {
|
|
||||||
const viewWidth = width.value
|
|
||||||
if (viewWidth <= 450) {
|
|
||||||
return size375
|
|
||||||
} else if (viewWidth <= 1100) {
|
|
||||||
return size768
|
|
||||||
} else if (viewWidth <= 1500) {
|
|
||||||
return size1440
|
|
||||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
|
||||||
return size1920
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="viewComponent" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
1920 siteMap
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
375 siteMap
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useWindowSize } from '@vueuse/core'
|
|
||||||
|
|
||||||
import size375 from '@/views/footerLinks/termsOfUse/size375/index.vue'
|
|
||||||
import size768 from '@/views/footerLinks/termsOfUse/size375/index.vue'
|
|
||||||
import size1440 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
|
|
||||||
import size1920 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const { width } = useWindowSize()
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const viewComponent = computed(() => {
|
|
||||||
const viewWidth = width.value
|
|
||||||
if (viewWidth <= 450) {
|
|
||||||
return size375
|
|
||||||
} else if (viewWidth <= 1100) {
|
|
||||||
return size768
|
|
||||||
} else if (viewWidth <= 1500) {
|
|
||||||
return size1440
|
|
||||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
|
||||||
return size1920
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<component :is="viewComponent" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
1920 termsOfUse
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<header className="header">
|
|
||||||
375 termsOfUse
|
|
||||||
</header>
|
|
||||||
<main ref="main"></main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -1,13 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 40px;">
|
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||||
<img
|
<img
|
||||||
src="@/assets/image/historic-stock.png"
|
src="@/assets/image/historic-stock.png"
|
||||||
alt="1"
|
alt="1"
|
||||||
style="max-width: 100%; margin: 0 auto;"
|
style="max-width: 100%; margin: 0 auto"
|
||||||
/>
|
/>
|
||||||
<div class="echarts-container">
|
|
||||||
<customEcharts></customEcharts>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header mt-[20px]">
|
<div class="header mt-[20px]">
|
||||||
<div class="title">Historical Data</div>
|
<div class="title">Historical Data</div>
|
||||||
@ -85,201 +82,200 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
|
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||||
import { reactive, onMounted, h, computed } from 'vue'
|
import { reactive, onMounted, h, computed } from "vue";
|
||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
import {
|
import {
|
||||||
ChevronDownOutline,
|
ChevronDownOutline,
|
||||||
ChevronBackOutline,
|
ChevronBackOutline,
|
||||||
ChevronForwardOutline,
|
ChevronForwardOutline,
|
||||||
ArrowUpOutline,
|
ArrowUpOutline,
|
||||||
} from '@vicons/ionicons5'
|
} from "@vicons/ionicons5";
|
||||||
import defaultTableData from '../data'
|
import defaultTableData from "../data";
|
||||||
console.log('defaultTableData', defaultTableData)
|
console.log("defaultTableData", defaultTableData);
|
||||||
import customEcharts from '@/components/customEcharts/index.vue'
|
|
||||||
|
|
||||||
// 数据筛选选项
|
// 数据筛选选项
|
||||||
const periodOptions = [
|
const periodOptions = [
|
||||||
{ label: 'Daily', key: 'Daily' },
|
{ label: "Daily", key: "Daily" },
|
||||||
{ label: 'Weekly', key: 'Weekly' },
|
{ label: "Weekly", key: "Weekly" },
|
||||||
{ label: 'Monthly', key: 'Monthly' },
|
{ label: "Monthly", key: "Monthly" },
|
||||||
{ label: 'Quarterly', key: 'Quarterly' },
|
{ label: "Quarterly", key: "Quarterly" },
|
||||||
{ label: 'Annual', key: 'Annual' },
|
{ label: "Annual", key: "Annual" },
|
||||||
]
|
];
|
||||||
|
|
||||||
const durationOptions = [
|
const durationOptions = [
|
||||||
{ label: '3 Months', key: '3 Months' },
|
{ label: "3 Months", key: "3 Months" },
|
||||||
{ label: '6 Months', key: '6 Months' },
|
{ label: "6 Months", key: "6 Months" },
|
||||||
{ label: 'Year to Date', key: 'Year to Date' },
|
{ label: "Year to Date", key: "Year to Date" },
|
||||||
{ label: '1 Year', key: '1 Year' },
|
{ label: "1 Year", key: "1 Year" },
|
||||||
{ label: '5 Years', key: '5 Years' },
|
{ label: "5 Years", key: "5 Years" },
|
||||||
{ label: '10 Years', key: '10 Years' },
|
{ label: "10 Years", key: "10 Years" },
|
||||||
{ label: 'Full History', key: 'Full History', disabled: true },
|
{ label: "Full History", key: "Full History", disabled: true },
|
||||||
]
|
];
|
||||||
|
|
||||||
// 分页大小选项
|
// 分页大小选项
|
||||||
const pageSizeOptions = [
|
const pageSizeOptions = [
|
||||||
{ label: '50', key: 50 },
|
{ label: "50", key: 50 },
|
||||||
{ label: '100', key: 100 },
|
{ label: "100", key: 100 },
|
||||||
{ label: '500', key: 500 },
|
{ label: "500", key: 500 },
|
||||||
{ label: '1000', key: 1000 },
|
{ label: "1000", key: 1000 },
|
||||||
]
|
];
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
selectedPeriod: 'Daily',
|
selectedPeriod: "Daily",
|
||||||
selectedDuration: '3 Months',
|
selectedDuration: "3 Months",
|
||||||
tableData: [],
|
tableData: [],
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 50,
|
pageSize: 50,
|
||||||
})
|
});
|
||||||
|
|
||||||
// 计算总页数
|
// 计算总页数
|
||||||
const totalPages = computed(() => {
|
const totalPages = computed(() => {
|
||||||
return Math.ceil(state.tableData.length / state.pageSize)
|
return Math.ceil(state.tableData.length / state.pageSize);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 计算当前页的数据
|
// 计算当前页的数据
|
||||||
const paginatedData = computed(() => {
|
const paginatedData = computed(() => {
|
||||||
const start = (state.currentPage - 1) * state.pageSize
|
const start = (state.currentPage - 1) * state.pageSize;
|
||||||
const end = start + state.pageSize
|
const end = start + state.pageSize;
|
||||||
return state.tableData.slice(start, end)
|
return state.tableData.slice(start, end);
|
||||||
})
|
});
|
||||||
|
|
||||||
// 表格列定义
|
// 表格列定义
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'Date',
|
title: "Date",
|
||||||
key: 'date',
|
key: "date",
|
||||||
align: 'left',
|
align: "left",
|
||||||
fixed: 'left',
|
fixed: "left",
|
||||||
width: 150,
|
width: 150,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Open',
|
title: "Open",
|
||||||
key: 'open',
|
key: "open",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'High',
|
title: "High",
|
||||||
key: 'high',
|
key: "high",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Low',
|
title: "Low",
|
||||||
key: 'low',
|
key: "low",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Close',
|
title: "Close",
|
||||||
key: 'close',
|
key: "close",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Adj. Close',
|
title: "Adj. Close",
|
||||||
key: 'adjClose',
|
key: "adjClose",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Change',
|
title: "Change",
|
||||||
key: 'change',
|
key: "change",
|
||||||
align: 'center',
|
align: "center",
|
||||||
render(row) {
|
render(row) {
|
||||||
const value = parseFloat(row.change)
|
const value = parseFloat(row.change);
|
||||||
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
|
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||||
return h('span', { style: { color } }, row.change)
|
return h("span", { style: { color } }, row.change);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Volume',
|
title: "Volume",
|
||||||
key: 'volume',
|
key: "volume",
|
||||||
align: 'center',
|
align: "center",
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
// 处理下拉选项变更
|
// 处理下拉选项变更
|
||||||
const handlePeriodChange = (key) => {
|
const handlePeriodChange = (key) => {
|
||||||
state.selectedPeriod = key
|
state.selectedPeriod = key;
|
||||||
if (key === 'Annual') {
|
if (key === "Annual") {
|
||||||
handleDurationChange('Full History')
|
handleDurationChange("Full History");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (key === 'Monthly') {
|
if (key === "Monthly") {
|
||||||
handleDurationChange('10 Years')
|
handleDurationChange("10 Years");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (key === 'Quarterly') {
|
if (key === "Quarterly") {
|
||||||
handleDurationChange('10 Years')
|
handleDurationChange("10 Years");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
getPageData()
|
getPageData();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleDurationChange = (key) => {
|
const handleDurationChange = (key) => {
|
||||||
state.selectedDuration = key
|
state.selectedDuration = key;
|
||||||
getPageData()
|
getPageData();
|
||||||
}
|
};
|
||||||
|
|
||||||
// 处理分页
|
// 处理分页
|
||||||
const handlePrevPage = () => {
|
const handlePrevPage = () => {
|
||||||
if (state.currentPage === 1) {
|
if (state.currentPage === 1) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
state.currentPage--
|
state.currentPage--;
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleNextPage = () => {
|
const handleNextPage = () => {
|
||||||
if (state.currentPage >= totalPages.value) {
|
if (state.currentPage >= totalPages.value) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
state.currentPage++
|
state.currentPage++;
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlePageSizeChange = (size) => {
|
const handlePageSizeChange = (size) => {
|
||||||
state.pageSize = size
|
state.pageSize = size;
|
||||||
state.currentPage = 1 // 重置到第一页
|
state.currentPage = 1; // 重置到第一页
|
||||||
}
|
};
|
||||||
|
|
||||||
// 回到顶部
|
// 回到顶部
|
||||||
const scrollToTop = () => {
|
const scrollToTop = () => {
|
||||||
// 尝试多种方法
|
// 尝试多种方法
|
||||||
// 1. 使用document.body
|
// 1. 使用document.body
|
||||||
document.body.scrollTop = 0
|
document.body.scrollTop = 0;
|
||||||
// 2. 使用document.documentElement (HTML元素)
|
// 2. 使用document.documentElement (HTML元素)
|
||||||
document.documentElement.scrollTop = 0
|
document.documentElement.scrollTop = 0;
|
||||||
// 3. 使用scrollIntoView
|
// 3. 使用scrollIntoView
|
||||||
document.querySelector('.historic-data-container').scrollIntoView({
|
document.querySelector(".historic-data-container").scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: "smooth",
|
||||||
block: 'start',
|
block: "start",
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageData()
|
getPageData();
|
||||||
})
|
});
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
try {
|
try {
|
||||||
let url =
|
let url =
|
||||||
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
|
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
||||||
const res = await axios.get(url)
|
const res = await axios.get(url);
|
||||||
let originalData = res.data.data
|
let originalData = res.data.data;
|
||||||
|
|
||||||
// 转换为日期格式："Nov 26, 2024"
|
// 转换为日期格式："Nov 26, 2024"
|
||||||
let calcApiData = originalData.map((item) => [
|
let calcApiData = originalData.map((item) => [
|
||||||
new Date(item[0]).toLocaleDateString('en-US', {
|
new Date(item[0]).toLocaleDateString("en-US", {
|
||||||
month: 'short',
|
month: "short",
|
||||||
day: 'numeric',
|
day: "numeric",
|
||||||
year: 'numeric',
|
year: "numeric",
|
||||||
}),
|
}),
|
||||||
item[1],
|
item[1],
|
||||||
])
|
]);
|
||||||
console.log('接口数据', calcApiData)
|
console.log("接口数据", calcApiData);
|
||||||
|
|
||||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||||
// 查找对应日期的API数据
|
// 查找对应日期的API数据
|
||||||
const matchedApiData = calcApiData.find(
|
const matchedApiData = calcApiData.find(
|
||||||
(apiItem) => apiItem[0] === tableItem.date,
|
(apiItem) => apiItem[0] === tableItem.date
|
||||||
)
|
);
|
||||||
|
|
||||||
if (matchedApiData) {
|
if (matchedApiData) {
|
||||||
// 更新close和adjClose值
|
// 更新close和adjClose值
|
||||||
@ -287,56 +283,56 @@ const getPageDefaultData = async () => {
|
|||||||
...tableItem,
|
...tableItem,
|
||||||
close: matchedApiData[1].toFixed(2),
|
close: matchedApiData[1].toFixed(2),
|
||||||
adjClose: matchedApiData[1].toFixed(2),
|
adjClose: matchedApiData[1].toFixed(2),
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
return tableItem
|
return tableItem;
|
||||||
})
|
});
|
||||||
|
|
||||||
state.tableData = updatedTableData
|
state.tableData = updatedTableData;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取数据失败', error)
|
console.error("获取数据失败", error);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
const getPageData = async () => {
|
const getPageData = async () => {
|
||||||
let range = ''
|
let range = "";
|
||||||
if (state.selectedDuration === '3 Months') {
|
if (state.selectedDuration === "3 Months") {
|
||||||
range = '3M'
|
range = "3M";
|
||||||
} else if (state.selectedDuration === '6 Months') {
|
} else if (state.selectedDuration === "6 Months") {
|
||||||
range = '6M'
|
range = "6M";
|
||||||
} else if (state.selectedDuration === 'Year to Date') {
|
} else if (state.selectedDuration === "Year to Date") {
|
||||||
range = 'YTD'
|
range = "YTD";
|
||||||
} else if (state.selectedDuration === '1 Year') {
|
} else if (state.selectedDuration === "1 Year") {
|
||||||
range = '1Y'
|
range = "1Y";
|
||||||
} else if (state.selectedDuration === '5 Years') {
|
} else if (state.selectedDuration === "5 Years") {
|
||||||
range = '5Y'
|
range = "5Y";
|
||||||
} else if (state.selectedDuration === '10 Years') {
|
} else if (state.selectedDuration === "10 Years") {
|
||||||
range = '10Y'
|
range = "10Y";
|
||||||
} else if (state.selectedDuration === 'Full History') {
|
} else if (state.selectedDuration === "Full History") {
|
||||||
range = 'Max'
|
range = "Max";
|
||||||
}
|
}
|
||||||
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
|
||||||
const res = await axios.get(url)
|
const res = await axios.get(url);
|
||||||
if (res.data.status === 200) {
|
if (res.data.status === 200) {
|
||||||
// 转换为日期格式："Nov 26, 2024"
|
// 转换为日期格式："Nov 26, 2024"
|
||||||
let resultData = res.data.data.map((item) => {
|
let resultData = res.data.data.map((item) => {
|
||||||
return {
|
return {
|
||||||
date: new Date(item.t).toLocaleDateString('en-US', {
|
date: new Date(item.t).toLocaleDateString("en-US", {
|
||||||
month: 'short',
|
month: "short",
|
||||||
day: 'numeric',
|
day: "numeric",
|
||||||
year: 'numeric',
|
year: "numeric",
|
||||||
}),
|
}),
|
||||||
open: item.o != null ? Number(item.o).toFixed(2) : '',
|
open: item.o != null ? Number(item.o).toFixed(2) : "",
|
||||||
high: item.h != null ? Number(item.h).toFixed(2) : '',
|
high: item.h != null ? Number(item.h).toFixed(2) : "",
|
||||||
low: item.l != null ? Number(item.l).toFixed(2) : '',
|
low: item.l != null ? Number(item.l).toFixed(2) : "",
|
||||||
close: item.c != null ? Number(item.c).toFixed(2) : '',
|
close: item.c != null ? Number(item.c).toFixed(2) : "",
|
||||||
adjClose: item.a != null ? Number(item.a).toFixed(2) : '',
|
adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
|
||||||
change: item.ch != null ? Number(item.ch).toFixed(2) + '%' : '',
|
change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
|
||||||
volume: item.v,
|
volume: item.v,
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
state.tableData = resultData
|
state.tableData = resultData;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user