248 lines
11 KiB
HTML
248 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>数据产品详情 - 可信数据空间</title>
|
||
<link rel="stylesheet" href="../../../assets/css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<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/pages/mods/mod4-ops/data-detail.css" rel="stylesheet">
|
||
</head>
|
||
<body class="d-flex flex-column min-vh-100">
|
||
<!-- 使用组件加载器加载header -->
|
||
<header></header>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="flex-grow-1">
|
||
<div class="product-container">
|
||
<!-- 产品头部信息 -->
|
||
<div class="product-header">
|
||
<div class="header-content">
|
||
<div class="product-badges" id="productBadges">
|
||
<!-- 徽章将通过JavaScript动态加载 -->
|
||
</div>
|
||
<h1 id="productTitle"><!-- 标题将通过JavaScript动态加载 --></h1>
|
||
<div class="product-meta" id="productMeta">
|
||
<!-- 元数据将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="product-content">
|
||
<!-- 左侧主要内容 -->
|
||
<div class="content-main">
|
||
<!-- 产品概述 -->
|
||
<section class="product-section">
|
||
<h2>产品概述</h2>
|
||
<div class="section-content">
|
||
<p id="productDescription"><!-- 描述将通过JavaScript动态加载 --></p>
|
||
<div class="feature-grid" id="featureGrid">
|
||
<!-- 特性将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据特征 -->
|
||
<section class="product-section">
|
||
<h2>数据特征</h2>
|
||
<div class="section-content">
|
||
<div class="data-specs" id="dataSpecs">
|
||
<!-- 数据特征将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 应用场景 -->
|
||
<section class="product-section">
|
||
<h2>应用场景</h2>
|
||
<div class="section-content">
|
||
<div class="scenario-cards" id="scenarioCards">
|
||
<!-- 应用场景将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据样例 -->
|
||
<section class="product-section">
|
||
<h2>数据样例</h2>
|
||
<div class="section-content">
|
||
<div class="code-sample">
|
||
<div class="code-header">
|
||
<span>JSON示例</span>
|
||
<button class="copy-btn">
|
||
<i class="bi bi-clipboard"></i>
|
||
复制代码
|
||
</button>
|
||
</div>
|
||
<pre><code id="sampleCode"><!-- 示例代码将通过JavaScript动态加载 --></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 右侧购买信息 -->
|
||
<div class="content-sidebar">
|
||
<div class="purchase-card">
|
||
<div class="price-section">
|
||
<div class="price-header">
|
||
<h3>定价方案</h3>
|
||
<span class="price-tag" id="priceTag"><!-- 价格将通过JavaScript动态加载 --></span>
|
||
</div>
|
||
<div class="price-features" id="priceFeatures">
|
||
<!-- 价格特性将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
<button class="purchase-btn">立即购买</button>
|
||
<button class="contact-btn">
|
||
<i class="bi bi-headset"></i>
|
||
联系客服
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 服务保障 -->
|
||
<div class="service-guarantees" id="serviceGuarantees">
|
||
<!-- 服务保障将通过JavaScript动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用组件加载器加载footer -->
|
||
<footer></footer>
|
||
|
||
<script src="../../../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||
<script src="../../../assets/js/main.js"></script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
// 初始化组件
|
||
ComponentLoader.init();
|
||
|
||
// 获取产品ID（从URL参数中获取）
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const productId = urlParams.get('id') || 'credit-score'; // 修改默认ID
|
||
|
||
try {
|
||
// 加载产品数据
|
||
const response = await fetch(`../../../assets/data/data-products/${productId}.json`);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
const data = await response.json();
|
||
|
||
// 更新页面标题
|
||
document.title = `${data.title} - 可信数据空间`;
|
||
|
||
// 加载徽章
|
||
const badgesHtml = data.badges.map(badge => `
|
||
<span class="badge ${badge.type}">${badge.text}</span>
|
||
`).join('');
|
||
document.getElementById('productBadges').innerHTML = badgesHtml;
|
||
|
||
// 加载标题
|
||
document.getElementById('productTitle').textContent = data.title;
|
||
|
||
// 加载元数据
|
||
const metaHtml = data.meta.map(item => `
|
||
<div class="meta-item">
|
||
<i class="bi ${item.icon}"></i>
|
||
<span>${item.text}</span>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('productMeta').innerHTML = metaHtml;
|
||
|
||
// 加载产品描述
|
||
document.getElementById('productDescription').textContent = data.overview.description;
|
||
|
||
// 加载特性
|
||
const featuresHtml = data.overview.features.map(feature => `
|
||
<div class="feature-item">
|
||
<i class="bi bi-check-circle"></i>
|
||
<span>${feature}</span>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('featureGrid').innerHTML = featuresHtml;
|
||
|
||
// 加载数据特征
|
||
const specsHtml = data.specifications.map(spec => `
|
||
<div class="spec-group">
|
||
<h3>${spec.title}</h3>
|
||
<ul>
|
||
${spec.items.map(item => `<li>${item}</li>`).join('')}
|
||
</ul>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('dataSpecs').innerHTML = specsHtml;
|
||
|
||
// 加载应用场景
|
||
const scenariosHtml = data.scenarios.map(scenario => `
|
||
<div class="scenario-card">
|
||
<div class="scenario-icon">
|
||
<i class="bi ${scenario.icon}"></i>
|
||
</div>
|
||
<h4>${scenario.title}</h4>
|
||
<p>${scenario.description}</p>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('scenarioCards').innerHTML = scenariosHtml;
|
||
|
||
// 加载示例代码
|
||
document.getElementById('sampleCode').textContent = JSON.stringify(data.sample, null, 4);
|
||
|
||
// 加载价格
|
||
document.getElementById('priceTag').innerHTML = `¥${data.pricing.amount}<small>/${data.pricing.unit}</small>`;
|
||
|
||
// 加载价格特性
|
||
const priceFeaturesHtml = data.pricing.features.map(feature => `
|
||
<div class="feature-item">
|
||
<i class="bi bi-check2"></i>
|
||
<span>${feature}</span>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('priceFeatures').innerHTML = priceFeaturesHtml;
|
||
|
||
// 加载服务保障
|
||
const guaranteesHtml = data.guarantees.map(guarantee => `
|
||
<div class="guarantee-item">
|
||
<i class="bi ${guarantee.icon}"></i>
|
||
<div class="guarantee-info">
|
||
<h4>${guarantee.title}</h4>
|
||
<p>${guarantee.description}</p>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
document.getElementById('serviceGuarantees').innerHTML = guaranteesHtml;
|
||
|
||
// 初始化代码复制功能
|
||
const copyBtn = document.querySelector('.copy-btn');
|
||
const codeElement = document.querySelector('.code-sample code');
|
||
|
||
copyBtn.addEventListener('click', () => {
|
||
const code = codeElement.textContent;
|
||
navigator.clipboard.writeText(code).then(() => {
|
||
copyBtn.innerHTML = '<i class="bi bi-check"></i> 已复制';
|
||
setTimeout(() => {
|
||
copyBtn.innerHTML = '<i class="bi bi-clipboard"></i> 复制代码';
|
||
}, 2000);
|
||
});
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('加载产品数据失败:', error);
|
||
// 显示错误提示
|
||
document.querySelector('.product-container').innerHTML = `
|
||
<div style="text-align: center; padding: 2rem; color: #ef4444;">
|
||
<i class="bi bi-exclamation-triangle" style="font-size: 3rem; margin-bottom: 1rem;"></i>
|
||
<h2>数据加载失败</h2>
|
||
<p>抱歉，无法加载产品数据。请稍后再试。</p>
|
||
<p style="color: #64748b; font-size: 0.875rem;">错误信息：${error.message}</p>
|
||
</div>
|
||
`;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |