完成缺省页；完成NR子菜单；调整导航栏样式，增加全局背景图

src/components/customDefaultPage/index.vue

@@ -28,7 +28,11 @@ const viewComponent = computed(() => {
 </script>
 
 <template>
-  <component :is="viewComponent" />
+  <component :is="viewComponent" v-bind="$attrs">
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope"/>
+    </template>
+  </component>
 </template>
 
 <style scoped lang="scss"></style>

src/components/customDefaultPage/size1920/index.vue

@@ -1,18 +1,27 @@
 <template>
   <!-- 通用缺省页 -->
   <div class="custom-default-page">
-      <div class="search-area">
+    <slot name="content"></slot>
-        <customSelectSearch></customSelectSearch>
+    <template v-if="$slots.empty">
-      </div>
+      <slot name="empty"></slot>
+    </template>
+    <template v-else>
+      <div class="default-empty-icon">
+        <img
+          src="@/assets/image/icon/default-empty.png"
+          alt="empty"
+          style="width: 476px; height: 262px;"
+        />
       </div>
     </template>
-  <script setup>
+  </div>
-  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+</template>
-  </script>
+<script setup></script>
 <style scoped lang="scss">
-  .search-area {
+.default-empty-icon {
-      width: 300px;
+  display: flex;
-      margin: 100px 300px;
+  justify-content: center;
+  align-items: center;
+  margin: 40px 0 24px 0;
 }
 </style>
-  

src/components/customDefaultPage/size375/index.vue

@@ -1,18 +1,27 @@
 <template>
   <!-- 通用缺省页 -->
   <div class="custom-default-page">
-      <div class="search-area">
+    <slot name="content"></slot>
-        <customSelectSearch></customSelectSearch>
+    <template v-if="$slots.empty">
-      </div>
+      <slot name="empty"></slot>
+    </template>
+    <template v-else>
+      <div class="default-empty-icon">
+        <img
+          src="@/assets/image/icon/default-empty.png"
+          alt="empty"
+          style="width: 350px; height: 198px; margin: 40px 0 0;"
+        />
       </div>
     </template>
-  <script setup>
+  </div>
-  import customSelectSearch from '@/components/customSelectSearch/index.vue'
+</template>
-  </script>
+<script setup></script>
 <style scoped lang="scss">
-  .search-area {
+.default-empty-icon {
-      width: 1500px;
+  display: flex;
-      margin: 500px 200px;
+  justify-content: center;
+  align-items: center;
+  margin: 40px 0 24px 0;
 }
 </style>
-  

src/components/customHeader/size1920/index.vue

@@ -93,7 +93,7 @@ const handleToHome = () => {
   height: var(--header-height);
 
   &.header-scrolled {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(220, 207, 248, 0.95);
     backdrop-filter: blur(8px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

src/components/customHeader/size375/index.vue

@@ -192,7 +192,7 @@ const handleToHome = () => {
   top: 320px;
   left: 0;
   width: 100vw;
-  background: #fff;
+  background: rgba(220, 207, 248, 0.95);
   z-index: 1100;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   padding: 40px 0 80px 0;

src/components/customSelectSearch/index.vue

@@ -1,38 +0,0 @@
-<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/config/headerMenuConfig.js

@@ -84,6 +84,7 @@ export const useHeaderMenuConfig = () => {
         {
           label: t('header_menu.news_releases.events_calendar'),
           key: 'events_calendar',
+          href: '/events-calendar',
         },
       ],
     },

src/locales/en.js

@@ -524,5 +524,18 @@ export default {
       ir_contacts: 'IR Contacts',
       email_alerts: 'Email Alerts'
     }
+  },
+  press_releases: {
+    title: 'Press Releases',
+    search: {
+      placeholder: 'Search',
+      button: 'Go'
+    }
+  },
+  events_calendar: {
+    title: 'Events Calendar',
+    search: {
+      button: 'Go'
+    }
   }
 }

src/router/index.js

@@ -14,15 +14,10 @@ const routes = [
     // }
     children: [
       {
-        path: 'home',
+        path: '/home',
         name: 'home',
         component: () => import('@/views/home/index.vue'),
       },
-      {
-        path: 'press-releases',
-        name: 'press-releases',
-        component: () => import('@/views/press-releases/index.vue'),
-      },
       {
         path: '/quarterlyresults',
         name: 'QuarterlyResults',
@@ -35,6 +30,16 @@ const routes = [
         component: () =>
           import('@/views/financialinformation/secfilings/index.vue'),
       },
+      {
+        path: '/press-releases',
+        name: 'press-releases',
+        component: () => import('@/views/press-releases/index.vue'),
+      },
+      {
+        path: '/events-calendar',
+        name: 'events-calendar',
+        component: () => import('@/views/events-calendar/index.vue'),
+      },
     ],
   },
   {

src/views/events-calendar/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="new-releases-page">
+  <div class="events-calendar-page">
     <component :is="viewComponent" />
   </div>
 </template>
 <script setup>
-import size1920 from '@/views/new-releases/size1920/index.vue'
+import size1920 from '@/views/events-calendar/size1920/index.vue'
-import size375 from '@/views/new-releases/size375/index.vue'
+import size375 from '@/views/events-calendar/size375/index.vue'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 

src/views/events-calendar/size1920/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="events-calendar-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1200px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t('events_calendar.title') }}
+          </div>
+          <div class="search-container">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+            ></n-date-picker>
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+            >
+              {{ t('events_calendar.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NDatePicker, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedDateValue: null, //选中值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.selectedDateValue)
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.search-date-picker {
+  width: 240px;
+}
+
+:deep(.n-date-picker) {
+  width: 240px;
+  .n-input__input {
+    padding: 4px 0;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

src/views/events-calendar/size375/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="events-calendar-page">
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1800px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t('events_calendar.title') }}
+          </div>
+          <div class="search-container">
+            <n-date-picker
+              v-model:value="state.selectedDateValue"
+              type="date"
+              class="search-date-picker"
+            ></n-date-picker>
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+            >
+              {{ t('events_calendar.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
+  </div>
+</template>
+
+<script setup>
+import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NDatePicker, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedDateValue: null, //选中值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.selectedDateValue)
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 113px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.search-container {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #f6f7f9;
+  border-radius: 8px;
+  padding: 8px;
+  gap: 16px;
+}
+
+.search-date-picker {
+  width: 100%;
+}
+
+:deep(.n-date-picker) {
+  width: 100%;
+  .n-input__input {
+    padding: 4px 0;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  width: 260px;
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

src/views/index/size1920/index.vue

@@ -8,7 +8,8 @@ import customFooter from '@/components/customFooter/index.vue'
 
 <template>
   <customHeader></customHeader>
-  <div style="margin: 80px 0;">
+  <div style="margin: 80px 0; position: relative; min-height: 100vh;">
+    <div class="background-image"></div>
     <router-view />
   </div>
   <customFooter></customFooter>
@@ -18,4 +19,17 @@ import customFooter from '@/components/customFooter/index.vue'
 main {
   padding: var(--header-height, 80px) 0 0;
 }
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/image/bg.png');
+  background-size: 100% 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  z-index: -1;
+}
 </style>

src/views/index/size375/index.vue

@@ -13,7 +13,8 @@ import customFooter from '@/components/customFooter/index.vue'
   <!-- <main ref="main"></main> -->
 
   <customHeader />
-  <div style="margin: 80px 0;">
+  <div style="margin: 80px 0; position: relative; min-height: 100vh;">
+    <div class="background-image"></div>
     <router-view />
   </div>
   <customFooter />
@@ -23,4 +24,17 @@ import customFooter from '@/components/customFooter/index.vue'
 main {
   padding: var(--header-height, 80px) 0 0;
 }
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/image/bg-375.png');
+  background-size: 100% 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  z-index: -1;
+}
 </style>

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

@@ -1,10 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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/press-releases/size1920/index.vue

@@ -1,10 +1,106 @@
 <template>
-  <div class="new-releases-page">
+  <div class="press-releases-page">
-    <customDefaultPage></customDefaultPage>
+    <customDefaultPage>
+      <template #content>
+        <main class="p-[35px] max-w-[1200px] mx-auto">
+          <div class="title mb-[20px]">
+            {{ t('press_releases.title') }}
+          </div>
+          <div class="search-container">
+            <n-select
+              :options="state.selectOptions"
+              v-model:value="state.selectedValue"
+              class="search-select"
+            />
+            <n-input
+              v-model:value="state.inputValue"
+              type="text"
+              :placeholder="t('press_releases.search.placeholder')"
+              class="search-input"
+            />
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+            >
+              {{ t('press_releases.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
   </div>
 </template>
+
 <script setup>
 import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NSelect, NInput, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedValue: 'all_years', //选中值
+  selectOptions: [
+    {
+      label: 'All Years',
+      value: 'all_years',
+    },
+  ], //下拉选项
+  inputValue: '', //输入值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.inputValue)
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.title {
+  font-size: 40px;
+  color: #333;
+}
+
+.search-container {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.search-select {
+  width: 160px;
+  :deep(.n-base-selection) {
+    padding: 4px 0;
+  }
+}
+
+.search-input {
+  width: 240px;
+}
+
+:deep(.n-input) {
+  .n-input__input {
+    padding: 4px 0;
+    // border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-select) {
+  .n-select__input {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>

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

@@ -1,10 +1,118 @@
 <template>
-  <div class="new-releases-page">
+  <div class="press-releases-page">
-    <customDefaultPage></customDefaultPage>
+    <customDefaultPage>
+      <template #content>
+        <main
+          class="p-[80px] mx-auto"
+          style="max-width: 100vw; min-width: 375px;"
+        >
+          <div class="title mb-[24px]">
+            {{ t('press_releases.title') }}
+          </div>
+          <div class="search-container">
+            <n-select
+              :options="state.selectOptions"
+              v-model:value="state.selectedValue"
+              class="search-select"
+              :font-size="72"
+            />
+            <n-input
+              v-model:value="state.inputValue"
+              type="text"
+              :placeholder="t('press_releases.search.placeholder')"
+              class="search-input"
+              clearable
+              :font-size="72"
+            />
+            <n-button
+              type="primary"
+              @click="handleSearch"
+              class="search-button"
+              :font-size="72"
+            >
+              {{ t('press_releases.search.button') }}
+            </n-button>
+          </div>
+        </main>
+      </template>
+    </customDefaultPage>
   </div>
 </template>
+
 <script setup>
 import customDefaultPage from '@/components/customDefaultPage/index.vue'
+import { reactive } from 'vue'
+import { NSelect, NInput, NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const state = reactive({
+  selectedValue: 'all_years', //选中值
+  selectOptions: [
+    {
+      label: 'All Years',
+      value: 'all_years',
+    },
+  ], //下拉选项
+  inputValue: '', //输入值
+})
+
+const handleSearch = () => {
+  // 搜索处理逻辑
+  console.log('搜索:', state.inputValue)
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.title {
+  font-size: 113px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.search-container {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #f6f7f9;
+  border-radius: 8px;
+  padding: 8px;
+  gap: 16px;
+}
+
+.search-select {
+  width: 1000px;
+  :deep(.n-base-selection) {
+    padding: 4px 0;
+  }
+}
+
+.search-input {
+  width: 100%;
+}
+
+:deep(.n-input) {
+  .n-input__input {
+    padding: 4px 0;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-select) {
+  .n-select__input {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-button) {
+  width: 260px;
+  padding: 20px 16px;
+  border-radius: 4px;
+}
+</style>