Public/TrustDataSpace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页并添加数据市场功能

Browse Source 
- 首页优化:
  * 添加核心技术轮播展示
  * 更新数据运营服务入口
  * 添加图片点击放大功能

- 数据市场:
  * 新增数据市场页面
  * 实现数据产品展示
  * 添加搜索和分类筛选
  * 支持数据产品浏览和授权购买"
This commit is contained in:
sichan 2025-01-03 13:38:45 +08:00
parent d267174852
commit 555f739205
8 changed files with 364 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/styles.css
View File

@ -111,4 +111,43 @@
background-color: #e66a02;
border-color: #e66a02;
color: #fff;
}
/* 轮播图样式优化 */
.carousel-item {
height: 400px; /* 固定高度 */
}
.carousel-item img {
object-fit: cover; /* 图片填充方式 */
height: 100%;
}
.carousel-caption {
background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
padding: 20px;
border-radius: 10px;
}
/* 可点击图片的鼠标样式 */
.cursor-pointer {
cursor: pointer;
}
/* 图片模态框样式 */
#imageModal .modal-dialog {
max-width: 90vw;
}
#imageModal .modal-content {
background-color: rgba(0, 0, 0, 0.9);
}
#imageModal .btn-close-white {
filter: invert(1) grayscale(100%) brightness(200%);
}
#modalImage {
max-height: 85vh;
object-fit: contain;
}

BIN
assets/images/使能数据交易.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
assets/images/政企联合风控.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
assets/images/政务数据.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

BIN
assets/images/金融联合营销.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

11
assets/js/script.js
View File

