From ae3b14cd8919a12b5709aa2ed592483b5c858eb7 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 23 May 2025 08:50:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=83=A8=E5=88=86=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/header/logo.png              | Bin 0 -> 3254 bytes
 .../customHeader/size1920/index.vue           | 230 ++++++++++--------
 src/components/customHeader/size375/index.vue | 164 ++++---------
 src/config/headerMenuConfig.js                | 103 ++++++++
 src/router/index.js                           | 121 ++++-----
 src/views/home/size1920/index.vue             |  13 +-
 src/views/home/size375/index.vue              |  14 +-
 src/views/index/index.vue                     |  22 ++
 src/views/index/size1920/index.vue            |  21 ++
 src/views/index/size375/index.vue             |  26 ++
 src/views/press-releases/index.vue            |  23 ++
 src/views/press-releases/size1920/index.vue   |  10 +
 src/views/press-releases/size375/index.vue    |  10 +
 13 files changed, 466 insertions(+), 291 deletions(-)
 create mode 100644 src/assets/image/header/logo.png
 create mode 100644 src/config/headerMenuConfig.js
 create mode 100644 src/views/index/index.vue
 create mode 100644 src/views/index/size1920/index.vue
 create mode 100644 src/views/index/size375/index.vue
 create mode 100644 src/views/press-releases/index.vue
 create mode 100644 src/views/press-releases/size1920/index.vue
 create mode 100644 src/views/press-releases/size375/index.vue

diff --git a/src/assets/image/header/logo.png b/src/assets/image/header/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..61c89ed624dd453f9bb382b97a98556198247751
GIT binary patch
literal 3254
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

literal 0
HcmV?d00001

diff --git a/src/components/customHeader/size1920/index.vue b/src/components/customHeader/size1920/index.vue
index e787029..8cd1ab8 100644
--- a/src/components/customHeader/size1920/index.vue
+++ b/src/components/customHeader/size1920/index.vue
@@ -5,14 +5,15 @@
     :class="{ 'header-scrolled': isScrolled }"
   >
     <div class="header-container">
-      <div class="logo">
-        <NImage width="108" height="33" :src="FiEELogo" preview-disabled />
+      <div class="logo" @click="handleToHome">
+        <NImage width="160" height="50" :src="FiEELogo" preview-disabled />
       </div>
       <div class="header-menu">
         <NMenu
           mode="horizontal"
           :options="menuOptions"
           :inverted="isScrolled"
+          v-model:value="selectedKey"
           @update:value="handleMenuSelect"
         />
       </div>
@@ -21,14 +22,20 @@
 </template>
 
 <script setup>
-import FiEELogo from '@/assets/images/header/logo.png'
+import FiEELogo from '@/assets/image/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'
+import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
+
 const { t } = useI18n()
 const router = useRouter()
 
+// 使用统一的菜单配置
+const menuOptions = useHeaderMenuConfig()
+const selectedKey = ref(null)
+
 const isScrolled = ref(false)
 
 // 递归查找菜单项
@@ -51,105 +58,6 @@ const handleMenuSelect = (key) => {
   }
 }
 
-// 菜单配置
-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样式
@@ -163,11 +71,18 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
 })
+
+//点击回到首页
+const handleToHome = () => {
+  router.push('/')
+  selectedKey.value = null // 重置菜单选中状态
+}
 </script>
 
 <style scoped lang="scss">
 .custom-header {
   --header-height: 80px;
+  --primary-color: #8B59F7;
   position: fixed;
   top: 0;
   left: 0;
@@ -179,14 +94,15 @@ onUnmounted(() => {
 
   &.header-scrolled {
     background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 }
 
 .header-container {
-  max-width: 1200px;
+  max-width: 1700px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 40px;
   height: 100%;
   display: flex;
   align-items: center;
@@ -195,9 +111,115 @@ onUnmounted(() => {
 
 .logo {
   flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  margin-right: 100px;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
 }
 
 .header-menu {
   display: block;
+  flex: 1;
+
+  :deep(.n-menu) {
+    background: transparent;
+    justify-content: flex-end;
+  }
+
+  :deep(.n-menu-item) {
+    position: relative;
+    margin: 0 20px;
+    transition: all 0.3s ease;
+    font-weight: 700;
+    font-size: 16px;
+    min-width: 120px;
+    text-align: center;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 2px;
+      background: var(--primary-color);
+      transition: all 0.3s ease;
+      transform: translateX(-50%);
+      opacity: 0;
+      border-radius: 2px;
+    }
+
+    &:hover {
+      &::after {
+        width: 80px;
+        height: 3px;
+        opacity: 1;
+      }
+    }
+
+    // 选中状态的样式
+    &.n-menu-item--selected {
+      &::after {
+        width: 40px;
+        opacity: 1;
+      }
+    }
+  }
+
+  // 子菜单样式
+  :deep(.n-submenu) {
+    .n-submenu-children {
+      backdrop-filter: blur(16px);
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 12px;
+      padding: 8px 0;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transform-origin: top;
+      animation: dropDown 0.3s ease;
+
+      .n-menu-item {
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: var(--primary-color);
+          transform: translateX(-100%);
+          transition: transform 0.3s ease;
+          opacity: 0.1;
+          z-index: -1;
+        }
+
+        &:hover {
+          &::before {
+            transform: translateX(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes dropDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 </style>
diff --git a/src/components/customHeader/size375/index.vue b/src/components/customHeader/size375/index.vue
index 7b911b7..13ee380 100644
--- a/src/components/customHeader/size375/index.vue
+++ b/src/components/customHeader/size375/index.vue
@@ -5,16 +5,19 @@
     :class="{ 'header-scrolled': isScrolled }"
   >
     <div class="header-container">
-      <div class="logo">
+      <div class="logo" @click="handleToHome">
         <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 />
+      <div class="menu-btn" :class="{ 'menu-open': showMenu }" @click="toggleMenu">
+        <n-icon size="28" class="menu-icon menu-icon-menu">
+          <menu-sharp />
+        </n-icon>
+        <n-icon size="28" class="menu-icon menu-icon-close">
+          <close-sharp />
         </n-icon>
       </div>
     </div>
@@ -27,6 +30,7 @@
         :inverted="isScrolled"
         class="mobile-menu"
         accordion
+        v-model:value="selectedKey"
         @update:value="handleMenuSelect"
       />
     </div>
@@ -34,17 +38,20 @@
 </template>
 
 <script setup>
-import FiEELogo from '@/assets/images/header/logo.png'
+import FiEELogo from '@/assets/image/header/logo.png'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui'
-import { MenuOutline } from '@vicons/ionicons5'
+import { MenuSharp, CloseSharp } from '@vicons/ionicons5'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
+
 const { t } = useI18n()
 const router = useRouter()
 
 const isScrolled = ref(false)
 const showMenu = ref(false)
+const selectedKey = ref(null)
 
 const toggleMenu = () => {
   showMenu.value = !showMenu.value
@@ -74,104 +81,8 @@ const handleMenuSelect = (key) => {
   }
 }
 
-// 菜单配置
-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 menuOptions = useHeaderMenuConfig()
 
 // 监听滚动事件
 const handleScroll = () => {
@@ -186,6 +97,13 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
 })
+
+//点击回到首页
+const handleToHome = () => {
+  router.push('/')
+  selectedKey.value = null // 重置菜单选中状态
+  showMenu.value = false // 在移动端同时关闭菜单
+}
 </script>
 
 <style scoped lang="scss">
@@ -233,17 +151,40 @@ onUnmounted(() => {
   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);
+  background: transparent;
   user-select: none;
   transition: background 0.2s;
-}
-.menu-btn:active {
-  background: #ececec;
+  position: relative;
+
+  .menu-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    opacity: 1;
+    transition:
+      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+  }
+  .menu-icon-close {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
+  }
+
+  &.menu-open {
+    .menu-icon-menu {
+      opacity: 0;
+      transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
+    }
+    .menu-icon-close {
+      opacity: 1;
+      transform: translate(-50%, -50%) rotate(0deg) scale(1);
+    }
+  }
 }
 
 .mobile-menu-wrapper {
@@ -257,6 +198,9 @@ onUnmounted(() => {
   padding: 40px 0 80px 0;
   max-height: 1500px;
   overflow-y: auto;
+  :deep(.n-menu-item) {
+    font-weight: 600;
+  }
 }
 
 .fade-slide-enter-active,
diff --git a/src/config/headerMenuConfig.js b/src/config/headerMenuConfig.js
new file mode 100644
index 0000000..129dd1e
--- /dev/null
+++ b/src/config/headerMenuConfig.js
@@ -0,0 +1,103 @@
+import { useI18n } from 'vue-i18n'
+
+export const useHeaderMenuConfig = () => {
+  const { t } = useI18n()
+  
+  return [
+    {
+      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: '/press-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',
+        },
+      ],
+    },
+  ]
+} 
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 7f9a234..121783a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,66 +1,71 @@
 // router/index.js
-import { createRouter, createWebHistory } from 'vue-router';
-import { setupRouterGuards } from './router-guards';
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupRouterGuards } from './router-guards'
 
 const routes = [
-    {
-        path: '/',
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@/views/index/index.vue'),
+    // beforeEnter: (to, from, next) => {
+
+    //     localStorage.clear()
+    //     next()
+    // }
+    children: [
+      {
+        path: 'home',
         name: 'home',
         component: () => import('@/views/home/index.vue'),
-        // beforeEnter: (to, from, next) => {
-
-        //     localStorage.clear()
-        //     next()
-        // }
-        children: [
-            {
-                path: 'new-releases',
-                name: 'new-releases',
-                component: () => import('@/views/new-releases/index.vue')
-            },
-        ]
-    },
-    {
-        path: '/contacts',
-        name: 'contacts',
-        component: () => import('@/views/contacts/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'),
-    // },
-];
+      },
+      {
+        path: 'press-releases',
+        name: 'press-releases',
+        component: () => import('@/views/press-releases/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/contacts',
+    name: 'contacts',
+    component: () => import('@/views/contacts/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({
-    history: createWebHistory(),
-    routes
-});
+  history: createWebHistory(),
+  routes,
+})
 router.beforeEach((to, from, next) => {
-    if (to.meta?.title) {
-        document.title = to.meta.title;
-    }
-    next()
-});
-setupRouterGuards(router);
-export default router;
+  if (to.meta?.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+setupRouterGuards(router)
+export default router
diff --git a/src/views/home/size1920/index.vue b/src/views/home/size1920/index.vue
index 82aedef..1031cec 100644
--- a/src/views/home/size1920/index.vue
+++ b/src/views/home/size1920/index.vue
@@ -7,15 +7,10 @@ import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
-  <!-- <header className="header">
-  1920
-  </header> -->
-  <!-- <main ref="main"></main> -->
-  <customHeader />
-  <div style="margin: 80px 0;">
-    <router-view />
-  </div>
-  <customFooter />
+  <header className="header">
+    1920
+  </header>
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/home/size375/index.vue b/src/views/home/size375/index.vue
index 3505a54..c816ffc 100644
--- a/src/views/home/size375/index.vue
+++ b/src/views/home/size375/index.vue
@@ -7,16 +7,10 @@ import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
-  <!-- <header className="header">
-  375
-  </header> -->
-  <!-- <main ref="main"></main> -->
-
-  <customHeader />
-  <div style="margin: 80px 0;">
-    <router-view />
-  </div>
-  <customFooter />
+  <header className="header">
+    375
+  </header>
+  <main ref="main"></main>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
new file mode 100644
index 0000000..e823ceb
--- /dev/null
+++ b/src/views/index/index.vue
@@ -0,0 +1,22 @@
+<script setup>
+import size1920 from '@/views/index/size1920/index.vue'
+import size375 from '@/views/index/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>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/index/size1920/index.vue b/src/views/index/size1920/index.vue
new file mode 100644
index 0000000..f0298c4
--- /dev/null
+++ b/src/views/index/size1920/index.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
+</script>
+
+<template>
+  <customHeader></customHeader>
+  <div style="margin: 80px 0;">
+    <router-view />
+  </div>
+  <customFooter></customFooter>
+</template>
+
+<style scoped lang="scss">
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
+</style>
diff --git a/src/views/index/size375/index.vue b/src/views/index/size375/index.vue
new file mode 100644
index 0000000..3505a54
--- /dev/null
+++ b/src/views/index/size375/index.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
+</script>
+
+<template>
+  <!-- <header className="header">
+  375
+  </header> -->
+  <!-- <main ref="main"></main> -->
+
+  <customHeader />
+  <div style="margin: 80px 0;">
+    <router-view />
+  </div>
+  <customFooter />
+</template>
+
+<style scoped lang="scss">
+main {
+  padding: var(--header-height, 80px) 0 0;
+}
+</style>
diff --git a/src/views/press-releases/index.vue b/src/views/press-releases/index.vue
new file mode 100644
index 0000000..9d85cd1
--- /dev/null
+++ b/src/views/press-releases/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="new-releases-page">
+    <component :is="viewComponent" />
+  </div>
+</template>
+<script setup>
+import size1920 from '@/views/press-releases/size1920/index.vue'
+import size375 from '@/views/press-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>
diff --git a/src/views/press-releases/size1920/index.vue b/src/views/press-releases/size1920/index.vue
new file mode 100644
index 0000000..11f6624
--- /dev/null
+++ b/src/views/press-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>
diff --git a/src/views/press-releases/size375/index.vue b/src/views/press-releases/size375/index.vue
new file mode 100644
index 0000000..11f6624
--- /dev/null
+++ b/src/views/press-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>