Compare commits
2 Commits
fd8b03ad3e
...
7b4d234c48
| Author | SHA1 | Date | |
|---|---|---|---|
|
7b4d234c48 | ||
|
|
318f850885 |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
BIN
src/assets/image/product-introduction-icon1.png
Normal file
BIN
src/assets/image/product-introduction-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/image/product-introduction-icon2.png
Normal file
BIN
src/assets/image/product-introduction-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/image/product-introduction-icon3.png
Normal file
BIN
src/assets/image/product-introduction-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/image/product-introduction-img1.png
Normal file
BIN
src/assets/image/product-introduction-img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
BIN
src/assets/image/product-introduction-img2.jpg
Normal file
BIN
src/assets/image/product-introduction-img2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/image/product-introduction-img2.png
Normal file
BIN
src/assets/image/product-introduction-img2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/image/product-introduction-img3.png
Normal file
BIN
src/assets/image/product-introduction-img3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/image/product-introduction-img4.png
Normal file
BIN
src/assets/image/product-introduction-img4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 MiB |
BIN
src/assets/image/product-introduction-img5.png
Normal file
BIN
src/assets/image/product-introduction-img5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/image/product-introduction-img6.png
Normal file
BIN
src/assets/image/product-introduction-img6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -149,6 +149,7 @@ const routes = [
|
||||
{
|
||||
path: "/product-introduction",
|
||||
name: "product-introduction",
|
||||
meta: { bg: 'null' },
|
||||
component: () => import("@/views/product-introduction/index.vue"),
|
||||
},
|
||||
],
|
||||
|
||||
@ -658,7 +658,7 @@ onUnmounted(() => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
@ -675,7 +675,7 @@ onUnmounted(() => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -787,6 +787,7 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,150 +1,142 @@
|
||||
<template>
|
||||
<header></header>
|
||||
<main class="page-container">
|
||||
<div class="financials-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.quarterlyreports.title") }}
|
||||
</div>
|
||||
<div class="page-container">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.quarterlyreports.title") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyreports.search.placeholder')
|
||||
"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="search-button" @click="handleSearch">
|
||||
{{ t("financialinformation.quarterlyreports.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyreports.search.placeholder')
|
||||
"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="search-button" @click="handleSearch">
|
||||
{{ t("financialinformation.quarterlyreports.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-list">
|
||||
<div
|
||||
v-for="(item, index) in pagedList"
|
||||
:key="index"
|
||||
class="table-row"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="file-content">
|
||||
<div class="file-info">
|
||||
<div class="vertical-line"></div>
|
||||
<p class="file-title">{{ item.title }}</p>
|
||||
</div>
|
||||
<p class="file-description">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="download-section">
|
||||
<p class="download-text" @click="downloadPdf(item.url)">
|
||||
PDF Download
|
||||
</p>
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-table">
|
||||
<div class="reports-list">
|
||||
<div v-for="(item, index) in pagedList" :key="index" class="table-row">
|
||||
<div class="content">
|
||||
<div class="file-content">
|
||||
<div class="file-info">
|
||||
<div class="vertical-line"></div>
|
||||
<p class="file-title">{{ item.title }}</p>
|
||||
</div>
|
||||
<p class="file-description">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="download-section">
|
||||
<p class="download-text" @click="downloadPdf(item.url)">
|
||||
PDF Download
|
||||
</p>
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- 动态生成页码按钮 -->
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 4.5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.total }} results
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-buttons">
|
||||
<button
|
||||
class="page-btn prev-btn"
|
||||
:disabled="state.currentPage === 1"
|
||||
@click="goToPrevPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
d="M4 1L1 4.5L4 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 页面大小选择菜单 -->
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- 动态生成页码按钮 -->
|
||||
<template v-for="page in getVisiblePages()" :key="page">
|
||||
<button
|
||||
v-if="page !== '...'"
|
||||
class="page-btn"
|
||||
:class="{ active: page === state.currentPage }"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button v-else class="page-btn disabled" disabled>...</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
class="page-btn next-btn"
|
||||
:disabled="state.currentPage === totalPages"
|
||||
@click="goToNextPage"
|
||||
>
|
||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||
<path
|
||||
d="M1 1L4 4.5L1 8"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||
<span>{{ state.pageSize }}/page</span>
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||
<path
|
||||
d="M1 1L5 4L9 1"
|
||||
stroke="#455363"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 页面大小选择菜单 -->
|
||||
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||
<div
|
||||
v-for="size in [10, 20, 50]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="changePageSize(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goto-section">
|
||||
<span>Goto</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="state.gotoPage"
|
||||
class="goto-input"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
@keyup.enter="handleGoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
|
||||
@ -348,12 +340,6 @@ const handleClickOutside = (event) => {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.financials-container {
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -553,7 +539,7 @@ const handleClickOutside = (event) => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
@ -570,7 +556,7 @@ const handleClickOutside = (event) => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -682,6 +668,7 @@ const handleClickOutside = (event) => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<!-- <img
|
||||
src="@/assets/image/historic-stock.png"
|
||||
alt="1"
|
||||
style="max-width: 100%; margin: 0 auto"
|
||||
/> -->
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
@ -85,202 +80,202 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
|
||||
import { reactive, onMounted, h, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from '@vicons/ionicons5'
|
||||
import defaultTableData from '../data'
|
||||
} from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
// console.log('defaultTableData', defaultTableData)
|
||||
import customEcharts from '@/components/customEcharts/index.vue'
|
||||
import customEcharts from "@/components/customEcharts/index.vue";
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: 'Daily', key: 'Daily' },
|
||||
{ label: 'Weekly', key: 'Weekly' },
|
||||
{ label: 'Monthly', key: 'Monthly' },
|
||||
{ label: 'Quarterly', key: 'Quarterly' },
|
||||
{ label: 'Annual', key: 'Annual' },
|
||||
]
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: '3 Months', key: '3 Months' },
|
||||
{ label: '6 Months', key: '6 Months' },
|
||||
{ label: 'Year to Date', key: 'Year to Date' },
|
||||
{ label: '1 Year', key: '1 Year' },
|
||||
{ label: '5 Years', key: '5 Years' },
|
||||
{ label: '10 Years', key: '10 Years' },
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
// { label: 'Full History', key: 'Full History', disabled: true },
|
||||
]
|
||||
];
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = [
|
||||
{ label: '50', key: 50 },
|
||||
{ label: '100', key: 100 },
|
||||
{ label: '500', key: 500 },
|
||||
{ label: '1000', key: 1000 },
|
||||
]
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
{ label: "1000", key: 1000 },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: 'Daily',
|
||||
selectedDuration: '6 Months',
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "6 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
})
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize)
|
||||
})
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算当前页的数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize
|
||||
const end = start + state.pageSize
|
||||
return state.tableData.slice(start, end)
|
||||
})
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return state.tableData.slice(start, end);
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
fixed: "left",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Open',
|
||||
key: 'open',
|
||||
align: 'center',
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'High',
|
||||
key: 'high',
|
||||
align: 'center',
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Low',
|
||||
key: 'low',
|
||||
align: 'center',
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Close',
|
||||
key: 'close',
|
||||
align: 'center',
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Adj. Close',
|
||||
key: 'adjClose',
|
||||
align: 'center',
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Change',
|
||||
key: 'change',
|
||||
align: 'center',
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change)
|
||||
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
|
||||
return h('span', { style: { color } }, row.change)
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Volume',
|
||||
key: 'volume',
|
||||
align: 'center',
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key
|
||||
if (key === 'Annual') {
|
||||
handleDurationChange('Full History')
|
||||
return
|
||||
state.selectedPeriod = key;
|
||||
if (key === "Annual") {
|
||||
handleDurationChange("Full History");
|
||||
return;
|
||||
}
|
||||
if (key === 'Monthly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Monthly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
if (key === 'Quarterly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Quarterly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
getPageData()
|
||||
}
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key
|
||||
state.currentPage = 1
|
||||
getPageData()
|
||||
}
|
||||
state.selectedDuration = key;
|
||||
state.currentPage = 1;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage--
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage++
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size
|
||||
state.currentPage = 1 // 重置到第一页
|
||||
}
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
// 1. 使用document.body
|
||||
document.body.scrollTop = 0
|
||||
document.body.scrollTop = 0;
|
||||
// 2. 使用document.documentElement (HTML元素)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.documentElement.scrollTop = 0;
|
||||
// 3. 使用scrollIntoView
|
||||
document.querySelector('.historic-data-container').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
})
|
||||
}
|
||||
document.querySelector(".historic-data-container").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageData()
|
||||
})
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
|
||||
const res = await axios.get(url)
|
||||
let originalData = res.data.data
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
||||
const res = await axios.get(url);
|
||||
let originalData = res.data.data;
|
||||
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let calcApiData = originalData.map((item) => [
|
||||
new Date(item[0]).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
new Date(item[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
item[1],
|
||||
])
|
||||
]);
|
||||
// console.log('接口数据', calcApiData)
|
||||
|
||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||
// 查找对应日期的API数据
|
||||
const matchedApiData = calcApiData.find(
|
||||
(apiItem) => apiItem[0] === tableItem.date,
|
||||
)
|
||||
(apiItem) => apiItem[0] === tableItem.date
|
||||
);
|
||||
|
||||
if (matchedApiData) {
|
||||
// 更新close和adjClose值
|
||||
@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
|
||||
...tableItem,
|
||||
close: matchedApiData[1].toFixed(2),
|
||||
adjClose: matchedApiData[1].toFixed(2),
|
||||
}
|
||||
};
|
||||
}
|
||||
return tableItem
|
||||
})
|
||||
return tableItem;
|
||||
});
|
||||
|
||||
state.tableData = updatedTableData
|
||||
state.tableData = updatedTableData;
|
||||
} catch (error) {
|
||||
// console.error('获取数据失败', error)
|
||||
}
|
||||
}
|
||||
};
|
||||
const getPageData = async () => {
|
||||
let range = ''
|
||||
let now = new Date()
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
let fromDate = last
|
||||
let range = "";
|
||||
let now = new Date();
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
let fromDate = last;
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
'-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
if (state.selectedDuration === '3 Months') {
|
||||
range = '3M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 3)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '6 Months') {
|
||||
range = '6M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Year to Date') {
|
||||
range = 'YTD'
|
||||
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else if (state.selectedDuration === '1 Year') {
|
||||
range = '1Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 1)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '5 Years') {
|
||||
range = '5Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 5)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '10 Years') {
|
||||
range = '10Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 10)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Full History') {
|
||||
range = 'Max'
|
||||
fromDate = new Date('2009-10-07')
|
||||
"-" +
|
||||
String(now.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(now.getDate()).padStart(2, "0");
|
||||
if (state.selectedDuration === "3 Months") {
|
||||
range = "3M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 3);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "6 Months") {
|
||||
range = "6M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Year to Date") {
|
||||
range = "YTD";
|
||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
||||
} else if (state.selectedDuration === "1 Year") {
|
||||
range = "1Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 1);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "5 Years") {
|
||||
range = "5Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 5);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "10 Years") {
|
||||
range = "10Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 10);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Full History") {
|
||||
range = "Max";
|
||||
fromDate = new Date("2009-10-07");
|
||||
}
|
||||
let finalFromDate =
|
||||
fromDate.getFullYear() +
|
||||
'-' +
|
||||
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(fromDate.getDate()).padStart(2, '0')
|
||||
"-" +
|
||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(fromDate.getDate()).padStart(2, "0");
|
||||
// let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||
let url =
|
||||
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
||||
finalFromDate +
|
||||
'&to=' +
|
||||
toDate
|
||||
const res = await axios.get(url)
|
||||
"&to=" +
|
||||
toDate;
|
||||
const res = await axios.get(url);
|
||||
// console.error(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let resultData = res.data.data.map((item) => {
|
||||
return {
|
||||
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
date: new Date(item.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
change:
|
||||
item.changePercent != null
|
||||
? Number(item.changePercent).toFixed(2) + '%'
|
||||
: '',
|
||||
? Number(item.changePercent).toFixed(2) + "%"
|
||||
: "",
|
||||
volume: item.volume,
|
||||
}
|
||||
})
|
||||
state.tableData = resultData
|
||||
};
|
||||
});
|
||||
state.tableData = resultData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<div class="historic-data-container">
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
@ -715,8 +715,9 @@ const getPageData = async () => {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 30px;
|
||||
gap: 21px;
|
||||
}
|
||||
|
||||
@ -732,7 +733,7 @@ const getPageData = async () => {
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 21px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
@ -740,7 +741,6 @@ const getPageData = async () => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -844,6 +844,7 @@ const getPageData = async () => {
|
||||
font-size: 14px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<!-- <img
|
||||
src="@/assets/image/historic-stock-375.png"
|
||||
alt="1"
|
||||
style="max-width: 100%; margin: 0 auto"
|
||||
/> -->
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
@ -83,202 +78,202 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
|
||||
import { reactive, onMounted, h, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from '@vicons/ionicons5'
|
||||
import defaultTableData from '../data'
|
||||
} from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
// console.log('defaultTableData', defaultTableData)
|
||||
import customEcharts from '@/components/customEcharts/index.vue'
|
||||
import customEcharts from "@/components/customEcharts/index.vue";
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: 'Daily', key: 'Daily' },
|
||||
{ label: 'Weekly', key: 'Weekly' },
|
||||
{ label: 'Monthly', key: 'Monthly' },
|
||||
{ label: 'Quarterly', key: 'Quarterly' },
|
||||
{ label: 'Annual', key: 'Annual' },
|
||||
]
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: '3 Months', key: '3 Months' },
|
||||
{ label: '6 Months', key: '6 Months' },
|
||||
{ label: 'Year to Date', key: 'Year to Date' },
|
||||
{ label: '1 Year', key: '1 Year' },
|
||||
{ label: '5 Years', key: '5 Years' },
|
||||
{ label: '10 Years', key: '10 Years' },
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
// { label: 'Full History', key: 'Full History', disabled: true },
|
||||
]
|
||||
];
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = [
|
||||
{ label: '50', key: 50 },
|
||||
{ label: '100', key: 100 },
|
||||
{ label: '500', key: 500 },
|
||||
{ label: '1000', key: 1000 },
|
||||
]
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
{ label: "1000", key: 1000 },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: 'Daily',
|
||||
selectedDuration: '6 Months',
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "6 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
})
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize)
|
||||
})
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算当前页的数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize
|
||||
const end = start + state.pageSize
|
||||
return state.tableData.slice(start, end)
|
||||
})
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return state.tableData.slice(start, end);
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
fixed: "left",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Open',
|
||||
key: 'open',
|
||||
align: 'center',
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'High',
|
||||
key: 'high',
|
||||
align: 'center',
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Low',
|
||||
key: 'low',
|
||||
align: 'center',
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Close',
|
||||
key: 'close',
|
||||
align: 'center',
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Adj. Close',
|
||||
key: 'adjClose',
|
||||
align: 'center',
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Change',
|
||||
key: 'change',
|
||||
align: 'center',
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change)
|
||||
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
|
||||
return h('span', { style: { color } }, row.change)
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Volume',
|
||||
key: 'volume',
|
||||
align: 'center',
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key
|
||||
if (key === 'Annual') {
|
||||
handleDurationChange('Full History')
|
||||
return
|
||||
state.selectedPeriod = key;
|
||||
if (key === "Annual") {
|
||||
handleDurationChange("Full History");
|
||||
return;
|
||||
}
|
||||
if (key === 'Monthly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Monthly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
if (key === 'Quarterly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Quarterly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
getPageData()
|
||||
}
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key
|
||||
state.currentPage = 1
|
||||
getPageData()
|
||||
}
|
||||
state.selectedDuration = key;
|
||||
state.currentPage = 1;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage--
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage++
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size
|
||||
state.currentPage = 1 // 重置到第一页
|
||||
}
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
// 1. 使用document.body
|
||||
document.body.scrollTop = 0
|
||||
document.body.scrollTop = 0;
|
||||
// 2. 使用document.documentElement (HTML元素)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.documentElement.scrollTop = 0;
|
||||
// 3. 使用scrollIntoView
|
||||
document.querySelector('.historic-data-container').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
})
|
||||
}
|
||||
document.querySelector(".historic-data-container").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageData()
|
||||
})
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
|
||||
const res = await axios.get(url)
|
||||
let originalData = res.data.data
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
||||
const res = await axios.get(url);
|
||||
let originalData = res.data.data;
|
||||
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let calcApiData = originalData.map((item) => [
|
||||
new Date(item[0]).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
new Date(item[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
item[1],
|
||||
])
|
||||
]);
|
||||
// console.log('接口数据', calcApiData)
|
||||
|
||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||
// 查找对应日期的API数据
|
||||
const matchedApiData = calcApiData.find(
|
||||
(apiItem) => apiItem[0] === tableItem.date,
|
||||
)
|
||||
(apiItem) => apiItem[0] === tableItem.date
|
||||
);
|
||||
|
||||
if (matchedApiData) {
|
||||
// 更新close和adjClose值
|
||||
@ -286,100 +281,100 @@ const getPageDefaultData = async () => {
|
||||
...tableItem,
|
||||
close: matchedApiData[1].toFixed(2),
|
||||
adjClose: matchedApiData[1].toFixed(2),
|
||||
}
|
||||
};
|
||||
}
|
||||
return tableItem
|
||||
})
|
||||
return tableItem;
|
||||
});
|
||||
|
||||
state.tableData = updatedTableData
|
||||
state.tableData = updatedTableData;
|
||||
} catch (error) {
|
||||
// console.error('获取数据失败', error)
|
||||
}
|
||||
}
|
||||
};
|
||||
const getPageData = async () => {
|
||||
let range = ''
|
||||
let now = new Date()
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
let fromDate = last
|
||||
let range = "";
|
||||
let now = new Date();
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
let fromDate = last;
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
'-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
if (state.selectedDuration === '3 Months') {
|
||||
range = '3M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 3)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '6 Months') {
|
||||
range = '6M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Year to Date') {
|
||||
range = 'YTD'
|
||||
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else if (state.selectedDuration === '1 Year') {
|
||||
range = '1Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 1)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '5 Years') {
|
||||
range = '5Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 5)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '10 Years') {
|
||||
range = '10Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 10)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Full History') {
|
||||
range = 'Max'
|
||||
fromDate = new Date('2009-10-07')
|
||||
"-" +
|
||||
String(now.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(now.getDate()).padStart(2, "0");
|
||||
if (state.selectedDuration === "3 Months") {
|
||||
range = "3M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 3);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "6 Months") {
|
||||
range = "6M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Year to Date") {
|
||||
range = "YTD";
|
||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
||||
} else if (state.selectedDuration === "1 Year") {
|
||||
range = "1Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 1);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "5 Years") {
|
||||
range = "5Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 5);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "10 Years") {
|
||||
range = "10Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 10);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Full History") {
|
||||
range = "Max";
|
||||
fromDate = new Date("2009-10-07");
|
||||
}
|
||||
let finalFromDate =
|
||||
fromDate.getFullYear() +
|
||||
'-' +
|
||||
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(fromDate.getDate()).padStart(2, '0')
|
||||
"-" +
|
||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(fromDate.getDate()).padStart(2, "0");
|
||||
// let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||
let url =
|
||||
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
||||
finalFromDate +
|
||||
'&to=' +
|
||||
toDate
|
||||
const res = await axios.get(url)
|
||||
"&to=" +
|
||||
toDate;
|
||||
const res = await axios.get(url);
|
||||
// console.error(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let resultData = res.data.data.map((item) => {
|
||||
return {
|
||||
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
date: new Date(item.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
change:
|
||||
item.changePercent != null
|
||||
? Number(item.changePercent).toFixed(2) + '%'
|
||||
: '',
|
||||
? Number(item.changePercent).toFixed(2) + "%"
|
||||
: "",
|
||||
volume: item.volume,
|
||||
}
|
||||
})
|
||||
state.tableData = resultData
|
||||
};
|
||||
});
|
||||
state.tableData = resultData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<!-- <img
|
||||
src="@/assets/image/historic-stock.png"
|
||||
alt="1"
|
||||
style="max-width: 100%; margin: 0 auto"
|
||||
/> -->
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
@ -85,202 +80,202 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
|
||||
import { reactive, onMounted, h, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from '@vicons/ionicons5'
|
||||
import defaultTableData from '../data'
|
||||
} from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
// console.log('defaultTableData', defaultTableData)
|
||||
import customEcharts from '@/components/customEcharts/index.vue'
|
||||
import customEcharts from "@/components/customEcharts/index.vue";
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: 'Daily', key: 'Daily' },
|
||||
{ label: 'Weekly', key: 'Weekly' },
|
||||
{ label: 'Monthly', key: 'Monthly' },
|
||||
{ label: 'Quarterly', key: 'Quarterly' },
|
||||
{ label: 'Annual', key: 'Annual' },
|
||||
]
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: '3 Months', key: '3 Months' },
|
||||
{ label: '6 Months', key: '6 Months' },
|
||||
{ label: 'Year to Date', key: 'Year to Date' },
|
||||
{ label: '1 Year', key: '1 Year' },
|
||||
{ label: '5 Years', key: '5 Years' },
|
||||
{ label: '10 Years', key: '10 Years' },
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
// { label: 'Full History', key: 'Full History', disabled: true },
|
||||
]
|
||||
];
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = [
|
||||
{ label: '50', key: 50 },
|
||||
{ label: '100', key: 100 },
|
||||
{ label: '500', key: 500 },
|
||||
{ label: '1000', key: 1000 },
|
||||
]
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
{ label: "1000", key: 1000 },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: 'Daily',
|
||||
selectedDuration: '6 Months',
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "6 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
})
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize)
|
||||
})
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算当前页的数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize
|
||||
const end = start + state.pageSize
|
||||
return state.tableData.slice(start, end)
|
||||
})
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return state.tableData.slice(start, end);
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
fixed: "left",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Open',
|
||||
key: 'open',
|
||||
align: 'center',
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'High',
|
||||
key: 'high',
|
||||
align: 'center',
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Low',
|
||||
key: 'low',
|
||||
align: 'center',
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Close',
|
||||
key: 'close',
|
||||
align: 'center',
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Adj. Close',
|
||||
key: 'adjClose',
|
||||
align: 'center',
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: 'Change',
|
||||
key: 'change',
|
||||
align: 'center',
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change)
|
||||
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
|
||||
return h('span', { style: { color } }, row.change)
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Volume',
|
||||
key: 'volume',
|
||||
align: 'center',
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key
|
||||
if (key === 'Annual') {
|
||||
handleDurationChange('Full History')
|
||||
return
|
||||
state.selectedPeriod = key;
|
||||
if (key === "Annual") {
|
||||
handleDurationChange("Full History");
|
||||
return;
|
||||
}
|
||||
if (key === 'Monthly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Monthly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
if (key === 'Quarterly') {
|
||||
handleDurationChange('10 Years')
|
||||
return
|
||||
if (key === "Quarterly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
getPageData()
|
||||
}
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key
|
||||
state.currentPage = 1
|
||||
getPageData()
|
||||
}
|
||||
state.selectedDuration = key;
|
||||
state.currentPage = 1;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage--
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
state.currentPage++
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size
|
||||
state.currentPage = 1 // 重置到第一页
|
||||
}
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
// 1. 使用document.body
|
||||
document.body.scrollTop = 0
|
||||
document.body.scrollTop = 0;
|
||||
// 2. 使用document.documentElement (HTML元素)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.documentElement.scrollTop = 0;
|
||||
// 3. 使用scrollIntoView
|
||||
document.querySelector('.historic-data-container').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
})
|
||||
}
|
||||
document.querySelector(".historic-data-container").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageData()
|
||||
})
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M'
|
||||
const res = await axios.get(url)
|
||||
let originalData = res.data.data
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
||||
const res = await axios.get(url);
|
||||
let originalData = res.data.data;
|
||||
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let calcApiData = originalData.map((item) => [
|
||||
new Date(item[0]).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
new Date(item[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
item[1],
|
||||
])
|
||||
]);
|
||||
// console.log('接口数据', calcApiData)
|
||||
|
||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||
// 查找对应日期的API数据
|
||||
const matchedApiData = calcApiData.find(
|
||||
(apiItem) => apiItem[0] === tableItem.date,
|
||||
)
|
||||
(apiItem) => apiItem[0] === tableItem.date
|
||||
);
|
||||
|
||||
if (matchedApiData) {
|
||||
// 更新close和adjClose值
|
||||
@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
|
||||
...tableItem,
|
||||
close: matchedApiData[1].toFixed(2),
|
||||
adjClose: matchedApiData[1].toFixed(2),
|
||||
}
|
||||
};
|
||||
}
|
||||
return tableItem
|
||||
})
|
||||
return tableItem;
|
||||
});
|
||||
|
||||
state.tableData = updatedTableData
|
||||
state.tableData = updatedTableData;
|
||||
} catch (error) {
|
||||
// console.error('获取数据失败', error)
|
||||
}
|
||||
}
|
||||
};
|
||||
const getPageData = async () => {
|
||||
let range = ''
|
||||
let now = new Date()
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
let fromDate = last
|
||||
let range = "";
|
||||
let now = new Date();
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
let fromDate = last;
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
'-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
if (state.selectedDuration === '3 Months') {
|
||||
range = '3M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 3)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '6 Months') {
|
||||
range = '6M'
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 6)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Year to Date') {
|
||||
range = 'YTD'
|
||||
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||
} else if (state.selectedDuration === '1 Year') {
|
||||
range = '1Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 1)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '5 Years') {
|
||||
range = '5Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 5)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === '10 Years') {
|
||||
range = '10Y'
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 10)
|
||||
fromDate = last
|
||||
} else if (state.selectedDuration === 'Full History') {
|
||||
range = 'Max'
|
||||
fromDate = new Date('2009-10-07')
|
||||
"-" +
|
||||
String(now.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(now.getDate()).padStart(2, "0");
|
||||
if (state.selectedDuration === "3 Months") {
|
||||
range = "3M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 3);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "6 Months") {
|
||||
range = "6M";
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 6);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Year to Date") {
|
||||
range = "YTD";
|
||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
||||
} else if (state.selectedDuration === "1 Year") {
|
||||
range = "1Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 1);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "5 Years") {
|
||||
range = "5Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 5);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "10 Years") {
|
||||
range = "10Y";
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 10);
|
||||
fromDate = last;
|
||||
} else if (state.selectedDuration === "Full History") {
|
||||
range = "Max";
|
||||
fromDate = new Date("2009-10-07");
|
||||
}
|
||||
let finalFromDate =
|
||||
fromDate.getFullYear() +
|
||||
'-' +
|
||||
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(fromDate.getDate()).padStart(2, '0')
|
||||
"-" +
|
||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(fromDate.getDate()).padStart(2, "0");
|
||||
// let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||
let url =
|
||||
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
||||
finalFromDate +
|
||||
'&to=' +
|
||||
toDate
|
||||
const res = await axios.get(url)
|
||||
"&to=" +
|
||||
toDate;
|
||||
const res = await axios.get(url);
|
||||
// console.error(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let resultData = res.data.data.map((item) => {
|
||||
return {
|
||||
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
date: new Date(item.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
||||
change:
|
||||
item.changePercent != null
|
||||
? Number(item.changePercent).toFixed(2) + '%'
|
||||
: '',
|
||||
? Number(item.changePercent).toFixed(2) + "%"
|
||||
: "",
|
||||
volume: item.volume,
|
||||
}
|
||||
})
|
||||
state.tableData = resultData
|
||||
};
|
||||
});
|
||||
state.tableData = resultData;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,233 +1,546 @@
|
||||
<script setup>
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
console.log(stockQuote);
|
||||
getStockQuate();
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="stock-quote-hero">
|
||||
<div class="hero-content">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="stock-title">Stock Quote</div>
|
||||
<div class="page-container">
|
||||
<section class="hero-section relative">
|
||||
<div class="hero-content">
|
||||
<div class="hero-title">
|
||||
More than just a tool——<br />
|
||||
Comprehensive growth solutions, <br />
|
||||
providing a one-stop solution for content creation,<br />
|
||||
publishing, analysis, and monetization
|
||||
</div>
|
||||
</div>
|
||||
<section class="quote-layout">
|
||||
<article class="price-card">
|
||||
<div class="price-value">${{ stockQuote.price }}</div>
|
||||
<div class="price-market">NASDAQ: FIEE</div>
|
||||
<div class="price-time">{{ formatted }}</div>
|
||||
</article>
|
||||
<div class="stats-table">
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Open</span>
|
||||
<span class="stat-value">{{ stockQuote.open }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">% Change</span>
|
||||
<span
|
||||
class="stat-value"
|
||||
:class="
|
||||
stockQuote.change
|
||||
? String(stockQuote.change).includes('-')
|
||||
? 'negative-change'
|
||||
: String(stockQuote.change).includes('+')
|
||||
? 'positive-change'
|
||||
: 'neutral-change'
|
||||
: 'neutral-change'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Day's Range</span>
|
||||
<span class="stat-value">{{ stockQuote.daysRange }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">52-Week Range</span>
|
||||
<span class="stat-value">{{ stockQuote.week52Range }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Volume</span>
|
||||
<span class="stat-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
<div class="stats-cell">
|
||||
<span class="stat-title">Market Cap</span>
|
||||
<span class="stat-value">{{ stockQuote.marketCap }}</span>
|
||||
<div class="core-value-card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Core Value</div>
|
||||
<div class="card-text">
|
||||
The FIEE-SAAS platform is a one-stop content operation solution
|
||||
tailored for creators in the digital era. The platform utilizes
|
||||
intelligent distribution technology, A1 empowerment tools, and
|
||||
full-chain services,Assist you in efficiently reaching audiences on
|
||||
global mainstream platforms such as TikTok, YouTube, and Instagram,
|
||||
creating a KOL brand effect, unlocking content value, and achieving
|
||||
sustainable growth.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img2.png"
|
||||
alt="background"
|
||||
class="hero-bg-img"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="features-section">
|
||||
<div class="section-header">
|
||||
<div class="decorator-bar"></div>
|
||||
<div class="section-title">Product Features</div>
|
||||
</div>
|
||||
<div class="features-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
One-click Synchronous Publishing
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Synchronize graphic and video content to TikTok, YouTube, and
|
||||
Instagram platforms at once, saving time on repetitive operations.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Intelligent Scheduled Publishing
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Plan the content release time in advance, support batch scheduling,
|
||||
and accurately grasp the optimal release time of each platform.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Unified Management of Multiple Accounts
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Easily manage multiple accounts on one platform without the need for
|
||||
repeated login and switching, improving team collaboration
|
||||
efficiency.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Cloud Content Library
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Safely store and manage all creative materials, access and use them
|
||||
anytime, anywhere, and support quick retrieval and reuse.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-title">
|
||||
<div class="vertical-line"></div>
|
||||
Basic Data Tracking
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
Visually view the content performance of various platforms,
|
||||
understand core data indicators, and provide a basis for optimizing
|
||||
strategies.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="solutions-section">
|
||||
<div class="section-header">
|
||||
<div class="decorator-bar"></div>
|
||||
<div class="section-title">Value Added Solutions</div>
|
||||
</div>
|
||||
<div class="solutions-content">
|
||||
<div class="solutions-list">
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon1.png"
|
||||
alt="KOL Brand Promotion"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
KOL Brand Promotion Services
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
Efficiently connect high-quality business cooperation
|
||||
opportunities and complete the entire process management from
|
||||
order acceptance to publication within the platform.
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon2.png"
|
||||
alt="Content Creation Support"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
Professional Content Creation Support
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
Connect professional shooting and post production teams for you,
|
||||
create high-quality "art+story" content, and strengthen IP
|
||||
influence.
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-icon3.png"
|
||||
alt="Account Operation"
|
||||
class="solution-icon"
|
||||
/>
|
||||
<div class="solution-title">
|
||||
<div class="vertical-line"></div>
|
||||
Account Operation and Hosting Services
|
||||
</div>
|
||||
<div class="solution-description">
|
||||
From 0 to 1 account positioning, follower growth strategy to
|
||||
monetization cycle, operation experts provide full cycle running
|
||||
and hosting services.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-image-container">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img1.png"
|
||||
alt="Value Added Solutions"
|
||||
class="solution-image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="advantages-section">
|
||||
<div class="advantages-content">
|
||||
<div class="advantages-header">
|
||||
<div class="decorator-bar"></div>
|
||||
<div class="section-title text-white">Our Advantages</div>
|
||||
</div>
|
||||
<div class="advantages-list">
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Time Saving
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Multi platform publishing efficiency improvement, allowing you to
|
||||
focus on content creation.
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Safe and Reliable
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Enterprise level data encryption and permission control ensure
|
||||
account and content security.
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Maintain Consistency
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Ensure that brand information is presented uniformly on all
|
||||
platforms.
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Data Driven
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Optimizing Content Strategies Based on Actual Performance.
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-title">
|
||||
<div class="vertical-line"></div>
|
||||
Easy to Use
|
||||
</div>
|
||||
<div class="advantage-description">
|
||||
Intuitive interface design, no need for professional technical
|
||||
background.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img5.png"
|
||||
alt="background"
|
||||
class="cta-bg-img"
|
||||
/>
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="60"
|
||||
height="32"
|
||||
viewBox="0 0 60 32"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M42.4968 0.636391C43.3437 -0.21213 44.7165 -0.21213 45.5635 0.636391L59.3648 14.4638C60.2117 15.3123 60.2117 16.6877 59.3648 17.5362L45.5635 31.3636C44.7165 32.2121 43.3437 32.2121 42.4968 31.3636C41.6499 30.5151 41.6499 29.1397 42.4968 28.2912L52.5962 18.1728H2.16868C0.970951 18.1728 0 17.2 0 16C0 14.8 0.970951 13.8272 2.16868 13.8272H52.5962L42.4968 3.70883C41.6499 2.86031 41.6499 1.48491 42.4968 0.636391Z"
|
||||
fill="#FF7BAC"
|
||||
/>
|
||||
</svg>
|
||||
<div class="cta-title">
|
||||
Get customized <br />
|
||||
solutions for free
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-qr-code">
|
||||
<img
|
||||
src="@/assets/image/product-introduction-img6.png"
|
||||
alt="QR Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stock-quote-hero {
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
/* max-width: 932px; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-image: url("@/assets/image/product-introduction-img3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.hero-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.title-decoration {
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 43px;
|
||||
}
|
||||
|
||||
.stock-title {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 40px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 3%;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.gradient-badge {
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background: #e62968;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #0d1b2a;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
padding: 153px 0;
|
||||
color: #000;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-bg-img {
|
||||
position: absolute;
|
||||
bottom: -84px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
z-index: 1;
|
||||
}
|
||||
.core-value-card {
|
||||
width: 932px;
|
||||
padding: 40px 32px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 420px 1fr;
|
||||
align-items: start;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.price-card {
|
||||
width: 420px;
|
||||
min-height: 420px;
|
||||
border-radius: 32px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f0f3f8;
|
||||
box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.decorator-bar {
|
||||
width: 58px;
|
||||
height: 7px;
|
||||
background-color: #ff7bac;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #000;
|
||||
}
|
||||
.features-section {
|
||||
padding-top: 200px;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.feature-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 110px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-transform: uppercase;
|
||||
.solutions-section {
|
||||
padding-top: 80px;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.solutions-content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.solutions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: 466px;
|
||||
}
|
||||
.solution-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.solution-icon {
|
||||
width: 92px;
|
||||
height: 76px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.solution-title {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.solution-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #455363;
|
||||
letter-spacing: 0.48px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.solution-image-container {
|
||||
width: 434px;
|
||||
height: 628px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.solution-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.price-market {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0d1b2a;
|
||||
margin-bottom: 12px;
|
||||
.advantages-section {
|
||||
margin-top: 80px;
|
||||
padding: 80px 0;
|
||||
background-image: url("@/assets/image/product-introduction-img4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.price-time {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.02em;
|
||||
color: #5a6775;
|
||||
.advantages-content {
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
border-radius: 24px;
|
||||
.advantages-header {
|
||||
width: 466px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.advantages-list {
|
||||
width: 466px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.advantage-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.advantage-description {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.48px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.text-white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
max-width: 932px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-cell {
|
||||
.cta-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.cta-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 24px 32px;
|
||||
border-bottom: 1px solid rgba(232, 237, 245, 0.85);
|
||||
border-right: 1px solid rgba(232, 237, 245, 0.85);
|
||||
justify-content: space-between;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
.stats-cell:nth-child(2n) {
|
||||
border-right: none;
|
||||
.cta-arrow {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.stats-cell:nth-last-child(-n + 2) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 14px;
|
||||
.cta-title {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #73849a;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #10243b;
|
||||
.cta-qr-code {
|
||||
width: 188px;
|
||||
height: 188px;
|
||||
background-color: #90ffff;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
color: #455363;
|
||||
.cta-qr-code img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0d1b2a;
|
||||
.cta-bg-img {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 201px;
|
||||
width: 530px;
|
||||
height: 268px;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.positive-change {
|
||||
color: #00c48c;
|
||||
}
|
||||
|
||||
.negative-change {
|
||||
color: #cf3050;
|
||||
}
|
||||
|
||||
.neutral-change {
|
||||
color: #0d1b2a;
|
||||
.vertical-line {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #ff7bac;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user