920 lines
21 KiB
Vue
920 lines
21 KiB
Vue
<template>
|
|
<div class="historic-data-container">
|
|
<div class="echarts-container">
|
|
<customEcharts></customEcharts>
|
|
</div>
|
|
<div class="header">
|
|
<!-- 标题区域 -->
|
|
<div class="title-section">
|
|
<div class="title-decoration"></div>
|
|
<div class="title-text">Historical Data</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-container">
|
|
<span class="range-label">Range</span>
|
|
<div class="filter-row">
|
|
<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>
|
|
</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 ? '0 0 ' + col.width + 'px' : '1 0 116px',
|
|
'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 ? '0 0 ' + col.width + 'px' : '1 0 116px',
|
|
'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">
|
|
<div class="pagination-controls">
|
|
<div class="pagination-buttons">
|
|
<button
|
|
class="page-btn prev-btn"
|
|
:disabled="state.currentPage === 1"
|
|
@click="goToPrevPage"
|
|
>
|
|
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
|
<path
|
|
d="M4 1L1 4.5L4 8"
|
|
stroke="#455363"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<template v-for="page in getVisiblePages()" :key="page">
|
|
<button
|
|
v-if="page !== '...'"
|
|
class="page-btn"
|
|
:class="{ active: page === state.currentPage }"
|
|
@click="goToPage(page)"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
<button v-else class="page-btn disabled" disabled>...</button>
|
|
</template>
|
|
|
|
<button
|
|
class="page-btn next-btn"
|
|
:disabled="state.currentPage === totalPages"
|
|
@click="goToNextPage"
|
|
>
|
|
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
|
|
<path
|
|
d="M1 1L4 4.5L1 8"
|
|
stroke="#455363"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="page-size-selector" @click="togglePageSizeMenu">
|
|
<span>{{ state.pageSize }}/page</span>
|
|
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
|
|
<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="pagination-info">
|
|
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
|
|
{{ state.tableData.length }} results
|
|
</div>
|
|
|
|
<!-- <div class="back-to-top-link">
|
|
<a href="#" @click.prevent="scrollToTop">
|
|
Back to Top
|
|
<n-icon><arrow-up-outline /></n-icon>
|
|
</a>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { NDropdown, NIcon } from "naive-ui";
|
|
import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
|
|
import axios from "axios";
|
|
import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
|
|
import defaultTableData from "../data";
|
|
import customEcharts from "@/components/customEcharts/index.vue";
|
|
|
|
// 数据筛选选项
|
|
const periodOptions = [
|
|
{ label: "Daily", key: "Daily" },
|
|
{ label: "Weekly", key: "Weekly" },
|
|
{ label: "Monthly", key: "Monthly" },
|
|
{ label: "Quarterly", key: "Quarterly" },
|
|
{ label: "Annual", key: "Annual" },
|
|
];
|
|
|
|
const durationOptions = [
|
|
{ label: "3 Months", key: "3 Months" },
|
|
{ label: "6 Months", key: "6 Months" },
|
|
{ label: "YTD", key: "Year to Date" },
|
|
{ label: "1 Year", key: "1 Year" },
|
|
{ label: "5 Years", key: "5 Years" },
|
|
{ label: "10 Years", key: "10 Years" },
|
|
];
|
|
|
|
// 分页大小选项
|
|
const pageSizeOptions = [
|
|
{ label: "10", key: 10 },
|
|
{ label: "50", key: 50 },
|
|
{ label: "100", key: 100 },
|
|
{ label: "500", key: 500 },
|
|
{ label: "1000", key: 1000 },
|
|
];
|
|
|
|
const state = reactive({
|
|
selectedPeriod: "Daily",
|
|
selectedDuration: "6 Months",
|
|
tableData: [],
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
gotoPage: 1,
|
|
});
|
|
|
|
const showPageSizeMenu = ref(false);
|
|
|
|
// 计算总页数
|
|
const totalPages = computed(() => {
|
|
return Math.ceil(state.tableData.length / state.pageSize);
|
|
});
|
|
|
|
// 计算当前页的数据
|
|
const paginatedData = computed(() => {
|
|
const start = (state.currentPage - 1) * state.pageSize;
|
|
const end = start + state.pageSize;
|
|
return state.tableData.slice(start, end);
|
|
});
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: "Date",
|
|
key: "date",
|
|
align: "left",
|
|
fixed: "left",
|
|
width: 152,
|
|
},
|
|
{
|
|
title: "Open",
|
|
key: "open",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "High",
|
|
key: "high",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "Low",
|
|
key: "low",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "Close",
|
|
key: "close",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "Adj. Close",
|
|
key: "adjClose",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "Change",
|
|
key: "change",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
{
|
|
title: "Volume",
|
|
key: "volume",
|
|
align: "center",
|
|
width: 116,
|
|
},
|
|
];
|
|
|
|
// 处理下拉选项变更
|
|
const handlePeriodChange = (key) => {
|
|
state.selectedPeriod = key;
|
|
if (key === "Annual") {
|
|
handleDurationChange("Full History");
|
|
return;
|
|
}
|
|
if (key === "Monthly") {
|
|
handleDurationChange("10 Years");
|
|
return;
|
|
}
|
|
if (key === "Quarterly") {
|
|
handleDurationChange("10 Years");
|
|
return;
|
|
}
|
|
getPageData();
|
|
};
|
|
|
|
const handleDurationChange = (key) => {
|
|
state.selectedDuration = key;
|
|
state.currentPage = 1;
|
|
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 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 total = totalPages.value;
|
|
if (total <= 4) {
|
|
const pages = [];
|
|
for (let i = 1; i <= total; i++) {
|
|
pages.push(i);
|
|
}
|
|
return pages;
|
|
}
|
|
return [1, 2, "...", total];
|
|
};
|
|
|
|
// 回到顶部
|
|
const scrollToTop = () => {
|
|
// 尝试多种方法
|
|
// 1. 使用document.body
|
|
document.body.scrollTop = 0;
|
|
// 2. 使用document.documentElement (HTML元素)
|
|
document.documentElement.scrollTop = 0;
|
|
// 3. 使用scrollIntoView
|
|
document.querySelector(".historic-data-container").scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
};
|
|
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 =
|
|
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
|
|
const res = await axios.get(url);
|
|
let originalData = res.data.data;
|
|
|
|
// 转换为日期格式:"Nov 26, 2024"
|
|
let calcApiData = originalData.map((item) => [
|
|
new Date(item[0]).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
}),
|
|
item[1],
|
|
]);
|
|
// console.log('接口数据', calcApiData)
|
|
|
|
// 使用API数据更新defaultTableData中的close和adjClose值
|
|
const updatedTableData = defaultTableData.map((tableItem) => {
|
|
// 查找对应日期的API数据
|
|
const matchedApiData = calcApiData.find(
|
|
(apiItem) => apiItem[0] === tableItem.date
|
|
);
|
|
|
|
if (matchedApiData) {
|
|
// 更新close和adjClose值
|
|
return {
|
|
...tableItem,
|
|
close: matchedApiData[1].toFixed(2),
|
|
adjClose: matchedApiData[1].toFixed(2),
|
|
};
|
|
}
|
|
return tableItem;
|
|
});
|
|
|
|
state.tableData = updatedTableData;
|
|
} catch (error) {
|
|
// console.error('获取数据失败', error)
|
|
}
|
|
};
|
|
const getPageData = async () => {
|
|
let range = "";
|
|
let now = new Date();
|
|
const last = new Date(now);
|
|
last.setMonth(now.getMonth() - 6);
|
|
let fromDate = last;
|
|
let toDate =
|
|
now.getFullYear() +
|
|
"-" +
|
|
String(now.getMonth() + 1).padStart(2, "0") +
|
|
"-" +
|
|
String(now.getDate()).padStart(2, "0");
|
|
if (state.selectedDuration === "3 Months") {
|
|
range = "3M";
|
|
const last = new Date(now);
|
|
last.setMonth(now.getMonth() - 3);
|
|
fromDate = last;
|
|
} else if (state.selectedDuration === "6 Months") {
|
|
range = "6M";
|
|
const last = new Date(now);
|
|
last.setMonth(now.getMonth() - 6);
|
|
fromDate = last;
|
|
} else if (state.selectedDuration === "Year to Date") {
|
|
range = "YTD";
|
|
fromDate = new Date(now.getFullYear(), 0, 1);
|
|
} else if (state.selectedDuration === "1 Year") {
|
|
range = "1Y";
|
|
const last = new Date(now);
|
|
last.setFullYear(now.getFullYear() - 1);
|
|
fromDate = last;
|
|
} else if (state.selectedDuration === "5 Years") {
|
|
range = "5Y";
|
|
const last = new Date(now);
|
|
last.setFullYear(now.getFullYear() - 5);
|
|
fromDate = last;
|
|
} else if (state.selectedDuration === "10 Years") {
|
|
range = "10Y";
|
|
const last = new Date(now);
|
|
last.setFullYear(now.getFullYear() - 10);
|
|
fromDate = last;
|
|
} else if (state.selectedDuration === "Full History") {
|
|
range = "Max";
|
|
fromDate = new Date("2009-10-07");
|
|
}
|
|
let finalFromDate =
|
|
fromDate.getFullYear() +
|
|
"-" +
|
|
String(fromDate.getMonth() + 1).padStart(2, "0") +
|
|
"-" +
|
|
String(fromDate.getDate()).padStart(2, "0");
|
|
let url =
|
|
"https://common.szjixun.cn/api/stock/history/list?from=" +
|
|
finalFromDate +
|
|
"&to=" +
|
|
toDate;
|
|
const res = await axios.get(url);
|
|
if (res.status === 200) {
|
|
if (res.data.status === 0) {
|
|
// 转换为日期格式:"Nov 26, 2024"
|
|
let resultData = res.data.data.map((item) => {
|
|
return {
|
|
date: new Date(item.date.replace(/-/g, "/")).toLocaleDateString(
|
|
"en-US",
|
|
{
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
}
|
|
),
|
|
open: item.open != null ? Number(item.open).toFixed(2) : "",
|
|
high: item.high != null ? Number(item.high).toFixed(2) : "",
|
|
low: item.low != null ? Number(item.low).toFixed(2) : "",
|
|
close: item.close != null ? Number(item.close).toFixed(2) : "",
|
|
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
|
|
change:
|
|
item.changePercent != null
|
|
? Number(item.changePercent).toFixed(2) + "%"
|
|
: "",
|
|
volume: item.volume,
|
|
};
|
|
});
|
|
state.tableData = resultData;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.historic-data-container {
|
|
width: 343 * 5.12px;
|
|
margin: 0 auto;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 40 * 2.5 * 5.12px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.filter-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8 * 5.12px;
|
|
padding: 0 16 * 5.12px;
|
|
margin-bottom: 32 * 5.12px;
|
|
|
|
.range-label {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.48 * 5.12px;
|
|
color: #455363;
|
|
}
|
|
|
|
.filter-row {
|
|
width: 311 * 5.12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 16 * 5.12px;
|
|
row-gap: 8 * 5.12px;
|
|
}
|
|
|
|
.filter-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 34 * 5.12px;
|
|
border-radius: 3 * 5.12px;
|
|
background-color: #efefef;
|
|
cursor: pointer;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
color: #000000;
|
|
transition: all 0.2s ease;
|
|
width: 93 * 5.12px;
|
|
|
|
&:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #ff7bac;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.back-to-top-link {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 16 * 5.12px;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5 * 5.12px;
|
|
color: #2563eb;
|
|
font-size: 20 * 5.12px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.reports-table {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16 * 5.12px;
|
|
box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
|
|
padding: 16 * 5.12px;
|
|
}
|
|
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar {
|
|
height: 8 * 5.12px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4 * 5.12px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-thumb {
|
|
background: #ccc;
|
|
border-radius: 4 * 5.12px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-thumb:hover {
|
|
background: #fff0f5;
|
|
cursor: pointer;
|
|
}
|
|
.column {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.48 * 5.12px;
|
|
color: #455363;
|
|
padding: 16 * 5.12px;
|
|
position: relative;
|
|
font-variant-numeric: tabular-nums; /* 让数字等宽对齐 */
|
|
}
|
|
.table-header {
|
|
display: flex;
|
|
border-radius: 8 * 5.12px;
|
|
margin-bottom: 4 * 5.12px;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
|
|
.column {
|
|
background: #fff0f5;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.48 * 5.12px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
border-radius: 8 * 5.12px;
|
|
&:hover .column {
|
|
background: #fff8fb;
|
|
}
|
|
|
|
// &:last-child {
|
|
// border-bottom: none;
|
|
// }
|
|
|
|
&:nth-child(even) {
|
|
margin: 4 * 5.12px 0;
|
|
}
|
|
}
|
|
|
|
.reports-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4 * 5.12px;
|
|
}
|
|
|
|
.table-row .column:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 40 * 5.12px;
|
|
border-right: 1 * 5.12px dashed #e0e0e6;
|
|
}
|
|
|
|
.table-header .column:first-child {
|
|
border-radius: 8 * 5.12px 0 0 8 * 5.12px;
|
|
}
|
|
.table-header .column:last-child,
|
|
.table-row .column:last-child {
|
|
border-radius: 0 8 * 5.12px 8 * 5.12px 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: 16 * 5.12px;
|
|
justify-content: flex-end;
|
|
padding: 0 4 * 5.12px;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
color: #455363;
|
|
text-align: right;
|
|
margin-top: 16 * 5.12px;
|
|
margin-bottom: 16 * 5.12px;
|
|
padding: 0 4 * 5.12px;
|
|
}
|
|
|
|
.pagination-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8 * 5.12px;
|
|
}
|
|
|
|
.pagination-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8 * 5.12px;
|
|
}
|
|
.page-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28 * 5.12px;
|
|
height: 28 * 5.12px;
|
|
border: 1 * 5.12px solid #e0e0e6;
|
|
border-radius: 3 * 5.12px;
|
|
background: #ffffff;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
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 * 5.12px;
|
|
padding: 4 * 5.12px 12 * 5.12px;
|
|
height: 28 * 5.12px;
|
|
border: 1 * 5.12px solid #e0e0e6;
|
|
border-radius: 3 * 5.12px;
|
|
background: #ffffff;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
color: #455363;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-color: #ff7bac;
|
|
}
|
|
}
|
|
|
|
.page-size-menu {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: #ffffff;
|
|
border: 1 * 5.12px solid #e0e0e6;
|
|
border-radius: 3 * 5.12px;
|
|
box-shadow: 0 2 * 5.12px 8 * 5.12px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
margin-bottom: 5 * 5.12px;
|
|
}
|
|
|
|
.page-size-option {
|
|
padding: 8 * 5.12px 12 * 5.12px;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
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 * 5.12px;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
color: #455363;
|
|
margin-right: 16 * 5.12px;
|
|
}
|
|
|
|
.goto-input {
|
|
width: 60 * 5.12px;
|
|
height: 28 * 5.12px;
|
|
padding: 4 * 5.12px 12 * 5.12px;
|
|
border: 1 * 5.12px solid #e0e0e6;
|
|
border-radius: 3 * 5.12px;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14 * 5.12px;
|
|
line-height: 1.4;
|
|
color: #455363;
|
|
text-align: center;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #ff7bac;
|
|
}
|
|
}
|
|
|
|
.title-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16 * 5.12px;
|
|
margin-bottom: 32 * 5.12px;
|
|
margin-top: 43 * 5.12px;
|
|
padding: 0 16 * 5.12px;
|
|
}
|
|
|
|
.title-decoration {
|
|
width: 58 * 5.12px;
|
|
height: 7 * 5.12px;
|
|
background: #ff7bac;
|
|
margin: auto 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.title-text {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 24 * 5.12px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.03em;
|
|
color: #000000;
|
|
}
|
|
</style>
|