Compare commits
5 Commits
f2246e1b69
...
334bef4b05
| Author | SHA1 | Date | |
|---|---|---|---|
| 334bef4b05 | |||
|
309d5fcb25 | ||
|
|
bb11173ce1 | ||
|
e052d59c2b | ||
|
|
c44a1bb1c1 |
@ -1,22 +1,63 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
|
||||
const investmentType = ref('amount')
|
||||
const amount = ref(10000)
|
||||
const dividendType = ref('notReinvested')
|
||||
const investmentDate = ref(null)
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<div class="flex-center min-h-[70vh] animate-bg-move">
|
||||
<n-card
|
||||
class="w-[700px] glass-card animate-bounce-in shadow-xl border-none"
|
||||
:content-style="{padding: '32px 32px'}"
|
||||
:header-style="{background: 'transparent'}"
|
||||
>
|
||||
<div class="flex justify-between gap-6">
|
||||
<!-- 投资类型 -->
|
||||
<div class="flex-1">
|
||||
<div class="text-lg font-bold mb-3">Investment Type</div>
|
||||
<n-radio-group v-model:value="investmentType" name="investmentType">
|
||||
<n-radio value="amount">Amount invested (in dollars)</n-radio>
|
||||
<n-radio value="shares">Number of shares purchased</n-radio>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<!-- 金额与分红 -->
|
||||
<div class="flex-1">
|
||||
<div class="text-lg font-bold mb-3">Amount to Calculate</div>
|
||||
<n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
|
||||
<n-radio-group v-model:value="dividendType" name="dividendType">
|
||||
<n-radio value="reinvested">Dividends reinvested</n-radio>
|
||||
<n-radio value="notReinvested">Dividends not reinvested</n-radio>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<!-- 投资日期 -->
|
||||
<div class="flex-1">
|
||||
<div class="text-lg font-bold mb-3">Investment Date</div>
|
||||
<n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-8">
|
||||
<n-button type="primary" size="medium" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow-lg" @click="handleSubmit">
|
||||
Submit
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,22 +1,63 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
|
||||
|
||||
const investmentType = ref('amount')
|
||||
const amount = ref(10000)
|
||||
const dividendType = ref('notReinvested')
|
||||
const investmentDate = ref(null)
|
||||
|
||||
const handleSubmit = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<div class="flex-center h-70vh px-4 py-8 animate-bg-move">
|
||||
<n-card
|
||||
class="w-full max-w-[900px] glass-card animate-bounce-in shadow-xl border-none"
|
||||
:content-style="{padding: '32px 24px'}"
|
||||
:header-style="{background: 'transparent'}"
|
||||
>
|
||||
<div class="flex flex-col gap-8">
|
||||
<!-- 投资类型 -->
|
||||
<div>
|
||||
<div class="text-lg font-bold mb-3">Investment Type</div>
|
||||
<n-radio-group v-model:value="investmentType" name="investmentType">
|
||||
<n-radio value="amount">Amount invested (in dollars)</n-radio>
|
||||
<n-radio value="shares">Number of shares purchased</n-radio>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<!-- 金额与分红 -->
|
||||
<div>
|
||||
<div class="text-lg font-bold mb-3">Amount to Calculate</div>
|
||||
<n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
|
||||
<n-radio-group v-model:value="dividendType" name="dividendType">
|
||||
<n-radio value="reinvested">Dividends reinvested</n-radio>
|
||||
<n-radio value="notReinvested">Dividends not reinvested</n-radio>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<!-- 投资日期 -->
|
||||
<div>
|
||||
<div class="text-lg font-bold mb-3">Investment Date</div>
|
||||
<n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-8">
|
||||
<n-button type="primary" size="large" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
|
||||
Submit
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,21 +2,44 @@
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
<main ref="main" class="flex-center min-h-80vh bg-[url('@/assets/image/bg-pc.png')] rounded-3xl to-accent w-100vw animate-fade-in bg-[url('@/assets/image/bg-pc.png')]" >
|
||||
<div class="w-full flex flex-col items-center gap-5 py-12 px-6">
|
||||
<h1 class="text-4xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-2xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
<div class="text-xl text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-lg text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
/**** UnoCSS 动画补充（如未全局引入可在 uno.config.js 添加）****/
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,22 +1,41 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
function copyEmail() {
|
||||
navigator.clipboard.writeText('fiee@dlkadvisory.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
<main ref="main" class="flex flex-col items-center from-primary to-accent w-[100vw] mt-12 animate-fade-in px-6 py-10 pt-500px">
|
||||
<div class="w-full flex flex-col items-center gap-5 px-4">
|
||||
<h1 class="text-3xl font-bold text-primary animate-fade-in-down animate-delay-0">Investor Contacts</h1>
|
||||
<div class="text-xl font-semibold text-gray-800 animate-fade-in-down animate-delay-200">FiEE Inc.</div>
|
||||
<div class="text-lg text-secondary animate-fade-in-down animate-delay-400">Investor Relations</div>
|
||||
<div class="text-base text-gray-600 flex items-center gap-2 animate-fade-in-down animate-delay-600">
|
||||
<span>Email:</span>
|
||||
<span class="transition-colors duration-300 cursor-pointer text-accent hover:text-primary active:text-secondary select-all" @click="copyEmail">fiee@dlkadvisory.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
||||
}
|
||||
.animate-delay-0 { animation-delay: 0s; }
|
||||
.animate-delay-200 { animation-delay: 0.2s; }
|
||||
.animate-delay-400 { animation-delay: 0.4s; }
|
||||
.animate-delay-600 { animation-delay: 0.6s; }
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,22 +1,78 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const form = ref({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
phone: "",
|
||||
alertType: "all"
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
submitted.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
<main ref="main" class="relative min-h-[80vh] flex-center bg-[url('@/assets/image/bg-pc.png')] overflow-hidden">
|
||||
<!-- 粒子背景 -->
|
||||
<div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
|
||||
<!-- 表单卡片/提交成功卡片 -->
|
||||
<div class="relative z-10 w-[420px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in">
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-2xl font-bold text-#8A5AFB mb-2 tracking-wide">E-Mail Alerts</h2>
|
||||
<p class="text-sm text-gray-500 mb-5">* Required Fields</p>
|
||||
<form class="space-y-3" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* First Name</label>
|
||||
<input v-model="form.firstName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Last Name</label>
|
||||
<input v-model="form.lastName" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Email</label>
|
||||
<input v-model="form.email" type="email" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">* Company</label>
|
||||
<input v-model="form.company" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1">Phone</label>
|
||||
<input v-model="form.phone" type="tel" class="w-full px-3 py-2 rounded-lg border border-gray-300 ring-2 ring-#8A5AFB/20) transition-all duration-300 outline-none bg-white/90" />
|
||||
</div>
|
||||
<button type="submit" class="w-full py-2.5 rounded-xl bg-#8A5AFB text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in">
|
||||
<span class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"></span>
|
||||
<h2 class="text-xl font-bold text-#8A5AFB mb-2">Submitted successfully!</h2>
|
||||
<div class="text-gray-700 text-sm mb-3">The information you submitted is as follows:</div>
|
||||
<div class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm">
|
||||
<div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
|
||||
<div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
|
||||
<div><span class="font-semibold">Email：</span>{{ form.email }}</div>
|
||||
<div><span class="font-semibold">Company：</span>{{ form.company }}</div>
|
||||
<div><span class="font-semibold">Phone：</span>{{ form.phone || 'Not filled in' }}</div>
|
||||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
/* 可选：自定义粒子或渐变动画背景 */
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,21 +2,78 @@
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
company: '',
|
||||
phone: '',
|
||||
alertType: 'all',
|
||||
});
|
||||
const submitted = ref(false);
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
submitted.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
|
||||
<main ref="main">
|
||||
|
||||
<main class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10">
|
||||
<div class="w-[640px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
|
||||
<template v-if="!submitted">
|
||||
<h2 class="text-2xl font-bold text-#8A5AFB mb-3 text-center tracking-wide">E-Mail Alerts</h2>
|
||||
<p class="text-sm text-gray-500 mb-5 text-center">* Required Fields</p>
|
||||
<form class="flex flex-col gap-4" @submit="handleSubmit">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base">* First Name</label>
|
||||
<input v-model="form.firstName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base">* Last Name</label>
|
||||
<input v-model="form.lastName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base">* Email</label>
|
||||
<input v-model="form.email" type="email" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base">* Company</label>
|
||||
<input v-model="form.company" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-semibold mb-1.5 text-base">Phone</label>
|
||||
<input v-model="form.phone" type="tel" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
|
||||
</div>
|
||||
<button type="submit" class="w-full py-3.5 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in">
|
||||
<span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
|
||||
<h2 class="text-xl font-bold text-#8A5AFB mb-3">Submitted successfully!</h2>
|
||||
<div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
|
||||
<div class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base">
|
||||
<div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
|
||||
<div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
|
||||
<div><span class="font-semibold">Email：</span>{{ form.email }}</div>
|
||||
<div><span class="font-semibold">Company：</span>{{ form.company }}</div>
|
||||
<div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
|
||||
<div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
/* Keep tablet background simple */
|
||||
</style>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,22 +1,62 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import {useStockQuote} from '@/store/stock-quote/index.js'
|
||||
const {getStockQuate,stockQuote,formatted}=useStockQuote()
|
||||
|
||||
getStockQuate()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
1440
|
||||
</header>
|
||||
<main ref="main">
|
||||
|
||||
<main ref="main" class="flex pt-80px flex-col md:flex-row justify-center items-center gap-24 rounded-3xl">
|
||||
<!-- 左侧大号价格 -->
|
||||
<section class="flex flex-col items-center justify-center glass-card p-24 rounded-2xl shadow-xl">
|
||||
<div class="text-8xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.[0].slice(0,4) }}</div>
|
||||
<div class="mt-8 text-2xl text-gray-500 font-semibold tracking-widest mb-8px">NASDAQ: <span class="text-black">MINM</span></div>
|
||||
<div class="text-gray-500">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 右侧信息卡片 -->
|
||||
<section class="grid grid-cols-2 gap-12">
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Open</div>
|
||||
<div class="text-2xl font-bold">{{ stockQuote.Open }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Change</div>
|
||||
<div class="text-2xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Day's Range</div>
|
||||
<div class="text-2xl font-bold">{{ stockQuote.DaysRange }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">52-Week Range</div>
|
||||
<div class="text-2xl font-bold">{{ stockQuote.Week52Range }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Volume</div>
|
||||
<div class="text-2xl font-bold">{{ stockQuote.Volume }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-base text-gray-400">Market Cap</div>
|
||||
<div class="text-2xl font-bold">{{ stockQuote.MarketCap }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
/* 玻璃拟态和卡片动画可用 UnoCSS 快捷方式实现，若未配置可加如下样式 */
|
||||
.glass-card {
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
|
||||
}
|
||||
.info-card {
|
||||
@apply glass-card p-5 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,22 +1,68 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
|
||||
import { useStockQuote } from '@/store/stock-quote/index.js';
|
||||
const { getStockQuate, stockQuote ,formatted} = useStockQuote();
|
||||
getStockQuate();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
768
|
||||
</header>
|
||||
|
||||
<main ref="main">
|
||||
|
||||
<main class="min-h-60vh flex flex-col items-center justify-start px-4 py-6 pt-500px">
|
||||
<!-- 价格卡片 -->
|
||||
<section class="w-full max-w-80vw flex flex-col items-center justify-center glass-card p-6 rounded-2xl shadow mb-6">
|
||||
<div class="text-5xl font-extrabold text-#8A5AFB animate-bg-move select-none drop-shadow-lg">${{ stockQuote.change?.[0].slice(0,4) }}</div>
|
||||
<div class="mt-3 text-base text-gray-500 font-semibold tracking-widest mb-0px">NASDAQ: <span class="text-black">MINM</span></div>
|
||||
<div class="text-gray-500 text-70px">{{ formatted }}</div>
|
||||
</section>
|
||||
<!-- 信息卡片列表 -->
|
||||
<section class="w-full max-w-80vw grid grid-cols-3 gap-4">
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Open</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.Open }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Change</div>
|
||||
<div class="text-xl font-bold text-red-500">{{ stockQuote.change?.join('') }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Day's Range</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">52-Week Range</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Volume</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="text-sm text-gray-400">Market Cap</div>
|
||||
<div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.glass-card {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255,255,255,0.92);
|
||||
border: 1px solid rgba(200,200,255,0.18);
|
||||
box-shadow: 0 3px 12px 0 rgba(31,38,135,0.08);
|
||||
}
|
||||
.info-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 6px 0 rgba(31,38,135,0.06);
|
||||
padding: 16px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user