scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

路由跳转

Browse Source
This commit is contained in:
张 元山 2025-05-22 20:51:37 +08:00
parent dd999b7da8
commit bb108d7ef7
3 changed files with 152 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/customHeader/size1920/index.vue
View File

@ -21,148 +21,150 @@
</template> </template>
<script setup> <script setup>
import FiEELogo from '@/assets/images/header/logo.png' import FiEELogo from "@/assets/images/header/logo.png";
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage } from 'naive-ui' import { NMenu, NLayoutHeader, NImage } from "naive-ui";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
const { t } = useI18n() const { t } = useI18n();
const router = useRouter() const router = useRouter();
const isScrolled = ref(false) const isScrolled = ref(false);
// 递归查找菜单项 // 递归查找菜单项
function findMenuOptionByKey(options, key) { function findMenuOptionByKey(options, key) {
for (const option of options) { for (const option of options) {
if (option.key === key) return option if (option.key === key) return option;
if (option.children) { if (option.children) {
const found = findMenuOptionByKey(option.children, key) const found = findMenuOptionByKey(option.children, key);
if (found) return found if (found) return found;
} }
} }
return null return null;
} }
// 菜单点击跳转 // 菜单点击跳转
const handleMenuSelect = (key) => { const handleMenuSelect = (key) => {
const option = findMenuOptionByKey(menuOptions, key) const option = findMenuOptionByKey(menuOptions, key);
if (option && option.href) { if (option && option.href) {
router.push(option.href) router.push(option.href);
} }
} };
// 菜单配置 // 菜单配置
const menuOptions = [ const menuOptions = [
{ {
label: t('header_menu.corporate_information.title'), label: t("header_menu.corporate_information.title"),
key: 'corporate_information', key: "corporate_information",
children: [ children: [
{ {
label: t('header_menu.corporate_information.company_overview'), label: t("header_menu.corporate_information.company_overview"),
key: 'company_overview', key: "company_overview",
}, },
{ {
label: t('header_menu.corporate_information.business_introduction'), label: t("header_menu.corporate_information.business_introduction"),
key: 'business_introduction', key: "business_introduction",
}, },
{ {
label: t('header_menu.corporate_information.management'), label: t("header_menu.corporate_information.management"),
key: 'management', key: "management",
}, },
{ {
label: t('header_menu.corporate_information.board_of_directors'), label: t("header_menu.corporate_information.board_of_directors"),
key: 'board_of_directors', key: "board_of_directors",
}, },
{ {
label: t('header_menu.corporate_information.committee_appointments'), label: t("header_menu.corporate_information.committee_appointments"),
key: 'committee_appointments', key: "committee_appointments",
}, },
{ {
label: t('header_menu.corporate_information.governance'), label: t("header_menu.corporate_information.governance"),
key: 'governance', key: "governance",
}, },
{ {
label: t('header_menu.corporate_information.corporate_video'), label: t("header_menu.corporate_information.corporate_video"),
key: 'corporate_video', key: "corporate_video",
}, },
], ],
}, },
{ {
label: t('header_menu.financial_information.title'), label: t("header_menu.financial_information.title"),
key: 'financial_information', key: "financial_information",
children: [ children: [
{ {
label: t('header_menu.financial_information.sec_filings'), label: t("header_menu.financial_information.sec_filings"),
key: 'sec_filings', key: "sec_filings",
href: "/secfilings",
}, },
{ {
label: t('header_menu.financial_information.quarterly_results'), label: t("header_menu.financial_information.quarterly_results"),
key: 'quarterly_results', key: "quarterly_results",
href: "/quarterlyresults",
}, },
], ],
}, },
{ {
label: t('header_menu.stock_information.title'), label: t("header_menu.stock_information.title"),
key: 'stock_information', key: "stock_information",
children: [ children: [
{ {
label: t('header_menu.stock_information.stock_quote'), label: t("header_menu.stock_information.stock_quote"),
key: 'stock_quote', key: "stock_quote",
}, },
{ {
label: t('header_menu.stock_information.historic_stock_price'), label: t("header_menu.stock_information.historic_stock_price"),
key: 'historic_stock_price', key: "historic_stock_price",
}, },
{ {
label: t('header_menu.stock_information.investment_calculator'), label: t("header_menu.stock_information.investment_calculator"),
key: 'investment_calculator', key: "investment_calculator",
}, },
], ],
}, },
{ {
label: t('header_menu.news_releases.title'), label: t("header_menu.news_releases.title"),
key: 'news_releases', key: "news_releases",
children: [ children: [
{ {
label: t('header_menu.news_releases.press_releases'), label: t("header_menu.news_releases.press_releases"),
key: 'press_releases', key: "press_releases",
href: '/new-releases', href: "/new-releases",
}, },
{ {
label: t('header_menu.news_releases.events_calendar'), label: t("header_menu.news_releases.events_calendar"),
key: 'events_calendar', key: "events_calendar",
}, },
], ],
}, },
{ {
label: t('header_menu.investor_resources.title'), label: t("header_menu.investor_resources.title"),
key: 'investor_resources', key: "investor_resources",
children: [ children: [
{ {
label: t('header_menu.investor_resources.ir_contacts'), label: t("header_menu.investor_resources.ir_contacts"),
key: 'ir_contacts', key: "ir_contacts",
}, },
{ {
label: t('header_menu.investor_resources.email_alerts'), label: t("header_menu.investor_resources.email_alerts"),
key: 'email_alerts', key: "email_alerts",
}, },
], ],
}, },
] ];
// 监听滚动事件 // 监听滚动事件
const handleScroll = () => { const handleScroll = () => {
//滚动距离大于100px时，处理对应的header样式 //滚动距离大于100px时，处理对应的header样式
isScrolled.value = window.scrollY >= 100 isScrolled.value = window.scrollY >= 100;
} };
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

