Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website
This commit is contained in:
Phoenix
commit
309d5fcb25
@ -3,8 +3,8 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "@/views/financialinformation/quarterlyresults/size375/index.vue";
|
||||
import size768 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
|
||||
import size1440 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
|
||||
import size768 from "@/views/financialinformation/quarterlyresults/size768/index.vue";
|
||||
import size1440 from "@/views/financialinformation/quarterlyresults/size1440/index.vue";
|
||||
import size1920 from "@/views/financialinformation/quarterlyresults/size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<header></header>
|
||||
<main class="p-[35px] max-w-[1200px] mx-auto">
|
||||
<div class="title mb-[20px]">
|
||||
{{ t("financialinformation.quarterlyresults.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyresults.search.placeholder')
|
||||
"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
/>
|
||||
<button class="search-button" @click="handleSearch">
|
||||
{{ t("financialinformation.quarterlyresults.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="results-list">
|
||||
<div
|
||||
v-for="(item, index) in filteredList"
|
||||
:key="index"
|
||||
class="result-item"
|
||||
>
|
||||
<div class="content">
|
||||
<a :href="item.url" class="result-title subtitle">{{ item.title }}</a>
|
||||
<p class="result-description content-text">{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="pdf-icon">
|
||||
<a :href="item.url" target="_blank">
|
||||
<img src="@/assets/image/pdf.png" alt="PDF" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
|
||||
import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
|
||||
import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
|
||||
import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
|
||||
import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
|
||||
import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
|
||||
import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
|
||||
import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
|
||||
import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
|
||||
import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
|
||||
import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
|
||||
import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
|
||||
import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
|
||||
import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
|
||||
import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
|
||||
import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
|
||||
import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
|
||||
import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
|
||||
import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
|
||||
import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
|
||||
import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
|
||||
import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
|
||||
import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
|
||||
import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
|
||||
import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
|
||||
import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
|
||||
import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
|
||||
import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
|
||||
import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
|
||||
import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
|
||||
import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
|
||||
import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
|
||||
import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
|
||||
import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
|
||||
import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
|
||||
import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
|
||||
import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
|
||||
import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
|
||||
import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
|
||||
import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
|
||||
import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
|
||||
import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
|
||||
import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
|
||||
import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
|
||||
import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
|
||||
import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
|
||||
|
||||
const { t } = useI18n();
|
||||
const searchQuery = ref("");
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
{
|
||||
title: "2024 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q3,
|
||||
},
|
||||
{
|
||||
title: "2024 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q2,
|
||||
},
|
||||
{
|
||||
title: "2024 Q1 Quarterly Results",
|
||||
description: "First Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q1,
|
||||
},
|
||||
{
|
||||
title: "2023 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q3,
|
||||
},
|
||||
{
|
||||
title: "2023 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q2,
|
||||
},
|
||||
{
|
||||
title: "2023 Q1 Quarterly Results",
|
||||
description: "First Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q1,
|
||||
},
|
||||
{
|
||||
title: "2022 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q3,
|
||||
},
|
||||
{
|
||||
title: "2022 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q2,
|
||||
},
|
||||
{
|
||||
title: "2022 Q1 Quarterly Results",
|
||||
description: "First Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q1,
|
||||
},
|
||||
{
|
||||
title: "2021 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q3,
|
||||
},
|
||||
{
|
||||
title: "2021 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q2,
|
||||
},
|
||||
{
|
||||
title: "2021 Q1 Quarterly Results",
|
||||
description: "First Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q1,
|
||||
},
|
||||
{
|
||||
title: "2020 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q3,
|
||||
},
|
||||
{
|
||||
title: "2020 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q2,
|
||||
},
|
||||
{
|
||||
title: "2020 Q1 Quarterly Results",
|
||||
description: "First Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q1,
|
||||
},
|
||||
{
|
||||
title: "2019 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q3,
|
||||
},
|
||||
{
|
||||
title: "2019 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q2,
|
||||
},
|
||||
{
|
||||
title: "2019 Q1 Quarterly Results",
|
||||
description: "First Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q1,
|
||||
},
|
||||
{
|
||||
title: "2018 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q3,
|
||||
},
|
||||
{
|
||||
title: "2018 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q2,
|
||||
},
|
||||
{
|
||||
title: "2018 Q1 Quarterly Results",
|
||||
description: "First Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q1,
|
||||
},
|
||||
{
|
||||
title: "2017 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q3,
|
||||
},
|
||||
{
|
||||
title: "2017 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q2,
|
||||
},
|
||||
{
|
||||
title: "2017 Q1 Quarterly Results",
|
||||
description: "First Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q1,
|
||||
},
|
||||
{
|
||||
title: "2016 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q3,
|
||||
},
|
||||
{
|
||||
title: "2016 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q2,
|
||||
},
|
||||
{
|
||||
title: "2016 Q1 Quarterly Results",
|
||||
description: "First Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q1,
|
||||
},
|
||||
{
|
||||
title: "2015 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q3,
|
||||
},
|
||||
{
|
||||
title: "2015 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q2,
|
||||
},
|
||||
{
|
||||
title: "2015 Q1 Quarterly Results",
|
||||
description: "First Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q1,
|
||||
},
|
||||
{
|
||||
title: "2014 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q3,
|
||||
},
|
||||
{
|
||||
title: "2014 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q2,
|
||||
},
|
||||
{
|
||||
title: "2014 Q1 Quarterly Results",
|
||||
description: "First Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q1,
|
||||
},
|
||||
{
|
||||
title: "2013 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q3,
|
||||
},
|
||||
{
|
||||
title: "2013 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q2,
|
||||
},
|
||||
{
|
||||
title: "2013 Q1 Quarterly Results",
|
||||
description: "First Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q1,
|
||||
},
|
||||
{
|
||||
title: "2012 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q3,
|
||||
},
|
||||
{
|
||||
title: "2012 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q2,
|
||||
},
|
||||
{
|
||||
title: "2012 Q1 Quarterly Results",
|
||||
description: "First Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q1,
|
||||
},
|
||||
{
|
||||
title: "2011 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q3,
|
||||
},
|
||||
{
|
||||
title: "2011 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q2,
|
||||
},
|
||||
{
|
||||
title: "2011 Q1 Quarterly Results",
|
||||
description: "First Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q1,
|
||||
},
|
||||
{
|
||||
title: "2010 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q3,
|
||||
},
|
||||
{
|
||||
title: "2010 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q2,
|
||||
},
|
||||
{
|
||||
title: "2010 Q1 Quarterly Results",
|
||||
description: "First Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q1,
|
||||
},
|
||||
{
|
||||
title: "2009 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2009 Financial Results",
|
||||
url: quarterlyPdf2009Q3,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(async () => {});
|
||||
const filteredList = computed(() => {
|
||||
if (!searchQuery.value) return state.list;
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return state.list.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(query) ||
|
||||
item.description.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
console.log("搜索:", searchQuery.value);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.content-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
width: 360px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
padding-right: 20px;
|
||||
margin-top: 20px;
|
||||
max-height: 1200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
margin-left: 15px;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +1,21 @@
|
||||
<template>
|
||||
<header></header>
|
||||
<main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 375px">
|
||||
<main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
|
||||
<div class="page-title mb-[24px]">
|
||||
{{ t("financialinformation.quarterlyresults.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<n-input
|
||||
v-model:value="searchQuery"
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyresults.search.placeholder')
|
||||
"
|
||||
clearable
|
||||
:font-size="72"
|
||||
/>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
:font-size="72"
|
||||
class="ml-[10px]"
|
||||
>
|
||||
<button @click="handleSearch" class="search-button">
|
||||
{{ t("financialinformation.quarterlyresults.search.button") }}
|
||||
</n-button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="results-list">
|
||||
@ -412,12 +407,40 @@ const handleDownload = (url) => {
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #2979ff;
|
||||
box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #2979ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #1e6de8;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
|
||||
@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<header></header>
|
||||
<main class="p-[80px] mx-auto" style="max-width: 100vw; min-width: 350px">
|
||||
<div class="page-title mb-[24px]">
|
||||
{{ t("financialinformation.quarterlyresults.title") }}
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
:placeholder="
|
||||
t('financialinformation.quarterlyresults.search.placeholder')
|
||||
"
|
||||
/>
|
||||
<button @click="handleSearch" class="search-button">
|
||||
{{ t("financialinformation.quarterlyresults.search.button") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="results-list">
|
||||
<div
|
||||
v-for="(item, index) in filteredList"
|
||||
:key="index"
|
||||
class="result-item flex items-center mt-[20px] mb-[20px]"
|
||||
>
|
||||
<img
|
||||
src="@/assets/image/pdf.png"
|
||||
alt="PDF"
|
||||
style="width: 20px; height: 20px"
|
||||
/>
|
||||
<div class="content">
|
||||
<div class="result-title">{{ item.title }}</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src="@/assets/image/download.svg"
|
||||
style="width: 20px; height: 20px"
|
||||
@click="handleDownload(item.url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import quarterlyPdf2024Q3 from "@/assets/file/quarterly/10Q 2024-Q3.pdf";
|
||||
import quarterlyPdf2024Q2 from "@/assets/file/quarterly/10Q 2024-Q2.pdf";
|
||||
import quarterlyPdf2024Q1 from "@/assets/file/quarterly/10Q 2024-Q1.pdf";
|
||||
import quarterlyPdf2023Q3 from "@/assets/file/quarterly/10Q 2023-Q3.pdf";
|
||||
import quarterlyPdf2023Q2 from "@/assets/file/quarterly/10Q 2023-Q2.pdf";
|
||||
import quarterlyPdf2023Q1 from "@/assets/file/quarterly/10Q 2023-Q1.pdf";
|
||||
import quarterlyPdf2022Q3 from "@/assets/file/quarterly/10Q 2022-Q3.pdf";
|
||||
import quarterlyPdf2022Q2 from "@/assets/file/quarterly/10Q 2022-Q2.pdf";
|
||||
import quarterlyPdf2022Q1 from "@/assets/file/quarterly/10Q 2022-Q1.pdf";
|
||||
import quarterlyPdf2021Q3 from "@/assets/file/quarterly/10Q 2021-Q3.pdf";
|
||||
import quarterlyPdf2021Q2 from "@/assets/file/quarterly/10Q 2021-Q2.pdf";
|
||||
import quarterlyPdf2021Q1 from "@/assets/file/quarterly/10Q 2021-Q1.pdf";
|
||||
import quarterlyPdf2020Q3 from "@/assets/file/quarterly/10Q 2020-Q3.pdf";
|
||||
import quarterlyPdf2020Q2 from "@/assets/file/quarterly/10Q 2020-Q2.pdf";
|
||||
import quarterlyPdf2020Q1 from "@/assets/file/quarterly/10Q 2020-Q1.pdf";
|
||||
import quarterlyPdf2019Q3 from "@/assets/file/quarterly/10Q 2019-Q3.pdf";
|
||||
import quarterlyPdf2019Q2 from "@/assets/file/quarterly/10Q 2019-Q2.pdf";
|
||||
import quarterlyPdf2019Q1 from "@/assets/file/quarterly/10Q 2019-Q1.pdf";
|
||||
import quarterlyPdf2018Q3 from "@/assets/file/quarterly/10Q 2018-Q3.pdf";
|
||||
import quarterlyPdf2018Q2 from "@/assets/file/quarterly/10Q 2018-Q2.pdf";
|
||||
import quarterlyPdf2018Q1 from "@/assets/file/quarterly/10Q 2018-Q1.pdf";
|
||||
import quarterlyPdf2017Q3 from "@/assets/file/quarterly/10Q 2017-Q3.pdf";
|
||||
import quarterlyPdf2017Q2 from "@/assets/file/quarterly/10Q 2017-Q2.pdf";
|
||||
import quarterlyPdf2017Q1 from "@/assets/file/quarterly/10Q 2017-Q1.pdf";
|
||||
import quarterlyPdf2016Q3 from "@/assets/file/quarterly/10Q 2016-Q3.pdf";
|
||||
import quarterlyPdf2016Q2 from "@/assets/file/quarterly/10Q 2016-Q2.pdf";
|
||||
import quarterlyPdf2016Q1 from "@/assets/file/quarterly/10Q 2016-Q1.pdf";
|
||||
import quarterlyPdf2015Q3 from "@/assets/file/quarterly/10Q 2015-Q3.pdf";
|
||||
import quarterlyPdf2015Q2 from "@/assets/file/quarterly/10Q 2015-Q2.pdf";
|
||||
import quarterlyPdf2015Q1 from "@/assets/file/quarterly/10Q 2015-Q1.pdf";
|
||||
import quarterlyPdf2014Q3 from "@/assets/file/quarterly/10Q 2014-Q3.pdf";
|
||||
import quarterlyPdf2014Q2 from "@/assets/file/quarterly/10Q 2014-Q2.pdf";
|
||||
import quarterlyPdf2014Q1 from "@/assets/file/quarterly/10Q 2014-Q1.pdf";
|
||||
import quarterlyPdf2013Q3 from "@/assets/file/quarterly/10Q 2013-Q3.pdf";
|
||||
import quarterlyPdf2013Q2 from "@/assets/file/quarterly/10Q 2013-Q2.pdf";
|
||||
import quarterlyPdf2013Q1 from "@/assets/file/quarterly/10Q 2013-Q1.pdf";
|
||||
import quarterlyPdf2012Q3 from "@/assets/file/quarterly/10Q 2012-Q3.pdf";
|
||||
import quarterlyPdf2012Q2 from "@/assets/file/quarterly/10Q 2012-Q2.pdf";
|
||||
import quarterlyPdf2012Q1 from "@/assets/file/quarterly/10Q 2012-Q1.pdf";
|
||||
import quarterlyPdf2011Q3 from "@/assets/file/quarterly/10Q 2011-Q3.pdf";
|
||||
import quarterlyPdf2011Q2 from "@/assets/file/quarterly/10Q 2011-Q2.pdf";
|
||||
import quarterlyPdf2011Q1 from "@/assets/file/quarterly/10Q 2011-Q1.pdf";
|
||||
import quarterlyPdf2010Q3 from "@/assets/file/quarterly/10Q 2010-Q3.pdf";
|
||||
import quarterlyPdf2010Q2 from "@/assets/file/quarterly/10Q 2010-Q2.pdf";
|
||||
import quarterlyPdf2010Q1 from "@/assets/file/quarterly/10Q 2010-Q1.pdf";
|
||||
import quarterlyPdf2009Q3 from "@/assets/file/quarterly/10Q 2009-Q3.pdf";
|
||||
|
||||
const { t } = useI18n();
|
||||
const searchQuery = ref("");
|
||||
|
||||
const state = reactive({
|
||||
list: [
|
||||
{
|
||||
title: "2024 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q3,
|
||||
},
|
||||
{
|
||||
title: "2024 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q2,
|
||||
},
|
||||
{
|
||||
title: "2024 Q1 Quarterly Results",
|
||||
description: "First Quarter 2024 Financial Results",
|
||||
url: quarterlyPdf2024Q1,
|
||||
},
|
||||
{
|
||||
title: "2023 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q3,
|
||||
},
|
||||
{
|
||||
title: "2023 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q2,
|
||||
},
|
||||
{
|
||||
title: "2023 Q1 Quarterly Results",
|
||||
description: "First Quarter 2023 Financial Results",
|
||||
url: quarterlyPdf2023Q1,
|
||||
},
|
||||
{
|
||||
title: "2022 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q3,
|
||||
},
|
||||
{
|
||||
title: "2022 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q2,
|
||||
},
|
||||
{
|
||||
title: "2022 Q1 Quarterly Results",
|
||||
description: "First Quarter 2022 Financial Results",
|
||||
url: quarterlyPdf2022Q1,
|
||||
},
|
||||
{
|
||||
title: "2021 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q3,
|
||||
},
|
||||
{
|
||||
title: "2021 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q2,
|
||||
},
|
||||
{
|
||||
title: "2021 Q1 Quarterly Results",
|
||||
description: "First Quarter 2021 Financial Results",
|
||||
url: quarterlyPdf2021Q1,
|
||||
},
|
||||
{
|
||||
title: "2020 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q3,
|
||||
},
|
||||
{
|
||||
title: "2020 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q2,
|
||||
},
|
||||
{
|
||||
title: "2020 Q1 Quarterly Results",
|
||||
description: "First Quarter 2020 Financial Results",
|
||||
url: quarterlyPdf2020Q1,
|
||||
},
|
||||
{
|
||||
title: "2019 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q3,
|
||||
},
|
||||
{
|
||||
title: "2019 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q2,
|
||||
},
|
||||
{
|
||||
title: "2019 Q1 Quarterly Results",
|
||||
description: "First Quarter 2019 Financial Results",
|
||||
url: quarterlyPdf2019Q1,
|
||||
},
|
||||
{
|
||||
title: "2018 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q3,
|
||||
},
|
||||
{
|
||||
title: "2018 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q2,
|
||||
},
|
||||
{
|
||||
title: "2018 Q1 Quarterly Results",
|
||||
description: "First Quarter 2018 Financial Results",
|
||||
url: quarterlyPdf2018Q1,
|
||||
},
|
||||
{
|
||||
title: "2017 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q3,
|
||||
},
|
||||
{
|
||||
title: "2017 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q2,
|
||||
},
|
||||
{
|
||||
title: "2017 Q1 Quarterly Results",
|
||||
description: "First Quarter 2017 Financial Results",
|
||||
url: quarterlyPdf2017Q1,
|
||||
},
|
||||
{
|
||||
title: "2016 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q3,
|
||||
},
|
||||
{
|
||||
title: "2016 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q2,
|
||||
},
|
||||
{
|
||||
title: "2016 Q1 Quarterly Results",
|
||||
description: "First Quarter 2016 Financial Results",
|
||||
url: quarterlyPdf2016Q1,
|
||||
},
|
||||
{
|
||||
title: "2015 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q3,
|
||||
},
|
||||
{
|
||||
title: "2015 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q2,
|
||||
},
|
||||
{
|
||||
title: "2015 Q1 Quarterly Results",
|
||||
description: "First Quarter 2015 Financial Results",
|
||||
url: quarterlyPdf2015Q1,
|
||||
},
|
||||
{
|
||||
title: "2014 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q3,
|
||||
},
|
||||
{
|
||||
title: "2014 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q2,
|
||||
},
|
||||
{
|
||||
title: "2014 Q1 Quarterly Results",
|
||||
description: "First Quarter 2014 Financial Results",
|
||||
url: quarterlyPdf2014Q1,
|
||||
},
|
||||
{
|
||||
title: "2013 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q3,
|
||||
},
|
||||
{
|
||||
title: "2013 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q2,
|
||||
},
|
||||
{
|
||||
title: "2013 Q1 Quarterly Results",
|
||||
description: "First Quarter 2013 Financial Results",
|
||||
url: quarterlyPdf2013Q1,
|
||||
},
|
||||
{
|
||||
title: "2012 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q3,
|
||||
},
|
||||
{
|
||||
title: "2012 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q2,
|
||||
},
|
||||
{
|
||||
title: "2012 Q1 Quarterly Results",
|
||||
description: "First Quarter 2012 Financial Results",
|
||||
url: quarterlyPdf2012Q1,
|
||||
},
|
||||
{
|
||||
title: "2011 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q3,
|
||||
},
|
||||
{
|
||||
title: "2011 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q2,
|
||||
},
|
||||
{
|
||||
title: "2011 Q1 Quarterly Results",
|
||||
description: "First Quarter 2011 Financial Results",
|
||||
url: quarterlyPdf2011Q1,
|
||||
},
|
||||
{
|
||||
title: "2010 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q3,
|
||||
},
|
||||
{
|
||||
title: "2010 Q2 Quarterly Results",
|
||||
description: "Second Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q2,
|
||||
},
|
||||
{
|
||||
title: "2010 Q1 Quarterly Results",
|
||||
description: "First Quarter 2010 Financial Results",
|
||||
url: quarterlyPdf2010Q1,
|
||||
},
|
||||
{
|
||||
title: "2009 Q3 Quarterly Results",
|
||||
description: "Third Quarter 2009 Financial Results",
|
||||
url: quarterlyPdf2009Q3,
|
||||
},
|
||||
],
|
||||
});
|
||||
const filteredList = computed(() => {
|
||||
if (!searchQuery.value) return state.list;
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return state.list.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(query) ||
|
||||
item.description.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索处理逻辑
|
||||
console.log("搜索:", searchQuery.value);
|
||||
};
|
||||
|
||||
const handleDownload = (url) => {
|
||||
// 下载处理逻辑
|
||||
console.log("下载:", url);
|
||||
|
||||
// 创建一个隐藏的a元素
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
|
||||
// 修复文件名提取逻辑
|
||||
let fileName = url.split("/").pop();
|
||||
// 移除可能存在的查询参数
|
||||
if (fileName.includes("?") || fileName.includes("_t=")) {
|
||||
fileName = fileName.split(/[?_]/)[0];
|
||||
}
|
||||
link.download = fileName;
|
||||
link.target = "_blank";
|
||||
|
||||
// 对于移动设备，我们需要特殊处理
|
||||
const isMobile =
|
||||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
// 在移动设备上，可能需要使用fetch下载文件并创建blob
|
||||
fetch(url)
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
link.href = objectUrl;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// 清理
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}, 100);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("下载文件时出错:", error);
|
||||
// 如果fetch失败，回退到window.open
|
||||
window.open(url, "_blank");
|
||||
});
|
||||
} else {
|
||||
// 桌面设备上直接点击链接
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-title {
|
||||
font-size: 85px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #2979ff;
|
||||
box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: #2979ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #1e6de8;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
margin-top: 46px;
|
||||
max-height: 3000px;
|
||||
overflow-y: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 46px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.result-title {
|
||||
color: #2979ff;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 50px;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.result-description {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.pdf-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #ff5252;
|
||||
font-size: 40px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,8 +3,8 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "@/views/financialinformation/secfilings/size375/index.vue";
|
||||
import size768 from "@/views/financialinformation/secfilings/size1920/index.vue";
|
||||
import size1440 from "@/views/financialinformation/secfilings/size1920/index.vue";
|
||||
import size768 from "@/views/financialinformation/secfilings/size768/index.vue";
|
||||
import size1440 from "@/views/financialinformation/secfilings/size1440/index.vue";
|
||||
import size1920 from "@/views/financialinformation/secfilings/size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
302
src/views/financialinformation/secfilings/size1440/index.vue
Normal file
302
src/views/financialinformation/secfilings/size1440/index.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</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 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
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEC文件 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.sec.title") }}
|
||||
</div>
|
||||
<p class="sec-text">
|
||||
{{ t("financialinformation.secfilings.sec.desc") }}
|
||||
<a
|
||||
href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
|
||||
class="link"
|
||||
>{{ t("financialinformation.secfilings.sec.click_here") }}</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
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 {
|
||||
color: #f00;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
302
src/views/financialinformation/secfilings/size768/index.vue
Normal file
302
src/views/financialinformation/secfilings/size768/index.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</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 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
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEC文件 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.sec.title") }}
|
||||
</div>
|
||||
<p class="sec-text">
|
||||
{{ t("financialinformation.secfilings.sec.desc") }}
|
||||
<a
|
||||
href="https://www.sec.gov/cgi-bin/browse-edgar?company=FiEE&match=starts-with&filenum=&State=&Country=&SIC=&myowner=exclude&action=getcompany"
|
||||
class="link"
|
||||
>{{ t("financialinformation.secfilings.sec.click_here") }}</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: calc(100% - 300px);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
font-size: 85px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 40px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
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 {
|
||||
color: #f00;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,8 +3,8 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "./size375/index.vue";
|
||||
import size768 from "./size1920/index.vue";
|
||||
import size1440 from "./size1920/index.vue";
|
||||
import size768 from "./size768/index.vue";
|
||||
import size1440 from "./size1440/index.vue";
|
||||
import size1920 from "./size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
@ -1,22 +1,434 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<img
|
||||
src="@/assets/image/historic-stock.png"
|
||||
alt="1"
|
||||
style="max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<div class="header mt-[20px]">
|
||||
<div class="title">Historical Data</div>
|
||||
<div class="filter-container">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="periodOptions"
|
||||
@select="handlePeriodChange"
|
||||
:value="state.selectedPeriod"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedPeriod }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
</footer>
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="durationOptions"
|
||||
@select="handleDurationChange"
|
||||
:value="state.selectedDuration"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedDuration }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="1200"
|
||||
/>
|
||||
|
||||
<div class="pagination-container">
|
||||
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
||||
<n-icon><chevron-back-outline /></n-icon>
|
||||
Previous
|
||||
</n-button>
|
||||
|
||||
<div class="page-info">
|
||||
Page {{ state.currentPage }} of {{ totalPages }}
|
||||
</div>
|
||||
|
||||
<div class="right-controls">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="pageSizeOptions"
|
||||
@select="handlePageSizeChange"
|
||||
>
|
||||
<n-button class="rows-dropdown">
|
||||
{{ state.pageSize }} Rows
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<n-button class="page-btn next-btn" @click="handleNextPage">
|
||||
Next
|
||||
<n-icon><chevron-forward-outline /></n-icon>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="back-to-top-link">
|
||||
<a href="#" @click.prevent="scrollToTop">
|
||||
Back to Top
|
||||
<n-icon><arrow-up-outline /></n-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
console.log("defaultTableData", defaultTableData);
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
{ label: "Full History", key: "Full History", disabled: true },
|
||||
];
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = [
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
{ label: "1000", key: 1000 },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "3 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算当前页的数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return state.tableData.slice(start, end);
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
fixed: "left",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key;
|
||||
if (key === "Annual") {
|
||||
handleDurationChange("Full History");
|
||||
return;
|
||||
}
|
||||
if (key === "Monthly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
if (key === "Quarterly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return;
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return;
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
// 1. 使用document.body
|
||||
document.body.scrollTop = 0;
|
||||
// 2. 使用document.documentElement (HTML元素)
|
||||
document.documentElement.scrollTop = 0;
|
||||
// 3. 使用scrollIntoView
|
||||
document.querySelector(".historic-data-container").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
||||
const res = await axios.get(url);
|
||||
let originalData = res.data.data;
|
||||
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let calcApiData = originalData.map((item) => [
|
||||
new Date(item[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
item[1],
|
||||
]);
|
||||
console.log("接口数据", calcApiData);
|
||||
|
||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||
// 查找对应日期的API数据
|
||||
const matchedApiData = calcApiData.find(
|
||||
(apiItem) => apiItem[0] === tableItem.date
|
||||
);
|
||||
|
||||
if (matchedApiData) {
|
||||
// 更新close和adjClose值
|
||||
return {
|
||||
...tableItem,
|
||||
close: matchedApiData[1].toFixed(2),
|
||||
adjClose: matchedApiData[1].toFixed(2),
|
||||
};
|
||||
}
|
||||
return tableItem;
|
||||
});
|
||||
|
||||
state.tableData = updatedTableData;
|
||||
} catch (error) {
|
||||
console.error("获取数据失败", error);
|
||||
}
|
||||
};
|
||||
const getPageData = async () => {
|
||||
let range = "";
|
||||
if (state.selectedDuration === "3 Months") {
|
||||
range = "3M";
|
||||
} else if (state.selectedDuration === "6 Months") {
|
||||
range = "6M";
|
||||
} else if (state.selectedDuration === "Year to Date") {
|
||||
range = "YTD";
|
||||
} else if (state.selectedDuration === "1 Year") {
|
||||
range = "1Y";
|
||||
} else if (state.selectedDuration === "5 Years") {
|
||||
range = "5Y";
|
||||
} else if (state.selectedDuration === "10 Years") {
|
||||
range = "10Y";
|
||||
} else if (state.selectedDuration === "Full History") {
|
||||
range = "Max";
|
||||
}
|
||||
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
|
||||
const res = await axios.get(url);
|
||||
if (res.data.status === 200) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let resultData = res.data.data.map((item) => {
|
||||
return {
|
||||
date: new Date(item.t).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
open: item.o != null ? Number(item.o).toFixed(2) : "",
|
||||
high: item.h != null ? Number(item.h).toFixed(2) : "",
|
||||
low: item.l != null ? Number(item.l).toFixed(2) : "",
|
||||
close: item.c != null ? Number(item.c).toFixed(2) : "",
|
||||
adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
|
||||
change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
|
||||
volume: item.v,
|
||||
};
|
||||
});
|
||||
state.tableData = resultData;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.historic-data-container {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 12px;
|
||||
font-size: 20px;
|
||||
|
||||
&.prev-btn {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.next-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 16px;
|
||||
color: #374151;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.rows-dropdown {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #2563eb;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-data-table) {
|
||||
.n-data-table-td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 100px">
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<img
|
||||
src="@/assets/image/historic-stock.png"
|
||||
alt="1"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="historic-data-container" style="margin-bottom: 100px">
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<img
|
||||
src="@/assets/image/historic-stock-375.png"
|
||||
alt="1"
|
||||
@ -345,7 +345,7 @@ const getPageData = async () => {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 113px;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -1,22 +1,432 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
<main ref="main">
|
||||
<div class="historic-data-container" style="margin-bottom: 40px">
|
||||
<img
|
||||
src="@/assets/image/historic-stock.png"
|
||||
alt="1"
|
||||
style="max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<div class="header mt-[20px]">
|
||||
<div class="title">Historical Data</div>
|
||||
<div class="filter-container">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="periodOptions"
|
||||
@select="handlePeriodChange"
|
||||
:value="state.selectedPeriod"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedPeriod }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
</footer>
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="durationOptions"
|
||||
@select="handleDurationChange"
|
||||
:value="state.selectedDuration"
|
||||
>
|
||||
<n-button>
|
||||
{{ state.selectedDuration }}
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="1200"
|
||||
/>
|
||||
|
||||
<div class="pagination-container">
|
||||
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
||||
<n-icon><chevron-back-outline /></n-icon>
|
||||
Previous
|
||||
</n-button>
|
||||
|
||||
<div class="page-info">
|
||||
Page {{ state.currentPage }} of {{ totalPages }}
|
||||
</div>
|
||||
|
||||
<div class="right-controls">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="pageSizeOptions"
|
||||
@select="handlePageSizeChange"
|
||||
>
|
||||
<n-button class="rows-dropdown">
|
||||
{{ state.pageSize }} Rows
|
||||
<n-icon><chevron-down-outline /></n-icon>
|
||||
</n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<n-button class="page-btn next-btn" @click="handleNextPage">
|
||||
Next
|
||||
<n-icon><chevron-forward-outline /></n-icon>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="back-to-top-link">
|
||||
<a href="#" @click.prevent="scrollToTop">
|
||||
Back to Top
|
||||
<n-icon><arrow-up-outline /></n-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import {
|
||||
ChevronDownOutline,
|
||||
ChevronBackOutline,
|
||||
ChevronForwardOutline,
|
||||
ArrowUpOutline,
|
||||
} from "@vicons/ionicons5";
|
||||
import defaultTableData from "../data";
|
||||
console.log("defaultTableData", defaultTableData);
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
{ label: "Full History", key: "Full History", disabled: true },
|
||||
];
|
||||
|
||||
// 分页大小选项
|
||||
const pageSizeOptions = [
|
||||
{ label: "50", key: 50 },
|
||||
{ label: "100", key: 100 },
|
||||
{ label: "500", key: 500 },
|
||||
{ label: "1000", key: 1000 },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "3 Months",
|
||||
tableData: [],
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(state.tableData.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 计算当前页的数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return state.tableData.slice(start, end);
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
fixed: "left",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key;
|
||||
if (key === "Annual") {
|
||||
handleDurationChange("Full History");
|
||||
return;
|
||||
}
|
||||
if (key === "Monthly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
if (key === "Quarterly") {
|
||||
handleDurationChange("10 Years");
|
||||
return;
|
||||
}
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePrevPage = () => {
|
||||
if (state.currentPage === 1) {
|
||||
return;
|
||||
}
|
||||
state.currentPage--;
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (state.currentPage >= totalPages.value) {
|
||||
return;
|
||||
}
|
||||
state.currentPage++;
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 回到顶部
|
||||
const scrollToTop = () => {
|
||||
// 尝试多种方法
|
||||
// 1. 使用document.body
|
||||
document.body.scrollTop = 0;
|
||||
// 2. 使用document.documentElement (HTML元素)
|
||||
document.documentElement.scrollTop = 0;
|
||||
// 3. 使用scrollIntoView
|
||||
document.querySelector(".historic-data-container").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getPageDefaultData();
|
||||
});
|
||||
|
||||
const getPageDefaultData = async () => {
|
||||
try {
|
||||
let url =
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
||||
const res = await axios.get(url);
|
||||
let originalData = res.data.data;
|
||||
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let calcApiData = originalData.map((item) => [
|
||||
new Date(item[0]).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
item[1],
|
||||
]);
|
||||
console.log("接口数据", calcApiData);
|
||||
|
||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
||||
// 查找对应日期的API数据
|
||||
const matchedApiData = calcApiData.find(
|
||||
(apiItem) => apiItem[0] === tableItem.date
|
||||
);
|
||||
|
||||
if (matchedApiData) {
|
||||
// 更新close和adjClose值
|
||||
return {
|
||||
...tableItem,
|
||||
close: matchedApiData[1].toFixed(2),
|
||||
adjClose: matchedApiData[1].toFixed(2),
|
||||
};
|
||||
}
|
||||
return tableItem;
|
||||
});
|
||||
|
||||
state.tableData = updatedTableData;
|
||||
} catch (error) {
|
||||
console.error("获取数据失败", error);
|
||||
}
|
||||
};
|
||||
const getPageData = async () => {
|
||||
let range = "";
|
||||
if (state.selectedDuration === "3 Months") {
|
||||
range = "3M";
|
||||
} else if (state.selectedDuration === "6 Months") {
|
||||
range = "6M";
|
||||
} else if (state.selectedDuration === "Year to Date") {
|
||||
range = "YTD";
|
||||
} else if (state.selectedDuration === "1 Year") {
|
||||
range = "1Y";
|
||||
} else if (state.selectedDuration === "5 Years") {
|
||||
range = "5Y";
|
||||
} else if (state.selectedDuration === "10 Years") {
|
||||
range = "10Y";
|
||||
} else if (state.selectedDuration === "Full History") {
|
||||
range = "Max";
|
||||
}
|
||||
let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`;
|
||||
const res = await axios.get(url);
|
||||
if (res.data.status === 200) {
|
||||
// 转换为日期格式："Nov 26, 2024"
|
||||
let resultData = res.data.data.map((item) => {
|
||||
return {
|
||||
date: new Date(item.t).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
open: item.o != null ? Number(item.o).toFixed(2) : "",
|
||||
high: item.h != null ? Number(item.h).toFixed(2) : "",
|
||||
low: item.l != null ? Number(item.l).toFixed(2) : "",
|
||||
close: item.c != null ? Number(item.c).toFixed(2) : "",
|
||||
adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
|
||||
change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
|
||||
volume: item.v,
|
||||
};
|
||||
});
|
||||
state.tableData = resultData;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.historic-data-container {
|
||||
max-width: calc(100% - 300px);
|
||||
margin: 0 auto;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 85px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
|
||||
.page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 6px 12px;
|
||||
font-size: 50px;
|
||||
|
||||
&.prev-btn {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.next-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 40px;
|
||||
color: #374151;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.rows-dropdown {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #2563eb;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-data-table) {
|
||||
.n-data-table-td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user