Spaces:
Running
Running
| <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; | |
| } | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary-color: #8b5cf6; | |
| --accent-color: #06b6d4; | |
| --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --card-bg: rgba(255, 255, 255, 0.95); | |
| --text-primary: #1e293b; | |
| --text-secondary: #64748b; | |
| --border-radius: 16px; | |
| --shadow: 0 10px 40px rgba(0, 0, 0, 0.1); | |
| --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.15); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: var(--bg-gradient); | |
| min-height: 100vh; | |
| color: var(--text-primary); | |
| } | |
| /* Header */ | |
| header { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| color: white; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| background: linear-gradient(45deg, #fff, #e0e7ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .built-with { | |
| color: rgba(255, 255, 255, 0.9); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| padding: 0.5rem 1rem; | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .built-with:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| transform: translateY(-2px); | |
| } | |
| /* Main Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* Search Section */ | |
| .search-section { | |
| background: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .search-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .search-header h1 { | |
| font-size: 2rem; | |
| background: var(--bg-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 0.5rem; | |
| } | |
| .search-header p { | |
| color: var(--text-secondary); | |
| } | |
| /* Search Form */ | |
| .search-form { | |
| display: grid; | |
| gap: 1.5rem; | |
| } | |
| .search-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .form-group label { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| padding: 0.875rem 1rem; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| background: white; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); | |
| } | |
| .search-input-wrapper { | |
| position: relative; | |
| } | |
| .search-input-wrapper i { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-secondary); | |
| } | |
| .search-input-wrapper input { | |
| padding-left: 2.75rem; | |
| width: 100%; | |
| } | |
| /* Buttons */ | |
| .btn-group { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: 1rem; | |
| } | |
| .btn { | |
| padding: 0.875rem 2rem; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: var(--bg-gradient); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); | |
| } | |
| .btn-secondary { | |
| background: #f1f5f9; | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: #e2e8f0; | |
| } | |
| /* Quick Filters */ | |
| .quick-filters { | |
| display: flex; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| margin-top: 1.5rem; | |
| justify-content: center; | |
| } | |
| .filter-tag { | |
| padding: 0.5rem 1rem; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| border: 1px solid #bae6fd; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| color: #0369a1; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .filter-tag:hover { | |
| background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); | |
| transform: translateY(-2px); | |
| } | |
| .filter-tag.active { | |
| background: var(--bg-gradient); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| /* Stats Section */ | |
| .stats-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .stat-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .stat-icon.blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } | |
| .stat-icon.green { background: linear-gradient(135deg, #10b981, #059669); } | |
| .stat-icon.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } | |
| .stat-icon.orange { background: linear-gradient(135deg, #f59e0b, #d97706); } | |
| .stat-info h3 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .stat-info p { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| /* Results Section */ | |
| .results-section { | |
| background: var(--card-bg); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .results-header { | |
| padding: 1.5rem 2rem; | |
| border-bottom: 1px solid #e2e8f0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .results-header h2 { | |
| font-size: 1.25rem; | |
| color: var(--text-primary); | |
| } | |
| .results-count { | |
| background: linear-gradient(135deg, #ddd6fe, #c4b5fd); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| color: #5b21b6; | |
| font-weight: 600; | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .view-btn { | |
| padding: 0.5rem; | |
| border: none; | |
| background: #f1f5f9; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: all 0.3s ease; | |
| } | |
| .view-btn.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| /* Table */ | |
| .table-container { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 1rem 1.5rem; | |
| text-align: left; | |
| } | |
| th { | |
| background: #f8fafc; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| th:hover { | |
| background: #f1f5f9; | |
| } | |
| th i { | |
| margin-left: 0.5rem; | |
| font-size: 0.75rem; | |
| } | |
| tr { | |
| border-bottom: 1px solid #e2e8f0; | |
| transition: background 0.3s ease; | |
| } | |
| tbody tr:hover { | |
| background: #f8fafc; | |
| } | |
| .status-badge { | |
| padding: 0.375rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.375rem; | |
| } | |
| .status-active { | |
| background: #dcfce7; | |
| color: #166534; | |
| } | |
| .status-pending { | |
| background: #fef3c7; | |
| color: #92400e; | |
| } | |
| .status-inactive { | |
| background: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .action-btns { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .action-btn.view { | |
| background: #dbeafe; | |
| color: #1d4ed8; | |
| } | |
| .action-btn.edit { | |
| background: #dcfce7; | |
| color: #166534; | |
| } | |
| .action-btn.delete { | |
| background: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .action-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Pagination */ | |
| .pagination { | |
| padding: 1.5rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid #e2e8f0; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .page-info { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .page-buttons { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .page-btn { | |
| width: 40px; | |
| height: 40px; | |
| border: 1px solid #e2e8f0; | |
| background: white; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .page-btn:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .page-btn.active { | |
| background: var(--bg-gradient); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| /* Card View */ | |
| .card-view { | |
| display: none; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| padding: 1.5rem; | |
| } | |
| .card-view.active { | |
| display: grid; | |
| } | |
| .result-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid #e2e8f0; | |
| transition: all 0.3s ease; | |
| } | |
| .result-card:hover { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-5px); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 1rem; | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--text-primary); | |
| } | |
| .card-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .card-row { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.875rem; | |
| } | |
| .card-row span:first-child { | |
| color: var(--text-secondary); | |
| } | |
| .card-footer { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid #e2e8f0; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: var(--border-radius); | |
| max-width: 600px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: modalSlide 0.3s ease; | |
| } | |
| @keyframes modalSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid #e2e8f0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .modal-header h3 { | |
| font-size: 1.25rem; | |
| color: var(--text-primary); | |
| } | |
| .modal-close { | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| background: #f1f5f9; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-close:hover { | |
| background: #e2e8f0; | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| } | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .detail-item { | |
| padding: 1rem; | |
| background: #f8fafc; | |
| border-radius: 10px; | |
| } | |
| .detail-item label { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .detail-item span { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| padding: 3rem; | |
| } | |
| .loading.active { | |
| display: block; | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid #e2e8f0; | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* No Results */ | |
| .no-results { | |
| display: none; | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| } | |
| .no-results.active { | |
| display: block; | |
| } | |
| .no-results i { | |
| font-size: 4rem; | |
| color: #cbd5e1; | |
| margin-bottom: 1rem; | |
| } | |
| .no-results h3 { | |
| color: var(--text-primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .no-results p { | |
| color: var(--text-secondary); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| .search-header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .detail-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .results-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| th, td { | |
| padding: 0.75rem 1rem; | |
| font-size: 0.875rem; | |
| } | |
| .pagination { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-database"></i> | |
| <span>智能查询系统</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| </header> | |
| <div class="container"> | |
| <!-- Search Section --> | |
| <section class="search-section"> | |
| <div class="search-header"> | |
| <h1><i class="fas fa-search"></i> 数据查询中心</h1> | |
| <p>快速检索您需要的信息，支持多条件组合查询</p> | |
| </div> | |
| <form class="search-form" id="searchForm"> | |
| <div class="search-row"> | |
| <div class="form-group"> | |
| <label for="keyword">关键词搜索</label> | |
| <div class="search-input-wrapper"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" id="keyword" placeholder="输入关键词搜索..."> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="category">分类</label> | |
| <select id="category"> | |
| <option value="">全部分类</option> | |
| <option value="technology">技术</option> | |
| <option value="business">商业</option> | |
| <option value="education">教育</option> | |
| <option value="healthcare">医疗</option> | |
| <option value="finance">金融</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="status">状态</label> | |
| <select id="status"> | |
| <option value="">全部状态</option> | |
| <option value="active">活跃</option> | |
| <option value="pending">待处理</option> | |
| <option value="inactive">已停用</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="search-row"> | |
| <div class="form-group"> | |
| <label for="dateFrom">开始日期</label> | |
| <input type="date" id="dateFrom"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="dateTo">结束日期</label> | |
| <input type="date" id="dateTo"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="sortBy">排序方式</label> | |
| <select id="sortBy"> | |
| <option value="newest">最新优先</option> | |
| <option value="oldest">最早优先</option> | |
| <option value="name">按名称</option> | |
| <option value="amount">按金额</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-search"></i> 开始查询 | |
| </button> | |
| <button type="button" class="btn btn-secondary" onclick="resetForm()"> | |
| <i class="fas fa-redo"></i> 重置条件 | |
| </button> | |
| <button type="button" class="btn btn-secondary" onclick="exportData()"> | |
| <i class="fas fa-download"></i> 导出数据 | |
| </button> | |
| </div> | |
| </form> | |
| <div class="quick-filters"> | |
| <span class="filter-tag" onclick="quickFilter('today')">今日数据</span> | |
| <span class="filter-tag" onclick="quickFilter('week')">本周数据</span> | |
| <span class="filter-tag" onclick="quickFilter('month')">本月数据</span> | |
| <span class="filter-tag" onclick="quickFilter('active')">活跃项目</span> | |
| <span class="filter-tag" onclick="quickFilter('pending')">待处理</span> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats-section"> | |
| <div class="stat-card"> | |
| <div class="stat-icon blue"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="totalRecords">1,234</h3> | |
| <p>总记录数</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon green"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="activeRecords">892</h3> | |
| <p>活跃记录</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon purple"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="pendingRecords">156</h3> | |
| <p>待处理</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon orange"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div class="stat-info"> | |
| <h3 id="todayRecords">48</h3> | |
| <p>今日新增</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section class="results-section"> | |
| <div class="results-header"> | |
| <h2><i class="fas fa-list"></i> 查询结果</h2> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <span class="results-count" id="resultsCount">共 50 条结果</span> | |
| <div class="view-toggle"> | |
| <button class="view-btn active" onclick="switchView('table')" id="tableViewBtn"> | |
| <i class="fas fa-table"></i> | |
| </button> | |
| <button class="view-btn" onclick="switchView('card')" id="cardViewBtn"> | |
| <i class="fas fa-th-large"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading --> | |
| <div class="loading" id="loading"> | |
| <div class="spinner"></div> | |
| <p>正在加载数据...</p> | |
| </div> | |
| <!-- No Results --> | |
| <div class="no-results" id="noResults"> | |
| <i class="fas fa-search"></i> | |
| <h3>未找到相关数据</h3> | |
| <p>请尝试调整查询条件后重新搜索</p> | |
| </div> | |
| <!-- Table View --> | |
| <div class="table-container" id="tableView"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th onclick="sortTable('id')">ID <i class="fas fa-sort"></i></th> | |
| <th onclick="sortTable('name')">名称 <i class="fas fa-sort"></i></th> | |
| <th onclick="sortTable('category')">分类 <i class="fas fa-sort"></i></th> | |
| <th onclick="sortTable('amount')">金额 <i class="fas fa-sort"></i></th> | |
| <th onclick="sortTable('date')">日期 <i class="fas fa-sort"></i></th> | |
| <th onclick="sortTable('status')">状态 <i class="fas fa-sort"></i></th> | |
| <th>操作</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"> | |
| <!-- Data will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Card View --> | |
| <div class="card-view" id="cardView"> | |
| <!-- Cards will be inserted here --> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="pagination"> | |
| <span class="page-info" id="pageInfo">显示 1-10 条，共 50 条</span> | |
| <div class="page-buttons" id="pageButtons"> | |
| <!-- Pagination buttons will be inserted here --> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Detail Modal --> | |
| <div class="modal" id="detailModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3><i class="fas fa-info-circle"></i> 详细信息</h3> | |
| <button class="modal-close" onclick="closeModal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="detail-grid" id="detailContent"> | |
| <!-- Detail content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample Data | |
| const sampleData = [ | |
| { id: 'PRJ001', name: '智能数据分析平台', category: '技术', amount: 158000, date: '2024-01-15', status: 'active', description: '企业级数据分析解决方案', contact: '张经理', email: 'zhang@example.com' }, | |
| { id: 'PRJ002', name: '在线教育系统', category: '教育', amount: 89000, date: '2024-01-14', status: 'active', description: 'K12在线教育平台', contact: '李主任', email: 'li@example.com' }, | |
| { id: 'PRJ003', name: '医疗管理系统', category: '医疗', amount: 256000, date: '2024-01-13', status: 'pending', description: '医院信息化管理系统', contact: '王院长', email: 'wang@example.com' }, | |
| { id: 'PRJ004', name: '金融风控系统', category: '金融', amount: 380000, date: '2024-01-12', status: 'active', description: '银行风险控制平台', contact: '陈总监', email: 'chen@example.com' }, | |
| { id: 'PRJ005', name: '电商平台升级', category: '商业', amount: 125000, date: '2024-01-11', status: 'inactive', description: '电商系统架构升级', contact: '刘经理', email: 'liu@example.com' }, | |
| { id: 'PRJ006', name: '物联网监控系统', category: '技术', amount: 198000, date: '2024-01-10', status: 'active', description: '工业物联网解决方案', contact: '赵工程师', email: 'zhao@example.com' }, | |
| { id: 'PRJ007', name: '企业培训平台', category: '教育', amount: 67000, date: '2024-01-09', status: 'pending', description: '员工在线培训系统', contact: '孙主管', email: 'sun@example.com' }, | |
| { id: 'PRJ008', name: '远程医疗系统', category: '医疗', amount: 312000, date: '2024-01-08', status: 'active', description: '远程诊疗服务平台', contact: '周医生', email: 'zhou@example.com' }, | |
| { id: 'PRJ009', name: '投资管理系统', category: '金融', amount: 445000, date: '2024-01-07', status: 'active', description: '资产管理与投资分析', contact: '吴经理', email: 'wu@example.com' }, | |
| { id: 'PRJ010', name: '供应链管理', category: '商业', amount: 178000, date: '2024-01-06', status: 'pending', description: '供应链优化解决方案', contact: '郑总监', email: 'zheng@example.com' }, | |
| { id: 'PRJ011', name: 'AI客服系统', category: '技术', amount: 92000, date: '2024-01-05', status: 'active', description: '智能客服机器人', contact: '钱工程师', email: 'qian@example.com' }, | |
| { id: 'PRJ012', name: '考试管理系统', category: '教育', amount: 56000, date: '2024-01-04', status: 'inactive', description: '在线考试与评估系统', contact: '冯老师', email: 'feng@example.com' }, | |
| ]; | |
| let currentData = [...sampleData]; | |
| let currentPage = 1; | |
| const itemsPerPage = 5; | |
| let currentView = 'table'; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderData(); | |
| updateStats(); | |
| }); | |
| // Search Form Submit | |
| document.getElementById('searchForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| performSearch(); | |
| }); | |
| // Perform Search | |
| function performSearch() { | |
| showLoading(true); | |
| setTimeout(() => { | |
| const keyword = document.getElementById('keyword').value.toLowerCase(); | |
| const category = document.getElementById('category').value; | |
| const status = document.getElementById('status').value; | |
| const dateFrom = document.getElementById('dateFrom').value; | |
| const dateTo = document.getElementById('dateTo').value; | |
| currentData = sampleData.filter(item => { | |
| let match = true; | |
| if (keyword && !item.name.toLowerCase().includes(keyword) && !item.id.toLowerCase().includes(keyword)) { | |
| match = false; | |
| } | |
| if (category) { | |
| const categoryMap = { | |
| 'technology': '技术', | |
| 'business': '商业', | |
| 'education': '教育', | |
| 'healthcare': '医疗', | |
| 'finance': '金融' | |
| }; | |
| if (item.category !== categoryMap[category]) match = false; | |
| } | |
| if (status && item.status !== status) { | |
| match = false; | |
| } | |
| if (dateFrom && item.date < dateFrom) match = false; | |
| if (dateTo && item.date > dateTo) match = false; | |
| return match; | |
| }); | |
| // Sort | |
| const sortBy = document.getElementById('sortBy').value; | |
| sortData(sortBy); | |
| currentPage = 1; | |
| showLoading(false); | |
| renderData(); | |
| updateStats(); | |
| }, 500); | |
| } | |
| // Sort Data | |
| function sortData(sortBy) { | |
| switch(sortBy) { | |
| case 'newest': | |
| currentData.sort((a, b) => new Date(b.date) - new Date(a.date)); | |
| break; | |
| case 'oldest': | |
| currentData.sort((a, b) => new Date(a.date) - new Date(b.date)); | |
| break; | |
| case 'name': | |
| currentData.sort((a, b) => a.name.localeCompare(b.name)); | |
| break; | |
| case 'amount': | |
| currentData.sort((a, b) => b.amount - a.amount); | |
| break; | |
| } | |
| } | |
| // Render Data | |
| function renderData() { | |
| const start = (currentPage - 1) * itemsPerPage; | |
| const end = start + itemsPerPage; | |
| const pageData = currentData.slice(start, end); | |
| if (currentData.length === 0) { | |
| document.getElementById('noResults').classList.add('active'); | |
| document.getElementById('tableView').style.display = 'none'; | |
| document.getElementById('cardView').style.display = 'none'; | |
| } else { | |
| document.getElementById('noResults').classList.remove('active'); | |
| renderTableView(pageData); | |
| renderCardView(pageData); | |
| switchView(currentView); | |
| } | |
| renderPagination(); | |
| document.getElementById('resultsCount').textContent = `共 ${currentData.length} 条结果`; | |
| } | |
| // Render Table View | |
| function renderTableView(data) { | |
| const tbody = document.getElementById('tableBody'); | |
| tbody.innerHTML = data.map(item => ` | |
| <tr> | |
| <td><strong>${item |