封装统一header、footer、default页面

package.json

@@ -13,6 +13,8 @@
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.4.3",
     "@unocss/reset": "^0.61.9",
+    "@vicons/ionicons5": "^0.13.0",
+    "@vicons/utils": "^0.1.4",
     "axios": "^1.7.3",
     "cnjm-postcss-px-to-viewport": "^1.0.1",
     "gsap": "^3.12.5",

pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       '@unocss/reset':
         specifier: ^0.61.9
         version: 0.61.9
+      '@vicons/ionicons5':
+        specifier: ^0.13.0
+        version: 0.13.0
+      '@vicons/utils':
+        specifier: ^0.1.4
+        version: 0.1.4(vue@3.4.35)
       axios:
         specifier: ^1.7.3
         version: 1.7.3
@@ -1338,6 +1344,9 @@ packages:
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
+  '@types/node@14.14.45':
+    resolution: {integrity: sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==}
+
   '@types/node@22.13.10':
     resolution: {integrity: sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==}
 
@@ -1447,6 +1456,14 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@vicons/ionicons5@0.13.0':
+    resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
+
+  '@vicons/utils@0.1.4':
+    resolution: {integrity: sha512-OHI19qVNN6i+uPQ+Y3f2s0dUxwsYnOCcKBW7XOU4yXXO1aU3ZoKpblCc3+4N0qmgoJs5rWKRAaMisipqEXJwAg==}
+    peerDependencies:
+      vue: ^3.0.6
+
   '@vitejs/plugin-legacy@5.4.1':
     resolution: {integrity: sha512-kee0l7dVevCNs1l3u2PnihVunvQ0WTJL2UJ/siQGD3Iht546mR9NO16tCv32uCP6lcGO1QDLqlPqInJtV1FE7A==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1502,6 +1519,9 @@ packages:
   '@vueuse/shared@10.11.0':
     resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
 
+  '@xicons/utils@0.1.4':
+    resolution: {integrity: sha512-uXxKDLz9abr80yJC05XSTq6wlyFcdW+N/1IYJkeHjzzXVc4VQ0sEYMoMMTjAH7HQBOyOkzOB4pf5NGF72lwa8Q==}
+
   acorn@8.12.1:
     resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
@@ -1816,6 +1836,9 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
+  css-render@0.13.9:
+    resolution: {integrity: sha512-n3C4ZH59rveBrUlAD7n0Ze9/gUMKa4dlH1C9CWKpGcIHR/xRcIVXzBGy1iw8WWq2ySmn2/ZqOpySQNAK5Pb6sw==}
+
   css-render@0.15.14:
     resolution: {integrity: sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==}
 
@@ -5135,6 +5158,8 @@ snapshots:
 
   '@types/minimatch@5.1.2': {}
 
+  '@types/node@14.14.45': {}
+
   '@types/node@22.13.10':
     dependencies:
       undici-types: 6.20.0
@@ -5317,6 +5342,13 @@ snapshots:
     dependencies:
       vue: 3.4.35
 
+  '@vicons/ionicons5@0.13.0': {}
+
+  '@vicons/utils@0.1.4(vue@3.4.35)':
+    dependencies:
+      '@xicons/utils': 0.1.4
+      vue: 3.4.35
+
   '@vitejs/plugin-legacy@5.4.1(terser@5.31.3)(vite@5.3.5(@types/node@22.13.10)(sass@1.77.8)(terser@5.31.3))':
     dependencies:
       '@babel/core': 7.25.2
@@ -5412,6 +5444,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@xicons/utils@0.1.4':
+    dependencies:
+      css-render: 0.13.9
+
   acorn@8.12.1: {}
 
   agent-base@7.1.1:
@@ -5770,6 +5806,12 @@ snapshots:
     dependencies:
       postcss: 8.4.40
 
+  css-render@0.13.9:
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@types/node': 14.14.45
+      csstype: 3.0.11
+
   css-render@0.15.14:
     dependencies:
       '@emotion/hash': 0.8.0

src/App.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-import { useI18n } from "vue-i18n";
-import { NConfigProvider, NDropdown } from "naive-ui";
-const { locale } = useI18n();
-const primaryColor = ref("#2B69A1");
+import { useI18n } from 'vue-i18n'
+import { NConfigProvider, NDropdown } from 'naive-ui'
+const { locale } = useI18n()
+const primaryColor = ref('#8B59F7')
 const themeOverrides = ref({
   common: {
     primaryColorPressed: primaryColor,
@@ -15,10 +15,7 @@ const themeOverrides = ref({
     primaryColor: primaryColor,
     primaryColorHover: primaryColor,
   },
-});
-
-
-
+})
 </script>
 
 <template>

src/components/customDefaultPage/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customDefaultPage/size375/index.vue'
+import size1920 from '@/components/customDefaultPage/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/components/customDefaultPage/size1920/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <!-- 通用缺省页 -->
+    <div class="custom-default-page">
+      <div class="search-area">
+        <customSelectSearch></customSelectSearch>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+  </script>
+  <style scoped lang="scss">
+  .search-area {
+      width: 300px;
+      margin: 100px 300px;
+  }
+  </style>
+  

src/components/customDefaultPage/size375/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <!-- 通用缺省页 -->
+    <div class="custom-default-page">
+      <div class="search-area">
+        <customSelectSearch></customSelectSearch>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+  </script>
+  <style scoped lang="scss">
+  .search-area {
+      width: 1500px;
+      margin: 500px 200px;
+  }
+  </style>
+  

src/components/customFooter/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customFooter/size375/index.vue'
+import size1920 from '@/components/customFooter/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/components/customFooter/size1920/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>Copyright &copy; 2024-2027 FiEE</span>
+    </div>
+  </template>
+  
+  <script setup></script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 24px 0;
+    color: #888;
+    font-size: 15px;
+    background: #f7f8fa;
+    letter-spacing: 1px;
+    border-top: 1px solid #ececec;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+  }
+  </style>
+  

src/components/customFooter/size375/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>Copyright &copy; 2024-2027 FiEE</span>
+    </div>
+  </template>
+  
+  <script setup></script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 120px 0;
+    color: #888;
+    font-size: 75px;
+    background: #f7f8fa;
+    letter-spacing: 5px;
+    border-top: 5px solid #ececec;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+  }
+  </style>
+  

src/components/customHeader/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/components/customHeader/size375/index.vue'
+import size1920 from '@/components/customHeader/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  }
+  //    else if (viewWidth <= 1100) {
+  //     return size768;
+  //   } else if (viewWidth <= 1500) {
+  //     return size1440;
+  //   }
+  else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/components/customHeader/size1920/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo">
+        <NImage width="108" height="33" :src="FiEELogo" preview-disabled />
+      </div>
+      <div class="header-menu">
+        <NMenu
+          mode="horizontal"
+          :options="menuOptions"
+          :inverted="isScrolled"
+          @update:value="handleMenuSelect"
+        />
+      </div>
+    </div>
+  </NLayoutHeader>
+</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()
+
+const isScrolled = ref(false)
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key)
+  if (option && option.href) {
+    router.push(option.href)
+  }
+}
+
+// 菜单配置
+const menuOptions = [
+  {
+    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.business_introduction'),
+        key: 'business_introduction',
+      },
+      {
+        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.committee_appointments'),
+        key: 'committee_appointments',
+      },
+      {
+        label: t('header_menu.corporate_information.governance'),
+        key: 'governance',
+      },
+      {
+        label: t('header_menu.corporate_information.corporate_video'),
+        key: 'corporate_video',
+      },
+    ],
+  },
+  {
+    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.quarterly_results'),
+        key: 'quarterly_results',
+      },
+    ],
+  },
+  {
+    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.historic_stock_price'),
+        key: 'historic_stock_price',
+      },
+      {
+        label: t('header_menu.stock_information.investment_calculator'),
+        key: 'investment_calculator',
+      },
+    ],
+  },
+  {
+    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.events_calendar'),
+        key: 'events_calendar',
+      },
+    ],
+  },
+  {
+    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.email_alerts'),
+        key: 'email_alerts',
+      },
+    ],
+  },
+]
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  --header-height: 80px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  background: transparent;
+  height: var(--header-height);
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+}
+
+.header-menu {
+  display: block;
+}
+</style>

