master

分支 (1)

管理

管理

master

big-data-view
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据可视化模板预览</title>
    <style>
        .projects-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 10px;
        }

        .project {
            flex: 0 0 48%; /* 每个项目占据 48% 的宽度，留出一些间距 */
            text-align: center;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .project img {
            width: 100%; /* 图片宽度占满项目容器 */
            height: auto; /* 自动调整高度 */
            cursor: pointer;
            aspect-ratio: 16 / 9;
        }

        /* 在小屏幕上只显示一张图片 */
        @media (max-width: 800px) {
            .project {
                flex: 0 0 100%; /* 每个项目占据 100% 的宽度 */
            }
        }
    </style>
</head>
<body>
<h1 style="text-align: center">大数据可视化模板预览</h1>
<div id="projects" class="projects-container"></div>

<script>
    // 获取项目容器
    var projectsContainer = document.getElementById('projects');

    // 动态加载项目列表
    fetch('projects.json')
        .then(response => response.json())
        .then(projects => {
            // 动态生成项目预览
            projects.forEach(function(project) {
                var projectDiv = document.createElement('div');
                projectDiv.className = 'project';

                var projectImg = document.createElement('img');
                projectImg.src = project.img;
                projectImg.alt = project.name;
                projectImg.onclick = function() {
                    window.open(project.path + '/index.html');
                };
                projectImg.title = '点击预览 ' + project.name;

                var projectName = document.createElement('div');
                projectName.textContent = project.name;

                projectDiv.appendChild(projectImg);
                projectDiv.appendChild(projectName);
                projectsContainer.appendChild(projectDiv);
            });
        })
        .catch(error => console.error('Error loading projects:', error));
</script>
</body>
</html>