chart+tailwind实现自适应后台仪表盘智慧党建数据统计汇总代码

代码语言:html

所属分类:图表

代码描述:chart+tailwind实现自适应后台仪表盘智慧党建数据统计汇总代码

代码标签: chart tailwind 自适应 后台 仪表盘 智慧 党建 数据 统计 汇总 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   
<meta charset="UTF-8">
   
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   
<title>智慧党建数据可视化大屏</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
 

   
<script>
        tailwind
.config = {
            theme
: {
                extend
: {
                    colors
: {
                        primary
: '#C41E3A', // 党旗红
                        secondary
: '#1A365D', // 深蓝色
                        tertiary
: '#38A169', // 绿色
                        neutral
: {
                           
100: '#F7FAFC',
                           
200: '#EDF2F7',
                           
300: '#E2E8F0',
                           
400: '#CBD5E0',
                           
500: '#A0AEC0',
                           
600: '#718096',
                           
700: '#4A5568',
                           
800: '#2D3748',
                           
900: '#1A202C',
                       
}
                   
},
                    fontFamily
: {
                        inter
: ['Inter', 'sans-serif'],
                   
},
               
}
           
}
       
}
   
</script>

   
<style type="text/tailwindcss">
       
@layer utilities {
           
.content-auto {
               
content-visibility: auto;
           
}

           
.text-shadow {
               
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
           
}

           
.card-hover {
               
transition: all 0.3s ease;
           
}

               
.card-hover:hover {
                   
transform: translateY(-5px);
                   
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
               
}

           
.bg-grid {
               
background-size: 20px 20px;
               
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
           
}

           
.scrollbar-hidden::-webkit-scrollbar {
               
display: none;
           
}

           
.scrollbar-hidden {
               
-ms-overflow-style: none;
               
scrollbar-width: none;
           
}
       
}
   
</style>
</head>
<body class="bg-neutral-900 text-white font-inter min-h-screen bg-grid">
   
<!-- 顶部导航 -->
   
<header class="bg-secondary/80 backdrop-blur-md border-b border-primary/30 sticky top-0 z-50">
       
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
           
<div class="flex items-center space-x-3">
               
<div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                   
<i class="fa-solid fa-flag text-white text-xl"></i>
               
</div>
               
<h1 class="text-xl md:text-2xl font-bold text-white">智慧党建 <span class="text-primary">数据中心</span></h1>
           
</div>
           
<div class="flex items-center space-x-6">
               
<div class="hidden md:flex items-center space-x-4">
                   
<a href="#" class="text-white hover:text-primary transition-colors">首页</a>
                   
<a href="#" class="text-neutral-400 hover:text-primary transition-colors">组织建设</a>
                   
<a href="#" class="text-neutral-400 hover:text-primary transition-colors">党员管理</a>
                   
<a href="#" class="text-neutral-400 hover:text-primary transition-colors">学习教育</a>
                   
<a href="#" class="text-neutral-400 hover:text-primary transition-colors">志愿服务</a>
               
</div>
               
<div class="flex items-center space-x-2">
                   
<div class="h-8 w-8 rounded-full bg-neutral-700 flex items-center justify-center">
                       
<i class="fa-solid fa-user text-neutral-300"></i>
                   
</div>
                   
<span class="hidden md:inline text-sm">管理员</span>
               
</div>
               
<button class="md:hidden text-white focus:outline-none">
                   
<i class="fa-solid fa-bars"></i>
               
</button>
           
</div>
       
</div>
   
</header>

   
<main class="container mx-auto px-4 py-6">
       
<!-- 日期时间显示 -->
       
<div class="flex justify-between items-center mb-6">
           
<div>
               
<h2 class="text-lg md:text-xl text-neutral-300" id="current-date">2025年4月27日 星期日</h2>
               
<p class="text-sm text-neutral-500" id="current-time">09:30:45</p>
           
</div>
           
<div class="flex items-center space-x-4">
               
<div class="bg-neutral-800/50 rounded-lg p-2 flex items-center space-x-2">
                   
<i class="fa-solid fa-users text-primary"></i>
                   
<span class="text-sm">在线人数: <span class="text-primary font-medium">1,238</span></span>
               
</div>
               
<div class="bg-neutral-800/50 rounded-lg p-2 flex items-center space-x-2">
                   
<i class="fa-solid fa-signal text-tertiary"></i>
                   
<span class="text-sm">数据更新: <span class="text-tertiary font-medium">3分钟前</span></span>
               
</div>
           
</div>
       
</div>

       
<!-- 主要内容网格 -->
       
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
           
<!-- 左侧区域 - 3列 -->
           
<div class="md:col-span-3 space-y-6">
               
<!-- 党员总数卡片 -->
               
<div class="bg-gradient-to-br from-secondary to-secondary/70 rounded-xl p-5 shadow-lg border border-neutral-700 card-hover">
                   
<div class="flex justify-between items-start mb-3">
                       
<div>
                           
<h3 class="text-neutral-300 text-sm uppercase tracking-wider">党员总数</h3>
                           
<p class="text-3xl font-bold mt-1 text-white">15,642</p>
                       
</div>
                       
<div class="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
                           
<i class="fa-solid fa-users text-primary"></i>
                       
</div>
                   
</div>
                   
<div class="flex items-center text-sm">
                       
<span class="text-tertiary flex items-center">
                           
<i class="fa-solid fa-arrow-up mr-1"></i> 3.2%
                       
</span>
                        <span class="text-neutral-400 ml-2&qu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0