Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website
# Conflicts: # src/views/index/size1920/index.vue resolved by main version
This commit is contained in:
Phoenix
commit
b96475ec2f
BIN
src/assets/image/historic-stock.png
Normal file
BIN
src/assets/image/historic-stock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
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>
|
||||
<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>
|
||||
</template>
|
||||
<script setup>
|
||||
import customSelectSearch from '@/components/customSelectSearch/index.vue'
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
<style scoped lang="scss">
|
||||
.search-area {
|
||||
width: 300px;
|
||||
margin: 100px 300px;
|
||||
.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>
|
||||
<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>
|
||||
</template>
|
||||
<script setup>
|
||||
import customSelectSearch from '@/components/customSelectSearch/index.vue'
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
<style scoped lang="scss">
|
||||
.search-area {
|
||||
width: 1500px;
|
||||
margin: 500px 200px;
|
||||
.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,7 +14,7 @@ const routes = [
|
||||
// }
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
// beforeEnter: (to, from, next) => {
|
||||
@ -43,11 +43,6 @@ const routes = [
|
||||
name: 'email-alerts',
|
||||
component: () => import('@/views/email-alerts/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'press-releases',
|
||||
name: 'press-releases',
|
||||
component: () => import('@/views/press-releases/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/quarterlyresults',
|
||||
name: 'QuarterlyResults',
|
||||
@ -60,6 +55,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>
|
||||
@ -3,8 +3,8 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "./size375/index.vue";
|
||||
import size768 from "./size768/index.vue";
|
||||
import size1440 from "./size1440/index.vue";
|
||||
import size768 from "./size1920/index.vue";
|
||||
import size1440 from "./size1920/index.vue";
|
||||
import size1920 from "./size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
@ -1,96 +1,264 @@
|
||||
<script setup>
|
||||
import { NCarousel, NCard } from "naive-ui";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
<template>
|
||||
<div class="historic-data-container">
|
||||
<img src="@/assets/image/historic-stock.png" alt="1" />
|
||||
|
||||
// 轮播图片示例
|
||||
const images = [
|
||||
'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
|
||||
<div class="header">
|
||||
<h1 class="title">Historical Data</h1>
|
||||
<div class="filter-container">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="periodOptions"
|
||||
@select="handlePeriodChange"
|
||||
:value="state.selectedPeriod"
|
||||
>
|
||||
<n-button
|
||||
>{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
|
||||
></n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="durationOptions"
|
||||
@select="handleDurationChange"
|
||||
:value="state.selectedDuration"
|
||||
>
|
||||
<n-button
|
||||
>{{ state.selectedDuration }}
|
||||
<n-icon><chevron-down-outline /></n-icon
|
||||
></n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="state.tableData"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h } from "vue";
|
||||
import axios from "axios";
|
||||
import { ChevronDownOutline } from "@vicons/ionicons5";
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
// ECharts 实例
|
||||
const chartRef = ref();
|
||||
let chartInstance = null;
|
||||
const durationOptions = [
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "3 Months",
|
||||
tableData: [],
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
chartInstance.setOption({
|
||||
title: { text: '历史数据趋势', left: 'center', textStyle: { color: '#fff', fontSize: 24 } },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
axisLabel: { color: '#fff' },
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(59,130,246,0.5)' },
|
||||
{ offset: 1, color: 'rgba(59,130,246,0)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
lineStyle: { width: 4, color: '#3b82f6' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 12,
|
||||
itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
|
||||
animationDuration: 1200
|
||||
}]
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageData = async () => {
|
||||
try {
|
||||
// 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
|
||||
let url =
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
||||
const res = await axios.get(url);
|
||||
|
||||
// 转换API返回的数据为表格需要的格式
|
||||
// 注意：以下是模拟数据，实际应该根据API返回的数据结构调整
|
||||
state.tableData = [
|
||||
{
|
||||
date: "May 22, 2025",
|
||||
open: "1.87",
|
||||
high: "2.03",
|
||||
low: "1.85",
|
||||
close: "2.00",
|
||||
adjClose: "2.00",
|
||||
change: "-2.44%",
|
||||
volume: "2,103",
|
||||
},
|
||||
{
|
||||
date: "May 21, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "2.05",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "4",
|
||||
},
|
||||
{
|
||||
date: "May 20, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "1.86",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "11,042",
|
||||
},
|
||||
{
|
||||
date: "May 19, 2025",
|
||||
open: "2.04",
|
||||
high: "2.05",
|
||||
low: "1.85",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "6,204",
|
||||
},
|
||||
{
|
||||
date: "May 16, 2025",
|
||||
open: "2.05",
|
||||
high: "2.06",
|
||||
low: "1.85",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "2.50%",
|
||||
volume: "3,618",
|
||||
},
|
||||
{
|
||||
date: "May 15, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "1.93",
|
||||
close: "2.00",
|
||||
adjClose: "2.00",
|
||||
change: "-1.48%",
|
||||
volume: "5,413",
|
||||
},
|
||||
{
|
||||
date: "May 14, 2025",
|
||||
open: "1.95",
|
||||
high: "2.05",
|
||||
low: "1.95",
|
||||
close: "2.03",
|
||||
adjClose: "2.03",
|
||||
change: "4.10%",
|
||||
volume: "8,886",
|
||||
},
|
||||
{
|
||||
date: "May 13, 2025",
|
||||
open: "2.26",
|
||||
high: "2.26",
|
||||
low: "1.80",
|
||||
close: "1.95",
|
||||
adjClose: "1.95",
|
||||
change: "-18.41%",
|
||||
volume: "10,750",
|
||||
},
|
||||
];
|
||||
|
||||
console.log("获取到的数据", state.tableData);
|
||||
} catch (error) {
|
||||
console.error("获取数据失败", error);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="relative w-full h-[calc(100vh-120px)] flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#0f172a] animate-bg-move">
|
||||
<!-- 背景流动渐变动画 -->
|
||||
<div class="absolute inset-0 -z-1 animate-bg-move bg-gradient-to-tr from-[#2563eb]/60 via-[#9333ea]/40 to-[#f59e0b]/30 blur-2xl opacity-80"></div>
|
||||
<div class="relative z-10 w-full h-full flex flex-1 flex-row items-center justify-center gap-12 px-12 pt-8">
|
||||
<!-- 左侧图片轮播 -->
|
||||
<div class="w-1/3 h-[420px] rounded-3xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-md animate-bounce-in">
|
||||
<NCarousel autoplay show-arrow effect="card" class="h-full">
|
||||
<img v-for="img in images" :key="img" :src="img" class="object-cover w-full h-full" />
|
||||
</NCarousel>
|
||||
</div>
|
||||
<!-- 右侧信息卡片 -->
|
||||
<div class="w-1/3 h-[420px] flex flex-col justify-between p-8 rounded-3xl bg-white/20 backdrop-blur-2xl shadow-xl animate-blob">
|
||||
<NCard class="bg-transparent border-none shadow-none text-white" content-style="background:transparent;">
|
||||
<template #header>
|
||||
<div class="text-3xl font-bold mb-2 animate-bounce-in">高大上数据看板</div>
|
||||
</template>
|
||||
<div class="text-lg mb-4 animate-delay-200 animate-bounce-in">这里可以放置一些关键指标、简介或实时数据。</div>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-center gap-2 animate-delay-400 animate-bounce-in"><span class="i-uil:chart-line text-2xl text-primary"></span> 指标一：<span class="font-bold">12345</span></li>
|
||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:users-alt text-2xl text-accent"></span> 指标二：<span class="font-bold">6789</span></li>
|
||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:clock text-2xl text-secondary"></span> 更新时间：<span class="font-bold">2024-06-01</span></li>
|
||||
</ul>
|
||||
</NCard>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下方 ECharts 图表 -->
|
||||
<div class="relative z-10 w-4/5 h-[320px] mt-12 rounded-3xl bg-white/10 backdrop-blur-md shadow-2xl animate-icon-in flex items-center justify-center">
|
||||
<div ref="chartRef" class="w-full h-full"></div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 可根据需要自定义更多样式
|
||||
</style>
|
||||
.historic-data-container {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-data-table) {
|
||||
.n-data-table-td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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