Compare commits
No commits in common. "abb1c220cfbb3cb7d35431d048086ed4a9ab3080" and "126bf563271916e8d861baa36fecc1c94b0a5df7" have entirely different histories.
abb1c220cf
...
126bf56327
15
src/dict/secTestData.js
Normal file
15
src/dict/secTestData.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export const fileList = [
|
||||||
|
{
|
||||||
|
filingDate: '2016-05-29',
|
||||||
|
form: '10-K',
|
||||||
|
description: 'Report of foreign issuer rules 13a-16 and 15d-16 of the Securities Exchange Act',
|
||||||
|
link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
|
||||||
|
dataFiles:[
|
||||||
|
{
|
||||||
|
description: 'Report of foreign',
|
||||||
|
link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
@ -1,309 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filings-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filings</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- 筛选器 -->
|
|
||||||
<div class="filters">
|
|
||||||
<div class="filter-group">
|
|
||||||
<label class="filter-label">Filing year</label>
|
|
||||||
<n-select
|
|
||||||
v-model:value="state.selectedYear"
|
|
||||||
:options="state.yearOptions"
|
|
||||||
placeholder="- Any -"
|
|
||||||
style="width: 150px"
|
|
||||||
clearable
|
|
||||||
@update:value="handleYearChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<!-- 公司财务概览 -->
|
||||||
<label class="filter-label">Items per page:</label>
|
<section class="section">
|
||||||
<n-select
|
<div class="section-title">
|
||||||
v-model:value="state.pageSize"
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
:options="state.pageSizeOptions"
|
|
||||||
style="width: 150px"
|
|
||||||
@update:value="handlePageSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 表格 -->
|
<!-- 报告表格 -->
|
||||||
<div class="table-container">
|
<div class="reports-table">
|
||||||
<n-data-table
|
<div class="table-header">
|
||||||
:columns="columns"
|
<div class="column file-name">
|
||||||
:data="paginatedData"
|
{{
|
||||||
:pagination="false"
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
:bordered="false"
|
}}
|
||||||
:size="'medium'"
|
</div>
|
||||||
:row-key="(row) => row.index"
|
<div class="column date">
|
||||||
/>
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 报告列表 -->
|
||||||
<div class="pagination-container">
|
<div class="reports-list">
|
||||||
<n-pagination
|
<div
|
||||||
v-model:page="state.currentPage"
|
class="table-row"
|
||||||
v-model:page-size="state.pageSize"
|
v-for="(report, index) in annualReports"
|
||||||
show-size-picker
|
:key="index"
|
||||||
show-quick-jumper
|
|
||||||
:item-count="filteredData.length"
|
|
||||||
:page-sizes="[10, 25, 50]"
|
|
||||||
@update:page="handlePageChange"
|
|
||||||
@update:page-size="handlePageSizeChange"
|
|
||||||
>
|
>
|
||||||
<template #prev>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<span>‹ Previous</span>
|
<div class="column date">{{ report.date }}</div>
|
||||||
</template>
|
<div class="column download">
|
||||||
<template #next>
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
<span>Next ›</span>
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
</template>
|
}}</a>
|
||||||
</n-pagination>
|
|
||||||
|
|
||||||
<div class="pagination-info">
|
|
||||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
|
||||||
{{ filteredData.length }} results
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, computed, h, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
// 年度报告数据
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
const annualReports = ref([
|
||||||
// 使用 reactive 管理所有状态
|
|
||||||
const state = reactive({
|
|
||||||
selectedYear: null,
|
|
||||||
pageSize: 10,
|
|
||||||
currentPage: 1,
|
|
||||||
|
|
||||||
// 年份选项
|
|
||||||
yearOptions: [
|
|
||||||
{ label: "- Any -", value: null },
|
|
||||||
{ label: "2025", value: 2025 },
|
|
||||||
{ label: "2024", value: 2024 },
|
|
||||||
{ label: "2023", value: 2023 },
|
|
||||||
{ label: "2022", value: 2022 },
|
|
||||||
{ label: "2021", value: 2021 },
|
|
||||||
{ label: "2020", value: 2020 },
|
|
||||||
{ label: "2019", value: 2019 },
|
|
||||||
{ label: "2018", value: 2018 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// 每页条数选项
|
|
||||||
pageSizeOptions: [
|
|
||||||
{ label: "10", value: 10 },
|
|
||||||
{ label: "25", value: 25 },
|
|
||||||
{ label: "50", value: 50 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// SEC文件数据
|
|
||||||
secFilingsData: [],
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
// 月份名称映射
|
|
||||||
const monthNames = [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
];
|
|
||||||
|
|
||||||
state.secFilingsData = fileList.map((item, index) => {
|
|
||||||
// 从 filingDate 中提取年份，支持两种格式：
|
|
||||||
// 1. "Feb 04, 2019" 格式（英文）
|
|
||||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
|
||||||
let year = null;
|
|
||||||
let formattedDate = item.filingDate;
|
|
||||||
|
|
||||||
if (item.filingDate) {
|
|
||||||
if (item.filingDate.includes(", ")) {
|
|
||||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
|
||||||
year = parseInt(item.filingDate.split(", ")[1]);
|
|
||||||
} else if (item.filingDate.includes("-")) {
|
|
||||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
|
||||||
const dateParts = item.filingDate.split("-");
|
|
||||||
const yearPart = parseInt(dateParts[0]);
|
|
||||||
const monthPart = parseInt(dateParts[1]);
|
|
||||||
const dayPart = parseInt(dateParts[2]);
|
|
||||||
|
|
||||||
year = yearPart;
|
|
||||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
|
||||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
|
||||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
index: index,
|
|
||||||
...item,
|
|
||||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
|
||||||
year: year,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
{
|
||||||
title: "Filing Date",
|
fileName: "2024 Annual Report",
|
||||||
key: "formattedDate",
|
date: "April 10, 2025",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 150,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Form",
|
fileName: "2023 Annual Report",
|
||||||
key: "form",
|
date: "April 12, 2024",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 120,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
render: (row) => {
|
|
||||||
return h(
|
|
||||||
"a",
|
|
||||||
{
|
|
||||||
href: "javascript:void(0)",
|
|
||||||
style: {
|
|
||||||
color: "#0078d7",
|
|
||||||
textDecoration: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
},
|
|
||||||
onClick: (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
router.push({
|
|
||||||
path: "/secfilingsDefail",
|
|
||||||
query: {
|
|
||||||
filingDate: row.filingDate,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onMouseover: (e) => {
|
|
||||||
e.target.style.textDecoration = "underline";
|
|
||||||
},
|
|
||||||
onMouseout: (e) => {
|
|
||||||
e.target.style.textDecoration = "none";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
row.form
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Description",
|
fileName: "2022 Annual Report",
|
||||||
key: "description",
|
date: "March 31, 2023",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
ellipsis: {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
tooltip: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "View",
|
fileName: "2021 Annual Report",
|
||||||
key: "view",
|
date: "March 31, 2022",
|
||||||
width: 150,
|
downloadUrl:
|
||||||
render: (row) => {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
return h(
|
},
|
||||||
"div",
|
|
||||||
{
|
{
|
||||||
style: {
|
fileName: "2020 Annual Report",
|
||||||
display: "flex",
|
date: "April 13, 2021",
|
||||||
gap: "8px",
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
},
|
|
||||||
[
|
|
||||||
h(
|
|
||||||
"a",
|
|
||||||
{
|
{
|
||||||
href: row.fileLink,
|
fileName: "2019 Annual Report",
|
||||||
style: {
|
date: "April 15, 2020",
|
||||||
color: "#0078d7",
|
downloadUrl:
|
||||||
textDecoration: "none",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
fontSize: "12px",
|
|
||||||
},
|
},
|
||||||
onMouseover: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "underline";
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
onMouseout: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "none";
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
h("img", {
|
{
|
||||||
src: iconLink,
|
fileName: "2015 Annual Report",
|
||||||
alt: "link",
|
date: "March 15, 2016",
|
||||||
style: {
|
downloadUrl:
|
||||||
width: "24px",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
height: "24px",
|
|
||||||
},
|
},
|
||||||
})
|
{
|
||||||
),
|
fileName: "2014 Annual Report",
|
||||||
]
|
date: "March 24, 2015",
|
||||||
);
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
},
|
},
|
||||||
];
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
// 筛选后的数据
|
date: "March 29, 2013",
|
||||||
const filteredData = computed(() => {
|
downloadUrl:
|
||||||
let data = state.secFilingsData;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
if (state.selectedYear) {
|
{
|
||||||
data = data.filter((item) => item.year === state.selectedYear);
|
fileName: "2011 Annual Report",
|
||||||
}
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
return data;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
});
|
},
|
||||||
|
{
|
||||||
// 分页数据
|
fileName: "2010 Annual Report",
|
||||||
const paginatedData = computed(() => {
|
date: "March 29, 2011",
|
||||||
const start = (state.currentPage - 1) * state.pageSize;
|
downloadUrl:
|
||||||
const end = start + state.pageSize;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
return filteredData.value.slice(start, end);
|
},
|
||||||
});
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
// 总页数
|
date: "March 31, 2010",
|
||||||
const totalPages = computed(() => {
|
downloadUrl:
|
||||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
});
|
},
|
||||||
|
]);
|
||||||
// 当前页起始索引
|
|
||||||
const startIndex = computed(() => {
|
|
||||||
return (state.currentPage - 1) * state.pageSize + 1;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 当前页结束索引
|
|
||||||
const endIndex = computed(() => {
|
|
||||||
const end = state.currentPage * state.pageSize;
|
|
||||||
return Math.min(end, filteredData.value.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理年份变化
|
|
||||||
const handleYearChange = (value) => {
|
|
||||||
state.selectedYear = value;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理页码变化
|
|
||||||
const handlePageChange = (page) => {
|
|
||||||
state.currentPage = page;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理每页条数变化
|
|
||||||
const handlePageSizeChange = (size) => {
|
|
||||||
state.pageSize = size;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -312,103 +171,117 @@ const handlePageSizeChange = (size) => {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
}
|
||||||
|
.financials-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-filings-container {
|
.financials-title {
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: bold;
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.section {
|
||||||
display: flex;
|
margin-bottom: 60px;
|
||||||
gap: 40px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
align-items: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.section-title {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container {
|
.overview-text {
|
||||||
.n-data-table {
|
font-size: 16px;
|
||||||
--n-th-color: #f5f5f5;
|
line-height: 1.6;
|
||||||
--n-th-text-color: #333;
|
color: #333;
|
||||||
--n-td-color: #fff;
|
margin-bottom: 30px;
|
||||||
--n-border-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
margin-bottom: 20px;
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-info {
|
.tab {
|
||||||
font-size: 16px;
|
padding: 10px 20px;
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-th) {
|
|
||||||
background-color: #9e9e9e !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
cursor: pointer;
|
||||||
}
|
border-bottom: 2px solid transparent;
|
||||||
|
|
||||||
:deep(.n-data-table-td) {
|
&.active {
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 2px solid #333;
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-select) {
|
|
||||||
.n-base-selection {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-pagination) {
|
.reports-table {
|
||||||
.n-pagination-item {
|
width: 100%;
|
||||||
border: 1px solid #ccc;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
&.n-pagination-item--active {
|
.table-header {
|
||||||
background-color: #969696;
|
display: flex;
|
||||||
border-color: #969696;
|
padding: 10px 0;
|
||||||
color: white;
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download {
|
||||||
|
width: 25%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-quick-jumper {
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-sizes {
|
.link {
|
||||||
font-size: 16px;
|
color: #f00;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
:pagination="false"
|
:pagination="false"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
:size="'medium'"
|
:size="'medium'"
|
||||||
:row-key="(row) => row.index"
|
:row-key="(row) => row.filingDate"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 分页器 -->
|
||||||
@ -75,7 +75,7 @@ import { reactive, computed, h, onMounted } from "vue";
|
|||||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
import { fileList } from "@/dict/secTestData.js";
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||||
@ -125,7 +125,7 @@ onMounted(() => {
|
|||||||
"Dec",
|
"Dec",
|
||||||
];
|
];
|
||||||
|
|
||||||
state.secFilingsData = fileList.map((item, index) => {
|
state.secFilingsData = fileList.map((item) => {
|
||||||
// 从 filingDate 中提取年份，支持两种格式：
|
// 从 filingDate 中提取年份，支持两种格式：
|
||||||
// 1. "Feb 04, 2019" 格式（英文）
|
// 1. "Feb 04, 2019" 格式（英文）
|
||||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
||||||
@ -151,7 +151,6 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
index: index,
|
|
||||||
...item,
|
...item,
|
||||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
formattedDate: formattedDate, // 更新为统一的英文格式
|
||||||
year: year,
|
year: year,
|
||||||
@ -163,13 +162,12 @@ const columns = [
|
|||||||
{
|
{
|
||||||
title: "Filing Date",
|
title: "Filing Date",
|
||||||
key: "formattedDate",
|
key: "formattedDate",
|
||||||
sorter: "default",
|
sorter: true,
|
||||||
width: 150,
|
width: 150,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Form",
|
title: "Form",
|
||||||
key: "form",
|
key: "form",
|
||||||
sorter: "default",
|
|
||||||
width: 120,
|
width: 120,
|
||||||
render: (row) => {
|
render: (row) => {
|
||||||
return h(
|
return h(
|
||||||
@ -204,7 +202,6 @@ const columns = [
|
|||||||
{
|
{
|
||||||
title: "Description",
|
title: "Description",
|
||||||
key: "description",
|
key: "description",
|
||||||
sorter: "default",
|
|
||||||
ellipsis: {
|
ellipsis: {
|
||||||
tooltip: true,
|
tooltip: true,
|
||||||
},
|
},
|
||||||
@ -226,7 +223,7 @@ const columns = [
|
|||||||
h(
|
h(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
href: row.fileLink,
|
href: row.link,
|
||||||
style: {
|
style: {
|
||||||
color: "#0078d7",
|
color: "#0078d7",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
@ -319,6 +316,7 @@ const handlePageSizeChange = (size) => {
|
|||||||
.sec-filings-container {
|
.sec-filings-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,414 +1,286 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filings-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filings</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- 筛选器 -->
|
|
||||||
<div class="filters">
|
|
||||||
<div class="filter-group">
|
|
||||||
<label class="filter-label">Filing year</label>
|
|
||||||
<n-select
|
|
||||||
v-model:value="state.selectedYear"
|
|
||||||
:options="state.yearOptions"
|
|
||||||
placeholder="- Any -"
|
|
||||||
style="width: 150px"
|
|
||||||
clearable
|
|
||||||
@update:value="handleYearChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<!-- 公司财务概览 -->
|
||||||
<label class="filter-label">Items per page:</label>
|
<section class="section">
|
||||||
<n-select
|
<div class="section-title">
|
||||||
v-model:value="state.pageSize"
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
:options="state.pageSizeOptions"
|
|
||||||
style="width: 150px"
|
|
||||||
@update:value="handlePageSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 表格 -->
|
<!-- 报告表格 -->
|
||||||
<div class="table-container">
|
<div class="reports-table">
|
||||||
<n-data-table
|
<div class="table-header">
|
||||||
:columns="columns"
|
<div class="column file-name">
|
||||||
:data="paginatedData"
|
{{
|
||||||
:pagination="false"
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
:row-key="(row) => row.index"
|
}}
|
||||||
:bordered="false"
|
</div>
|
||||||
:single-line="false"
|
<div class="column date">
|
||||||
:scroll-x="600"
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
/>
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 报告列表 -->
|
||||||
<div class="pagination-container mt-[40px]">
|
<div class="reports-list">
|
||||||
<n-pagination
|
<div
|
||||||
v-model:page="state.currentPage"
|
class="table-row"
|
||||||
v-model:page-size="state.pageSize"
|
v-for="(report, index) in annualReports"
|
||||||
show-size-picker
|
:key="index"
|
||||||
:item-count="filteredData.length"
|
|
||||||
:page-sizes="[10, 25, 50]"
|
|
||||||
@update:page="handlePageChange"
|
|
||||||
@update:page-size="handlePageSizeChange"
|
|
||||||
>
|
>
|
||||||
<template #prev>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<span>‹</span>
|
<div class="column date">{{ report.date }}</div>
|
||||||
</template>
|
<div class="column download">
|
||||||
<template #next>
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
<span> ›</span>
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
</template>
|
}}</a>
|
||||||
</n-pagination>
|
|
||||||
|
|
||||||
<div class="pagination-info mt-[40px]">
|
|
||||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
|
||||||
{{ filteredData.length }} results
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, computed, h, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
|
||||||
// 使用 reactive 管理所有状态
|
|
||||||
const state = reactive({
|
|
||||||
selectedYear: null,
|
|
||||||
pageSize: 10,
|
|
||||||
currentPage: 1,
|
|
||||||
|
|
||||||
// 年份选项
|
// 年度报告数据
|
||||||
yearOptions: [
|
const annualReports = ref([
|
||||||
{ label: "- Any -", value: null },
|
|
||||||
{ label: "2025", value: 2025 },
|
|
||||||
{ label: "2024", value: 2024 },
|
|
||||||
{ label: "2023", value: 2023 },
|
|
||||||
{ label: "2022", value: 2022 },
|
|
||||||
{ label: "2021", value: 2021 },
|
|
||||||
{ label: "2020", value: 2020 },
|
|
||||||
{ label: "2019", value: 2019 },
|
|
||||||
{ label: "2018", value: 2018 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// 每页条数选项
|
|
||||||
pageSizeOptions: [
|
|
||||||
{ label: "10", value: 10 },
|
|
||||||
{ label: "25", value: 25 },
|
|
||||||
{ label: "50", value: 50 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// SEC文件数据
|
|
||||||
secFilingsData: [],
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
// 月份名称映射
|
|
||||||
const monthNames = [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
];
|
|
||||||
|
|
||||||
state.secFilingsData = fileList.map((item, index) => {
|
|
||||||
// 从 filingDate 中提取年份，支持两种格式：
|
|
||||||
// 1. "Feb 04, 2019" 格式（英文）
|
|
||||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
|
||||||
let year = null;
|
|
||||||
let formattedDate = item.filingDate;
|
|
||||||
|
|
||||||
if (item.filingDate) {
|
|
||||||
if (item.filingDate.includes(", ")) {
|
|
||||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
|
||||||
year = parseInt(item.filingDate.split(", ")[1]);
|
|
||||||
} else if (item.filingDate.includes("-")) {
|
|
||||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
|
||||||
const dateParts = item.filingDate.split("-");
|
|
||||||
const yearPart = parseInt(dateParts[0]);
|
|
||||||
const monthPart = parseInt(dateParts[1]);
|
|
||||||
const dayPart = parseInt(dateParts[2]);
|
|
||||||
|
|
||||||
year = yearPart;
|
|
||||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
|
||||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
|
||||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
index: index,
|
|
||||||
...item,
|
|
||||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
|
||||||
year: year,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
{
|
||||||
title: "Filing Date",
|
fileName: "2024 Annual Report",
|
||||||
key: "formattedDate",
|
date: "April 10, 2025",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 150,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Form",
|
fileName: "2023 Annual Report",
|
||||||
key: "form",
|
date: "April 12, 2024",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 120,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
render: (row) => {
|
|
||||||
return h(
|
|
||||||
"a",
|
|
||||||
{
|
|
||||||
href: "javascript:void(0)",
|
|
||||||
style: {
|
|
||||||
color: "#0078d7",
|
|
||||||
textDecoration: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
},
|
|
||||||
onClick: (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
router.push({
|
|
||||||
path: "/secfilingsDefail",
|
|
||||||
query: {
|
|
||||||
filingDate: row.filingDate,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onMouseover: (e) => {
|
|
||||||
e.target.style.textDecoration = "underline";
|
|
||||||
},
|
|
||||||
onMouseout: (e) => {
|
|
||||||
e.target.style.textDecoration = "none";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
row.form
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Description",
|
fileName: "2022 Annual Report",
|
||||||
key: "description",
|
date: "March 31, 2023",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
ellipsis: {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
tooltip: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "View",
|
fileName: "2021 Annual Report",
|
||||||
key: "view",
|
date: "March 31, 2022",
|
||||||
width: 80,
|
downloadUrl:
|
||||||
render: (row) => {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
return h(
|
},
|
||||||
"div",
|
|
||||||
{
|
{
|
||||||
style: {
|
fileName: "2020 Annual Report",
|
||||||
display: "flex",
|
date: "April 13, 2021",
|
||||||
gap: "8px",
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
},
|
|
||||||
[
|
|
||||||
h(
|
|
||||||
"a",
|
|
||||||
{
|
{
|
||||||
href: row.fileLink,
|
fileName: "2019 Annual Report",
|
||||||
style: {
|
date: "April 15, 2020",
|
||||||
color: "#0078d7",
|
downloadUrl:
|
||||||
textDecoration: "none",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
fontSize: "12px",
|
|
||||||
},
|
},
|
||||||
onMouseover: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "underline";
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
onMouseout: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "none";
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
h("img", {
|
{
|
||||||
src: iconLink,
|
fileName: "2015 Annual Report",
|
||||||
alt: "link",
|
date: "March 15, 2016",
|
||||||
style: {
|
downloadUrl:
|
||||||
width: "24px",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
height: "24px",
|
|
||||||
},
|
},
|
||||||
})
|
{
|
||||||
),
|
fileName: "2014 Annual Report",
|
||||||
]
|
date: "March 24, 2015",
|
||||||
);
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
},
|
},
|
||||||
];
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
// 筛选后的数据
|
date: "March 29, 2013",
|
||||||
const filteredData = computed(() => {
|
downloadUrl:
|
||||||
let data = state.secFilingsData;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
if (state.selectedYear) {
|
{
|
||||||
data = data.filter((item) => item.year === state.selectedYear);
|
fileName: "2011 Annual Report",
|
||||||
}
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
return data;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
});
|
},
|
||||||
|
{
|
||||||
// 分页数据
|
fileName: "2010 Annual Report",
|
||||||
const paginatedData = computed(() => {
|
date: "March 29, 2011",
|
||||||
const start = (state.currentPage - 1) * state.pageSize;
|
downloadUrl:
|
||||||
const end = start + state.pageSize;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
return filteredData.value.slice(start, end);
|
},
|
||||||
});
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
// 总页数
|
date: "March 31, 2010",
|
||||||
const totalPages = computed(() => {
|
downloadUrl:
|
||||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
});
|
},
|
||||||
|
]);
|
||||||
// 当前页起始索引
|
|
||||||
const startIndex = computed(() => {
|
|
||||||
return (state.currentPage - 1) * state.pageSize + 1;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 当前页结束索引
|
|
||||||
const endIndex = computed(() => {
|
|
||||||
const end = state.currentPage * state.pageSize;
|
|
||||||
return Math.min(end, filteredData.value.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理年份变化
|
|
||||||
const handleYearChange = (value) => {
|
|
||||||
state.selectedYear = value;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理页码变化
|
|
||||||
const handlePageChange = (page) => {
|
|
||||||
state.currentPage = page;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理每页条数变化
|
|
||||||
const handlePageSizeChange = (size) => {
|
|
||||||
state.pageSize = size;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.page-container {
|
.page-container {
|
||||||
background-image: url("@/assets/image/bg.png");
|
background-image: url("@/assets/image/bg-375.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
}
|
||||||
|
.financials-container {
|
||||||
.sec-filings-container {
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 80px;
|
padding: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.financials-title {
|
||||||
font-size: 113px;
|
font-size: 113px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.section {
|
||||||
display: flex;
|
margin-bottom: 60px;
|
||||||
gap: 40px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
align-items: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.section-title {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-size: 92px;
|
font-size: 92px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container {
|
.overview-text {
|
||||||
.n-data-table {
|
font-size: 72px;
|
||||||
--n-th-color: #f5f5f5;
|
line-height: 1.6;
|
||||||
--n-th-text-color: #333;
|
color: #333;
|
||||||
--n-td-color: #fff;
|
margin-bottom: 30px;
|
||||||
--n-border-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap; // 添加这行
|
margin-bottom: 20px;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 60px;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-info {
|
.tab {
|
||||||
font-size: 72px;
|
padding: 10px 20px;
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-th) {
|
|
||||||
background-color: #9e9e9e !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
cursor: pointer;
|
||||||
}
|
border-bottom: 2px solid transparent;
|
||||||
|
|
||||||
:deep(.n-data-table-td) {
|
&.active {
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 2px solid #333;
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-select) {
|
|
||||||
.n-base-selection {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-pagination) {
|
.reports-table {
|
||||||
.n-pagination-item {
|
width: 100%;
|
||||||
border: 1px solid #ccc;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
&.n-pagination-item--active {
|
.table-header {
|
||||||
background-color: #969696;
|
display: flex;
|
||||||
border-color: #969696;
|
padding: 10px 0;
|
||||||
color: white;
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 45px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
&.download {
|
||||||
|
margin-right: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-quick-jumper {
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-sizes {
|
.link {
|
||||||
font-size: 72px;
|
color: #f00;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,309 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filings-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filings</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- 筛选器 -->
|
|
||||||
<div class="filters">
|
|
||||||
<div class="filter-group">
|
|
||||||
<label class="filter-label">Filing year</label>
|
|
||||||
<n-select
|
|
||||||
v-model:value="state.selectedYear"
|
|
||||||
:options="state.yearOptions"
|
|
||||||
placeholder="- Any -"
|
|
||||||
style="width: 150px"
|
|
||||||
clearable
|
|
||||||
@update:value="handleYearChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-group">
|
<!-- 公司财务概览 -->
|
||||||
<label class="filter-label">Items per page:</label>
|
<section class="section">
|
||||||
<n-select
|
<div class="section-title">
|
||||||
v-model:value="state.pageSize"
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
:options="state.pageSizeOptions"
|
|
||||||
style="width: 150px"
|
|
||||||
@update:value="handlePageSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 表格 -->
|
<!-- 报告表格 -->
|
||||||
<div class="table-container">
|
<div class="reports-table">
|
||||||
<n-data-table
|
<div class="table-header">
|
||||||
:columns="columns"
|
<div class="column file-name">
|
||||||
:data="paginatedData"
|
{{
|
||||||
:pagination="false"
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
:bordered="false"
|
}}
|
||||||
:size="'medium'"
|
</div>
|
||||||
:row-key="(row) => row.index"
|
<div class="column date">
|
||||||
/>
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 分页器 -->
|
<!-- 报告列表 -->
|
||||||
<div class="pagination-container">
|
<div class="reports-list">
|
||||||
<n-pagination
|
<div
|
||||||
class="w-full"
|
class="table-row"
|
||||||
v-model:page="state.currentPage"
|
v-for="(report, index) in annualReports"
|
||||||
v-model:page-size="state.pageSize"
|
:key="index"
|
||||||
show-size-picker
|
|
||||||
show-quick-jumper
|
|
||||||
:item-count="filteredData.length"
|
|
||||||
:page-sizes="[10, 25, 50]"
|
|
||||||
@update:page="handlePageChange"
|
|
||||||
@update:page-size="handlePageSizeChange"
|
|
||||||
>
|
>
|
||||||
<template #prev>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<span>‹ Previous</span>
|
<div class="column date">{{ report.date }}</div>
|
||||||
</template>
|
<div class="column download">
|
||||||
<template #next>
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
<span>Next ›</span>
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
</template>
|
}}</a>
|
||||||
</n-pagination>
|
|
||||||
|
|
||||||
<div class="pagination-info w-full mt-[20px]">
|
|
||||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
|
||||||
{{ filteredData.length }} results
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, computed, h, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const router = useRouter();
|
// 年度报告数据
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
const annualReports = ref([
|
||||||
// 使用 reactive 管理所有状态
|
|
||||||
const state = reactive({
|
|
||||||
selectedYear: null,
|
|
||||||
pageSize: 10,
|
|
||||||
currentPage: 1,
|
|
||||||
|
|
||||||
// 年份选项
|
|
||||||
yearOptions: [
|
|
||||||
{ label: "- Any -", value: null },
|
|
||||||
{ label: "2025", value: 2025 },
|
|
||||||
{ label: "2024", value: 2024 },
|
|
||||||
{ label: "2023", value: 2023 },
|
|
||||||
{ label: "2022", value: 2022 },
|
|
||||||
{ label: "2021", value: 2021 },
|
|
||||||
{ label: "2020", value: 2020 },
|
|
||||||
{ label: "2019", value: 2019 },
|
|
||||||
{ label: "2018", value: 2018 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// 每页条数选项
|
|
||||||
pageSizeOptions: [
|
|
||||||
{ label: "10", value: 10 },
|
|
||||||
{ label: "25", value: 25 },
|
|
||||||
{ label: "50", value: 50 },
|
|
||||||
],
|
|
||||||
|
|
||||||
// SEC文件数据
|
|
||||||
secFilingsData: [],
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
// 月份名称映射
|
|
||||||
const monthNames = [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
];
|
|
||||||
|
|
||||||
state.secFilingsData = fileList.map((item, index) => {
|
|
||||||
// 从 filingDate 中提取年份，支持两种格式：
|
|
||||||
// 1. "Feb 04, 2019" 格式（英文）
|
|
||||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
|
||||||
let year = null;
|
|
||||||
let formattedDate = item.filingDate;
|
|
||||||
|
|
||||||
if (item.filingDate) {
|
|
||||||
if (item.filingDate.includes(", ")) {
|
|
||||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
|
||||||
year = parseInt(item.filingDate.split(", ")[1]);
|
|
||||||
} else if (item.filingDate.includes("-")) {
|
|
||||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
|
||||||
const dateParts = item.filingDate.split("-");
|
|
||||||
const yearPart = parseInt(dateParts[0]);
|
|
||||||
const monthPart = parseInt(dateParts[1]);
|
|
||||||
const dayPart = parseInt(dateParts[2]);
|
|
||||||
|
|
||||||
year = yearPart;
|
|
||||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
|
||||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
|
||||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
index: index,
|
|
||||||
...item,
|
|
||||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
|
||||||
year: year,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
{
|
||||||
title: "Filing Date",
|
fileName: "2024 Annual Report",
|
||||||
key: "formattedDate",
|
date: "April 10, 2025",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 150,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Form",
|
fileName: "2023 Annual Report",
|
||||||
key: "form",
|
date: "April 12, 2024",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
width: 120,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
render: (row) => {
|
|
||||||
return h(
|
|
||||||
"a",
|
|
||||||
{
|
|
||||||
href: "javascript:void(0)",
|
|
||||||
style: {
|
|
||||||
color: "#0078d7",
|
|
||||||
textDecoration: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
},
|
|
||||||
onClick: (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
router.push({
|
|
||||||
path: "/secfilingsDefail",
|
|
||||||
query: {
|
|
||||||
filingDate: row.filingDate,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onMouseover: (e) => {
|
|
||||||
e.target.style.textDecoration = "underline";
|
|
||||||
},
|
|
||||||
onMouseout: (e) => {
|
|
||||||
e.target.style.textDecoration = "none";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
row.form
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Description",
|
fileName: "2022 Annual Report",
|
||||||
key: "description",
|
date: "March 31, 2023",
|
||||||
sorter: "default",
|
downloadUrl:
|
||||||
ellipsis: {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
tooltip: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "View",
|
fileName: "2021 Annual Report",
|
||||||
key: "view",
|
date: "March 31, 2022",
|
||||||
render: (row) => {
|
downloadUrl:
|
||||||
return h(
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
"div",
|
},
|
||||||
{
|
{
|
||||||
style: {
|
fileName: "2020 Annual Report",
|
||||||
display: "flex",
|
date: "April 13, 2021",
|
||||||
gap: "8px",
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
},
|
|
||||||
[
|
|
||||||
h(
|
|
||||||
"a",
|
|
||||||
{
|
{
|
||||||
href: row.fileLink,
|
fileName: "2019 Annual Report",
|
||||||
style: {
|
date: "April 15, 2020",
|
||||||
color: "#0078d7",
|
downloadUrl:
|
||||||
textDecoration: "none",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
fontSize: "12px",
|
|
||||||
},
|
},
|
||||||
onMouseover: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "underline";
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
onMouseout: (e) => {
|
{
|
||||||
e.target.style.textDecoration = "none";
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
h("img", {
|
{
|
||||||
src: iconLink,
|
fileName: "2015 Annual Report",
|
||||||
alt: "link",
|
date: "March 15, 2016",
|
||||||
style: {
|
downloadUrl:
|
||||||
width: "24px",
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
height: "24px",
|
|
||||||
},
|
},
|
||||||
})
|
{
|
||||||
),
|
fileName: "2014 Annual Report",
|
||||||
]
|
date: "March 24, 2015",
|
||||||
);
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
},
|
},
|
||||||
];
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
// 筛选后的数据
|
date: "March 29, 2013",
|
||||||
const filteredData = computed(() => {
|
downloadUrl:
|
||||||
let data = state.secFilingsData;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
if (state.selectedYear) {
|
{
|
||||||
data = data.filter((item) => item.year === state.selectedYear);
|
fileName: "2011 Annual Report",
|
||||||
}
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
return data;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
});
|
},
|
||||||
|
{
|
||||||
// 分页数据
|
fileName: "2010 Annual Report",
|
||||||
const paginatedData = computed(() => {
|
date: "March 29, 2011",
|
||||||
const start = (state.currentPage - 1) * state.pageSize;
|
downloadUrl:
|
||||||
const end = start + state.pageSize;
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
return filteredData.value.slice(start, end);
|
},
|
||||||
});
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
// 总页数
|
date: "March 31, 2010",
|
||||||
const totalPages = computed(() => {
|
downloadUrl:
|
||||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
});
|
},
|
||||||
|
]);
|
||||||
// 当前页起始索引
|
|
||||||
const startIndex = computed(() => {
|
|
||||||
return (state.currentPage - 1) * state.pageSize + 1;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 当前页结束索引
|
|
||||||
const endIndex = computed(() => {
|
|
||||||
const end = state.currentPage * state.pageSize;
|
|
||||||
return Math.min(end, filteredData.value.length);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理年份变化
|
|
||||||
const handleYearChange = (value) => {
|
|
||||||
state.selectedYear = value;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理页码变化
|
|
||||||
const handlePageChange = (page) => {
|
|
||||||
state.currentPage = page;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理每页条数变化
|
|
||||||
const handlePageSizeChange = (size) => {
|
|
||||||
state.pageSize = size;
|
|
||||||
state.currentPage = 1;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -312,104 +171,117 @@ const handlePageSizeChange = (size) => {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
}
|
||||||
|
.financials-container {
|
||||||
.sec-filings-container {
|
|
||||||
max-width: calc(100% - 300px);
|
max-width: calc(100% - 300px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.financials-title {
|
||||||
font-size: 85px;
|
font-size: 85px;
|
||||||
font-weight: bold;
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.section {
|
||||||
display: flex;
|
margin-bottom: 60px;
|
||||||
gap: 40px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
align-items: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.section-title {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container {
|
.overview-text {
|
||||||
.n-data-table {
|
font-size: 40px;
|
||||||
--n-th-color: #f5f5f5;
|
line-height: 1.6;
|
||||||
--n-th-text-color: #333;
|
color: #333;
|
||||||
--n-td-color: #fff;
|
margin-bottom: 30px;
|
||||||
--n-border-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap; // 添加这行
|
margin-bottom: 20px;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-info {
|
.tab {
|
||||||
font-size: 40px;
|
padding: 10px 20px;
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-th) {
|
|
||||||
background-color: #9e9e9e !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
cursor: pointer;
|
||||||
}
|
border-bottom: 2px solid transparent;
|
||||||
|
|
||||||
:deep(.n-data-table-td) {
|
&.active {
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 2px solid #333;
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-select) {
|
|
||||||
.n-base-selection {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.n-pagination) {
|
.reports-table {
|
||||||
.n-pagination-item {
|
width: 100%;
|
||||||
border: 1px solid #ccc;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
&.n-pagination-item--active {
|
.table-header {
|
||||||
background-color: #969696;
|
display: flex;
|
||||||
border-color: #969696;
|
padding: 10px 0;
|
||||||
color: white;
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download {
|
||||||
|
width: 25%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-quick-jumper {
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.n-pagination-sizes {
|
.link {
|
||||||
font-size: 40px;
|
color: #f00;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,110 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filing-detail-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filing Details</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- Document Details 部分 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">Document Details</h2>
|
|
||||||
<div class="details-grid">
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form:</span>
|
|
||||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
|
||||||
filingData.form
|
|
||||||
}}</a>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Filing Date:</span>
|
|
||||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form Description:</span>
|
|
||||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Company:</span>
|
|
||||||
<span class="detail-value">{{ filingData.company }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Issuer:</span>
|
|
||||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filing Formats 部分 -->
|
<!-- 公司财务概览 -->
|
||||||
<div class="section">
|
<section class="section">
|
||||||
<h2 class="section-title">Filing Formats</h2>
|
<div class="section-title">
|
||||||
<div class="formats-list">
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
<div class="format-item">
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
|
||||||
>View HTML</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- XBRL 部分 -->
|
<!-- 报告表格 -->
|
||||||
|
<div class="reports-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="column file-name">
|
||||||
|
{{
|
||||||
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="column date">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 报告列表 -->
|
||||||
|
<div class="reports-list">
|
||||||
<div
|
<div
|
||||||
v-if="
|
class="table-row"
|
||||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
v-for="(report, index) in annualReports"
|
||||||
"
|
:key="index"
|
||||||
class="section"
|
|
||||||
>
|
>
|
||||||
<h2 class="section-title">XBRL</h2>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<div class="formats-list">
|
<div class="column date">{{ report.date }}</div>
|
||||||
<div
|
<div class="column download">
|
||||||
class="format-item"
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
v-for="(item, idx) in filingData.dataFiles"
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
:key="idx"
|
|
||||||
>
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
|
||||||
item.description
|
|
||||||
}}</a>
|
}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
import { useI18n } from "vue-i18n";
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
// 这里可以根据路由参数或props获取具体的文件详情
|
const { t } = useI18n();
|
||||||
const filingData = ref({
|
// 年度报告数据
|
||||||
form: "",
|
const annualReports = ref([
|
||||||
filingDate: "",
|
{
|
||||||
formDescription: "",
|
fileName: "2024 Annual Report",
|
||||||
company: "",
|
date: "April 10, 2025",
|
||||||
issuer: "",
|
downloadUrl:
|
||||||
htmlLink: "#",
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
});
|
},
|
||||||
|
{
|
||||||
const route = useRoute();
|
fileName: "2023 Annual Report",
|
||||||
|
date: "April 12, 2024",
|
||||||
onMounted(() => {
|
downloadUrl:
|
||||||
const { filingDate } = route.query;
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
},
|
||||||
if (file) {
|
{
|
||||||
filingData.value = {
|
fileName: "2022 Annual Report",
|
||||||
form: file.form,
|
date: "March 31, 2023",
|
||||||
filingDate: file.filingDate,
|
downloadUrl:
|
||||||
formDescription: file.formDescription,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
htmlLink: file.fileLink || "#",
|
},
|
||||||
dataFiles: file.dataFiles || [],
|
{
|
||||||
company: "PDD Holdings",
|
fileName: "2021 Annual Report",
|
||||||
issuer: "PDD HOLDINGS INC.",
|
date: "March 31, 2022",
|
||||||
};
|
downloadUrl:
|
||||||
}
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
console.log(filingData.value);
|
},
|
||||||
});
|
{
|
||||||
|
fileName: "2020 Annual Report",
|
||||||
|
date: "April 13, 2021",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2019 Annual Report",
|
||||||
|
date: "April 15, 2020",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2015 Annual Report",
|
||||||
|
date: "March 15, 2016",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2014 Annual Report",
|
||||||
|
date: "March 24, 2015",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
|
date: "March 29, 2013",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2011 Annual Report",
|
||||||
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2010 Annual Report",
|
||||||
|
date: "March 29, 2011",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
|
date: "March 31, 2010",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -113,89 +171,117 @@ onMounted(() => {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
}
|
||||||
|
.financials-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sec-filing-detail-container {
|
.financials-title {
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: bold;
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-text {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-grid {
|
.tab {
|
||||||
display: grid;
|
padding: 10px 20px;
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
cursor: pointer;
|
||||||
min-width: 150px;
|
border-bottom: 2px solid transparent;
|
||||||
flex-shrink: 0;
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.reports-table {
|
||||||
color: #333;
|
width: 100%;
|
||||||
line-height: 1.5;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download {
|
||||||
|
width: 25%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: #0078d7;
|
color: #f00;
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
.formats-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-link {
|
|
||||||
color: #0078d7;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -74,7 +74,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
import { fileList } from "@/dict/secTestData.js";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
// 这里可以根据路由参数或props获取具体的文件详情
|
// 这里可以根据路由参数或props获取具体的文件详情
|
||||||
@ -96,11 +96,11 @@ onMounted(() => {
|
|||||||
filingData.value = {
|
filingData.value = {
|
||||||
form: file.form,
|
form: file.form,
|
||||||
filingDate: file.filingDate,
|
filingDate: file.filingDate,
|
||||||
formDescription: file.formDescription,
|
formDescription: file.description,
|
||||||
htmlLink: file.fileLink || "#",
|
company: file.company,
|
||||||
|
issuer: file.issuer,
|
||||||
|
htmlLink: file.link || "#",
|
||||||
dataFiles: file.dataFiles || [],
|
dataFiles: file.dataFiles || [],
|
||||||
company: "PDD Holdings",
|
|
||||||
issuer: "PDD HOLDINGS INC.",
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
console.log(filingData.value);
|
console.log(filingData.value);
|
||||||
@ -120,6 +120,7 @@ onMounted(() => {
|
|||||||
.sec-filing-detail-container {
|
.sec-filing-detail-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,200 +1,286 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filing-detail-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filing Details</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- Document Details 部分 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">Document Details</h2>
|
|
||||||
<div class="details-grid">
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form:</span>
|
|
||||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
|
||||||
filingData.form
|
|
||||||
}}</a>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Filing Date:</span>
|
|
||||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form Description:</span>
|
|
||||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Company:</span>
|
|
||||||
<span class="detail-value">{{ filingData.company }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Issuer:</span>
|
|
||||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filing Formats 部分 -->
|
<!-- 公司财务概览 -->
|
||||||
<div class="section">
|
<section class="section">
|
||||||
<h2 class="section-title">Filing Formats</h2>
|
<div class="section-title">
|
||||||
<div class="formats-list">
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
<div class="format-item">
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
|
||||||
>View HTML</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- XBRL 部分 -->
|
<!-- 报告表格 -->
|
||||||
|
<div class="reports-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="column file-name">
|
||||||
|
{{
|
||||||
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="column date">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 报告列表 -->
|
||||||
|
<div class="reports-list">
|
||||||
<div
|
<div
|
||||||
v-if="
|
class="table-row"
|
||||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
v-for="(report, index) in annualReports"
|
||||||
"
|
:key="index"
|
||||||
class="section"
|
|
||||||
>
|
>
|
||||||
<h2 class="section-title">XBRL</h2>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<div class="formats-list">
|
<div class="column date">{{ report.date }}</div>
|
||||||
<div
|
<div class="column download">
|
||||||
class="format-item"
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
v-for="(item, idx) in filingData.dataFiles"
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
:key="idx"
|
|
||||||
>
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
|
||||||
item.description
|
|
||||||
}}</a>
|
}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
import { useI18n } from "vue-i18n";
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
// 这里可以根据路由参数或props获取具体的文件详情
|
const { t } = useI18n();
|
||||||
const filingData = ref({
|
|
||||||
form: "",
|
|
||||||
filingDate: "",
|
|
||||||
formDescription: "",
|
|
||||||
company: "",
|
|
||||||
issuer: "",
|
|
||||||
htmlLink: "#",
|
|
||||||
});
|
|
||||||
|
|
||||||
const route = useRoute();
|
// 年度报告数据
|
||||||
|
const annualReports = ref([
|
||||||
onMounted(() => {
|
{
|
||||||
const { filingDate } = route.query;
|
fileName: "2024 Annual Report",
|
||||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
date: "April 10, 2025",
|
||||||
if (file) {
|
downloadUrl:
|
||||||
filingData.value = {
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
form: file.form,
|
},
|
||||||
filingDate: file.filingDate,
|
{
|
||||||
formDescription: file.formDescription,
|
fileName: "2023 Annual Report",
|
||||||
htmlLink: file.fileLink || "#",
|
date: "April 12, 2024",
|
||||||
dataFiles: file.dataFiles || [],
|
downloadUrl:
|
||||||
company: "PDD Holdings",
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
issuer: "PDD HOLDINGS INC.",
|
},
|
||||||
};
|
{
|
||||||
}
|
fileName: "2022 Annual Report",
|
||||||
console.log(filingData.value);
|
date: "March 31, 2023",
|
||||||
});
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2021 Annual Report",
|
||||||
|
date: "March 31, 2022",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2020 Annual Report",
|
||||||
|
date: "April 13, 2021",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2019 Annual Report",
|
||||||
|
date: "April 15, 2020",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2015 Annual Report",
|
||||||
|
date: "March 15, 2016",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2014 Annual Report",
|
||||||
|
date: "March 24, 2015",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
|
date: "March 29, 2013",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2011 Annual Report",
|
||||||
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2010 Annual Report",
|
||||||
|
date: "March 29, 2011",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
|
date: "March 31, 2010",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.page-container {
|
.page-container {
|
||||||
background-image: url("@/assets/image/bg.png");
|
background-image: url("@/assets/image/bg-375.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
}
|
||||||
|
.financials-container {
|
||||||
.sec-filing-detail-container {
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 80px;
|
padding: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.financials-title {
|
||||||
font-size: 113px;
|
font-size: 113px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 92px;
|
font-size: 92px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-text {
|
||||||
|
font-size: 72px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-grid {
|
.tab {
|
||||||
display: grid;
|
padding: 10px 20px;
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
cursor: pointer;
|
||||||
min-width: 150px;
|
border-bottom: 2px solid transparent;
|
||||||
flex-shrink: 0;
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.reports-table {
|
||||||
color: #333;
|
width: 100%;
|
||||||
line-height: 1.5;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 45px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
&.download {
|
||||||
|
margin-right: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
|
font-size: 72px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: #0078d7;
|
color: #f00;
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
.formats-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-icon {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-link {
|
|
||||||
color: #0078d7;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 72px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,110 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div class="sec-filing-detail-container">
|
<div class="financials-container">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="page-title">SEC Filing Details</div>
|
<div class="financials-title">
|
||||||
|
{{ t("financialinformation.secfilings.title") }}
|
||||||
<!-- Document Details 部分 -->
|
|
||||||
<div class="section">
|
|
||||||
<h2 class="section-title">Document Details</h2>
|
|
||||||
<div class="details-grid">
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form:</span>
|
|
||||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
|
||||||
filingData.form
|
|
||||||
}}</a>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Filing Date:</span>
|
|
||||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Form Description:</span>
|
|
||||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Company:</span>
|
|
||||||
<span class="detail-value">{{ filingData.company }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="detail-label">Issuer:</span>
|
|
||||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Filing Formats 部分 -->
|
<!-- 公司财务概览 -->
|
||||||
<div class="section">
|
<section class="section">
|
||||||
<h2 class="section-title">Filing Formats</h2>
|
<div class="section-title">
|
||||||
<div class="formats-list">
|
{{ t("financialinformation.secfilings.overview.title") }}
|
||||||
<div class="format-item">
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
|
||||||
>View HTML</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="overview-text"
|
||||||
|
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||||
|
></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 年度报告 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-title">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- XBRL 部分 -->
|
<!-- 报告表格 -->
|
||||||
|
<div class="reports-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="column file-name">
|
||||||
|
{{
|
||||||
|
t("financialinformation.secfilings.annual_reports.file_name")
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="column date">
|
||||||
|
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||||
|
</div>
|
||||||
|
<div class="column download"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 报告列表 -->
|
||||||
|
<div class="reports-list">
|
||||||
<div
|
<div
|
||||||
v-if="
|
class="table-row"
|
||||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
v-for="(report, index) in annualReports"
|
||||||
"
|
:key="index"
|
||||||
class="section"
|
|
||||||
>
|
>
|
||||||
<h2 class="section-title">XBRL</h2>
|
<div class="column file-name">{{ report.fileName }}</div>
|
||||||
<div class="formats-list">
|
<div class="column date">{{ report.date }}</div>
|
||||||
<div
|
<div class="column download">
|
||||||
class="format-item"
|
<a :href="report.downloadUrl" class="download-link">{{
|
||||||
v-for="(item, idx) in filingData.dataFiles"
|
t("financialinformation.secfilings.annual_reports.view")
|
||||||
:key="idx"
|
|
||||||
>
|
|
||||||
<img :src="iconLink" alt="link" class="format-icon" />
|
|
||||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
|
||||||
item.description
|
|
||||||
}}</a>
|
}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
import { useI18n } from "vue-i18n";
|
||||||
import { fileList } from "@/dict/secFiles.js";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
// 这里可以根据路由参数或props获取具体的文件详情
|
const { t } = useI18n();
|
||||||
const filingData = ref({
|
// 年度报告数据
|
||||||
form: "",
|
const annualReports = ref([
|
||||||
filingDate: "",
|
{
|
||||||
formDescription: "",
|
fileName: "2024 Annual Report",
|
||||||
company: "",
|
date: "April 10, 2025",
|
||||||
issuer: "",
|
downloadUrl:
|
||||||
htmlLink: "#",
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||||
});
|
},
|
||||||
|
{
|
||||||
const route = useRoute();
|
fileName: "2023 Annual Report",
|
||||||
|
date: "April 12, 2024",
|
||||||
onMounted(() => {
|
downloadUrl:
|
||||||
const { filingDate } = route.query;
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
},
|
||||||
if (file) {
|
{
|
||||||
filingData.value = {
|
fileName: "2022 Annual Report",
|
||||||
form: file.form,
|
date: "March 31, 2023",
|
||||||
filingDate: file.filingDate,
|
downloadUrl:
|
||||||
formDescription: file.formDescription,
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||||
htmlLink: file.fileLink || "#",
|
},
|
||||||
dataFiles: file.dataFiles || [],
|
{
|
||||||
company: "PDD Holdings",
|
fileName: "2021 Annual Report",
|
||||||
issuer: "PDD HOLDINGS INC.",
|
date: "March 31, 2022",
|
||||||
};
|
downloadUrl:
|
||||||
}
|
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||||
console.log(filingData.value);
|
},
|
||||||
});
|
{
|
||||||
|
fileName: "2020 Annual Report",
|
||||||
|
date: "April 13, 2021",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2019 Annual Report",
|
||||||
|
date: "April 15, 2020",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2018 Annual Report",
|
||||||
|
date: "April 1, 2019",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2017 Annual Report",
|
||||||
|
date: "March 30, 2018",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2016 Annual Report",
|
||||||
|
date: "March 22, 2017",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2015 Annual Report",
|
||||||
|
date: "March 15, 2016",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2014 Annual Report",
|
||||||
|
date: "March 24, 2015",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2013 Annual Report",
|
||||||
|
date: "March 31, 2014",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2012 Annual Report",
|
||||||
|
date: "March 29, 2013",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2011 Annual Report",
|
||||||
|
date: "March 30, 2012",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2010 Annual Report",
|
||||||
|
date: "March 29, 2011",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fileName: "2009 Annual Report",
|
||||||
|
date: "March 31, 2010",
|
||||||
|
downloadUrl:
|
||||||
|
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||||
|
},
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -113,89 +171,117 @@ onMounted(() => {
|
|||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
}
|
||||||
|
.financials-container {
|
||||||
.sec-filing-detail-container {
|
|
||||||
max-width: calc(100% - 300px);
|
max-width: calc(100% - 300px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.financials-title {
|
||||||
font-size: 85px;
|
font-size: 85px;
|
||||||
font-weight: bold;
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
font-weight: bold;
|
margin-bottom: 20px;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-text {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-grid {
|
.tab {
|
||||||
display: grid;
|
padding: 10px 20px;
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
cursor: pointer;
|
||||||
min-width: 150px;
|
border-bottom: 2px solid transparent;
|
||||||
flex-shrink: 0;
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 2px solid #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.reports-table {
|
||||||
color: #333;
|
width: 100%;
|
||||||
line-height: 1.5;
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.reports-list {
|
||||||
|
// max-height: 600px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
&.file-name {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
&.date {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.download {
|
||||||
|
width: 25%;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-link {
|
||||||
|
color: #0078d7;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec-text {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: #0078d7;
|
color: #f00;
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
.formats-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-icon {
|
|
||||||
width: 68px;
|
|
||||||
height: 68px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.format-link {
|
|
||||||
color: #0078d7;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 40px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user