fix historic-stock 768
This commit is contained in:
yuanshan
parent
009d6d4d67
commit
54b1d1551d
@ -3,7 +3,7 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "@/components/customEcharts/size375/index.vue";
|
||||
import size768 from "@/components/customEcharts/size375/index.vue";
|
||||
import size768 from "@/components/customEcharts/size768/index.vue";
|
||||
import size1440 from "@/components/customEcharts/size1440/index.vue";
|
||||
import size1920 from "@/components/customEcharts/size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
624
src/components/customEcharts/size768/index.vue
Normal file
624
src/components/customEcharts/size768/index.vue
Normal file
@ -0,0 +1,624 @@
|
||||
<template>
|
||||
<div class="custom-echarts">
|
||||
<div>
|
||||
<div class="echarts-header">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title-text">
|
||||
<span>FiEE, Inc. Stock Price History</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-search-area">
|
||||
<div class="echarts-search-byRange">
|
||||
<text style="font-size: 0.9rem; font-weight: 400; color: #666666">
|
||||
Range
|
||||
</text>
|
||||
<div class="search-range-list">
|
||||
<div
|
||||
class="search-range-list-each"
|
||||
v-for="(item, index) in state.searchRange"
|
||||
:key="index"
|
||||
:class="{ activeRange: state.activeRange === item }"
|
||||
@click="changeSearchRange(item)"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-search-byDate">
|
||||
<n-date-picker
|
||||
v-model:value="state.dateRange"
|
||||
type="daterange"
|
||||
:is-date-disabled="isDateDisabled"
|
||||
@update:value="handleDateRangeChange"
|
||||
input-readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="myEcharts" class="myChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, watch, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { NDatePicker, NIcon } from "naive-ui";
|
||||
import { ArrowForwardOutline } from "@vicons/ionicons5";
|
||||
import axios from "axios";
|
||||
const state = reactive({
|
||||
searchRange: ["1m", "3m", "YTD", "1Y", "5Y", "10Y", "Max"],
|
||||
dateRange: [new Date("2009-10-07").getTime(), new Date().getTime()],
|
||||
activeRange: "",
|
||||
});
|
||||
|
||||
let myCharts = null;
|
||||
let historicData = [];
|
||||
let xAxisData = [];
|
||||
|
||||
//初始化eCharts
|
||||
const initEcharts = (data) => {
|
||||
historicData = data;
|
||||
xAxisData = data.map((item) => {
|
||||
return new Date(item.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
});
|
||||
const yAxisData = data.map((item) => item.price);
|
||||
// console.error(xAxisData, yAxisData)
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
myCharts = echarts.init(document.getElementById("myEcharts"), null, {
|
||||
renderer: "canvas",
|
||||
useDirtyRect: true,
|
||||
});
|
||||
// 绘制图表
|
||||
myCharts.setOption({
|
||||
animation: false,
|
||||
progressive: 500,
|
||||
progressiveThreshold: 3000,
|
||||
// title: {
|
||||
// text: 'FiEE, Inc. Stock Price History',
|
||||
// },
|
||||
grid: {
|
||||
left: "8%", // 或 '2%'，根据实际情况调整
|
||||
right: "12%", // 给右侧y轴留空间，数值可根据y轴label宽度调整
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "line",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
const p = params[0];
|
||||
return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`;
|
||||
},
|
||||
triggerOn: "mousemove",
|
||||
confine: true,
|
||||
hideDelay: 1500,
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CCD6EB",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#323232",
|
||||
fontWeight: "bold",
|
||||
interval: "auto",
|
||||
hideOverlap: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
position: "right",
|
||||
interval: 25,
|
||||
// max: 75.0,
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: "#323232",
|
||||
fontWeight: "bold",
|
||||
formatter: function (value) {
|
||||
return value > 0 ? value.toFixed(2) : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yAxisData,
|
||||
type: "line",
|
||||
sampling: "lttb",
|
||||
symbol: "none",
|
||||
lineStyle: {
|
||||
color: "#CC346C",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#CC346C",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F4F6F8",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
symbol: "circle",
|
||||
symbolSize: 20,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#CC346C" },
|
||||
{ offset: 0.4, color: "white" },
|
||||
{ offset: 0.4, color: "white" },
|
||||
{ offset: 0.6, color: "rgba(204, 52, 108, 0.30)" },
|
||||
{ offset: 0.8, color: "rgba(204, 52, 108, 0.30)" },
|
||||
{ offset: 1, color: "rgba(255, 123, 172, 0)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
progressive: 500,
|
||||
progressiveThreshold: 3000,
|
||||
large: true,
|
||||
largeThreshold: 2000,
|
||||
},
|
||||
],
|
||||
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
},
|
||||
{
|
||||
type: "slider",
|
||||
show: true,
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: "#CC346C",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: "#CC346C" },
|
||||
{ offset: 0, color: "#F4F6F8" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: "#CC346C",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: "#CC346C" },
|
||||
{ offset: 0, color: "#F4F6F8" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
fillerColor: "rgba(44, 98, 136, 0.3)",
|
||||
realtime: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 监听 showTip 事件，动态显示 markPoint
|
||||
myCharts.on("showTip", function (params) {
|
||||
if (params) {
|
||||
const dataIndex = params.dataIndex;
|
||||
const x = myCharts.getOption().xAxis[0].data[dataIndex];
|
||||
const y = myCharts.getOption().series[0].data[dataIndex];
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
data: [{ coord: [x, y] }],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
});
|
||||
// 鼠标移出时，清除 markPoint
|
||||
myCharts.on("globalout", function () {
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
myCharts.on("dataZoom", function (params) {
|
||||
// 获取当前 dataZoom 范围
|
||||
const option = myCharts.getOption();
|
||||
const xAxisData = option.xAxis[0].data;
|
||||
const dataZoom = option.dataZoom[1] || option.dataZoom[0];
|
||||
|
||||
// 获取 dataZoom 的 startValue 和 endValue
|
||||
let startValue = dataZoom.endValue;
|
||||
let endValue = dataZoom.startValue;
|
||||
|
||||
// 如果是索引，转为日期
|
||||
if (typeof startValue === "number") {
|
||||
startValue = xAxisData[startValue];
|
||||
}
|
||||
if (typeof endValue === "number") {
|
||||
endValue = xAxisData[endValue];
|
||||
}
|
||||
|
||||
// 更新日期选择器
|
||||
state.dateRange = [
|
||||
new Date(startValue).getTime(),
|
||||
new Date(endValue).getTime(),
|
||||
];
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalData();
|
||||
});
|
||||
|
||||
//获取历史数据
|
||||
const getHistoricalData = async () => {
|
||||
let now = new Date();
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
"-" +
|
||||
String(now.getMonth() + 1).padStart(2, "0") +
|
||||
"-" +
|
||||
String(now.getDate()).padStart(2, "0");
|
||||
let url =
|
||||
"https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=" +
|
||||
toDate;
|
||||
const res = await axios.get(url);
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
initEcharts(res.data.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 适配倒序数据，返回大于等于目标日期的最近一天索引
|
||||
function findClosestDateIndex(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1;
|
||||
const target = new Date(targetDateStr).getTime();
|
||||
let res = data.length - 1; // 默认返回最后一个
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
const midTime = new Date(data[mid].date).getTime();
|
||||
if (midTime > target) {
|
||||
left = mid + 1;
|
||||
} else {
|
||||
res = mid;
|
||||
right = mid - 1;
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// 适配倒序数据，返回小于等于目标日期的最近一天索引
|
||||
function findClosestDateIndexDescLeft(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1;
|
||||
const target = new Date(targetDateStr).getTime();
|
||||
let res = -1;
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
const midTime = new Date(data[mid].date).getTime();
|
||||
if (midTime > target) {
|
||||
left = mid + 1; // mid 比目标新，往更旧的方向找
|
||||
} else {
|
||||
res = mid; // mid <= target，记录下来，继续往更新的方向找
|
||||
right = mid - 1;
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
//点击切换搜索区间
|
||||
const changeSearchRange = (range, dateTime) => {
|
||||
state.activeRange = range;
|
||||
const now = new Date();
|
||||
let startDate = "";
|
||||
let endDate = "";
|
||||
if (range === "1m") {
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 1);
|
||||
startDate = last.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "3m") {
|
||||
const last = new Date(now);
|
||||
last.setMonth(now.getMonth() - 3);
|
||||
startDate = last.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "YTD") {
|
||||
startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "1Y") {
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 1);
|
||||
startDate = last.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "5Y") {
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 5);
|
||||
startDate = last.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "10Y") {
|
||||
const last = new Date(now);
|
||||
last.setFullYear(now.getFullYear() - 10);
|
||||
startDate = last.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
endDate = new Date(new Date()).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
} else if (range === "Max") {
|
||||
startDate = "";
|
||||
endDate = "";
|
||||
} else if (range === "startDateTime") {
|
||||
startDate = dateTime;
|
||||
endDate = "";
|
||||
} else if (range === "endDateTime") {
|
||||
startDate = "";
|
||||
endDate = dateTime;
|
||||
}
|
||||
if (startDate || endDate) {
|
||||
// historicData 和 xAxisData 需在 initEcharts 作用域可用
|
||||
if (
|
||||
typeof historicData !== "undefined" &&
|
||||
typeof xAxisData !== "undefined"
|
||||
) {
|
||||
const zoomOptions = {};
|
||||
let newStartTs = state.dateRange[0];
|
||||
let newEndTs = state.dateRange[1];
|
||||
|
||||
if (startDate) {
|
||||
const idx = findClosestDateIndex(historicData, startDate);
|
||||
const startValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}
|
||||
);
|
||||
zoomOptions.endValue = startValue;
|
||||
newStartTs = new Date(startValue).getTime();
|
||||
}
|
||||
|
||||
if (endDate) {
|
||||
const idx = findClosestDateIndexDescLeft(historicData, endDate);
|
||||
const endValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}
|
||||
);
|
||||
zoomOptions.startValue = endValue;
|
||||
newEndTs = new Date(endValue).getTime();
|
||||
}
|
||||
|
||||
if (Object.keys(zoomOptions).length > 0) {
|
||||
myCharts.setOption({ dataZoom: [zoomOptions, zoomOptions] });
|
||||
}
|
||||
|
||||
state.dateRange = [newStartTs, newEndTs];
|
||||
}
|
||||
} else {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
startValue: "",
|
||||
endValue: "",
|
||||
},
|
||||
});
|
||||
|
||||
state.dateRange = [new Date("2009-10-07").getTime(), new Date().getTime()];
|
||||
}
|
||||
};
|
||||
|
||||
// 禁用日期
|
||||
const isDateDisabled = (ts, type, range) => {
|
||||
const minDate = new Date("2009-10-06").getTime();
|
||||
const maxDate = new Date().getTime();
|
||||
|
||||
if (ts < minDate || ts > maxDate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (type === "end" && range && range[0]) {
|
||||
return ts < range[0];
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// 切换搜索区间
|
||||
const handleDateRangeChange = (range) => {
|
||||
if (range && range[0] && range[1]) {
|
||||
const startDate = new Date(range[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
const endDate = new Date(range[1]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
changeSearchRange("startDateTime", startDate);
|
||||
changeSearchRange("endDateTime", endDate);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-echarts {
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.echarts-header {
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
margin-top: 43 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32 * 2.5px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.echarts-search-area {
|
||||
padding: 0 16 * 2.5px 0 16 * 2.5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10 * 2.5px;
|
||||
|
||||
.echarts-search-byRange {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10 * 2.5px;
|
||||
.search-range-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16 * 2.5px;
|
||||
.search-range-list-each {
|
||||
padding: 7 * 2.5px 22 * 2.5px;
|
||||
border-radius: 5px;
|
||||
background-color: #f3f4f6;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.activeRange {
|
||||
color: #fff;
|
||||
background: #ff7bac;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-search-byDate {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.4rem;
|
||||
.n-date-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -200,7 +200,7 @@ const handleSearch = () => {
|
||||
.background-image-container {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
height: 518 * 1.33px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
|
||||
@ -1,96 +1,193 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<div class="historic-data-container">
|
||||
<div class="echarts-container">
|
||||
<customEcharts></customEcharts>
|
||||
</div>
|
||||
|
||||
<div class="header mt-[20px]">
|
||||
<div class="title">Historical Data</div>
|
||||
<div class="filter-container">
|
||||
<!-- <n-dropdown
|
||||
trigger="click"
|
||||
:options="periodOptions"
|
||||
@select="handlePeriodChange"
|
||||
:value="state.selectedPeriod"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedPeriod }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown> -->
|
||||
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="durationOptions"
|
||||
@select="handleDurationChange"
|
||||
:value="state.selectedDuration"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedDuration }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
<div class="header">
|
||||
<!-- 标题区域 -->
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title-text">Historical Data</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="1200"
|
||||
/>
|
||||
<div class="filter-container">
|
||||
<span class="range-label">Range</span>
|
||||
<div
|
||||
v-for="option in durationOptions"
|
||||
:key="option.key"
|
||||
class="filter-option"
|
||||
:class="{ active: state.selectedDuration === option.key }"
|
||||
@click="handleDurationChange(option.key)"
|
||||
>
|
||||
{{
|
||||
option.label
|
||||
.replace(" Months", "m")
|
||||
.replace(" Years", "Y")
|
||||
.replace(" Year", "Y")
|
||||
.replace(" to Date", "TD")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- reports-table from annualreports -->
|
||||
<div class="reports-table">
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<div
|
||||
class="column"
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
:style="{
|
||||
width: col.width ? col.width + 'px' : 'auto',
|
||||
flex: col.width ? 'none' : '1 0 120px',
|
||||
'text-align': col.align,
|
||||
}"
|
||||
>
|
||||
{{ col.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(row, index) in paginatedData"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="column"
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
:style="{
|
||||
width: col.width ? col.width + 'px' : 'auto',
|
||||
flex: col.width ? 'none' : '1 0 120px',
|
||||
'text-align': col.align,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
v-if="col.key === 'change'"
|
||||
:style="{
|
||||
color:
|
||||
parseFloat(row.change) < 0
|
||||
? '#cf3050'
|
||||
: parseFloat(row.change) > 0
|
||||
? '#18a058'
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
{{ row[col.key] }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ row[col.key] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pagination-container from annualreports -->
|
||||
<div class="pagination-container">
|
||||
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
||||
<n-icon><chevron-back-outline /></n-icon>
|
||||
Previous
|
||||
</n-button>
|
||||
<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>
|
||||
|
||||
<div class="page-info">
|
||||
Page {{ state.currentPage }} of {{ totalPages }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="right-controls">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="pageSizeOptions"
|
||||
@select="handlePageSizeChange"
|
||||
>
|
||||
<n-button class="rows-dropdown">
|
||||
{{ state.pageSize }} Rows
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<n-button class="page-btn next-btn" @click="handleNextPage">
|
||||
Next
|
||||
<n-icon><chevron-forward-outline /></n-icon>
|
||||
</n-button>
|
||||
<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, 50, 100, 500, 1000]"
|
||||
:key="size"
|
||||
class="page-size-option"
|
||||
:class="{ active: state.pageSize === size }"
|
||||
@click="handlePageSizeChange(size)"
|
||||
>
|
||||
{{ size }}/page
|
||||
</div>
|
||||
</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>
|
||||
<div class="pagination-info">
|
||||
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
||||
{{ state.tableData.length }} results
|
||||
</div>
|
||||
|
||||
<div class="back-to-top-link">
|
||||
<!-- <div class="back-to-top-link">
|
||||
<a href="#" @click.prevent="scrollToTop">
|
||||
Back to Top
|
||||
<n-icon><arrow-up-outline /></n-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import { NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from "@vicons/ionicons5";
|
||||
import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
// console.log('defaultTableData', defaultTableData)
|
||||
import customEcharts from "@/components/customEcharts/index.vue";
|
||||
|
||||
// 数据筛选选项
|
||||
@ -105,15 +202,15 @@ const periodOptions = [
|
||||
const durationOptions = [
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "YTD", 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: "10", key: 10 },
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
@ -125,9 +222,12 @@ const state = reactive({
|
||||
selectedDuration: "6 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
pageSize: 10,
|
||||
gotoPage: 1,
|
||||
});
|
||||
|
||||
const showPageSizeMenu = ref(false);
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
@ -173,16 +273,12 @@ const columns = [
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
width: 115,
|
||||
},
|
||||
{
|
||||
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);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Volume",
|
||||
@ -215,26 +311,91 @@ const handleDurationChange = (key) => {
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const displayRange = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize + 1;
|
||||
const end = Math.min(
|
||||
state.currentPage * state.pageSize,
|
||||
state.tableData.length
|
||||
);
|
||||
return { start, end };
|
||||
});
|
||||
|
||||
const goToPage = (page) => {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
const goToPrevPage = () => {
|
||||
if (state.currentPage > 1) {
|
||||
state.currentPage--;
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (state.currentPage < totalPages.value) {
|
||||
state.currentPage++;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return;
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return;
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
const handleGoto = () => {
|
||||
const page = parseInt(state.gotoPage);
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
state.currentPage = page;
|
||||
}
|
||||
};
|
||||
|
||||
const togglePageSizeMenu = () => {
|
||||
showPageSizeMenu.value = !showPageSizeMenu.value;
|
||||
};
|
||||
|
||||
const getVisiblePages = () => {
|
||||
const current = state.currentPage;
|
||||
const total = totalPages.value;
|
||||
const pages = [];
|
||||
|
||||
if (total <= 7) {
|
||||
// 如果总页数小于等于7，显示所有页码
|
||||
for (let i = 1; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 显示第一页
|
||||
pages.push(1);
|
||||
|
||||
if (current <= 4) {
|
||||
// 当前页在前4页
|
||||
for (let i = 2; i <= 5; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
} else if (current >= total - 3) {
|
||||
// 当前页在后4页
|
||||
pages.push("...");
|
||||
for (let i = total - 4; i <= total; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页在中间
|
||||
pages.push("...");
|
||||
for (let i = current - 1; i <= current + 1; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
pages.push("...");
|
||||
pages.push(total);
|
||||
}
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
@ -250,8 +411,32 @@ const scrollToTop = () => {
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageData();
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (!event.target.closest(".page-size-selector")) {
|
||||
showPageSizeMenu.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => state.pageSize,
|
||||
() => {
|
||||
state.currentPage = 1;
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => state.currentPage,
|
||||
(newPage) => {
|
||||
state.gotoPage = newPage;
|
||||
}
|
||||
);
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
@ -343,14 +528,12 @@ const getPageData = async () => {
|
||||
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=" +
|
||||
finalFromDate +
|
||||
"&to=" +
|
||||
toDate;
|
||||
const res = await axios.get(url);
|
||||
// console.error(res)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
@ -381,83 +564,71 @@ const getPageData = async () => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.historic-data-container {
|
||||
max-width: calc(100% - 300px);
|
||||
width: 650 * 2.5px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 85px;
|
||||
font-size: 40 * 2.5px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
.filter-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
gap: 16 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
margin-top: 32 * 2.5px;
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 12px;
|
||||
font-size: 50px;
|
||||
|
||||
&.prev-btn {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.next-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.range-label {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #455363;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 40px;
|
||||
color: #374151;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.filter-option {
|
||||
padding: 7 * 2.5px 28 * 2.5px;
|
||||
border-radius: 3 * 2.5px;
|
||||
background-color: #efefef;
|
||||
cursor: pointer;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
color: #000000;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.rows-dropdown {
|
||||
font-size: 40px;
|
||||
&.active {
|
||||
background-color: #ff7bac;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
margin-top: 16 * 2.5px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: 5 * 2.5px;
|
||||
color: #2563eb;
|
||||
font-size: 50px;
|
||||
font-size: 20 * 2.5px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
@ -466,11 +637,305 @@ const getPageData = async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-data-table) {
|
||||
.n-data-table-td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 16 * 2.5px;
|
||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||
padding: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #fff0f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.column {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #455363;
|
||||
padding: 16 * 2.5px 16 * 2.5px;
|
||||
position: relative;
|
||||
}
|
||||
.table-header {
|
||||
display: flex;
|
||||
border-radius: 8 * 2.5px;
|
||||
margin-bottom: 4 * 2.5px;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
.column {
|
||||
background: #fff0f5;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 1.375em;
|
||||
letter-spacing: 3%;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 8 * 2.5px;
|
||||
&:hover .column {
|
||||
background: #fff8fb;
|
||||
}
|
||||
|
||||
// &:last-child {
|
||||
// border-bottom: none;
|
||||
// }
|
||||
|
||||
&:nth-child(even) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4 * 2.5px;
|
||||
}
|
||||
|
||||
.table-row .column:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 24 * 2.5px;
|
||||
border-right: 1px dashed #e0e0e6;
|
||||
}
|
||||
|
||||
.table-header .column:first-child,
|
||||
.table-row .column:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.table-header .column:first-child {
|
||||
border-radius: 8 * 2.5px 0 0 8 * 2.5px;
|
||||
}
|
||||
.table-header .column:last-child,
|
||||
.table-row .column:last-child {
|
||||
border-radius: 0 8 * 2.5px 8 * 2.5px 0;
|
||||
}
|
||||
|
||||
.table-row .column:first-child {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.table-row:hover .column:first-child {
|
||||
background: #fff8fb;
|
||||
}
|
||||
|
||||
// 分页器样式
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20 * 2.5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * 2.5px;
|
||||
line-height: 1.4375em;
|
||||
color: #455363;
|
||||
text-align: right;
|
||||
padding: 0 16 * 2.5px;
|
||||
margin-top: 16 * 2.5px;
|
||||
margin-bottom: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
}
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #ff7bac;
|
||||
color: #ff7bac;
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-selector {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18 * 2.5px;
|
||||
padding: 4px 12 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
background: #ffffff;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
margin-bottom: 2 * 2.5px;
|
||||
}
|
||||
|
||||
.page-size-option {
|
||||
padding: 8px 12 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #fff0f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff0f5;
|
||||
color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.goto-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
margin-right: 16 * 2.5px;
|
||||
}
|
||||
|
||||
.goto-input {
|
||||
width: 60 * 2.5px;
|
||||
height: 28 * 2.5px;
|
||||
padding: 4px 12 * 2.5px;
|
||||
border: 1px solid #e0e0e6;
|
||||
border-radius: 3 * 2.5px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14 * 2.5px;
|
||||
line-height: 1.428em;
|
||||
color: #455363;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ff7bac;
|
||||
}
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
margin-top: 43 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32 * 2.5px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||
console.log(stockQuote);
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
|
||||
@ -7,81 +7,201 @@ getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main">
|
||||
<main
|
||||
class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px"
|
||||
>
|
||||
<!-- 价格卡片 -->
|
||||
<section
|
||||
class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6"
|
||||
>
|
||||
<div
|
||||
class="text-5xl font-extrabold text-#ff7bac animate-bg-move select-none drop-shadow-lg"
|
||||
>
|
||||
${{ stockQuote.price }}
|
||||
<main class="stock-quote-container-768">
|
||||
<div class="content-wrapper">
|
||||
<div class="title-section">
|
||||
<div class="title-decoration"></div>
|
||||
<div class="title-text">Stock Quote</div>
|
||||
</div>
|
||||
|
||||
<div class="data-section">
|
||||
<div class="price-card">
|
||||
<div class="price-value">${{ stockQuote.price }}</div>
|
||||
<div class="price-nasdaq">NASDAQ: FIEE</div>
|
||||
<div class="price-date">{{ formatted }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px"
|
||||
>
|
||||
NASDAQ: <span class="text-black">FIEE</span>
|
||||
</div>
|
||||
<div class="text-gray-500 text-70px">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 信息卡片列表 -->
|
||||
<section class="w-full max-w-80vw grid grid-cols-3 gap-4">
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Open</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.open }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">% Change</div>
|
||||
<div
|
||||
class="text-xl font-bold"
|
||||
:class="
|
||||
stockQuote.change?.includes('-')
|
||||
? 'text-green-500'
|
||||
: 'text-red-500'
|
||||
"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
<div class="details-grid">
|
||||
<div class="details-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Open</span>
|
||||
<span class="detail-value">{{ stockQuote.open }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Day's Range</span>
|
||||
<span class="detail-value">{{ stockQuote.daysRange }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Volume</span>
|
||||
<span class="detail-value">{{ stockQuote.volume }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-column">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">% Change</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="{
|
||||
'text-red': String(stockQuote.change).includes('-'),
|
||||
'text-green': String(stockQuote.change).includes('+'),
|
||||
}"
|
||||
>
|
||||
{{ stockQuote.change }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">52-Week Range</span>
|
||||
<span class="detail-value">{{ stockQuote.week52Range }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Market Cap</span>
|
||||
<span class="detail-value">{{ stockQuote.marketCap }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Day's Range</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.daysRange }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">52-Week Range</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.week52Range }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Volume</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.volume }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Market Cap</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.marketCap }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.glass-card {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
||||
box-shadow: 0 3px 12px 0 rgba(255, 123, 172, 0.08);
|
||||
.stock-quote-container-768 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
background-image: url("@/assets/image/768/bg-stock-quote.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 6px 0 rgba(255, 123, 172, 0.06);
|
||||
padding: 16px 14px;
|
||||
|
||||
.content-wrapper {
|
||||
width: 650 * 2.5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16 * 2.5px;
|
||||
margin-bottom: 32 * 2.5px;
|
||||
margin-top: 43 * 2.5px;
|
||||
padding: 0 16 * 2.5px;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
width: 58 * 2.5px;
|
||||
height: 7 * 2.5px;
|
||||
background: #ff7bac;
|
||||
margin: auto 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32 * 2.5px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.03em;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.data-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.price-card {
|
||||
width: 100%;
|
||||
height: 355 * 2.5px;
|
||||
background-color: white;
|
||||
border-radius: 16 * 2.5px;
|
||||
box-shadow: 0 * 2.5px 3 * 2.5px 14 * 2.5px 0 * 2.5px rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16 * 2.5px;
|
||||
gap: 30 * 2.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
width: 100%;
|
||||
font-size: 110 * 2.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.48 * 2.5px;
|
||||
background: linear-gradient(to right, #ff7bac, #00ffff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.price-nasdaq {
|
||||
width: 100%;
|
||||
font-size: 24 * 2.5px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-date {
|
||||
width: 100%;
|
||||
font-size: 18 * 2.5px;
|
||||
color: #455363;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.details-column {
|
||||
width: 325 * 2.5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
width: 100%;
|
||||
height: 155 * 2.5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16 * 2.5px 32 * 2.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 100%;
|
||||
font-size: 18 * 2.5px;
|
||||
color: #455363;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
width: 100%;
|
||||
font-size: 24 * 2.5px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.2 * 2.5px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #cf3050;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #00c48c;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user