完成缺省页；完成NR子菜单；调整导航栏样式，增加全局背景图
This commit is contained in:
parent
5defd0e4d0
commit
aff2cf7960
BIN
src/assets/image/icon/default-empty.png
Normal file
BIN
src/assets/image/icon/default-empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
@ -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>
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
<template>
|
||||
<!-- 通用缺省页 -->
|
||||
<div class="custom-default-page">
|
||||
<div class="search-area">
|
||||
<customSelectSearch></customSelectSearch>
|
||||
<!-- 通用缺省页 -->
|
||||
<div class="custom-default-page">
|
||||
<slot name="content"></slot>
|
||||
<template v-if="$slots.empty">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customSelectSearch from '@/components/customSelectSearch/index.vue'
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.search-area {
|
||||
width: 300px;
|
||||
margin: 100px 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
<style scoped lang="scss">
|
||||
.default-empty-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 40px 0 24px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
<template>
|
||||
<!-- 通用缺省页 -->
|
||||
<div class="custom-default-page">
|
||||
<div class="search-area">
|
||||
<customSelectSearch></customSelectSearch>
|
||||
<!-- 通用缺省页 -->
|
||||
<div class="custom-default-page">
|
||||
<slot name="content"></slot>
|
||||
<template v-if="$slots.empty">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customSelectSearch from '@/components/customSelectSearch/index.vue'
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.search-area {
|
||||
width: 1500px;
|
||||
margin: 500px 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
<style scoped lang="scss">
|
||||
.default-empty-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 40px 0 24px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
@ -84,6 +84,7 @@ export const useHeaderMenuConfig = () => {
|
||||
{
|
||||
label: t('header_menu.news_releases.events_calendar'),
|
||||
key: 'events_calendar',
|
||||
href: '/events-calendar',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -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 size375 from '@/views/new-releases/size375/index.vue'
|
||||
import size1920 from '@/views/events-calendar/size1920/index.vue'
|
||||
import size375 from '@/views/events-calendar/size375/index.vue'
|
||||
import { computed } from 'vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
78
src/views/events-calendar/size1920/index.vue
Normal file
78
src/views/events-calendar/size1920/index.vue
Normal file
@ -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>
|
||||
84
src/views/events-calendar/size375/index.vue
Normal file
84
src/views/events-calendar/size375/index.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,10 +1,106 @@
|
||||
<template>
|
||||
<div class="new-releases-page">
|
||||
<customDefaultPage></customDefaultPage>
|
||||
<div class="press-releases-page">
|
||||
<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>
|
||||
|
||||
@ -1,10 +1,118 @@
|
||||
<template>
|
||||
<div class="new-releases-page">
|
||||
<customDefaultPage></customDefaultPage>
|
||||
<div class="press-releases-page">
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user