Compare commits
No commits in common. "7b4d234c48578bf71ef87912dc045c7a27937722" and "fd8b03ad3e1e78248d3fe42addd28180fa7e58a3" have entirely different histories.
7b4d234c48
...
fd8b03ad3e
BIN
src/assets/image/historic-stock-375.png
Normal file
BIN
src/assets/image/historic-stock-375.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/image/historic-stock.png
Normal file
BIN
src/assets/image/historic-stock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@ -149,7 +149,6 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: "/product-introduction",
|
path: "/product-introduction",
|
||||||
name: "product-introduction",
|
name: "product-introduction",
|
||||||
meta: { bg: 'null' },
|
|
||||||
component: () => import("@/views/product-introduction/index.vue"),
|
component: () => import("@/views/product-introduction/index.vue"),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -658,7 +658,7 @@ onUnmounted(() => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
@ -675,7 +675,7 @@ onUnmounted(() => {
|
|||||||
.pagination-controls {
|
.pagination-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-buttons {
|
.pagination-buttons {
|
||||||
@ -787,7 +787,6 @@ onUnmounted(() => {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.428em;
|
line-height: 1.428em;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
margin-right: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goto-input {
|
.goto-input {
|
||||||
|
|||||||
@ -1,142 +1,150 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<header></header>
|
||||||
<!-- 标题区域 -->
|
<main class="page-container">
|
||||||
<div class="title-section">
|
<div class="financials-container">
|
||||||
<div class="title-decoration"></div>
|
<!-- 标题区域 -->
|
||||||
<div class="financials-title">
|
<div class="title-section">
|
||||||
{{ t("financialinformation.quarterlyreports.title") }}
|
<div class="title-decoration"></div>
|
||||||
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.quarterlyreports.title") }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 搜索区域 -->
|
<!-- 搜索区域 -->
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
:placeholder="
|
:placeholder="
|
||||||
t('financialinformation.quarterlyreports.search.placeholder')
|
t('financialinformation.quarterlyreports.search.placeholder')
|
||||||
"
|
"
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
class="search-input"
|
class="search-input"
|
||||||
/>
|
/>
|
||||||
<button class="search-button" @click="handleSearch">
|
<button class="search-button" @click="handleSearch">
|
||||||
{{ t("financialinformation.quarterlyreports.search.button") }}
|
{{ t("financialinformation.quarterlyreports.search.button") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 报告列表 -->
|
<!-- 报告列表 -->
|
||||||
<div class="reports-table">
|
<div class="reports-table">
|
||||||
<div class="reports-list">
|
<div class="reports-list">
|
||||||
<div v-for="(item, index) in pagedList" :key="index" class="table-row">
|
<div
|
||||||
<div class="content">
|
v-for="(item, index) in pagedList"
|
||||||
<div class="file-content">
|
:key="index"
|
||||||
<div class="file-info">
|
class="table-row"
|
||||||
<div class="vertical-line"></div>
|
>
|
||||||
<p class="file-title">{{ item.title }}</p>
|
<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>
|
||||||
<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>
|
||||||
|
<div class="separator-line"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="separator-line"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 分页器 -->
|
||||||
<div class="pagination-container">
|
<div class="pagination-container">
|
||||||
<div class="pagination-info">
|
<div class="pagination-info">
|
||||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||||
{{ state.total }} results
|
{{ state.total }} results
|
||||||
</div>
|
</div>
|
||||||
<div class="pagination-controls">
|
<div class="pagination-controls">
|
||||||
<div class="pagination-buttons">
|
<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
|
<button
|
||||||
v-if="page !== '...'"
|
class="page-btn prev-btn"
|
||||||
class="page-btn"
|
:disabled="state.currentPage === 1"
|
||||||
:class="{ active: page === state.currentPage }"
|
@click="goToPrevPage"
|
||||||
@click="goToPage(page)"
|
|
||||||
>
|
>
|
||||||
{{ page }}
|
<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>
|
</button>
|
||||||
<button v-else class="page-btn disabled" disabled>...</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<button
|
<!-- 动态生成页码按钮 -->
|
||||||
class="page-btn next-btn"
|
<template v-for="page in getVisiblePages()" :key="page">
|
||||||
:disabled="state.currentPage === totalPages"
|
<button
|
||||||
@click="goToNextPage"
|
v-if="page !== '...'"
|
||||||
>
|
class="page-btn"
|
||||||
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
: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
|
<path
|
||||||
d="M1 1L4 4.5L1 8"
|
d="M1 1L5 4L9 1"
|
||||||
stroke="#455363"
|
stroke="#455363"
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
<!-- 页面大小选择菜单 -->
|
||||||
</div>
|
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||||
<div class="page-size-selector" @click="togglePageSizeMenu">
|
<div
|
||||||
<span>{{ state.pageSize }}/page</span>
|
v-for="size in [10, 20, 50]"
|
||||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
:key="size"
|
||||||
<path
|
class="page-size-option"
|
||||||
d="M1 1L5 4L9 1"
|
:class="{ active: state.pageSize === size }"
|
||||||
stroke="#455363"
|
@click="changePageSize(size)"
|
||||||
stroke-width="1.5"
|
>
|
||||||
stroke-linecap="round"
|
{{ size }}/page
|
||||||
stroke-linejoin="round"
|
</div>
|
||||||
/>
|
|
||||||
</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>
|
</div>
|
||||||
</div>
|
<div class="goto-section">
|
||||||
<div class="goto-section">
|
<span>Goto</span>
|
||||||
<span>Goto</span>
|
<input
|
||||||
<input
|
type="number"
|
||||||
type="number"
|
v-model="state.gotoPage"
|
||||||
v-model="state.gotoPage"
|
class="goto-input"
|
||||||
class="goto-input"
|
:min="1"
|
||||||
:min="1"
|
:max="totalPages"
|
||||||
:max="totalPages"
|
@keyup.enter="handleGoto"
|
||||||
@keyup.enter="handleGoto"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
<footer></footer>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
|
import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
|
||||||
@ -340,6 +348,12 @@ const handleClickOutside = (event) => {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.page-container {
|
.page-container {
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.financials-container {
|
||||||
max-width: 932px;
|
max-width: 932px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@ -539,7 +553,7 @@ const handleClickOutside = (event) => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
@ -556,7 +570,7 @@ const handleClickOutside = (event) => {
|
|||||||
.pagination-controls {
|
.pagination-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-buttons {
|
.pagination-buttons {
|
||||||
@ -668,7 +682,6 @@ const handleClickOutside = (event) => {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.428em;
|
line-height: 1.428em;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
margin-right: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goto-input {
|
.goto-input {
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
<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">
|
<div class="echarts-container">
|
||||||
<customEcharts></customEcharts>
|
<customEcharts></customEcharts>
|
||||||
</div>
|
</div>
|
||||||
@ -80,202 +85,202 @@
|
|||||||
</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";
|
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: "6 Months",
|
selectedDuration: '6 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
|
||||||
state.currentPage = 1;
|
state.currentPage = 1
|
||||||
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值
|
||||||
@ -283,100 +288,100 @@ 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 = ''
|
||||||
let now = new Date();
|
let now = new Date()
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
let fromDate = last;
|
let fromDate = last
|
||||||
let toDate =
|
let toDate =
|
||||||
now.getFullYear() +
|
now.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getMonth() + 1).padStart(2, "0") +
|
String(now.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getDate()).padStart(2, "0");
|
String(now.getDate()).padStart(2, '0')
|
||||||
if (state.selectedDuration === "3 Months") {
|
if (state.selectedDuration === '3 Months') {
|
||||||
range = "3M";
|
range = '3M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 3);
|
last.setMonth(now.getMonth() - 3)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "6 Months") {
|
} else if (state.selectedDuration === '6 Months') {
|
||||||
range = "6M";
|
range = '6M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Year to Date") {
|
} else if (state.selectedDuration === 'Year to Date') {
|
||||||
range = "YTD";
|
range = 'YTD'
|
||||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||||
} else if (state.selectedDuration === "1 Year") {
|
} else if (state.selectedDuration === '1 Year') {
|
||||||
range = "1Y";
|
range = '1Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 1);
|
last.setFullYear(now.getFullYear() - 1)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "5 Years") {
|
} else if (state.selectedDuration === '5 Years') {
|
||||||
range = "5Y";
|
range = '5Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 5);
|
last.setFullYear(now.getFullYear() - 5)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "10 Years") {
|
} else if (state.selectedDuration === '10 Years') {
|
||||||
range = "10Y";
|
range = '10Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 10);
|
last.setFullYear(now.getFullYear() - 10)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Full History") {
|
} else if (state.selectedDuration === 'Full History') {
|
||||||
range = "Max";
|
range = 'Max'
|
||||||
fromDate = new Date("2009-10-07");
|
fromDate = new Date('2009-10-07')
|
||||||
}
|
}
|
||||||
let finalFromDate =
|
let finalFromDate =
|
||||||
fromDate.getFullYear() +
|
fromDate.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||||
let url =
|
let url =
|
||||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||||
finalFromDate +
|
finalFromDate +
|
||||||
"&to=" +
|
'&to=' +
|
||||||
toDate;
|
toDate
|
||||||
const res = await axios.get(url);
|
const res = await axios.get(url)
|
||||||
// console.error(res)
|
// console.error(res)
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
if (res.data.status === 0) {
|
if (res.data.status === 0) {
|
||||||
// 转换为日期格式："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.date).toLocaleDateString("en-US", {
|
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||||
month: "short",
|
month: 'short',
|
||||||
day: "numeric",
|
day: 'numeric',
|
||||||
year: "numeric",
|
year: 'numeric',
|
||||||
}),
|
}),
|
||||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
change:
|
change:
|
||||||
item.changePercent != null
|
item.changePercent != null
|
||||||
? Number(item.changePercent).toFixed(2) + "%"
|
? Number(item.changePercent).toFixed(2) + '%'
|
||||||
: "",
|
: '',
|
||||||
volume: item.volume,
|
volume: item.volume,
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
state.tableData = resultData;
|
state.tableData = resultData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container">
|
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||||
<div class="echarts-container">
|
<div class="echarts-container">
|
||||||
<customEcharts></customEcharts>
|
<customEcharts></customEcharts>
|
||||||
</div>
|
</div>
|
||||||
@ -715,9 +715,8 @@ const getPageData = async () => {
|
|||||||
.pagination-container {
|
.pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
justify-content: flex-end;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -733,7 +732,7 @@ const getPageData = async () => {
|
|||||||
.pagination-controls {
|
.pagination-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-buttons {
|
.pagination-buttons {
|
||||||
@ -741,6 +740,7 @@ const getPageData = async () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btn {
|
.page-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -844,7 +844,6 @@ const getPageData = async () => {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.428em;
|
line-height: 1.428em;
|
||||||
color: #455363;
|
color: #455363;
|
||||||
margin-right: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.goto-input {
|
.goto-input {
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
<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">
|
<div class="echarts-container">
|
||||||
<customEcharts></customEcharts>
|
<customEcharts></customEcharts>
|
||||||
</div>
|
</div>
|
||||||
@ -78,202 +83,202 @@
|
|||||||
</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";
|
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: "6 Months",
|
selectedDuration: '6 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
|
||||||
state.currentPage = 1;
|
state.currentPage = 1
|
||||||
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值
|
||||||
@ -281,100 +286,100 @@ 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 = ''
|
||||||
let now = new Date();
|
let now = new Date()
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
let fromDate = last;
|
let fromDate = last
|
||||||
let toDate =
|
let toDate =
|
||||||
now.getFullYear() +
|
now.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getMonth() + 1).padStart(2, "0") +
|
String(now.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getDate()).padStart(2, "0");
|
String(now.getDate()).padStart(2, '0')
|
||||||
if (state.selectedDuration === "3 Months") {
|
if (state.selectedDuration === '3 Months') {
|
||||||
range = "3M";
|
range = '3M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 3);
|
last.setMonth(now.getMonth() - 3)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "6 Months") {
|
} else if (state.selectedDuration === '6 Months') {
|
||||||
range = "6M";
|
range = '6M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Year to Date") {
|
} else if (state.selectedDuration === 'Year to Date') {
|
||||||
range = "YTD";
|
range = 'YTD'
|
||||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||||
} else if (state.selectedDuration === "1 Year") {
|
} else if (state.selectedDuration === '1 Year') {
|
||||||
range = "1Y";
|
range = '1Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 1);
|
last.setFullYear(now.getFullYear() - 1)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "5 Years") {
|
} else if (state.selectedDuration === '5 Years') {
|
||||||
range = "5Y";
|
range = '5Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 5);
|
last.setFullYear(now.getFullYear() - 5)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "10 Years") {
|
} else if (state.selectedDuration === '10 Years') {
|
||||||
range = "10Y";
|
range = '10Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 10);
|
last.setFullYear(now.getFullYear() - 10)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Full History") {
|
} else if (state.selectedDuration === 'Full History') {
|
||||||
range = "Max";
|
range = 'Max'
|
||||||
fromDate = new Date("2009-10-07");
|
fromDate = new Date('2009-10-07')
|
||||||
}
|
}
|
||||||
let finalFromDate =
|
let finalFromDate =
|
||||||
fromDate.getFullYear() +
|
fromDate.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||||
let url =
|
let url =
|
||||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||||
finalFromDate +
|
finalFromDate +
|
||||||
"&to=" +
|
'&to=' +
|
||||||
toDate;
|
toDate
|
||||||
const res = await axios.get(url);
|
const res = await axios.get(url)
|
||||||
// console.error(res)
|
// console.error(res)
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
if (res.data.status === 0) {
|
if (res.data.status === 0) {
|
||||||
// 转换为日期格式："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.date).toLocaleDateString("en-US", {
|
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||||
month: "short",
|
month: 'short',
|
||||||
day: "numeric",
|
day: 'numeric',
|
||||||
year: "numeric",
|
year: 'numeric',
|
||||||
}),
|
}),
|
||||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
change:
|
change:
|
||||||
item.changePercent != null
|
item.changePercent != null
|
||||||
? Number(item.changePercent).toFixed(2) + "%"
|
? Number(item.changePercent).toFixed(2) + '%'
|
||||||
: "",
|
: '',
|
||||||
volume: item.volume,
|
volume: item.volume,
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
state.tableData = resultData;
|
state.tableData = resultData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
<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">
|
<div class="echarts-container">
|
||||||
<customEcharts></customEcharts>
|
<customEcharts></customEcharts>
|
||||||
</div>
|
</div>
|
||||||
@ -80,202 +85,202 @@
|
|||||||
</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";
|
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: "6 Months",
|
selectedDuration: '6 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
|
||||||
state.currentPage = 1;
|
state.currentPage = 1
|
||||||
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值
|
||||||
@ -283,100 +288,100 @@ 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 = ''
|
||||||
let now = new Date();
|
let now = new Date()
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
let fromDate = last;
|
let fromDate = last
|
||||||
let toDate =
|
let toDate =
|
||||||
now.getFullYear() +
|
now.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getMonth() + 1).padStart(2, "0") +
|
String(now.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(now.getDate()).padStart(2, "0");
|
String(now.getDate()).padStart(2, '0')
|
||||||
if (state.selectedDuration === "3 Months") {
|
if (state.selectedDuration === '3 Months') {
|
||||||
range = "3M";
|
range = '3M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 3);
|
last.setMonth(now.getMonth() - 3)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "6 Months") {
|
} else if (state.selectedDuration === '6 Months') {
|
||||||
range = "6M";
|
range = '6M'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setMonth(now.getMonth() - 6);
|
last.setMonth(now.getMonth() - 6)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Year to Date") {
|
} else if (state.selectedDuration === 'Year to Date') {
|
||||||
range = "YTD";
|
range = 'YTD'
|
||||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
fromDate = new Date(now.getFullYear(), 0, 1)
|
||||||
} else if (state.selectedDuration === "1 Year") {
|
} else if (state.selectedDuration === '1 Year') {
|
||||||
range = "1Y";
|
range = '1Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 1);
|
last.setFullYear(now.getFullYear() - 1)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "5 Years") {
|
} else if (state.selectedDuration === '5 Years') {
|
||||||
range = "5Y";
|
range = '5Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 5);
|
last.setFullYear(now.getFullYear() - 5)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "10 Years") {
|
} else if (state.selectedDuration === '10 Years') {
|
||||||
range = "10Y";
|
range = '10Y'
|
||||||
const last = new Date(now);
|
const last = new Date(now)
|
||||||
last.setFullYear(now.getFullYear() - 10);
|
last.setFullYear(now.getFullYear() - 10)
|
||||||
fromDate = last;
|
fromDate = last
|
||||||
} else if (state.selectedDuration === "Full History") {
|
} else if (state.selectedDuration === 'Full History') {
|
||||||
range = "Max";
|
range = 'Max'
|
||||||
fromDate = new Date("2009-10-07");
|
fromDate = new Date('2009-10-07')
|
||||||
}
|
}
|
||||||
let finalFromDate =
|
let finalFromDate =
|
||||||
fromDate.getFullYear() +
|
fromDate.getFullYear() +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
String(fromDate.getMonth() + 1).padStart(2, '0') +
|
||||||
"-" +
|
'-' +
|
||||||
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
|
||||||
let url =
|
let url =
|
||||||
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
'https://common.szjixun.cn/api/stock/history/list?from=' +
|
||||||
finalFromDate +
|
finalFromDate +
|
||||||
"&to=" +
|
'&to=' +
|
||||||
toDate;
|
toDate
|
||||||
const res = await axios.get(url);
|
const res = await axios.get(url)
|
||||||
// console.error(res)
|
// console.error(res)
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
if (res.data.status === 0) {
|
if (res.data.status === 0) {
|
||||||
// 转换为日期格式："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.date).toLocaleDateString("en-US", {
|
date: new Date(item.date).toLocaleDateString('en-US', {
|
||||||
month: "short",
|
month: 'short',
|
||||||
day: "numeric",
|
day: 'numeric',
|
||||||
year: "numeric",
|
year: 'numeric',
|
||||||
}),
|
}),
|
||||||
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
open: item.open != null ? Number(item.open).toFixed(2) : '',
|
||||||
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
high: item.high != null ? Number(item.high).toFixed(2) : '',
|
||||||
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
low: item.low != null ? Number(item.low).toFixed(2) : '',
|
||||||
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
close: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
adjClose: item.close != null ? Number(item.close).toFixed(2) : '',
|
||||||
change:
|
change:
|
||||||
item.changePercent != null
|
item.changePercent != null
|
||||||
? Number(item.changePercent).toFixed(2) + "%"
|
? Number(item.changePercent).toFixed(2) + '%'
|
||||||
: "",
|
: '',
|
||||||
volume: item.volume,
|
volume: item.volume,
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
state.tableData = resultData;
|
state.tableData = resultData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -1,546 +1,233 @@
|
|||||||
<script setup></script>
|
<script setup>
|
||||||
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
|
console.log(stockQuote);
|
||||||
|
getStockQuate();
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<main ref="main" class="stock-quote-hero">
|
||||||
<section class="hero-section relative">
|
<div class="hero-content">
|
||||||
<div class="hero-content">
|
<!-- 标题区域 -->
|
||||||
<div class="hero-title">
|
<div class="title-section">
|
||||||
More than just a tool——<br />
|
<div class="title-decoration"></div>
|
||||||
Comprehensive growth solutions, <br />
|
<div class="stock-title">Stock Quote</div>
|
||||||
providing a one-stop solution for content creation,<br />
|
|
||||||
publishing, analysis, and monetization
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="core-value-card">
|
<section class="quote-layout">
|
||||||
<div class="card-content">
|
<article class="price-card">
|
||||||
<div class="card-title">Core Value</div>
|
<div class="price-value">${{ stockQuote.price }}</div>
|
||||||
<div class="card-text">
|
<div class="price-market">NASDAQ: FIEE</div>
|
||||||
The FIEE-SAAS platform is a one-stop content operation solution
|
<div class="price-time">{{ formatted }}</div>
|
||||||
tailored for creators in the digital era. The platform utilizes
|
</article>
|
||||||
intelligent distribution technology, A1 empowerment tools, and
|
<div class="stats-table">
|
||||||
full-chain services,Assist you in efficiently reaching audiences on
|
<div class="stats-cell">
|
||||||
global mainstream platforms such as TikTok, YouTube, and Instagram,
|
<span class="stat-title">Open</span>
|
||||||
creating a KOL brand effect, unlocking content value, and achieving
|
<span class="stat-value">{{ stockQuote.open }}</span>
|
||||||
sustainable growth.
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<img
|
</div>
|
||||||
src="@/assets/image/product-introduction-img2.png"
|
</main>
|
||||||
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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-container {
|
.stock-quote-hero {
|
||||||
background-color: #fff;
|
|
||||||
font-family: "PingFang SC", sans-serif;
|
|
||||||
/* max-width: 932px; */
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
background-image: url("@/assets/image/product-introduction-img3.png");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% auto;
|
|
||||||
background-position: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
.hero-content {
|
||||||
position: relative;
|
max-width: 1200px;
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
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;
|
margin: 0 auto;
|
||||||
background-color: #fff;
|
padding: 0 16px;
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
|
||||||
text-align: left;
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content {
|
.hero-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
.title-section {
|
||||||
.card-title {
|
display: flex;
|
||||||
font-size: 40px;
|
flex-direction: column;
|
||||||
font-weight: 500;
|
gap: 16px;
|
||||||
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;
|
margin-bottom: 32px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
.title-decoration {
|
||||||
.decorator-bar {
|
|
||||||
width: 58px;
|
width: 58px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
background-color: #ff7bac;
|
background: #ff7bac;
|
||||||
margin-bottom: 16px;
|
margin: auto 0;
|
||||||
|
margin-top: 43px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.stock-title {
|
||||||
|
font-family: "PingFang SC", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: 500;
|
line-height: 1.4em;
|
||||||
line-height: 56px;
|
letter-spacing: 3%;
|
||||||
letter-spacing: 1.2px;
|
color: #000000;
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.features-section {
|
|
||||||
padding-top: 200px;
|
|
||||||
max-width: 932px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.features-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item {
|
.gradient-badge {
|
||||||
display: flex;
|
width: 48px;
|
||||||
flex-direction: column;
|
height: 4px;
|
||||||
gap: 16px;
|
border-radius: 4px;
|
||||||
|
background: #e62968;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-title {
|
.hero-title {
|
||||||
font-size: 24px;
|
font-size: 32px;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
line-height: 32px;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 1.2px;
|
color: #0d1b2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
padding: 16px;
|
||||||
}
|
text-align: center;
|
||||||
.feature-description {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #455363;
|
|
||||||
letter-spacing: 0.48px;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.solutions-section {
|
.price-value {
|
||||||
padding-top: 80px;
|
font-size: 110px;
|
||||||
max-width: 932px;
|
font-weight: 700;
|
||||||
margin: 0 auto;
|
letter-spacing: -0.03em;
|
||||||
}
|
background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
|
||||||
.solutions-content {
|
-webkit-background-clip: text;
|
||||||
display: flex;
|
-webkit-text-fill-color: transparent;
|
||||||
gap: 16px;
|
text-transform: uppercase;
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages-section {
|
.price-market {
|
||||||
margin-top: 80px;
|
font-size: 22px;
|
||||||
padding: 80px 0;
|
font-weight: 600;
|
||||||
background-image: url("@/assets/image/product-introduction-img4.png");
|
letter-spacing: 0.04em;
|
||||||
background-size: cover;
|
color: #0d1b2a;
|
||||||
background-position: center;
|
margin-bottom: 12px;
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages-content {
|
.price-time {
|
||||||
max-width: 932px;
|
font-size: 18px;
|
||||||
margin: 0 auto;
|
letter-spacing: 0.02em;
|
||||||
display: flex;
|
color: #5a6775;
|
||||||
gap: 16px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advantages-header {
|
.stats-table {
|
||||||
width: 466px;
|
display: grid;
|
||||||
padding: 0 16px;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
grid-auto-rows: minmax(0, 1fr);
|
||||||
.advantages-list {
|
border-radius: 24px;
|
||||||
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;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.cta-content {
|
|
||||||
display: flex;
|
.stats-cell {
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 16px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.cta-text {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
height: 188px;
|
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);
|
||||||
}
|
}
|
||||||
.cta-arrow {
|
|
||||||
width: 60px;
|
.stats-cell:nth-child(2n) {
|
||||||
height: 32px;
|
border-right: none;
|
||||||
}
|
}
|
||||||
.cta-title {
|
|
||||||
font-size: 40px;
|
.stats-cell:nth-last-child(-n + 2) {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-title {
|
||||||
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 56px;
|
letter-spacing: 0.08em;
|
||||||
letter-spacing: 1.2px;
|
text-transform: uppercase;
|
||||||
|
color: #73849a;
|
||||||
}
|
}
|
||||||
.cta-qr-code {
|
|
||||||
width: 188px;
|
.stat-value {
|
||||||
height: 188px;
|
font-size: 22px;
|
||||||
background-color: #90ffff;
|
font-weight: 600;
|
||||||
border-radius: 16px;
|
letter-spacing: 0.02em;
|
||||||
padding: 14px;
|
color: #10243b;
|
||||||
}
|
}
|
||||||
.cta-qr-code img {
|
|
||||||
width: 100%;
|
.stat-title {
|
||||||
height: 100%;
|
font-size: 18px;
|
||||||
object-fit: contain;
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
color: #455363;
|
||||||
}
|
}
|
||||||
.cta-bg-img {
|
|
||||||
position: absolute;
|
.stat-value {
|
||||||
top: 80px;
|
font-size: 30px;
|
||||||
left: 201px;
|
font-weight: 600;
|
||||||
width: 530px;
|
letter-spacing: 0.04em;
|
||||||
height: 268px;
|
color: #0d1b2a;
|
||||||
opacity: 0.8;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
}
|
||||||
.vertical-line {
|
|
||||||
width: 1px;
|
.positive-change {
|
||||||
height: 20px;
|
color: #00c48c;
|
||||||
background: #ff7bac;
|
}
|
||||||
flex-shrink: 0;
|
|
||||||
|
.negative-change {
|
||||||
|
color: #cf3050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neutral-change {
|
||||||
|
color: #0d1b2a;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user