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 { useWindowSize } from "@vueuse/core";
|
||||||
|
|
||||||
import size375 from "@/components/customEcharts/size375/index.vue";
|
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 size1440 from "@/components/customEcharts/size1440/index.vue";
|
||||||
import size1920 from "@/components/customEcharts/size1920/index.vue";
|
import size1920 from "@/components/customEcharts/size1920/index.vue";
|
||||||
import { useRouter } from "vue-router";
|
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-image-container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 800px;
|
height: 518 * 1.33px;
|
||||||
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,96 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
<div class="historic-data-container">
|
||||||
<div class="echarts-container">
|
<div class="echarts-container">
|
||||||
<customEcharts></customEcharts>
|
<customEcharts></customEcharts>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
<div class="title-section">
|
||||||
|
<div class="title-decoration"></div>
|
||||||
|
<div class="title-text">Historical Data</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="header mt-[20px]">
|
|
||||||
<div class="title">Historical Data</div>
|
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
<!-- <n-dropdown
|
<span class="range-label">Range</span>
|
||||||
trigger="click"
|
<div
|
||||||
:options="periodOptions"
|
v-for="option in durationOptions"
|
||||||
@select="handlePeriodChange"
|
:key="option.key"
|
||||||
:value="state.selectedPeriod"
|
class="filter-option"
|
||||||
|
:class="{ active: state.selectedDuration === option.key }"
|
||||||
|
@click="handleDurationChange(option.key)"
|
||||||
>
|
>
|
||||||
<n-button>
|
{{
|
||||||
{{ state.selectedPeriod }}
|
option.label
|
||||||
<n-icon><chevron-down-outline /></n-icon>
|
.replace(" Months", "m")
|
||||||
</n-button>
|
.replace(" Years", "Y")
|
||||||
</n-dropdown> -->
|
.replace(" Year", "Y")
|
||||||
|
.replace(" to Date", "TD")
|
||||||
<n-dropdown
|
}}
|
||||||
trigger="click"
|
</div>
|
||||||
:options="durationOptions"
|
</div>
|
||||||
@select="handleDurationChange"
|
<!-- reports-table from annualreports -->
|
||||||
:value="state.selectedDuration"
|
<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,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<n-button>
|
{{ col.title }}
|
||||||
{{ state.selectedDuration }}
|
</div>
|
||||||
<n-icon><chevron-down-outline /></n-icon>
|
</div>
|
||||||
</n-button>
|
<div class="reports-list">
|
||||||
</n-dropdown>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<n-data-table
|
<!-- pagination-container from annualreports -->
|
||||||
:columns="columns"
|
|
||||||
:data="paginatedData"
|
|
||||||
:bordered="false"
|
|
||||||
:single-line="false"
|
|
||||||
:scroll-x="1200"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="pagination-container">
|
<div class="pagination-container">
|
||||||
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
<div class="pagination-controls">
|
||||||
<n-icon><chevron-back-outline /></n-icon>
|
<div class="pagination-buttons">
|
||||||
Previous
|
<button
|
||||||
</n-button>
|
class="page-btn prev-btn"
|
||||||
|
:disabled="state.currentPage === 1"
|
||||||
<div class="page-info">
|
@click="goToPrevPage"
|
||||||
Page {{ state.currentPage }} of {{ totalPages }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right-controls">
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="pageSizeOptions"
|
|
||||||
@select="handlePageSizeChange"
|
|
||||||
>
|
>
|
||||||
<n-button class="rows-dropdown">
|
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||||
{{ state.pageSize }} Rows
|
<path
|
||||||
<n-icon><chevron-down-outline /></n-icon>
|
d="M4 1L1 4.5L4 8"
|
||||||
</n-button>
|
stroke="#455363"
|
||||||
</n-dropdown>
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<n-button class="page-btn next-btn" @click="handleNextPage">
|
<template v-for="page in getVisiblePages()" :key="page">
|
||||||
Next
|
<button
|
||||||
<n-icon><chevron-forward-outline /></n-icon>
|
v-if="page !== '...'"
|
||||||
</n-button>
|
class="page-btn"
|
||||||
|
:class="{ active: page === state.currentPage }"
|
||||||
|
@click="goToPage(page)"
|
||||||
|
>
|
||||||
|
{{ page }}
|
||||||
|
</button>
|
||||||
|
<button v-else class="page-btn disabled" disabled>...</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="page-btn next-btn"
|
||||||
|
:disabled="state.currentPage === totalPages"
|
||||||
|
@click="goToNextPage"
|
||||||
|
>
|
||||||
|
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
||||||
|
<path
|
||||||
|
d="M1 1L4 4.5L1 8"
|
||||||
|
stroke="#455363"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="page-size-selector" @click="togglePageSizeMenu">
|
||||||
|
<span>{{ state.pageSize }}/page</span>
|
||||||
|
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
||||||
|
<path
|
||||||
|
d="M1 1L5 4L9 1"
|
||||||
|
stroke="#455363"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div v-if="showPageSizeMenu" class="page-size-menu">
|
||||||
|
<div
|
||||||
|
v-for="size in [10, 50, 100, 500, 1000]"
|
||||||
|
:key="size"
|
||||||
|
class="page-size-option"
|
||||||
|
:class="{ active: state.pageSize === size }"
|
||||||
|
@click="handlePageSizeChange(size)"
|
||||||
|
>
|
||||||
|
{{ size }}/page
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<a href="#" @click.prevent="scrollToTop">
|
||||||
Back to Top
|
Back to Top
|
||||||
<n-icon><arrow-up-outline /></n-icon>
|
<n-icon><arrow-up-outline /></n-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
import { NDropdown, NIcon } from "naive-ui";
|
||||||
import { reactive, onMounted, h, computed } from "vue";
|
import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {
|
import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
|
||||||
ChevronDownOutline,
|
|
||||||
ChevronBackOutline,
|
|
||||||
ChevronForwardOutline,
|
|
||||||
ArrowUpOutline,
|
|
||||||
} from "@vicons/ionicons5";
|
|
||||||
import defaultTableData from "../data";
|
import defaultTableData from "../data";
|
||||||
// console.log('defaultTableData', defaultTableData)
|
|
||||||
import customEcharts from "@/components/customEcharts/index.vue";
|
import customEcharts from "@/components/customEcharts/index.vue";
|
||||||
|
|
||||||
// 数据筛选选项
|
// 数据筛选选项
|
||||||
@ -105,15 +202,15 @@ const periodOptions = [
|
|||||||
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: "YTD", 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 },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// 分页大小选项
|
// 分页大小选项
|
||||||
const pageSizeOptions = [
|
const pageSizeOptions = [
|
||||||
|
{ label: "10", key: 10 },
|
||||||
{ label: "50", key: 50 },
|
{ label: "50", key: 50 },
|
||||||
{ label: "100", key: 100 },
|
{ label: "100", key: 100 },
|
||||||
{ label: "500", key: 500 },
|
{ label: "500", key: 500 },
|
||||||
@ -125,9 +222,12 @@ const state = reactive({
|
|||||||
selectedDuration: "6 Months",
|
selectedDuration: "6 Months",
|
||||||
tableData: [],
|
tableData: [],
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 50,
|
pageSize: 10,
|
||||||
|
gotoPage: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const showPageSizeMenu = ref(false);
|
||||||
|
|
||||||
// 计算总页数
|
// 计算总页数
|
||||||
const totalPages = computed(() => {
|
const totalPages = computed(() => {
|
||||||
return Math.ceil(state.tableData.length / state.pageSize);
|
return Math.ceil(state.tableData.length / state.pageSize);
|
||||||
@ -173,16 +273,12 @@ const columns = [
|
|||||||
title: "Adj. Close",
|
title: "Adj. Close",
|
||||||
key: "adjClose",
|
key: "adjClose",
|
||||||
align: "center",
|
align: "center",
|
||||||
|
width: 115,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Change",
|
title: "Change",
|
||||||
key: "change",
|
key: "change",
|
||||||
align: "center",
|
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",
|
title: "Volume",
|
||||||
@ -215,26 +311,91 @@ const handleDurationChange = (key) => {
|
|||||||
getPageData();
|
getPageData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理分页
|
const displayRange = computed(() => {
|
||||||
const handlePrevPage = () => {
|
const start = (state.currentPage - 1) * state.pageSize + 1;
|
||||||
if (state.currentPage === 1) {
|
const end = Math.min(
|
||||||
return;
|
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--;
|
state.currentPage--;
|
||||||
};
|
|
||||||
|
|
||||||
const handleNextPage = () => {
|
|
||||||
if (state.currentPage >= totalPages.value) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
state.currentPage++;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const goToNextPage = () => {
|
||||||
|
if (state.currentPage < totalPages.value) {
|
||||||
|
state.currentPage++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理分页
|
||||||
const handlePageSizeChange = (size) => {
|
const handlePageSizeChange = (size) => {
|
||||||
state.pageSize = size;
|
state.pageSize = size;
|
||||||
state.currentPage = 1; // 重置到第一页
|
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 = () => {
|
const scrollToTop = () => {
|
||||||
// 尝试多种方法
|
// 尝试多种方法
|
||||||
@ -250,8 +411,32 @@ const scrollToTop = () => {
|
|||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageData();
|
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 () => {
|
const getPageDefaultData = async () => {
|
||||||
try {
|
try {
|
||||||
let url =
|
let url =
|
||||||
@ -343,14 +528,12 @@ const getPageData = async () => {
|
|||||||
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 =
|
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)
|
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
if (res.data.status === 0) {
|
if (res.data.status === 0) {
|
||||||
// 转换为日期格式："Nov 26, 2024"
|
// 转换为日期格式："Nov 26, 2024"
|
||||||
@ -381,83 +564,71 @@ const getPageData = async () => {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.historic-data-container {
|
.historic-data-container {
|
||||||
max-width: calc(100% - 300px);
|
width: 650 * 2.5px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 85px;
|
font-size: 40 * 2.5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-container {
|
.filter-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 20px;
|
gap: 16 * 2.5px;
|
||||||
padding: 10px 16px;
|
padding: 0 16 * 2.5px;
|
||||||
border-radius: 4px;
|
margin-bottom: 32 * 2.5px;
|
||||||
background-color: #ffffff;
|
margin-top: 32 * 2.5px;
|
||||||
|
|
||||||
.page-btn {
|
.range-label {
|
||||||
display: flex;
|
font-family: "PingFang SC", sans-serif;
|
||||||
align-items: center;
|
font-weight: 400;
|
||||||
gap: 5px;
|
font-size: 16 * 2.5px;
|
||||||
padding: 6px 12px;
|
line-height: 1.375em;
|
||||||
font-size: 50px;
|
letter-spacing: 3%;
|
||||||
|
color: #455363;
|
||||||
&.prev-btn {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.next-btn {
|
.filter-option {
|
||||||
margin-left: 10px;
|
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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&.active {
|
||||||
opacity: 0.5;
|
background-color: #ff7bac;
|
||||||
cursor: not-allowed;
|
color: #ffffff;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 40px;
|
|
||||||
color: #374151;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.rows-dropdown {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-to-top-link {
|
.back-to-top-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 16px;
|
margin-top: 16 * 2.5px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5 * 2.5px;
|
||||||
color: #2563eb;
|
color: #2563eb;
|
||||||
font-size: 50px;
|
font-size: 20 * 2.5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
@ -466,11 +637,305 @@ const getPageData = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.n-data-table) {
|
.reports-table {
|
||||||
.n-data-table-td {
|
width: 100%;
|
||||||
padding: 12px 8px;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { useStockQuote } from "@/store/stock-quote/index.js";
|
import { useStockQuote } from "@/store/stock-quote/index.js";
|
||||||
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
const { getStockQuate, stockQuote, formatted } = useStockQuote();
|
||||||
console.log(stockQuote);
|
|
||||||
getStockQuate();
|
getStockQuate();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -7,81 +7,201 @@ getStockQuate();
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main ref="main">
|
<main class="stock-quote-container-768">
|
||||||
<main
|
<div class="content-wrapper">
|
||||||
class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px"
|
<div class="title-section">
|
||||||
>
|
<div class="title-decoration"></div>
|
||||||
<!-- 价格卡片 -->
|
<div class="title-text">Stock Quote</div>
|
||||||
<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 }}
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px"
|
<div class="data-section">
|
||||||
>
|
<div class="price-card">
|
||||||
NASDAQ: <span class="text-black">FIEE</span>
|
<div class="price-value">${{ stockQuote.price }}</div>
|
||||||
|
<div class="price-nasdaq">NASDAQ: FIEE</div>
|
||||||
|
<div class="price-date">{{ formatted }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-gray-500 text-70px">{{ formatted }}</div>
|
<div class="details-grid">
|
||||||
</section>
|
<div class="details-column">
|
||||||
<!-- 信息卡片列表 -->
|
<div class="detail-item">
|
||||||
<section class="w-full max-w-80vw grid grid-cols-3 gap-4">
|
<span class="detail-label">Open</span>
|
||||||
<div class="info-card">
|
<span class="detail-value">{{ stockQuote.open }}</span>
|
||||||
<div class="text-sm text-gray-400">Open</div>
|
|
||||||
<div class="text-xl font-bold">{{ stockQuote.open }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="detail-item">
|
||||||
<div class="text-sm text-gray-400">% Change</div>
|
<span class="detail-label">Day's Range</span>
|
||||||
<div
|
<span class="detail-value">{{ stockQuote.daysRange }}</span>
|
||||||
class="text-xl font-bold"
|
</div>
|
||||||
:class="
|
<div class="detail-item">
|
||||||
stockQuote.change?.includes('-')
|
<span class="detail-label">Volume</span>
|
||||||
? 'text-green-500'
|
<span class="detail-value">{{ stockQuote.volume }}</span>
|
||||||
: 'text-red-500'
|
</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 }}
|
{{ 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>
|
||||||
<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>
|
||||||
<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>
|
||||||
<div class="info-card">
|
|
||||||
<div class="text-sm text-gray-400">Volume</div>
|
|
||||||
<div class="text-xl font-bold">{{ stockQuote.volume }}</div>
|
|
||||||
</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>
|
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.glass-card {
|
.stock-quote-container-768 {
|
||||||
backdrop-filter: blur(10px);
|
display: flex;
|
||||||
background: rgba(255, 255, 255, 0.92);
|
flex-direction: column;
|
||||||
border: 1px solid rgba(200, 200, 255, 0.18);
|
align-items: center;
|
||||||
box-shadow: 0 3px 12px 0 rgba(255, 123, 172, 0.08);
|
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);
|
.content-wrapper {
|
||||||
border-radius: 16px;
|
width: 650 * 2.5px;
|
||||||
box-shadow: 0 2px 6px 0 rgba(255, 123, 172, 0.06);
|
|
||||||
padding: 16px 14px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user