峰来农产品供应链信息化管理系统 - 农业物联网管理功能 - 常规

<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>农业物联网管理</title>
  <link href='./tailwind.css' rel='stylesheet'>
</head>
<body class='bg-gray-200'>
  <div class='container mx-auto p-4'>
    <h1 class='text-2xl font-bold mb-4'>农业物联网管理</h1>
<pre><code>&lt;div class='flex justify-center items-center'&gt;
  &lt;img src='./farm.jpg' alt='农田图像' class='w-1/2 rounded-lg shadow-md'&gt;
&lt;/div&gt;

&lt;div class='mt-8'&gt;
  &lt;h2 class='text-xl font-bold mb-4'&gt;传感器数据&lt;/h2&gt;
  &lt;div class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'&gt;
    &lt;div class='bg-white rounded-lg p-4 shadow-md'&gt;
      &lt;h3 class='text-lg font-bold mb-2'&gt;温度&lt;/h3&gt;
      &lt;p class='text-gray-700'&gt;25°C&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='bg-white rounded-lg p-4 shadow-md'&gt;
      &lt;h3 class='text-lg font-bold mb-2'&gt;湿度&lt;/h3&gt;
      &lt;p class='text-gray-700'&gt;60%&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='bg-white rounded-lg p-4 shadow-md'&gt;
      &lt;h3 class='text-lg font-bold mb-2'&gt;土壤湿度&lt;/h3&gt;
      &lt;p class='text-gray-700'&gt;40%&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='bg-white rounded-lg p-4 shadow-md'&gt;
      &lt;h3 class='text-lg font-bold mb-2'&gt;光照强度&lt;/h3&gt;
      &lt;p class='text-gray-700'&gt;800 lx&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class='mt-8'&gt;
  &lt;h2 class='text-xl font-bold mb-4'&gt;控制设备&lt;/h2&gt;
  &lt;div class='flex justify-center'&gt;
    &lt;button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'&gt;
      打开水泵
    &lt;/button&gt;
    &lt;button class='bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-4'&gt;
      关闭水泵
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
  </div>
</body>
</html>