@ -1,3 +1,14 @@
// 显示图片模态框函数移到全局作用域
function showImageModal(imgElement) {
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
modalImg.src = imgElement.src;
modalImg.alt = imgElement.alt;
const bsModal = new bootstrap.Modal(modal);
bsModal.show();
}
document.addEventListener('DOMContentLoaded', function() {
// 初始化工具提示
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

213
index.html
View File

@ -14,132 +14,209 @@
<!-- 主要内容区域 -->
<div class="container my-5 flex-grow-1">
<!-- 功能卡片区域 -->
<div class="row g-4">
<!-- 数据接入卡片 -->
<div class="col-md-4">
<!-- 功能模块标题 -->
<div class="row mb-4">
<div class="col-12">
<h3 class="text-center">功能模块</h3>
<p class="text-center text-muted">可信数据空间四大核心功能模块</p>
</div>
</div>
<!-- 功能模块卡片 -->
<div class="row g-4 mb-5">
<!-- 数据资产登记卡片 -->
<div class="col-md-3">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-cloud-upload fs-2 text-primary me-2"></i>
<h5 class="card-title mb-0">数据接入</h5>
<i class="bi bi-journal-check fs-2 text-primary me-2"></i>
<h5 class="card-title mb-0">数据资产登记</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">安全、便捷地接入您的数据资产，支持多种数据接入方式，确保数据安全合规。</p>
<p class="card-text mb-4">专业的数据资产登记服务，助力企业完成数据确权和入表。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>文件上传</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>API接口</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据库连接</li>
</ul>
<a href="pages/data-access.html" class="btn btn-primary w-100">立即接入</a>
<a href="http://demo.sutedt.com:3060" target="_blank" class="btn btn-primary w-100">立即体验</a>
</div>
</div>
</div>
</div>
<!-- 数据资产管理卡片 -->
<div class="col-md-4">
<!-- 数据治理服务卡片 -->
<div class="col-md-3">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-folder2-open fs-2 text-success me-2"></i>
<h5 class="card-title mb-0">数据资产管理</h5>
<i class="bi bi-diagram-3 fs-2 text-success me-2"></i>
<h5 class="card-title mb-0">数据治理服务</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">全面的数据资产管理功能，助您高效管理和监控数据资产。</p>
<p class="card-text mb-4">全面的数据治理能力，提供数据标准化、质量管理等服务。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产目录</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>质量监控</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>使用分析</li>
</ul>
<a href="pages/data-management.html" class="btn btn-success w-100">开始管理</a>
<a href="http://120.55.83.177/" target="_blank" class="btn btn-success w-100">了解更多</a>
</div>
</div>
</div>
</div>
<!-- 数据资产运营卡片 -->
<div class="col-md-4">
<!-- 可信数据环境卡片 -->
<div class="col-md-3">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-graph-up fs-2 text-info me-2"></i>
<h5 class="card-title mb-0">数据资产运营</h5>
<i class="bi bi-shield-lock fs-2 text-info me-2"></i>
<h5 class="card-title mb-0">可信数据环境</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">专业的数据资产运营工具，助力数据价值最大化。</p>
<p class="card-text mb-4">安全可信的数据环境，支持数据沙箱和隐私计算。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据分析</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值评估</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>运营报告</li>
</ul>
<a href="pages/data-operation.html" class="btn btn-info w-100 text-white">运营分析</a>
<a href="http://demo.sutedt.com:8100/#/login/admin" target="_blank" class="btn btn-info w-100 text-white">进入环境</a>
</div>
</div>
</div>
</div>
<!-- 数据运营服务卡片 -->
<div class="col-md-3">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-graph-up fs-2 text-warning me-2"></i>
<h5 class="card-title mb-0">数据运营服务</h5>
</div>
<p class="card-text mb-4">专业的数据运营服务，助力企业挖掘数据价值。</p>
<div class="mt-auto">
<a href="pages/data-market.html" class="btn btn-warning w-100 text-white">进入数据市场</a>
</div>
</div>
</div>
</div>
</div>
<!-- 第二行功能卡片 -->
<div class="row g-4 mt-4">
<!-- 数据资产登记卡片 -->
<!-- 核心技术 -->
<div class="row mt-5 mb-4">
<div class="col-12">
<h3 class="text-center">核心技术</h3>
<p class="text-center text-muted">基于隐私计算的可信数据环境</p>
</div>
</div>
<!-- 技术轮播图 -->
<div class="row mb-5">
<div class="col-12">
<div id="techCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#techCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#techCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#techCarousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#techCarousel" data-bs-slide-to="3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/政务数据.png" class="d-block w-100 cursor-pointer" alt="政务数据协同" onclick="showImageModal(this)">
<div class="carousel-caption d-none d-md-block">
<h5>政务数据协同</h5>
<p>打破数据孤岛，实现跨部门数据安全共享</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/政企联合风控.png" class="d-block w-100 cursor-pointer" alt="政企联合风控" onclick="showImageModal(this)">
<div class="carousel-caption d-none d-md-block">
<h5>政企联合风控</h5>
<p>多方数据联合建模，提升风控效果</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/金融联合营销.png" class="d-block w-100 cursor-pointer" alt="金融联合营销" onclick="showImageModal(this)">
<div class="carousel-caption d-none d-md-block">
<h5>金融联合营销</h5>
<p>数据驱动精准营销，提升转化效率</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/使能数据交易.png" class="d-block w-100 cursor-pointer" alt="使能数据交易" onclick="showImageModal(this)">
<div class="carousel-caption d-none d-md-block">
<h5>使能数据交易</h5>
<p>安全合规的数据交易环境</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#techCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">上一个</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#techCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">下一个</span>
</button>
</div>
</div>
</div>
<!-- 应用场景标题 -->
<div class="row mt-5 mb-4">
<div class="col-12">
<h3 class="text-center">应用场景</h3>
<p class="text-center text-muted">丰富的行业应用场景演示</p>
</div>
</div>
<!-- 应用场景卡片 -->
<div class="row g-4">
<!-- 供应链金融企业信用评级卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-journal-check fs-2 text-purple me-2"></i>
<h5 class="card-title mb-0">数据资产登记</h5>
<i class="bi bi-bank fs-2 text-purple me-2"></i>
<h5 class="card-title mb-0">供应链金融企业信用评级</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">专业的数据资产登记服务，助力企业完成数据确权和入表。</p>
<p class="card-text mb-4">基于多方数据的企业信用评估模型，助力供应链金融风控。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产确权</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值评估</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产入表</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>多维度数据分析</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>实时风险预警</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>信用评分模型</li>
</ul>
<a href="#" class="btn btn-purple w-100">开始登记</a>
<a href="#" class="btn btn-purple w-100">查看详情</a>
</div>
</div>
</div>
</div>
<!-- 数据沙箱隐私计算卡片 -->
<!-- 行业研究数据服务卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-shield-lock fs-2 text-danger me-2"></i>
<h5 class="card-title mb-0">数据沙箱隐私计算</h5>
<i class="bi bi-graph-up-arrow fs-2 text-danger me-2"></i>
<h5 class="card-title mb-0">行业研究数据服务</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">安全可信的隐私计算环境，实现数据可用不可见。</p>
<p class="card-text mb-4">整合多源行业数据，提供深度分析和研究报告服务。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>隐私保护</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>安全计算</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>结果可信</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>行业趋势分析</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>市场洞察</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>竞争情报</li>
</ul>
<a href="#" class="btn btn-danger w-100">立即体验</a>
<a href="#" class="btn btn-danger w-100">了解更多</a>
</div>
</div>
</div>
</div>
<!-- 数据运营场景卡片 -->
<!-- 工业互联网大模型卡片 -->
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-boxes fs-2 text-orange me-2"></i>
<h5 class="card-title mb-0">数据运营场景</h5>
<i class="bi bi-cpu fs-2 text-orange me-2"></i>
<h5 class="card-title mb-0">工业互联网大模型</h5>
</div>
<p class="card-text mb-4" style="min-height: 72px;">丰富的数据运营场景，助力企业挖掘数据价值。</p>
<p class="card-text mb-4">基于海量工业数据训练的专业大模型，赋能智能制造。</p>
<div class="mt-auto">
<ul class="list-unstyled mb-4">
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>场景定制</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>模型训练</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>价值变现</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>设备预测性维护</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>生产优化</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>质量控制</li>
</ul>
<a href="pages/data-scenarios.html" class="btn btn-orange w-100">探索场景</a>
<a href="#" class="btn btn-orange w-100">体验演示</a>
</div>
</div>
</div>
@ -187,6 +264,20 @@
<!-- Footer -->
<div id="footer"></div>
<!-- 添加图片查看模态框 -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content bg-transparent border-0">
<div class="modal-header border-0">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center p-0">
<img src="" id="modalImage" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="assets/js/components.js"></script>
<script src="assets/js/script.js"></script>

162
pages/data-market.html Normal file
View File

@ -0,0 +1,162 @@
<!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-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>
</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>
<!-- 分页 -->
<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>