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