<!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>
结合DTM ：实现分布式事务)