148
src/components/customHeader/size375/index.vue
View File

@ -7,7 +7,7 @@
<div class="header-container"> <div class="header-container">
<div class="logo"> <div class="logo">
<NImage <NImage
style="width: 108px; height: 33px; max-width: 100%;" style="width: 108px; height: 33px; max-width: 100%"
:src="FiEELogo" :src="FiEELogo"
preview-disabled preview-disabled
/> />
@ -34,158 +34,160 @@
</template> </template>
<script setup> <script setup>
import FiEELogo from '@/assets/images/header/logo.png' import FiEELogo from "@/assets/images/header/logo.png";
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui' import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
import { MenuOutline } from '@vicons/ionicons5' import { MenuOutline } from "@vicons/ionicons5";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
const { t } = useI18n() const { t } = useI18n();
const router = useRouter() const router = useRouter();
const isScrolled = ref(false) const isScrolled = ref(false);
const showMenu = ref(false) const showMenu = ref(false);
const toggleMenu = () => { const toggleMenu = () => {
showMenu.value = !showMenu.value showMenu.value = !showMenu.value;
} };
const closeMenu = () => { const closeMenu = () => {
showMenu.value = false showMenu.value = false;
} };
// 递归查找菜单项 // 递归查找菜单项
function findMenuOptionByKey(options, key) { function findMenuOptionByKey(options, key) {
for (const option of options) { for (const option of options) {
if (option.key === key) return option if (option.key === key) return option;
if (option.children) { if (option.children) {
const found = findMenuOptionByKey(option.children, key) const found = findMenuOptionByKey(option.children, key);
if (found) return found if (found) return found;
} }
} }
return null return null;
} }
// 菜单点击跳转 // 菜单点击跳转
const handleMenuSelect = (key) => { const handleMenuSelect = (key) => {
const option = findMenuOptionByKey(menuOptions, key) const option = findMenuOptionByKey(menuOptions, key);
if (option && option.href) { if (option && option.href) {
router.push(option.href) router.push(option.href);
showMenu.value = false // 跳转后收起菜单 showMenu.value = false; // 跳转后收起菜单
} }
} };
// 菜单配置 // 菜单配置
const menuOptions = [ const menuOptions = [
{ {
label: t('header_menu.corporate_information.title'), label: t("header_menu.corporate_information.title"),
key: 'corporate_information', key: "corporate_information",
children: [ children: [
{ {
label: t('header_menu.corporate_information.company_overview'), label: t("header_menu.corporate_information.company_overview"),
key: 'company_overview', key: "company_overview",
}, },
{ {
label: t('header_menu.corporate_information.business_introduction'), label: t("header_menu.corporate_information.business_introduction"),
key: 'business_introduction', key: "business_introduction",
}, },
{ {
label: t('header_menu.corporate_information.management'), label: t("header_menu.corporate_information.management"),
key: 'management', key: "management",
}, },
{ {
label: t('header_menu.corporate_information.board_of_directors'), label: t("header_menu.corporate_information.board_of_directors"),
key: 'board_of_directors', key: "board_of_directors",
}, },
{ {
label: t('header_menu.corporate_information.committee_appointments'), label: t("header_menu.corporate_information.committee_appointments"),
key: 'committee_appointments', key: "committee_appointments",
}, },
{ {
label: t('header_menu.corporate_information.governance'), label: t("header_menu.corporate_information.governance"),
key: 'governance', key: "governance",
}, },
{ {
label: t('header_menu.corporate_information.corporate_video'), label: t("header_menu.corporate_information.corporate_video"),
key: 'corporate_video', key: "corporate_video",
}, },
], ],
}, },
{ {
label: t('header_menu.financial_information.title'), label: t("header_menu.financial_information.title"),
key: 'financial_information', key: "financial_information",
children: [ children: [
{ {
label: t('header_menu.financial_information.sec_filings'), label: t("header_menu.financial_information.sec_filings"),
key: 'sec_filings', key: "sec_filings",
href: "/secfilings",
}, },
{ {
label: t('header_menu.financial_information.quarterly_results'), label: t("header_menu.financial_information.quarterly_results"),
key: 'quarterly_results', key: "quarterly_results",
href: "/quarterlyresults",
}, },
], ],
}, },
{ {
label: t('header_menu.stock_information.title'), label: t("header_menu.stock_information.title"),
key: 'stock_information', key: "stock_information",
children: [ children: [
{ {
label: t('header_menu.stock_information.stock_quote'), label: t("header_menu.stock_information.stock_quote"),
key: 'stock_quote', key: "stock_quote",
}, },
{ {
label: t('header_menu.stock_information.historic_stock_price'), label: t("header_menu.stock_information.historic_stock_price"),
key: 'historic_stock_price', key: "historic_stock_price",
}, },
{ {
label: t('header_menu.stock_information.investment_calculator'), label: t("header_menu.stock_information.investment_calculator"),
key: 'investment_calculator', key: "investment_calculator",
}, },
], ],
}, },
{ {
label: t('header_menu.news_releases.title'), label: t("header_menu.news_releases.title"),
key: 'news_releases', key: "news_releases",
children: [ children: [
{ {
label: t('header_menu.news_releases.press_releases'), label: t("header_menu.news_releases.press_releases"),
key: 'press_releases', key: "press_releases",
href: '/new-releases', href: "/new-releases",
}, },
{ {
label: t('header_menu.news_releases.events_calendar'), label: t("header_menu.news_releases.events_calendar"),
key: 'events_calendar', key: "events_calendar",
}, },
], ],
}, },
{ {
label: t('header_menu.investor_resources.title'), label: t("header_menu.investor_resources.title"),
key: 'investor_resources', key: "investor_resources",
children: [ children: [
{ {
label: t('header_menu.investor_resources.ir_contacts'), label: t("header_menu.investor_resources.ir_contacts"),
key: 'ir_contacts', key: "ir_contacts",
}, },
{ {
label: t('header_menu.investor_resources.email_alerts'), label: t("header_menu.investor_resources.email_alerts"),
key: 'email_alerts', key: "email_alerts",
}, },
], ],
}, },
] ];
// 监听滚动事件 // 监听滚动事件
const handleScroll = () => { const handleScroll = () => {
//滚动距离大于100px时，处理对应的header样式 //滚动距离大于100px时，处理对应的header样式
isScrolled.value = window.scrollY >= 100 isScrolled.value = window.scrollY >= 100;
} };
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

20
src/router/index.js
View File

@ -18,6 +18,16 @@ const routes = [
name: 'new-releases', name: 'new-releases',
component: () => import('@/views/new-releases/index.vue') component: () => import('@/views/new-releases/index.vue')
}, },
{
path: '/quarterlyresults',
name: 'QuarterlyResults',
component: () => import('@/views/financialinformation/quarterlyresults/index.vue'),
},
{
path: '/secfilings',
name: 'SecFilings',
component: () => import('@/views/financialinformation/secfilings/index.vue'),
},
] ]
}, },
{ {
@ -50,16 +60,6 @@ const routes = [
// name: 'Investorhandbook', // name: 'Investorhandbook',
// component: () => import('@/views/investorhandbook/index.vue'), // component: () => import('@/views/investorhandbook/index.vue'),
// }, // },
{
path: '/quarterlyresults',
name: 'QuarterlyResults',
component: () => import('@/views/financialinformation/quarterlyresults/index.vue'),
},
{
path: '/secfilings',
name: 'SecFilings',
component: () => import('@/views/financialinformation/secfilings/index.vue'),
},
]; ];