src/components/customHeader/size375/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <!-- 通用页头 -->
+  <NLayoutHeader
+    class="custom-header"
+    :class="{ 'header-scrolled': isScrolled }"
+  >
+    <div class="header-container">
+      <div class="logo">
+        <NImage
+          style="width: 108px; height: 33px; max-width: 100%;"
+          :src="FiEELogo"
+          preview-disabled
+        />
+      </div>
+      <div class="menu-btn" @click="toggleMenu">
+        <n-icon size="28">
+          <menu-outline />
+        </n-icon>
+      </div>
+    </div>
+  </NLayoutHeader>
+  <transition name="fade-slide">
+    <div v-if="showMenu" class="mobile-menu-wrapper" @click.self="closeMenu">
+      <NMenu
+        mode="vertical"
+        :options="menuOptions"
+        :inverted="isScrolled"
+        class="mobile-menu"
+        accordion
+        @update:value="handleMenuSelect"
+      />
+    </div>
+  </transition>
+</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()
+
+const isScrolled = ref(false)
+const showMenu = ref(false)
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value
+}
+const closeMenu = () => {
+  showMenu.value = false
+}
+
+// 递归查找菜单项
+function findMenuOptionByKey(options, key) {
+  for (const option of options) {
+    if (option.key === key) return option
+    if (option.children) {
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 菜单点击跳转
+const handleMenuSelect = (key) => {
+  const option = findMenuOptionByKey(menuOptions, key)
+  if (option && option.href) {
+    router.push(option.href)
+    showMenu.value = false // 跳转后收起菜单
+  }
+}
+
+// 菜单配置
+const menuOptions = [
+  {
+    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.business_introduction'),
+        key: 'business_introduction',
+      },
+      {
+        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.committee_appointments'),
+        key: 'committee_appointments',
+      },
+      {
+        label: t('header_menu.corporate_information.governance'),
+        key: 'governance',
+      },
+      {
+        label: t('header_menu.corporate_information.corporate_video'),
+        key: 'corporate_video',
+      },
+    ],
+  },
+  {
+    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.quarterly_results'),
+        key: 'quarterly_results',
+      },
+    ],
+  },
+  {
+    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.historic_stock_price'),
+        key: 'historic_stock_price',
+      },
+      {
+        label: t('header_menu.stock_information.investment_calculator'),
+        key: 'investment_calculator',
+      },
+    ],
+  },
+  {
+    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.events_calendar'),
+        key: 'events_calendar',
+      },
+    ],
+  },
+  {
+    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.email_alerts'),
+        key: 'email_alerts',
+      },
+    ],
+  },
+]
+
+// 监听滚动事件
+const handleScroll = () => {
+  //滚动距离大于100px时，处理对应的header样式
+  isScrolled.value = window.scrollY >= 100
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped lang="scss">
+.custom-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  background: transparent;
+  height: 320px;
+
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.header-container {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0 80px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  flex-shrink: 0;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.logo :deep(.n-image) {
+  max-width: 100px;
+  height: auto;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #465564;
+  font-size: 75px;
+  padding: 40px 70px;
+  border-radius: 30px;
+  background: #f7f8fa;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
+  user-select: none;
+  transition: background 0.2s;
+}
+.menu-btn:active {
+  background: #ececec;
+}
+
+.mobile-menu-wrapper {
+  position: fixed;
+  top: 320px;
+  left: 0;
+  width: 100vw;
+  background: #fff;
+  z-index: 1100;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  padding: 40px 0 80px 0;
+  max-height: 1500px;
+  overflow-y: auto;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+</style>

src/components/customSelectSearch/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="custom-select-search">
+    <n-select
+      :options="state.selectOptions"
+      v-model:value="state.selectedValue"
+    />
+    <n-input
+      v-model:value="state.inputValue"
+      type="text"
+      placeholder="Search"
+    />
+    <n-button type="primary">Go</n-button>
+  </div>
+</template>
+<script setup>
+import { reactive } from 'vue'
+import { NSelect, NInput, NButton } from 'naive-ui'
+
+const state = reactive({
+  selectedValue: 'all_years', //选中值
+  selectOptions: [
+    {
+      label: 'All Years',
+      value: 'all_years',
+    },
+  ], //下拉选项
+  inputValue: '', //输入值
+})
+</script>
+<style scoped lang="scss">
+.custom-select-search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+</style>

src/locales/en.js

@@ -463,5 +463,38 @@ export default {
       ],
       note: 'Minim representatives (other than authorized speakers) who receive inquiries from the media, market professionals, or shareholders should not respond to such inquiries but should refer the inquirer to an authorized speaker. However, Minim representatives assigned to the Investor Relations and Marketing teams may respond to routine inquiries about public information in accordance with guidelines established by authorized speakers from time to time.'
     }
+  },
+  header_menu: {
+    corporate_information: {
+      title: 'Corporate Information',
+      company_overview: 'Company Overview',
+      business_introduction: 'Business Introduction',
+      management: 'Management',
+      board_of_directors: 'Board of Directors',
+      committee_appointments: 'Committee Appointments',
+      governance: 'Governance',
+      corporate_video: 'Corporate Video'
+    },
+    financial_information: {
+      title: 'Financial Information',
+      sec_filings: 'SEC Filings',
+      quarterly_results: 'Quarterly Results',
+    },
+    stock_information: {
+      title: 'Stock Information',
+      stock_quote: 'Stock Quote',
+      historic_stock_price: 'Historic Stock Price',
+      investment_calculator: 'Investment Calculator'
+    },
+    news_releases: {
+      title: 'News Releases',
+      press_releases: 'Press Releases',
+      events_calendar: 'Events Calendar'
+    },
+    investor_resources: {
+      title: 'Investor Resources',
+      ir_contacts: 'IR Contacts',
+      email_alerts: 'Email Alerts'
+    }
   }
 }

