tailwind实现简洁大气企业云服务器云空间管理数据库统计后台仪表盘ui交互代码-html代码-BFW代码库

tailwind实现简洁大气企业云服务器云空间管理数据库统计后台仪表盘ui交互代码

代码语言：html

代码描述：tailwind实现简洁大气企业云服务器云空间管理数据库统计后台仪表盘ui交互代码

代码标签： tailwind 简洁大气企业云服务器云空间管理数据库统计后台仪表盘 ui 交互

下面为部分代码预览，完整代码请点击下载或在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>Nebula Cloud | 灵云空间管理平台</title>
    
    <!-- 1. 引入样式库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons@1.4.2.css">
    <!-- 2. 引入 JS 库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.7.14.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios.1.6.7.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.js"></script>

    <!-- 自定义配置 Tailwind 颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // Indigo 600
                        secondary: '#1E293B', // Slate 800
                    }
                }
            }
        }
    </script>

    <style>
        /* 简单的过渡动画 */
        .fade-enter-active, .fade-leave-active { transition: opacity .3s; }
        .fade-enter, .fade-leave-to { opacity: 0; }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

        [v-cloak] { display: none; }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">

<div id="app" class="flex h-screen overflow-hidden" v-cloak>
    
    <!-- 侧边栏 -->
    <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-2xl z-20 transition-all duration-300">
        <div class="h-16 flex items-center justify-center border-b border-slate-800">
            <div class="flex items-center space-x-2">
                <i class="ph-cloud-fog text-3xl text-indigo-500"></i>
                <span class="text-xl font-bold tracking-wide">Nebula Cloud</span>
            </div>
        </div>

        <nav class="flex-1 px-4 py-6 space-y-2">
            <a href="#" @click.prevent="currentView = 'dashboard'" :class="{'bg-indigo-600 shadow-lg shadow-indigo-500/30': currentView === 'dashboard'}" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-slate-800 transition-colors">
                <i class="ph-squares-four text-xl"></i>
                <span>空间概览</span>
            </a>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-slate-800 text-slate-400 transition-colors">
                <i class="ph-users text-xl"></i>
                <span>团队管理</span>
            </a>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-slate-800 text-slate-400 transition-colors">
                <i class="ph-receipt text-xl"></i>
                <span>账单与资源</span>
            </a>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-slate-800 text-slate-400 transition-colors">
     .........完整代码请登录后点击上方下载按钮下载查看