316 行
9.1 KiB
PHP
316 行
9.1 KiB
PHP
<?php
|
|
/**
|
|
* 酒类商品两级分类层级数据演示页面
|
|
*/
|
|
|
|
// 读取JSON数据
|
|
$json_file = 'alcohol_categories.json';
|
|
if (!file_exists($json_file)) {
|
|
die('分类数据文件不存在');
|
|
}
|
|
|
|
$json_data = file_get_contents($json_file);
|
|
$category_data = json_decode($json_data, true);
|
|
|
|
if (!$category_data) {
|
|
die('分类数据格式错误');
|
|
}
|
|
|
|
$metadata = $category_data['metadata'];
|
|
$categories = $category_data['categories'];
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= htmlspecialchars($metadata['title']) ?></title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(45deg, #2c3e50, #34495e);
|
|
color: white;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
padding: 30px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #3498db;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6c757d;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.categories-container {
|
|
padding: 30px;
|
|
}
|
|
|
|
.category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
|
|
.category-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
background: white;
|
|
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.category-header {
|
|
background: linear-gradient(45deg, #3498db, #2980b9);
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.category-id {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.category-description {
|
|
padding: 15px 20px;
|
|
background: #f8f9fa;
|
|
font-size: 0.9em;
|
|
color: #6c757d;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.subcategories {
|
|
padding: 20px;
|
|
}
|
|
|
|
.subcategory-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
margin-bottom: 8px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #3498db;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.subcategory-item:hover {
|
|
background: #e9ecef;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.subcategory-name {
|
|
font-weight: 500;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.subcategory-code {
|
|
font-size: 0.8em;
|
|
color: #6c757d;
|
|
background: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.recommend-badge {
|
|
background: #28a745;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.7em;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.category-card {
|
|
position: relative;
|
|
}
|
|
|
|
.footer {
|
|
background: #2c3e50;
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.field-definitions {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 10px;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
|
|
.field-definitions h3 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.field-item {
|
|
margin-bottom: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.field-name {
|
|
font-weight: bold;
|
|
color: #3498db;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.category-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🍷 <?= htmlspecialchars($metadata['title']) ?></h1>
|
|
<p><?= htmlspecialchars($metadata['description']) ?></p>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?= $metadata['total_categories'] ?></div>
|
|
<div class="stat-label">分类总数</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?= $metadata['level1_count'] ?></div>
|
|
<div class="stat-label">一级分类</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?= $metadata['level2_count'] ?></div>
|
|
<div class="stat-label">二级分类</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number"><?= $metadata['version'] ?></div>
|
|
<div class="stat-label">版本号</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="categories-container">
|
|
<div class="category-grid">
|
|
<?php foreach ($categories as $category): ?>
|
|
<div class="category-card">
|
|
<?php if ($category['is_recommend']): ?>
|
|
<div class="recommend-badge">推荐</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="category-header">
|
|
<div class="category-title"><?= htmlspecialchars($category['class_name']) ?></div>
|
|
<div class="category-id">ID: <?= $category['id'] ?> | Code: <?= $category['code'] ?></div>
|
|
</div>
|
|
|
|
<div class="category-description">
|
|
<?= htmlspecialchars($category['description']) ?>
|
|
</div>
|
|
|
|
<div class="subcategories">
|
|
<?php foreach ($category['children'] as $subcategory): ?>
|
|
<div class="subcategory-item">
|
|
<div class="subcategory-name"><?= htmlspecialchars($subcategory['class_name']) ?></div>
|
|
<div class="subcategory-code"><?= $subcategory['code'] ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="field-definitions">
|
|
<h3>📋 字段说明</h3>
|
|
<?php foreach ($category_data['field_definitions'] as $field => $definition): ?>
|
|
<div class="field-item">
|
|
<span class="field-name"><?= htmlspecialchars($field) ?>:</span>
|
|
<?= htmlspecialchars($definition) ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>📊 数据结构完整 | 🎯 分类合理 | 🔧 便于扩展</p>
|
|
<p style="margin-top: 10px; font-size: 0.9em; opacity: 0.8;">生成时间: <?= $metadata['generated_date'] ?> | 版本: <?= $metadata['version'] ?></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|