TrustDataSpace/pages/data-market.html

240 lines
12 KiB
HTML
Raw Normal View History

<!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 href="../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="../assets/css/styles.css" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100">
<!-- Header -->
<div id="header"></div>
<!-- 主要内容区域 -->
<div class="container my-5 flex-grow-1">
<!-- 搜索栏 -->
<div class="row mb-4">
<div class="col-md-8 mx-auto">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索数据产品...">
<button class="btn btn-primary" type="button">
<i class="bi bi-search"></i> 搜索
</button>
</div>
</div>
</div>
<!-- 分类筛选 -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="mb-3">
<strong class="me-2">数据分级:</strong>
<a href="#" class="btn btn-sm btn-outline-danger me-2">一级敏感</a>
<a href="#" class="btn btn-sm btn-outline-warning me-2">二级敏感</a>
<a href="#" class="btn btn-sm btn-outline-info me-2">三级敏感</a>
<a href="#" class="btn btn-sm btn-outline-success">普通</a>
</div>
<div class="mb-3">
<strong class="me-2">行业分类:</strong>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">金融</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">医疗</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">制造</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">零售</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">教育</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">交通</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">能源</a>
<a href="#" class="btn btn-sm btn-outline-secondary">更多</a>
</div>
<div>
<strong class="me-2">数据类型:</strong>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">结构化数据</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">非结构化数据</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时数据流</a>
<a href="#" class="btn btn-sm btn-outline-secondary">API接口</a>
</div>
<div class="mt-3">
<strong class="me-2">更新频率:</strong>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">实时</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每日</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-2">每周</a>
<a href="#" class="btn btn-sm btn-outline-secondary">每月</a>
</div>
</div>
</div>
</div>
</div>
<!-- 数据产品列表 -->
<div class="row g-4">
<!-- 数据产品卡片 1 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<span class="badge bg-primary mb-2">金融数据</span>
<h5 class="card-title">企业信用评分数据包</h5>
<p class="card-text text-muted">包含100万+企业的多维度信用评分数据,适用于风控建模</p>
<div class="mb-3">
<small class="text-muted">
<i class="bi bi-clock"></i> 更新频率: 每日
</small>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="text-primary fw-bold">
<i class="bi bi-coin"></i>
<span>¥2000/月</span>
</div>
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-plus"></i> 购买授权
</button>
</div>
</div>
</div>
</div>
<!-- 数据产品卡片 2 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<span class="badge bg-success mb-2">医疗数据</span>
<h5 class="card-title">医疗器械使用数据API</h5>
<p class="card-text text-muted">覆盖全国3000+医院的医疗器械使用情况实时数据接口</p>
<div class="mb-3">
<small class="text-muted">
<i class="bi bi-clock"></i> 更新频率: 实时
</small>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="text-primary fw-bold">
<i class="bi bi-coin"></i>
<span>¥5000/月</span>
</div>
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-plus"></i> 购买授权
</button>
</div>
</div>
</div>
</div>
<!-- 数据产品卡片 3 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<span class="badge bg-warning mb-2">制造业数据</span>
<h5 class="card-title">工业设备运行状态数据</h5>
<p class="card-text text-muted">涵盖主要工业设备的运行参数、维护记录等数据集</p>
<div class="mb-3">
<small class="text-muted">
<i class="bi bi-clock"></i> 更新频率: 每小时
</small>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="text-primary fw-bold">
<i class="bi bi-coin"></i>
<span>¥3000/月</span>
</div>
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-plus"></i> 购买授权
</button>
</div>
</div>
</div>
</div>
<!-- 新增数据产品卡片 -->
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span class="badge bg-danger">一级敏感</span>
<span class="badge bg-info">医疗数据</span>
</div>
<h5 class="card-title">医疗影像诊断数据集</h5>
<p class="card-text text-muted">包含50万+标注医疗影像数据适用于AI模型训练</p>
<div class="mb-3">
<small class="text-muted me-3">
<i class="bi bi-clock"></i> 每日更新
</small>
<small class="text-muted">
<i class="bi bi-database"></i> 15TB
</small>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="text-primary fw-bold">
<i class="bi bi-coin"></i>
<span>¥8000/月</span>
</div>
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-plus"></i> 购买授权
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span class="badge bg-warning">二级敏感</span>
<span class="badge bg-primary">交通数据</span>
</div>
<h5 class="card-title">城市交通流量实时数据</h5>
<p class="card-text text-muted">覆盖主要城市路段的实时交通流量、拥堵指数等数据</p>
<div class="mb-3">
<small class="text-muted me-3">
<i class="bi bi-clock"></i> 实时更新
</small>
<small class="text-muted">
<i class="bi bi-database"></i> 500GB/天
</small>
</div>
<div class="d-flex justify-content-between align-items-center">
<div class="text-primary fw-bold">
<i class="bi bi-coin"></i>
<span>¥6000/月</span>
</div>
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-cart-plus"></i> 购买授权
</button>
</div>
</div>
</div>
</div>
<!-- 更多数据产品卡片 -->
<!-- ... -->
</div>
<!-- 分页 -->
<div class="row mt-4">
<div class="col-12">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer"></div>
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../assets/js/components.js"></script>
<script src="../assets/js/script.js"></script>
</body>
</html>