农产品园区展示系统——仙盟创梦IDE开发

最新推荐文章于 2025-05-01 02:18:19 发布
未来之窗软件服务
最新推荐文章于 2025-05-01 02:18:19 发布
阅读量292
点赞数 1
文章标签： ide css javascript 仙盟创梦IDE 智慧大屏幕
本文链接：https://blog.csdn.net/cybersnow/article/details/147638567
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农业大数据平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #003366;
            color: white;
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: #004488;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 1.5rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
        }

        .user-profile {
            display: flex;
            align-items: center;
        }

        .user-profile img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

        .section {
            padding: 1rem;
            margin: 1rem;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 0.5rem;
        }

        .circle-chart,
        .lineChart {
            width: 100%;
            height: 200px;
        }

        .expert-avatars {
            display: flex;
            justify-content: space-around;
        }

        .avatar {
            text-align: center;
        }

        .avatar img {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
        }

        .product-images {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .product-img {
            width: 100%;
            max-width: 500px;
            height: auto;
        }

        button {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
        }

        .device-info,
        .resource-details,
        .market-info {
            display: flex;
            justify-content: space-around;
        }

        .device img,
        .resource img,
        .market-item img {
            width: 5rem;
            height: 5rem;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav class="nav-bar">
        <div class="logo">农业大数据平台</div>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">设备</a></li>
            <li><a href="#">农产品</a></li>
            <li><a href="#">专家</a></li>
        </ul>
        <div class="user-profile">
            <img src="avatar.png" alt="用户头像">
            <span>用户名</span>
            <span class="time">16:30:04</span>
        </div>
    </nav>

    <!-- 园区简介模块 -->
    <div class="section园区简介">
        <h2>园区简介</h2>
        <div class="circle-chart">
            <canvas id="circleChart"></canvas>
        </div>
    </div>

    <!-- 名优产品模块 - 专家头像部分 -->
    <div class="section名优产品">
        <h2>名优产品</h2>
        <div class="expert-avatars">
            <div class="avatar" data-info="专家1简介">
                <img src="expert1.jpg" alt="专家1">
                <span>专家1</span>
            </div>
            <div class="avatar" data-info="专家2简介">
                <img src="expert2.jpg" alt="专家2">
                <span>专家2</span>
            </div>
            <div class="avatar" data-info="专家3简介">
                <img src="expert3.jpg" alt="专家3">
                <span>专家3</span>
            </div>
            <div class="avatar" data-info="专家4简介">
                <img src="expert4.jpg" alt="专家4">
                <span>专家4</span>
            </div>
        </div>
    </div>

    <!-- 名优产品模块 - 图片展示部分 -->
    <div class="section名优产品">
        <h2>名优产品</h2>
        <div class="product-images">
            <img src="product1.jpg" alt="产品1" class="product-img">
            <img src="product2.jpg" alt="产品2" class="product-img" style="display: none;">
            <img src="product3.jpg" alt="产品3" class="product-img" style="display: none;">
        </div>
        <button id="prevButton">上一张</button>
        <button id="nextButton">下一张</button>
    </div>

    <!-- 设备汇息模块 -->
    <div class="section设备汇息">
        <h2>设备汇息</h2>
        <div class="device-info">
            <div class="device">
                <img src="device1.jpg" alt="设备1">
                <span>设备1信息</span>
            </div>
            <div class="device">
                <img src="device2.jpg" alt="设备2">
                <span>设备2信息</span>
            </div>
        </div>
    </div>

    <!-- 农资详情模块 -->
    <div class="section农资详情">
        <h2>农资详情</h2>
        <div class="resource-details">
            <div class="resource">
                <img src="resource1.jpg" alt="农资1">
                <span>农资1信息</span>
            </div>
            <div class="resource">
                <img src="resource2.jpg" alt="农资2">
                <span>农资2信息</span>
            </div>
        </div>
    </div>

    <!-- 农事业作业模块 -->
    <div class="section农事业作业">
        <h2>农事业作业</h2>
        <canvas id="lineChart"></canvas>
    </div>

    <!-- 市场动态模块 -->
    <div class="section市场动态">
        <h2>市场动态</h2>
        <div class="market-info">
            <div class="market-item">
                <img src="market1.jpg" alt="市场动态1">
                <span>市场动态1信息</span>
            </div>
            <div class="market-item">
                <img src="market2.jpg" alt="市场动态2">
                <span>市场动态2信息</span>
            </div>
        </div>
    </div>

    <script>
        // 圆形图表绘制（示例，需引入 Chart.js 库实际绘制）
        // 这里仅做占位
        const circleChartCanvas = document.getElementById('circleChart');
        if (circleChartCanvas) {
            // 实际绘制代码
            // 例如引入 Chart.js 后
            // new Chart(circleChartCanvas, {
            //   type: 'doughnut',
            //   data: {
            //     // 数据配置
            //   },
            //   options: {
            //     // 选项配置
            //   }
            // });
        }

        // 折线图表绘制（示例，需引入 Chart.js 库实际绘制）
        const lineChartCanvas = document.getElementById('lineChart');
        if (lineChartCanvas) {
            // 实际绘制代码
            // 例如引入 Chart.js 后
            // new Chart(lineChartCanvas, {
            //   type: 'line',
            //   data: {
            //     // 数据配置
            //   },
            //   options: {
            //     // 选项配置
            //   }
            // });
        }

        // 名优产品图片切换
        const prevButton = document.getElementById('prevButton');
        const nextButton = document.getElementById('nextButton');
        const productImgs = document.querySelectorAll('.product-img');
        let currentImgIndex = 0;

        function showImg(index) {
            productImgs.forEach((img, i) => {
                if (i === index) {
                    img.style.display = 'block';
                } else {
                    img.style.display = 'none';
                }
            });
        }

        prevButton.addEventListener('click', () => {
            currentImgIndex = (currentImgIndex - 1 + productImgs.length) % productImgs.length;
            showImg(currentImgIndex);
        });

        nextButton.addEventListener('click', () => {
            currentImgIndex = (currentImgIndex + 1) % productImgs.length;
            showImg(currentImgIndex);
        });

        // 专家头像鼠标悬停提示（示例）
        const avatars = document.querySelectorAll('.avatar');
        avatars.forEach(avatar => {
            avatar.addEventListener('mouseover', () => {
                const info = avatar.dataset.info;
                alert(info);
            });
        });
    </script>
</body>

</html>