tailwind实现大气简洁企业crm管理系统pc端后台ui代码
代码语言：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" clip-rule="evenodd"></path>
</svg>
</button>
<h2 class="text-lg font-semibold" id="page-title">仪表盘</h2>
</div>
<div class="flex items-center gap-4">
<div class="relative">
<input type="text" placeholder="搜索..." class="input pl-10 w-64 focus:w-80 transition-all">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<button class="p-2 rounded-full hover:bg-gray-100 transition-colors relative">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
</svg>
<span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
</button>
<div class="h-8 w-px bg-gray-200"></div>
<div class="flex items-center gap-2">
<img src="https://picsum.photos/seed/user123/32/32" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
<span class="hidden md:inline text-sm font-medium">管理员</span>
</div>
</div>
</header>
<!-- 内容区域 -->
<div class="flex-1 overflow-y-auto p-4" id="content-area">
<!-- 仪表盘页面 -->
<div id="dashboard-page" class="page-content">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="card p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-500">总客户数</h3>
<span class="p-2 bg-primary/10 rounded-lg">
<svg class="w-5 h-5 text-primary" 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>
</div>
<div class="flex items-end justify-between">
<p class="text-2xl font-bold" id="total-customers">128</p>
<span class="text-xs text-green-500 flex items-center">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
12%
</span>
</div>
</div>
<div class="card p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-500">销售线索</h3>
<span class="p-2 bg-warning/10 rounded-lg">
<svg class="w-5 h-5 text-warning" 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>
</div>
<div class="flex items-end justify-between">
<p class="text-2xl font-bold" id="total-leads">85</p>
<span class="text-xs text-green-500 flex items-center">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
8%
</span>
</div>
</div>
<div class="card p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-500">销售机会</h3>
<span class="p-2 bg-info/10 rounded-lg">
<svg class="w-5 h-5 text-info" 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>
</div>
<div class="flex items-end justify-between">
<p class="text-2xl font-bold" id="total-opportunities">42</p>
<span class="text-xs text-red-500 flex items-center">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0