<!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 ：實現分布式事務)