tailwind实现大气简洁企业crm管理系统pc端后台ui代码-html代码-BFW代码库

代码语言：html

代码描述：tailwind实现大气简洁企业crm管理系统pc端后台ui代码

代码标签： tailwind 大气简洁企业 crm 管理系统 pc 端后台 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>CRM管理系统</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">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            danger: '#F87272',
            warning: '#FBBD23',
            info: '#3ABFF8',
            dark: '#334155',
            'dark-light': '#64748B',
            light: '#F1F5F9',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 hover:bg-primary/10;
      }
      .sidebar-link.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .btn {
        @apply px-4 py-2 rounded-lg transition-all duration-200 font-medium;
      }
      .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90;
      }
      .btn-secondary {
        @apply bg-secondary text-white hover:bg-secondary/90;
      }
      .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90;
      }
      .btn-warning {
        @apply bg-warning text-white hover:bg-warning/90;
      }
      .btn-outline {
        @apply border border-gray-300 hover:bg-gray-50;
      }
      .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden;
      }
      .input {
        @apply px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200;
      }
      .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <div id="app" class="flex flex-1 overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300" id="sidebar">
      <div class="p-4 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary flex items-center gap-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2 4a1 1 0 011-1h14a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h14a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h14a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-1zm0 4a1 1 0 011-1h10a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-1z"></path>
          </svg>
          <span>CRM系统</span>
        </h1>
      </div>
      
      <nav class="p-4">
        <ul class="space-y-1">
          <li><a href="#dashboard" class="sidebar-link active" data-page="dashboard">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
              <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
            </svg>
            <span>仪表盘</span>
          </a></li>
          <li><a href="#customers" class="sidebar-link" data-page="customers">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
            </svg>
            <span>客户管理</span>
          </a></li>
          <li><a href="#contacts" class="sidebar-link" data-page="contacts">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2 3a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H3a1 1 0 01-1-1V3z"></path>
              <path d="M4 12a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H5a1 1 0 01-1-1v-1zm0-3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H5a1 1 0 01-1-1V9zm0-3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H5a1 1 0 01-1-1V6zm4 3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm0-3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H9a1 1 0 01-1-1V6zm4 3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1h-1a1 1 0 01-1-1V9zm0-3a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1h-1a1 1 0 01-1-1V6z"></path>
            </svg>
            <span>联系人管理</span>
          </a></li>
          <li><a href="#leads" class="sidebar-link" data-page="leads">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"></path>
            </svg>
            <span>销售线索</span>
          </a></li>
          <li><a href="#opportunities" class="sidebar-link" data-page="opportunities">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"></path>
            </svg>
            <span>销售机会</span>
          </a></li>
          <li><a href="#tasks" class="sidebar-link" data-page="tasks">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
            </svg>
            <span>任务管理</span>
          </a></li>
          <li><a href="#reports" class="sidebar-link" data-page="reports">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"></path>
            </svg>
            <span>报表分析</span>
          </a></li>
        </ul>
      </nav>
      
      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img src="https://picsum.photos/seed/user123/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p class="text-sm font-medium">管理员</p>
            <p class="text-xs text-gray-500">admin@example.com</p>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between sticky top-0 z-10">
        <div class="flex items-center gap-3">
          <button id="sidebar-toggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z".........完整代码请登录后点击上方下载按钮下载查看