src/router/index.js

@@ -5,43 +5,16 @@ import { setupRouterGuards } from './router-guards';
 const routes = [
     {
         path: '/',
-        redirect: 'home'
-    },
-    {
-        path: '/home',
         name: 'home',
-        component: () => import('@/views/home/index.vue'),
-        // beforeEnter: (to, from, next) => {
-
-        //     localStorage.clear()
-        //     next()
-        // }
+        component: () => import('@/views/home/index.vue'), // MainLayout
+        children: [
+            {
+                path: 'new-releases',
+                name: 'new-releases',
+                component: () => import('@/views/new-releases/index.vue')
             },
-    // {
-    //     path: '/companyprofil',
-    //     name: 'Companyprofil',
-    //     component: () => import('@/views/companyprofil/index.vue'),
-    // },
-    // {
-    //     path: '/companyprofildetail',
-    //     name: 'Companyprofildetail',
-    //     component: () => import('@/views/companyprofildetail/index.vue'),
-    // },
-    // {
-    //     path: '/businessintroduction',
-    //     name: 'Businessintroduction',
-    //     component: () => import('@/views/businessintroduction/index.vue'),
-    // },
-    // {
-    //     path: '/investor',
-    //     name: 'Investor',
-    //     component: () => import('@/views/investor/index.vue'),
-    // },
-    // {
-    //     path: '/investorhandbook',
-    //     name: 'Investorhandbook',
-    //     component: () => import('@/views/investorhandbook/index.vue'),
-    // },
+        ]
+    }
 ];
 
 const router = createRouter({

src/views/home/index.vue

@@ -1,34 +1,12 @@
 <script setup>
-import { computed } from "vue";
-import { useWindowSize } from "@vueuse/core";
-
-import size375 from "@/views/home/size375/index.vue";
-import size768 from "@/views/home/size768/index.vue";
-import size1440 from "@/views/home/size1440/index.vue";
-import size1920 from "@/views/home/size1920/index.vue";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-
-const router = useRouter();
-const { width } = useWindowSize();
-const { t } = useI18n();
-
-const viewComponent = computed(() => {
-  const viewWidth = width.value;
-  if (viewWidth <= 450) {
-    return size375;
-  } else if (viewWidth <= 1100) {
-    return size768;
-  } else if (viewWidth <= 1500) {
-    return size1440;
-  } else if (viewWidth <= 1920 || viewWidth > 1920) {
-    return size1920;
-  }
-});
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
-  <component :is="viewComponent" />
+  <customHeader />
+  <router-view />
+  <customFooter />
 </template>
 
 <style scoped lang="scss"></style>

src/views/home/size1920/index.vue

@@ -1,22 +1,17 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 </script>
 
 <template>
-  <header className="header">
+  <!-- <header className="header">
   1920
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  </header> -->
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
-
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
 </style>
-

src/views/home/size375/index.vue

@@ -1,22 +1,17 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
-
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
 </script>
 
 <template>
-  <header className="header">
+  <!-- <header className="header">
   375
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  </header> -->
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
-
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
 </style>
-

src/views/new-releases/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="new-releases-page">
+    <component :is="viewComponent" />
+  </div>
+</template>
+<script setup>
+import size1920 from '@/views/new-releases/size1920/index.vue'
+import size375 from '@/views/new-releases/size375/index.vue'
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/new-releases/size1920/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="new-releases-page">
+    <customDefaultPage></customDefaultPage>
+  </div>
+</template>
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+</script>
+
+<style scoped lang="scss"></style>

src/views/new-releases/size375/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="new-releases-page">
+    <customDefaultPage></customDefaultPage>
+  </div>
+</template>
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+</script>
+
+<style scoped lang="scss"></style>