Home Explore Help
Register Sign In
18307996893
/
ai-manager
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://git.fmode.cn:3000/18307996893/ai-manager

0235889 2 days ago
parent
2f8f0719e3 4592fe2370
commit
d11c6ca5d3
2 changed files with 1324 additions and 0 deletions
Unified View Show Diff Stats
  1. 577 0
      demo/place.html
  2. 747 0
      demo/workbenches.html

+ 577 - 0
demo/place.html
View File 

@@ -0,0 +1,577 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>宴会厅管理系统</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+        }
 
+        
+        :root {
 
+            --primary: #1a56db;
 
+            --secondary: #0e2a53;
 
+            --accent: #f59e0b;
 
+            --light: #f8fafc;
 
+            --dark: #0f172a;
 
+            --card-bg: rgba(255, 255, 255, 0.85);
 
+            --glass: rgba(255, 255, 255, 0.1);
 
+            --glass-border: rgba(255, 255, 255, 0.2);
 
+            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
 
+        }
 
+        
+        body {
 
+            background: linear-gradient(135deg, #0f172a, #1e293b);
 
+            color: var(--light);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            position: relative;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        body::before {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: 
+                radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
 
+                radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
 
+            z-index: -1;
 
+        }
 
+        
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        /* 头部样式 */
 
+        header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 20px 0;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .logo {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 15px;
 
+        }
 
+        
+        .logo-text h1 {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            background: linear-gradient(to right, #fbcfe8, #c7d2fe);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+        
+        .logo-text p {
 
+            font-size: 14px;
 
+            color: #cbd5e1;
 
+            letter-spacing: 1px;
 
+        }
 
+        
+        .header-actions {
 
+            display: flex;
 
+            gap: 15px;
 
+        }
 
+        
+        .btn {
 
+            padding: 10px 20px;
 
+            border-radius: 10px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            border: none;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+        }
 
+        
+        .btn-primary {
 
+            background: linear-gradient(135deg, var(--accent), #fbbf24);
 
+            color: var(--dark);
 
+            box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
 
+        }
 
+        
+        .btn-primary:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
 
+        }
 
+        
+        .btn-outline {
 
+            background: transparent;
 
+            border: 1px solid var(--glass-border);
 
+            color: #e2e8f0;
 
+        }
 
+        
+        .btn-outline:hover {
 
+            background: rgba(255, 255, 255, 0.1);
 
+        }
 
+        
+        /* 时间显示 */
 
+        .time-display {
 
+            text-align: center;
 
+            margin-bottom: 30px;
 
+        }
 
+        
+        .time-display h2 {
 
+            font-size: 80px;
 
+            font-weight: 300;
 
+            letter-spacing: 2px;
 
+            color: var(--light);
 
+            margin-bottom: 5px;
 
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
 
+        }
 
+        
+        .time-display p {
 
+            font-size: 18px;
 
+            color: #cbd5e1;
 
+        }
 
+        
+        /* 功能标题 */
 
+        .section-title {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+            padding: 0 10px;
 
+        }
 
+        
+        .section-title h2 {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            background: linear-gradient(to right, #fde68a, #fcd34d);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+        
+        /* 宴会厅卡片 */
 
+        .hall-cards {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
+            gap: 25px;
 
+            margin-bottom: 80px;
 
+        }
 
+        
+        .hall-card {
 
+            background: var(--card-bg);
 
+            backdrop-filter: blur(10px);
 
+            border-radius: 20px;
 
+            border: 1px solid rgba(255, 255, 255, 0.2);
 
+            overflow: hidden;
 
+            box-shadow: var(--shadow);
 
+            transition: all 0.3s ease;
 
+            color: var(--dark);
 
+            position: relative;
 
+        }
 
+        
+        .hall-card:hover {
 
+            transform: translateY(-8px);
 
+            box-shadow: 0 15px 30px rgba(31, 38, 135, 0.25);
 
+        }
 
+        
+        .hall-image {
 
+            height: 200px;
 
+            background-size: cover;
 
+            background-position: center;
 
+            position: relative;
 
+        }
 
+        
+        .hall-image::after {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
 
+        }
 
+        
+        .hall-name {
 
+            position: absolute;
 
+            bottom: 20px;
 
+            left: 20px;
 
+            z-index: 2;
 
+        }
 
+        
+        .hall-name h3 {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            color: white;
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .hall-name p {
 
+            font-size: 16px;
 
+            color: #e2e8f0;
 
+        }
 
+        
+        .hall-price {
 
+            position: absolute;
 
+            top: 20px;
 
+            right: 20px;
 
+            background: rgba(255, 255, 255, 0.9);
 
+            padding: 8px 15px;
 
+            border-radius: 30px;
 
+            font-weight: 700;
 
+            font-size: 18px;
 
+            color: var(--dark);
 
+            z-index: 2;
 
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 
+        }
 
+        
+        .discount-price {
 
+            text-decoration: line-through;
 
+            color: #ef4444;
 
+            font-size: 14px;
 
+            margin-left: 5px;
 
+        }
 
+        
+        .hall-info {
 
+            padding: 20px;
 
+        }
 
+        
+        .info-row {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            padding: 12px 0;
 
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .info-row:last-child {
 
+            border-bottom: none;
 
+        }
 
+        
+        .info-label {
 
+            font-weight: 600;
 
+            color: #475569;
 
+        }
 
+        
+        .info-value {
 
+            font-weight: 600;
 
+            color: var(--dark);
 
+        }
 
+        
+        .hall-footer {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            padding: 15px 20px;
 
+            background: rgba(241, 245, 249, 0.7);
 
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .hall-btn {
 
+            padding: 8px 15px;
 
+            border-radius: 8px;
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+            border: none;
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .hall-btn:hover {
 
+            transform: translateY(-2px);
 
+        }
 
+        
+        .btn-book {
 
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
 
+            color: white;
 
+        }
 
+        
+        .btn-details {
 
+            background: rgba(203, 213, 225, 0.5);
 
+            color: var(--dark);
 
+        }
 
+        
+        /* 底部导航 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background: rgba(15, 23, 42, 0.95);
 
+            backdrop-filter: blur(10px);
 
+            border-top: 1px solid var(--glass-border);
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 15px 0;
 
+            z-index: 1000;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            gap: 5px;
 
+            color: #94a3b8;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            padding: 5px 15px;
 
+            border-radius: 15px;
 
+        }
 
+        
+        .nav-item.active, .nav-item:hover {
 
+            background: rgba(26, 86, 219, 0.2);
 
+            color: #e2e8f0;
 
+        }
 
+        
+        .nav-item i {
 
+            font-size: 20px;
 
+        }
 
+        
+        .nav-item span {
 
+            font-size: 12px;
 
+        }
 
+        
+        /* 响应式调整 */
 
+        @media (max-width: 768px) {
 
+            .hall-cards {
 
+                grid-template-columns: 1fr;
 
+            }
 
+            
+            .time-display h2 {
 
+                font-size: 60px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <header>
 
+            <div class="logo">
 
+                <div class="logo-text">
 
+                    <h1>宴会厅管理系统</h1>
 
+                    <p>专业宴会场地预订与管理</p>
 
+                </div>
 
+            </div>
 
+            <div class="header-actions">
 
+                <button class="btn btn-outline">
 
+                    <i class="fas fa-search"></i> 搜索场地
 
+                </button>
 
+                <button class="btn btn-primary">
 
+                    <i class="fas fa-plus"></i> 新增/管理
 
+                </button>
 
+            </div>
 
+        </header>
 
+        
+        <div class="time-display">
 
+            <h2 id="currentTime">17:15</h2>
 
+            <p id="currentDate">2023年10月15日 星期三</p>
 
+        </div>
 
+        
+        <div class="section-title">
 
+            <h2>推荐宴会厅</h2>
 
+            <button class="btn btn-outline">
 
+                <i class="fas fa-filter"></i> 筛选
 
+            </button>
 
+        </div>
 
+        
+        <div class="hall-cards">
 
+            <!-- 苏州庄 -->
 
+            <div class="hall-card">
 
+                <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80');">
 
+                    <div class="hall-name">
 
+                        <h3>LUXURS 苏州庄</h3>
 
+                        <p>古典与现代完美融合</p>
 
+                    </div>
 
+                    <div class="hall-price">¥456,888.00</div>
 
+                </div>
 
+                <div class="hall-info">
 
+                    <div class="info-row">
 
+                        <span class="info-label">餐标</span>
 
+                        <span class="info-value">1999元/桌</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">宴会厅高</span>
 
+                        <span class="info-value">4.5m</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">全厅面积</span>
 
+                        <span class="info-value">728㎡</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">容纳桌数</span>
 
+                        <span class="info-value">45-60桌</span>
 
+                    </div>
 
+                </div>
 
+                <div class="hall-footer">
 
+                    <button class="hall-btn btn-details">
 
+                        <i class="fas fa-info-circle"></i> 查看详情
 
+                    </button>
 
+                    <button class="hall-btn btn-book">
 
+                        <i class="fas fa-calendar-check"></i> 立即预订
 
+                    </button>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 奥斯卡 -->
 
+            <div class="hall-card">
 
+                <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1566665797739-1674de7a421a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');">
 
+                    <div class="hall-name">
 
+                        <h3>OSCARS 奥斯卡</h3>
 
+                        <p>欧式奢华宴会厅</p>
 
+                    </div>
 
+                    <div class="hall-price">¥388,800.00</div>
 
+                </div>
 
+                <div class="hall-info">
 
+                    <div class="info-row">
 
+                        <span class="info-label">餐标</span>
 
+                        <span class="info-value">1999元/桌</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">宴会厅高</span>
 
+                        <span class="info-value">4.5m</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">餐厅面积</span>
 
+                        <span class="info-value">500㎡</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">容纳桌数</span>
 
+                        <span class="info-value">30-40桌</span>
 
+                    </div>
 
+                </div>
 
+                <div class="hall-footer">
 
+                    <button class="hall-btn btn-details">
 
+                        <i class="fas fa-info-circle"></i> 查看详情
 
+                    </button>
 
+                    <button class="hall-btn btn-book">
 
+                        <i class="fas fa-calendar-check"></i> 立即预订
 
+                    </button>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 星空之镜 -->
 
+            <div class="hall-card">
 
+                <div class="hall-image" style="background-image: url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
 
+                    <div class="hall-name">
 
+                        <h3>SHARRY 星空之镜</h3>
 
+                        <p>梦幻星空主题宴会厅</p>
 
+                    </div>
 
+                    <div class="hall-price">¥229,999.00 <span class="discount-price">(¥289,999.00)</span></div>
 
+                </div>
 
+                <div class="hall-info">
 
+                    <div class="info-row">
 
+                        <span class="info-label">餐标</span>
 
+                        <span class="info-value">1999元/桌</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">宴会厅高</span>
 
+                        <span class="info-value">4.5m</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">全厅面积</span>
 
+                        <span class="info-value">428㎡</span>
 
+                    </div>
 
+                    <div class="info-row">
 
+                        <span class="info-label">容纳桌数</span>
 
+                        <span class="info-value">25-35桌</span>
 
+                    </div>
 
+                </div>
 
+                <div class="hall-footer">
 
+                    <button class="hall-btn btn-details">
 
+                        <i class="fas fa-info-circle"></i> 查看详情
 
+                    </button>
 
+                    <button class="hall-btn btn-book">
 
+                        <i class="fas fa-calendar-check"></i> 立即预订
 
+                    </button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 底部导航 -->
 
+    <div class="bottom-nav">
 
+        <div class="nav-item active">
 
+            <i class="fas fa-home"></i>
 
+            <span>主页</span>
 
+        </div>
 
+        <div class="nav-item">
 
+            <i class="fas fa-calendar-alt"></i>
 
+            <span>日历</span>
 
+        </div>
 
+        <div class="nav-item">
 
+            <i class="fas fa-bell"></i>
 
+            <span>消息</span>
 
+        </div>
 
+        <div class="nav-item">
 
+            <i class="fas fa-desktop"></i>
 
+            <span>工作台</span>
 
+        </div>
 
+        <div class="nav-item">
 
+            <i class="fas fa-user"></i>
 
+            <span>我的</span>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+        // 更新时间显示
 
+        function updateTime() {
 
+            const now = new Date();
 
+            const hours = now.getHours().toString().padStart(2, '0');
 
+            const minutes = now.getMinutes().toString().padStart(2, '0');
 
+            document.getElementById('currentTime').textContent = `${hours}:${minutes}`;
 
+            
+            const options = { 
+                year: 'numeric', 
+                month: 'long', 
+                day: 'numeric',
 
+                weekday: 'long'
 
+            };
 
+            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
 
+        }
 
+        
+        // 初始更新时间
 
+        updateTime();
 
+        // 每分钟更新一次时间
 
+        setInterval(updateTime, 60000);
 
+        
+        // 底部导航交互
 
+        const navItems = document.querySelectorAll('.nav-item');
 
+        navItems.forEach(item => {
 
+            item.addEventListener('click', function() {
 
+                navItems.forEach(i => i.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+        
+        // 预订按钮交互
 
+        const bookButtons = document.querySelectorAll('.btn-book');
 
+        bookButtons.forEach(button => {
 
+            button.addEventListener('click', function() {
 
+                const hallName = this.closest('.hall-card').querySelector('h3').textContent;
 
+                alert(`您已开始预订: ${hallName} 宴会厅`);
 
+            });
 
+        });
 
+        
+        // 详情按钮交互
 
+        const detailButtons = document.querySelectorAll('.btn-details');
 
+        detailButtons.forEach(button => {
 
+            button.addEventListener('click', function() {
 
+                const hallName = this.closest('.hall-card').querySelector('h3').textContent;
 
+                alert(`查看 ${hallName} 的详细信息`);
 
+            });
 
+        });
 
+        
+        // 新增/管理按钮
 
+        document.querySelector('.btn-primary').addEventListener('click', function() {
 
+            alert('打开宴会厅新增/管理界面');
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 747 - 0
demo/workbenches.html
View File 

@@ -0,0 +1,747 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>九州管理 - 工作台与财务管理</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 
+        }
 
+        
+        :root {
 
+            --primary: #1a56db;
 
+            --secondary: #0e2a53;
 
+            --accent: #f59e0b;
 
+            --success: #10b981;
 
+            --danger: #ef4444;
 
+            --light: #f8fafc;
 
+            --dark: #0f172a;
 
+            --card-bg: rgba(255, 255, 255, 0.85);
 
+            --glass: rgba(255, 255, 255, 0.1);
 
+            --glass-border: rgba(255, 255, 255, 0.2);
 
+            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
 
+        }
 
+        
+        body {
 
+            background: linear-gradient(135deg, #0f172a, #1e293b);
 
+            color: var(--light);
 
+            min-height: 100vh;
 
+            padding: 20px;
 
+            position: relative;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        body::before {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: 
+                radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
 
+                radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
 
+            z-index: -1;
 
+        }
 
+        
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        /* 头部样式 */
 
+        header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 20px 0;
 
+            margin-bottom: 30px;
 
+            border-bottom: 1px solid var(--glass-border);
 
+        }
 
+        
+        .logo {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 15px;
 
+        }
 
+        
+        .logo-icon {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
 
+            border-radius: 12px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 24px;
 
+            box-shadow: var(--shadow);
 
+        }
 
+        
+        .logo-text h1 {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            background: linear-gradient(to right, #fbcfe8, #c7d2fe);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+        
+        .logo-text p {
 
+            font-size: 14px;
 
+            color: #cbd5e1;
 
+            letter-spacing: 1px;
 
+        }
 
+        
+        .user-actions {
 
+            display: flex;
 
+            gap: 15px;
 
+        }
 
+        
+        .btn {
 
+            padding: 10px 20px;
 
+            border-radius: 10px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            border: none;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+        }
 
+        
+        .btn-primary {
 
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
 
+            color: white;
 
+            box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
 
+        }
 
+        
+        .btn-primary:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
 
+        }
 
+        
+        .btn-outline {
 
+            background: transparent;
 
+            border: 1px solid var(--glass-border);
 
+            color: #e2e8f0;
 
+        }
 
+        
+        .btn-outline:hover {
 
+            background: rgba(255, 255, 255, 0.1);
 
+        }
 
+        
+        /* 主内容区 */
 
+        .dashboard {
 
+            display: flex;
 
+            gap: 25px;
 
+            margin-bottom: 30px;
 
+        }
 
+        
+        /* 左侧面板 */
 
+        .sidebar {
 
+            flex: 0 0 280px;
 
+            background: var(--glass);
 
+            backdrop-filter: blur(10px);
 
+            border-radius: 20px;
 
+            border: 1px solid var(--glass-border);
 
+            padding: 25px;
 
+            box-shadow: var(--shadow);
 
+            height: fit-content;
 
+        }
 
+        
+        .section-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 20px;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            color: #e2e8f0;
 
+        }
 
+        
+        .section-title i {
 
+            color: var(--accent);
 
+        }
 
+        
+        .filters {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 15px;
 
+        }
 
+        
+        .filter-group {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 8px;
 
+        }
 
+        
+        .filter-group label {
 
+            font-size: 14px;
 
+            color: #94a3b8;
 
+            font-weight: 500;
 
+        }
 
+        
+        /* 主面板 */
 
+        .main-content {
 
+            flex: 1;
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 25px;
 
+        }
 
+        
+        .ai-header {
 
+            background: var(--glass);
 
+            backdrop-filter: blur(10px);
 
+            border-radius: 20px;
 
+            border: 1px solid var(--glass-border);
 
+            padding: 25px;
 
+            box-shadow: var(--shadow);
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .ai-title {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            margin-bottom: 10px;
 
+            background: linear-gradient(to right, #fde68a, #fcd34d);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+        
+        .ai-subtitle {
 
+            color: #cbd5e1;
 
+            max-width: 600px;
 
+            line-height: 1.6;
 
+        }
 
+        
+        .ai-highlight {
 
+            color: var(--accent);
 
+            font-weight: 600;
 
+        }
 
+        
+        .ai-power {
 
+            font-size: 48px;
 
+            color: var(--accent);
 
+            opacity: 0.7;
 
+        }
 
+        
+        /* 功能卡片容器 */
 
+        .functions-container {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 30px;
 
+        }
 
+        
+        .function-section {
 
+            background: var(--card-bg);
 
+            backdrop-filter: blur(10px);
 
+            border-radius: 20px;
 
+            border: 1px solid rgba(255, 255, 255, 0.2);
 
+            overflow: hidden;
 
+            box-shadow: var(--shadow);
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .function-header {
 
+            padding: 20px 25px;
 
+            background: linear-gradient(90deg, rgba(26, 86, 219, 0.1), transparent);
 
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 15px;
 
+        }
 
+        
+        .function-header h2 {
 
+            font-size: 20px;
 
+            font-weight: 700;
 
+            color: var(--dark);
 
+            background: linear-gradient(to right, var(--primary), #3b82f6);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+        
+        .function-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
+            gap: 15px;
 
+            padding: 25px;
 
+        }
 
+        
+        .function-card {
 
+            background: white;
 
+            border-radius: 15px;
 
+            overflow: hidden;
 
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 
+            transition: all 0.3s ease;
 
+            cursor: pointer;
 
+            position: relative;
 
+            height: 140px;
 
+            display: flex;
 
+            flex-direction: column;
 
+            justify-content: center;
 
+            align-items: center;
 
+            text-align: center;
 
+            padding: 15px;
 
+        }
 
+        
+        .function-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .function-icon {
 
+            width: 50px;
 
+            height: 50px;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-bottom: 15px;
 
+            font-size: 22px;
 
+            color: white;
 
+            position: relative;
 
+            z-index: 2;
 
+        }
 
+        
+        .function-icon::after {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            background: inherit;
 
+            border-radius: 50%;
 
+            z-index: -1;
 
+            opacity: 0.2;
 
+        }
 
+        
+        .function-name {
 
+            font-weight: 600;
 
+            color: var(--dark);
 
+            font-size: 16px;
 
+            z-index: 2;
 
+        }
 
+        
+        .function-desc {
 
+            font-size: 12px;
 
+            color: #64748b;
 
+            margin-top: 5px;
 
+            z-index: 2;
 
+        }
 
+        
+        /* 图标背景色 */
 
+        .icon-bg-blue {
 
+            background: linear-gradient(135deg, #3b82f6, #2563eb);
 
+        }
 
+        
+        .icon-bg-green {
 
+            background: linear-gradient(135deg, #10b981, #059669);
 
+        }
 
+        
+        .icon-bg-orange {
 
+            background: linear-gradient(135deg, #f59e0b, #d97706);
 
+        }
 
+        
+        .icon-bg-purple {
 
+            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 
+        }
 
+        
+        .icon-bg-cyan {
 
+            background: linear-gradient(135deg, #06b6d4, #0891b2);
 
+        }
 
+        
+        .icon-bg-pink {
 
+            background: linear-gradient(135deg, #ec4899, #db2777);
 
+        }
 
+        
+        /* 状态指示器 */
 
+        .status-indicator {
 
+            position: absolute;
 
+            top: 10px;
 
+            right: 10px;
 
+            width: 10px;
 
+            height: 10px;
 
+            border-radius: 50%;
 
+            background-color: var(--success);
 
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
 
+        }
 
+        
+        .status-pending {
 
+            background-color: var(--accent);
 
+            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
 
+        }
 
+        
+        .status-warning {
 
+            background-color: var(--danger);
 
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
 
+        }
 
+        
+        /* 响应式调整 */
 
+        @media (max-width: 992px) {
 
+            .dashboard {
 
+                flex-direction: column;
 
+            }
 
+            
+            .sidebar {
 
+                width: 100%;
 
+            }
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .function-grid {
 
+                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 
+            }
 
+        }
 
+        
+        @media (max-width: 576px) {
 
+            .function-grid {
 
+                grid-template-columns: repeat(2, 1fr);
 
+            }
 
+            
+            .ai-header {
 
+                flex-direction: column;
 
+                text-align: center;
 
+                gap: 20px;
 
+            }
 
+            
+            .user-actions {
 
+                flex-wrap: wrap;
 
+                justify-content: center;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <header>
 
+            <div class="logo">
 
+                <div class="logo-icon">
 
+                    <i class="fas fa-crown"></i>
 
+                </div>
 
+                <div class="logo-text">
 
+                    <h1>九州管理</h1>
 
+                    <p>工作台与财务管理系统</p>
 
+                </div>
 
+            </div>
 
+            <div class="user-actions">
 
+                <button class="btn btn-outline">
 
+                    <i class="fas fa-bell"></i> 通知
 
+                </button>
 
+                <button class="btn btn-primary">
 
+                    <i class="fas fa-user"></i> 我的账户
 
+                </button>
 
+            </div>
 
+        </header>
 
+        
+        <div class="dashboard">
 
+            <div class="sidebar">
 
+                <div class="section-title">
 
+                    <i class="fas fa-tachometer-alt"></i>
 
+                    <span>快捷导航</span>
 
+                </div>
 
+                <div class="filters">
 
+                    <div class="filter-group">
 
+                        <label>常用功能</label>
 
+                        <div class="filters" style="gap: 10px;">
 
+                            <button class="btn btn-outline" style="width: 100%; text-align: left; justify-content: flex-start;">
 
+                                <i class="fas fa-file-invoice"></i> 本月报销
 
+                            </button>
 
+                            <button class="btn btn-outline" style="width: 100%; text-align: left; justify-content: flex-start;">
 
+                                <i class="fas fa-calendar-check"></i> 今日考勤
 
+                            </button>
 
+                            <button class="btn btn-outline" style="width: 100%; text-align: left; justify-content: flex-start;">
 
+                                <i class="fas fa-tasks"></i> 待办任务
 
+                            </button>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="filter-group">
 
+                        <label>待处理事项</label>
 
+                        <div class="filters" style="background: rgba(239, 68, 68, 0.1); border-radius: 10px; padding: 12px;">
 
+                            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
 
+                                <i class="fas fa-exclamation-circle" style="color: var(--danger);"></i>
 
+                                <span>3笔报销待审批</span>
 
+                            </div>
 
+                            <div style="display: flex; align-items: center; gap: 10px;">
 
+                                <i class="fas fa-exclamation-circle" style="color: var(--danger);"></i>
 
+                                <span>2笔借款待处理</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="filter-group">
 
+                        <label>财务概览</label>
 
+                        <div class="filters" style="background: rgba(16, 185, 129, 0.1); border-radius: 10px; padding: 12px;">
 
+                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
 
+                                <span>本月收入</span>
 
+                                <span style="font-weight: 600;">¥86,540</span>
 
+                            </div>
 
+                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
 
+                                <span>待回款</span>
 
+                                <span style="font-weight: 600; color: var(--accent);">¥24,300</span>
 
+                            </div>
 
+                            <div style="display: flex; justify-content: space-between;">
 
+                                <span>报销总额</span>
 
+                                <span style="font-weight: 600; color: var(--danger);">¥8,760</span>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <button class="btn btn-primary" style="margin-top: 15px;">
 
+                        <i class="fas fa-cog"></i> 系统设置
 
+                    </button>
 
+                </div>
 
+            </div>
 
+            
+            <div class="main-content">
 
+                <div class="ai-header">
 
+                    <div>
 
+                        <div class="ai-title">工作台与财务管理系统</div>
 
+                        <div class="ai-subtitle">集成工作流程与财务管理功能，<span class="ai-highlight">一站式管理</span>您的日常办公与财务事务</div>
 
+                    </div>
 
+                    <div class="ai-power">
 
+                        <i class="fas fa-chart-line"></i>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="functions-container">
 
+                    <!-- 工作台部分 -->
 
+                    <div class="function-section">
 
+                        <div class="function-header">
 
+                            <i class="fas fa-desktop"></i>
 
+                            <h2>工作台</h2>
 
+                        </div>
 
+                        <div class="function-grid">
 
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-blue">
 
+                                    <i class="fas fa-book"></i>
 
+                                </div>
 
+                                <div class="function-name">日志</div>
 
+                                <div class="function-desc">记录工作日志</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-green">
 
+                                    <i class="fas fa-calendar-alt"></i>
 
+                                </div>
 
+                                <div class="function-name">考勤</div>
 
+                                <div class="function-desc">打卡与考勤管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-purple">
 
+                                    <i class="fas fa-file-alt"></i>
 
+                                </div>
 
+                                <div class="function-name">内部文件</div>
 
+                                <div class="function-desc">公司文件管理</div>
 
+                                <div class="status-indicator status-pending"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-orange">
 
+                                    <i class="fas fa-tasks"></i>
 
+                                </div>
 
+                                <div class="function-name">任务</div>
 
+                                <div class="function-desc">任务分配与跟踪</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 财务管理部分 -->
 
+                    <div class="function-section">
 
+                        <div class="function-header">
 
+                            <i class="fas fa-money-bill-wave"></i>
 
+                            <h2>财务管理</h2>
 
+                        </div>
 
+                        <div class="function-grid">
 
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-cyan">
 
+                                    <i class="fas fa-file-invoice-dollar"></i>
 
+                                </div>
 
+                                <div class="function-name">报销</div>
 
+                                <div class="function-desc">费用报销管理</div>
 
+                                <div class="status-indicator status-warning"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-cyan">
 
+                                    <i class="fas fa-store"></i>
 
+                                </div>
 
+                                <div class="function-name">本店报销</div>
 
+                                <div class="function-desc">门店费用报销</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-pink">
 
+                                    <i class="fas fa-hand-holding-usd"></i>
 
+                                </div>
 
+                                <div class="function-name">借款</div>
 
+                                <div class="function-desc">员工借款管理</div>
 
+                                <div class="status-indicator status-warning"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-pink">
 
+                                    <i class="fas fa-store"></i>
 
+                                </div>
 
+                                <div class="function-name">本店借款</div>
 
+                                <div class="function-desc">门店借款管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-blue">
 
+                                    <i class="fas fa-cash-register"></i>
 
+                                </div>
 
+                                <div class="function-name">出纳账目</div>
 
+                                <div class="function-desc">现金收支管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-orange">
 
+                                    <i class="fas fa-clock"></i>
 
+                                </div>
 
+                                <div class="function-name">待回款</div>
 
+                                <div class="function-desc">应收款项跟踪</div>
 
+                                <div class="status-indicator status-pending"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-green">
 
+                                    <i class="fas fa-money-check-alt"></i>
 
+                                </div>
 
+                                <div class="function-name">个人工资</div>
 
+                                <div class="function-desc">薪资明细查询</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-orange">
 
+                                    <i class="fas fa-plus-circle"></i>
 
+                                </div>
 
+                                <div class="function-name">添加回款</div>
 
+                                <div class="function-desc">记录收款信息</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-purple">
 
+                                    <i class="fas fa-receipt"></i>
 
+                                </div>
 
+                                <div class="function-name">开票记录</div>
 
+                                <div class="function-desc">发票管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <!-- 其他部分 -->
 
+                    <div class="function-section">
 
+                        <div class="function-header">
 
+                            <i class="fas fa-ellipsis-h"></i>
 
+                            <h2>其他</h2>
 
+                        </div>
 
+                        <div class="function-grid">
 
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-green">
 
+                                    <i class="fas fa-box"></i>
 
+                                </div>
 
+                                <div class="function-name">物品管理</div>
 
+                                <div class="function-desc">办公用品管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-purple">
 
+                                    <i class="fas fa-truck"></i>
 
+                                </div>
 
+                                <div class="function-name">供应商</div>
 
+                                <div class="function-desc">供应商信息管理</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-blue">
 
+                                    <i class="fas fa-clipboard-list"></i>
 
+                                </div>
 
+                                <div class="function-name">出库清单</div>
 
+                                <div class="function-desc">物品出库记录</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                            
+                            <div class="function-card">
 
+                                <div class="function-icon icon-bg-pink">
 
+                                    <i class="fas fa-concierge-bell"></i>
 
+                                </div>
 
+                                <div class="function-name">服务类型管理</div>
 
+                                <div class="function-desc">服务项目设置</div>
 
+                                <div class="status-indicator"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 添加卡片交互效果
 
+            const cards = document.querySelectorAll('.function-card');
 
+            cards.forEach(card => {
 
+                card.addEventListener('click', function() {
 
+                    // 移除所有卡片的active类
 
+                    cards.forEach(c => c.classList.remove('active'));
 
+                    
+                    // 为当前卡片添加active类
 
+                    this.classList.add('active');
 
+                    
+                    // 获取功能名称
 
+                    const functionName = this.querySelector('.function-name').textContent;
 
+                    
+                    // 模拟打开功能页面
 
+                    alert(`正在打开: ${functionName} 功能`);
 
+                });
 
+            });
 
+            
+            // 添加悬停效果
 
+            cards.forEach(card => {
 
+                card.addEventListener('mouseenter', function() {
 
+                    this.style.transform = 'translateY(-5px)';
 
+                });
 
+                
+                card.addEventListener('mouseleave', function() {
 
+                    this.style.transform = 'translateY(0)';
 
+                });
 
+            });
 
+            
+            // 侧边栏按钮效果
 
+            const sideButtons = document.querySelectorAll('.btn-outline');
 
+            sideButtons.forEach(btn => {
 
+                btn.addEventListener('click', function() {
 
+                    const icon = this.querySelector('i').className;
 
+                    let action = '';
 
+                    
+                    if (icon.includes('file-invoice')) action = '本月报销';
 
+                    if (icon.includes('calendar-check')) action = '今日考勤';
 
+                    if (icon.includes('tasks')) action = '待办任务';
 
+                    
+                    alert(`正在打开: ${action}`);
 
+                });
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>