97 lines
4.2 KiB
Vue
97 lines
4.2 KiB
Vue
<script setup>
|
|
import { NCarousel, NCard } from "naive-ui";
|
|
import { ref, onMounted } from "vue";
|
|
import * as echarts from 'echarts';
|
|
|
|
// 轮播图片示例
|
|
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',
|
|
];
|
|
|
|
// ECharts 实例
|
|
const chartRef = ref();
|
|
let chartInstance = null;
|
|
|
|
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
|
|
}]
|
|
});
|
|
}
|
|
});
|
|
</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>
|
|
|