<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义主题 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#F59E0B',
accent: '#EF4444',
neutral: '#F3F4F6',
dark: '#1F2937',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.ball {
@apply inline-flex items-center justify-center rounded-full font-medium transition-all duration-200;
}
.ball-primary {
@apply bg-primary text-white;
}
.ball-accent {
@apply bg-accent text-white;
}
.ball-blue {
@apply bg-blue-500 text-white;
}
.hover-lift {
@apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
}
.section-title {
@apply text-xl font-bold text-dark mb-4 flex items-center gap-2;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.gradient-bg {
background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%);
}
.stat-card-hover {
transition: all 0.3s ease;
}
.stat-card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(22, 93, 255, 0.15);
}
}
</style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!
THE END
暂无评论内容