From c8363875d3309c15a9405ec58db3c7040a12026b Mon Sep 17 00:00:00 2001
From: chris <510148846@qq.com>
Date: Wed, 22 Oct 2025 17:06:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9C=9F=E5=A3=A4?=
 =?UTF-8?q?=E5=8F=8A=E6=B0=94=E8=B1=A1=E6=A3=80=E6=B5=8B=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20style:=20=E8=B0=83=E6=95=B4=E4=B8=BB=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue                  | 379 ++++++++++++++++-----
 src/pages/soil/components/lineChart.vue    | 184 ++++++++++
 src/pages/soil/soil.vue                    | 246 ++-----------
 src/pages/weather/components/lineChart.vue | 169 +++++++++
 src/pages/weather/weather.vue              | 269 +++++++++++++++
 5 files changed, 950 insertions(+), 297 deletions(-)
 create mode 100644 src/pages/soil/components/lineChart.vue
 create mode 100644 src/pages/weather/components/lineChart.vue
 create mode 100644 src/pages/weather/weather.vue

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index c677242..9d29293 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,7 +2,7 @@
  * @Author: chris
  * @Date: 2025-09-15 09:51:59
  * @LastEditors: chris
- * @LastEditTime: 2025-10-22 11:12:44
+ * @LastEditTime: 2025-10-22 17:03:42
 -->
 <script setup>
 import bug from '@/static/svg/bug.svg'
@@ -61,7 +61,7 @@ const modules = [
     title: '气象监测',
     icon: tianqiyujing,
     desc: '温度、湿度、光照等数据',
-    route: '/pages/weather/index',
+    route: '/pages/weather/weather',
   },
   {
     id: 'drone',
@@ -97,20 +97,22 @@ function handleModuleClick(module) {
     <view class="home-content">
       <!-- 果园基本信息卡片 -->
       <view class="info-section">
-        <wd-card hoverable :shadow="false" class="basic-card">
+        <wd-card :shadow="false" class="basic-card">
           <!-- 基本信息网格 -->
-          <wd-grid :column="2" :border="false" :gutter="12">
-            <wd-grid-item
+          <wd-row :gutter="12">
+            <wd-col
               v-for="(item, key) in itemDict"
               :key="key"
-              class="info-item-wrapper"
+              :span="12"
             >
-              <view class="info-item">
-                <text class="info-label">{{ item.text }}</text>
-                <text class="info-value">{{ item.value }}</text>
+              <view class="info-item-wrapper">
+                <view class="info-item">
+                  <text class="info-label">{{ item.text }}</text>
+                  <text class="info-value">{{ item.value }}</text>
+                </view>
               </view>
-            </wd-grid-item>
-          </wd-grid>
+            </wd-col>
+          </wd-row>
         </wd-card>
       </view>
 
@@ -119,38 +121,48 @@ function handleModuleClick(module) {
         <text class="section-title">实时监控</text>
 
         <!-- 模块网格 -->
-        <wd-grid :column="2" :border="false" bg-color="transparent" :gutter="15">
-          <wd-grid-item v-for="module in modules" :key="module.id" class="module-item-wrapper" custom-class="module-item">
-            <view
-              class="module-card"
-              @click="handleModuleClick(module)"
-            >
-              <view class="module-icon-container" :class="`module-${module.id}`">
-                <image :src="module.icon" mode="aspectFit" class="module-icon" />
-              </view>
-              <view class="module-info">
-                <text class="module-title">{{ module.title }}</text>
-                <text class="module-desc">{{ module.desc }}</text>
+        <wd-row :gutter="15" class="module-row">
+          <wd-col
+            v-for="module in modules"
+            :key="module.id"
+            :span="12"
+          >
+            <view class="module-item-wrapper">
+              <view
+                class="module-card"
+                @tap="handleModuleClick(module)"
+              >
+                <view class="module-icon-container" :class="`module-${module.id}`">
+                  <image :src="module.icon" mode="aspectFit" class="module-icon" />
+                </view>
+                <view class="module-info">
+                  <text class="module-title">{{ module.title }}</text>
+                  <text class="module-desc">{{ module.desc }}</text>
+                </view>
               </view>
             </view>
-          </wd-grid-item>
-        </wd-grid>
+          </wd-col>
+        </wd-row>
       </view>
     </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
-// 主题颜色变量 - 简化统一的配色
-$primary-color: #165dff; // 专业的蓝色
-$bg-color: #f5f7fa; // 浅灰色背景
+// 主题颜色变量 - 轻科技感配色
+$primary-color: #00c6ff; // 科技蓝
+$primary-color-dark: #0072ff; // 深蓝
+$bg-color: #f0f2f5; // 浅灰色背景
 $card-bg: #ffffff; // 纯白色卡片背景
-$text-primary: #1d2129; // 深色主文本
-$text-secondary: #4e5969; // 次要文本色
-$text-tertiary: #86909c; // 辅助文本色
-$border-radius: 12px; // 适中的圆角
-$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); // 柔和的阴影
-$transition: all 0.3s ease; // 简单的过渡效果
+$card-bg-glass: rgba(255, 255, 255, 0.85); // 玻璃拟态背景
+$text-primary: #0f1419; // 深色主文本
+$text-secondary: #333f51; // 次要文本色
+$text-tertiary: #6e7683; // 辅助文本色
+$border-radius: 16px; // 较大圆角
+$box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); // 柔和的阴影
+$box-shadow-hover: 0 8px 32px rgba(0, 198, 255, 0.15); // 科技蓝阴影
+$transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡效果
+$glow-effect: 0 0 15px rgba(0, 198, 255, 0.3); // 发光效果
 
 // 基础样式
 .home-page {
@@ -160,48 +172,94 @@ $transition: all 0.3s ease; // 简单的过渡效果
 
 // 标题样式
 .home-title {
-  background: linear-gradient(135deg, $primary-color, #4080ff);
-  padding: 24px 0;
+  background: linear-gradient(135deg, $primary-color, $primary-color-dark);
+  padding: 22px 0;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 3px 12px rgba($primary-color, 0.25);
+  box-shadow:
+    0 4px 20px rgba($primary-color, 0.35),
+    $glow-effect;
 
-  // 添加微妙的背景纹理
+  // 添加科技感网格背景
   &::before {
     content: '';
     position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    transform: rotate(30deg);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-position: -1px -1px;
+    z-index: 1;
+  }
+
+  // 发光圆点装饰
+  &::after {
+    content: '';
+    position: absolute;
+    top: 20%;
+    right: 10%;
+    width: 120px;
+    height: 120px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
+    filter: blur(20px);
+    z-index: 0;
+    animation: glowPulse 4s infinite alternate;
   }
 
   .title-container {
     position: relative;
-    z-index: 1;
+    z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
   }
 
   .title-text {
-    font-size: 24px;
-    font-weight: 700;
+    font-size: 28px;
+    font-weight: 600;
     color: $card-bg;
     text-align: center;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.8px;
     position: relative;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    // 添加科技感下划线效果
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
+    }
   }
 
   .title-accent {
-    width: 40px;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 2px;
-    opacity: 0.8;
+    width: 50px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 3px;
+    opacity: 0.9;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+  }
+}
+
+// 发光脉冲动画
+@keyframes glowPulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0.9;
+    transform: scale(1.1);
   }
 }
 
@@ -231,6 +289,21 @@ $transition: all 0.3s ease; // 简单的过渡效果
   border-radius: $border-radius;
   box-shadow: $box-shadow;
   overflow: hidden;
+  background: $card-bg-glass;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  position: relative;
+  padding: 10px !important;
+  // 添加科技感边框
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, $primary-color, $primary-color-dark);
+  }
 }
 
 // 信息项 - 统一样式
@@ -238,33 +311,84 @@ $transition: all 0.3s ease; // 简单的过渡效果
   display: flex;
   flex-direction: column;
   align-items: center;
-  // padding: 16px;
   height: 100%;
-  min-height: 64px;
+  min-height: 80px;
   justify-content: center;
   text-align: center;
+  position: relative;
+  padding: 10px;
+  // 添加微妙的背景装饰
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    opacity: 0.6;
+  }
 
   .info-label {
-    font-size: 13px;
+    font-size: 14px;
     color: $text-tertiary;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    letter-spacing: 0.3px;
+    position: relative;
+    z-index: 1;
   }
 
   .info-value {
-    font-size: 18px;
+    font-size: 20px;
     font-weight: 600;
-    color: $primary-color;
+    color: $primary-color-dark;
+    letter-spacing: 0.5px;
+    position: relative;
+    z-index: 1;
+    // 添加数字科技感效果
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, $primary-color, transparent);
+      opacity: 0.6;
+    }
   }
 }
 
 // 监控模块部分
 .monitor-section {
   .section-title {
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 600;
     color: $text-primary;
     display: block;
     padding-left: 15px;
+    margin-bottom: 16px;
+    position: relative;
+    // 添加科技感标题装饰
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 16px;
+      background: linear-gradient(180deg, $primary-color, $primary-color-dark);
+      border-radius: 2px;
+      box-shadow: 0 0 8px rgba($primary-color, 0.3);
+    }
+  }
+
+  // 模块行容器
+  .module-row {
+    // padding: 0 15px;
   }
 
   // 模块项包装器
@@ -272,19 +396,14 @@ $transition: all 0.3s ease; // 简单的过渡效果
     height: 100%;
   }
 
-  :deep(.module-item) {
-    .wd-grid-item__content {
-      padding: 0;
-    }
-  }
-
   // 模块卡片 - 统一样式
   .module-card {
-    padding: 15px;
-    background-color: $card-bg;
+    padding: 20px 15px;
+    margin: 7.5px 0;
+    background-color: $card-bg-glass;
     border-radius: $border-radius;
     box-shadow: $box-shadow;
-    height: 150px;
+    height: 160px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -293,6 +412,43 @@ $transition: all 0.3s ease; // 简单的过渡效果
     cursor: pointer;
     transition: $transition;
     overflow: hidden;
+    position: relative;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+
+    // 添加科技感边框光效
+    &::before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: $border-radius;
+      padding: 1px;
+      background: linear-gradient(135deg, rgba(0, 198, 255, 0.2), transparent 50%, rgba(0, 198, 255, 0.2));
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    // 右下角装饰
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -20px;
+      right: -20px;
+      width: 60px;
+      height: 60px;
+      background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 70%);
+      border-radius: 50%;
+      opacity: 0.5;
+    }
   }
 
   // 模块图标容器 - 统一样式
@@ -300,55 +456,110 @@ $transition: all 0.3s ease; // 简单的过渡效果
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 10px;
-    width: 56px;
-    height: 56px;
-    border-radius: 8px;
+    margin-bottom: 12px;
+    width: 64px;
+    height: 64px;
+    border-radius: 12px;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+
+    .module-card:hover & {
+      transform: scale(1.05);
+    }
 
     &.module-pest {
-      background-color: rgba(245, 87, 108, 0.08);
+      background: linear-gradient(135deg, rgba(245, 87, 108, 0.12), rgba(245, 87, 108, 0.05));
+      box-shadow: 0 4px 12px rgba(245, 87, 108, 0.1);
     }
 
     &.module-soil {
-      background-color: rgba(82, 196, 26, 0.08);
+      background: linear-gradient(135deg, rgba(82, 196, 26, 0.12), rgba(82, 196, 26, 0.05));
+      box-shadow: 0 4px 12px rgba(82, 196, 26, 0.1);
     }
 
     &.module-weather {
-      background-color: rgba(66, 153, 225, 0.08);
+      background: linear-gradient(135deg, rgba(66, 153, 225, 0.12), rgba(66, 153, 225, 0.05));
+      box-shadow: 0 4px 12px rgba(66, 153, 225, 0.1);
     }
 
     &.module-drone {
-      background-color: rgba(255, 152, 0, 0.08);
+      background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 152, 0, 0.05));
+      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.1);
+    }
+
+    // 科技感光效
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -50%;
+      width: 20%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+      transform: skewX(-20deg);
+      animation: shine 3s infinite linear;
+    }
+  }
+
+  // 图标发光动画
+  @keyframes shine {
+    0% {
+      left: -50%;
+    }
+    100% {
+      left: 150%;
     }
   }
 
   // 模块图标样式
   .module-icon {
-    width: 28px;
-    height: 28px;
+    width: 32px;
+    height: 32px;
+    transition: filter 0.3s ease;
+    .module-card:hover & {
+      filter: brightness(1.1);
+    }
   }
 
   // 模块信息样式
   .module-info {
     width: 100%;
+    position: relative;
+    z-index: 1;
   }
 
   .module-title {
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 600;
     color: $text-primary;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
     display: block;
+    letter-spacing: 0.2px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 
   .module-desc {
-    font-size: 12px;
+    font-size: 13px;
     color: $text-tertiary;
-    line-height: 1.4;
+    line-height: 1.5;
     display: block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    letter-spacing: 0.1px;
+    // 添加科技感文字效果
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 30%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, $primary-color, transparent);
+      opacity: 0.3;
+    }
   }
 }
 </style>
diff --git a/src/pages/soil/components/lineChart.vue b/src/pages/soil/components/lineChart.vue
new file mode 100644
index 0000000..28994bf
--- /dev/null
+++ b/src/pages/soil/components/lineChart.vue
@@ -0,0 +1,184 @@
+<!--
+ * @Author: chris
+ * @Date: 2025-10-22 11:42:40
+ * @LastEditors: chris
+ * @LastEditTime: 2025-10-22 14:59:49
+-->
+<script setup name="line-chart">
+import LEchart from '@/uni_modules/lime-echart_1.0.5/components/l-echart/l-echart.vue'
+
+const props = defineProps({
+  echarts: {
+    type: Object,
+    required: true,
+  },
+  chartData: {
+    type: Object,
+    default: () => ({
+      times: [],
+      values: [],
+      title: '',
+      unit: '',
+      color: '#4dabf7',
+    }),
+  },
+})
+
+const lineChartRef = ref(null)
+let lineChart = null
+
+onMounted(async () => {
+  nextTick(async () => {
+    await initChart()
+  })
+})
+
+onUnmounted(() => {
+  if (lineChart)
+    lineChart.dispose()
+})
+
+async function initChart() {
+  if (!lineChartRef.value || !props.echarts)
+    return
+  lineChart = await lineChartRef.value.init(props.echarts)
+  refreshChart()
+}
+
+function refreshChart() {
+  if (!lineChart) {
+    nextTick(async () => {
+      await initChart()
+    })
+    return
+  }
+  lineChart.showLoading()
+  lineChart.setOption(createOptions())
+  lineChart.hideLoading()
+}
+
+function createOptions() {
+  const gradient = new props.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: `${props.chartData.color}80` }, // 80是透明度
+    { offset: 1, color: `${props.chartData.color}20` }, // 20是透明度
+  ])
+
+  const option = {
+    title: {
+      text: props.chartData.title,
+      top: '2%',
+      textStyle: {
+        color: '#333',
+        fontSize: 16,
+        fontWeight: 'bold',
+      },
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      borderColor: '#333',
+      textStyle: {
+        color: '#fff',
+      },
+      formatter: (params) => {
+        const data = params[0]
+        return `${data.axisValue}： ${data.value} ${props.chartData.unit}`
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '3%',
+      bottom: '15%', // 增加底部空间以适应旋转的标签
+      top: '20%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: props.chartData.times,
+      axisLine: {
+        lineStyle: {
+          color: '#464646',
+        },
+      },
+      axisLabel: {
+        color: '#666',
+        rotate: 45,
+        fontSize: 10,
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: props.chartData.unit,
+        nameTextStyle: {
+          color: '#666',
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#464646',
+          },
+        },
+        axisLabel: {
+          color: '#666',
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: props.chartData.title,
+        type: 'line',
+        data: props.chartData.values,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color: props.chartData.color,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          color: gradient,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+      },
+    ],
+  }
+
+  return option
+}
+
+// 监听数据变化，更新图表
+watch(() => props.chartData, () => {
+  refreshChart()
+}, { deep: true })
+</script>
+
+<template>
+  <view class="line-chart">
+    <l-echart id="soilLineChart" ref="lineChartRef" type="2d" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.line-chart {
+  width: 100%;
+  height: 300px;
+}
+</style>
diff --git a/src/pages/soil/soil.vue b/src/pages/soil/soil.vue
index c4f9e61..0f439fe 100644
--- a/src/pages/soil/soil.vue
+++ b/src/pages/soil/soil.vue
@@ -2,9 +2,14 @@
  * @Author: chris
  * @Date: 2025-10-22 10:46:12
  * @LastEditors: chris
- * @LastEditTime: 2025-10-22 11:24:24
+ * @LastEditTime: 2025-10-22 15:29:18
 -->
 <script setup lang="ts">
+// 导入组件和库
+const echarts = require('../../uni_modules/lime-echart_1.0.5/static/echarts.min2.js')
+
+import LineChart from './components/lineChart.vue'
+
 // 定义页面标题
 definePage({
   navigationBarTitleText: '土壤检测',
@@ -121,8 +126,14 @@ function generateTimeSeriesData(indicatorId: string): TimeSeriesData[] {
 // 时间序列数据
 const timeSeriesData = ref<TimeSeriesData[]>([])
 
-// 图表配置
-const chartOption = ref<any>({})
+// 图表数据
+const chartData = ref({
+  times: [],
+  values: [],
+  title: '',
+  unit: '',
+  color: '#4dabf7',
+})
 
 // 切换选中的指标
 function handleIndicatorClick(indicatorId: string) {
@@ -130,7 +141,7 @@ function handleIndicatorClick(indicatorId: string) {
   updateChart()
 };
 
-// 更新图表
+// 更新图表数据
 function updateChart() {
   const currentIndicator = soilIndicators.find(ind => ind.id === selectedIndicator.value)
   if (!currentIndicator)
@@ -138,77 +149,12 @@ function updateChart() {
 
   timeSeriesData.value = generateTimeSeriesData(selectedIndicator.value)
 
-  chartOption.value = {
-    title: {
-      text: `${currentIndicator.name} 24小时变化趋势`,
-      left: 'center',
-      textStyle: {
-        fontSize: 16,
-        fontWeight: 'normal',
-      },
-    },
-    tooltip: {
-      trigger: 'axis',
-      formatter: (params: any) => {
-        const data = params[0]
-        return `${data.axisValue}<br/>${currentIndicator.name}: ${data.value} ${currentIndicator.unit}`
-      },
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '10%',
-      top: '20%',
-      containLabel: true,
-    },
-    xAxis: {
-      type: 'category',
-      data: timeSeriesData.value.map(item => item.time),
-      axisLabel: {
-        rotate: 45,
-        fontSize: 10,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      name: currentIndicator.unit,
-      nameLocation: 'middle',
-      nameGap: 30,
-    },
-    series: [
-      {
-        data: timeSeriesData.value.map(item => item.value),
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        itemStyle: {
-          color: currentIndicator.color,
-        },
-        lineStyle: {
-          width: 2,
-        },
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: `${currentIndicator.color}80`, // 80是透明度
-              },
-              {
-                offset: 1,
-                color: `${currentIndicator.color}20`, // 20是透明度
-              },
-            ],
-          },
-        },
-      },
-    ],
+  chartData.value = {
+    times: timeSeriesData.value.map(item => item.time),
+    values: timeSeriesData.value.map(item => item.value),
+    title: `${currentIndicator.name} 24小时变化趋势`,
+    unit: currentIndicator.unit,
+    color: currentIndicator.color,
   }
 };
 
@@ -250,63 +196,34 @@ onMounted(() => {
 
     <!-- 曲线图区域 -->
     <view class="chart-container">
-      <lime-echart
-        class="soil-chart"
-        :option="chartOption"
-        :canvas-id="`soil-chart-${selectedIndicator}`"
-        :lazy-load="true"
-      />
+      <line-chart id="soilChart" :echarts="echarts" :chart-data="chartData" />
     </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
 .soil-monitor-page {
-  padding: 20rpx;
-  background-color: #f8f8f8;
-  min-height: 100vh;
+  @apply p-20rpx bg-[#f8f8f8] min-h-100vh;
 }
 
 .page-header {
-  text-align: center;
-  margin-bottom: 30rpx;
+  @apply text-center mb-30rpx;
 }
 
 .header-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
+  @apply text-36rpx font-bold text-[#333];
 }
 
 .header-subtitle {
-  font-size: 24rpx;
-  color: #666;
-  display: block;
-  margin-top: 10rpx;
+  @apply text-24rpx text-[#666] mt-10rpx block;
 }
 
 .indicators-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
-  gap: 20rpx;
-  margin-bottom: 30rpx;
-  justify-content: center;
+  @apply grid grid-cols-[repeat(auto-fit,minmax(300rpx,1fr))] gap-20rpx justify-center mb-30rpx;
 }
 
 .indicator-card {
-  background-color: #fff;
-  padding: 16rpx 20rpx;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-  border-left: 8rpx solid #e0e0e0;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  min-width: 280rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 120rpx;
-  height: auto;
+  @apply bg-white px-20rpx py-16rpx rounded-16rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] border-l-[#e0e0e0] border-l-8rpx border-l-solid min-w-[280rpx] min-h-[120rpx] h-auto cursor-pointer transition-all duration-300 ease-in-out flex justify-center flex-col min-h-[120rpx];
 }
 
 .indicator-card.active {
@@ -315,119 +232,22 @@ onMounted(() => {
 }
 
 .indicator-name {
-  font-size: 26rpx;
-  color: #666;
-  margin-bottom: 4rpx;
+  @apply text-26rpx color-[#666] mb-4rpx;
 }
 
 .indicator-value {
-  font-size: 34rpx;
-  font-weight: bold;
-  margin-bottom: 2rpx;
+  @apply text-34rpx font-bold mb-2rpx;
 }
 
 .indicator-unit {
-  font-size: 22rpx;
-  font-weight: normal;
-  margin-left: 4rpx;
+  @apply text-22rpx ml-4rpx;
 }
 
 .indicator-description {
-  font-size: 18rpx;
-  color: #999;
-  margin-top: 4rpx;
+  @apply text-18rpx color-[#999] mt-4rpx;
 }
 
 .chart-container {
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 20rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-  height: 600rpx;
-}
-
-.soil-chart {
-  width: 100%;
-  height: 100%;
-}
-
-// 响应式调整
-@media screen and (min-width: 768px) {
-  .indicators-grid {
-    grid-template-columns: repeat(3, 1fr);
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  // 处理7个项目的特殊排列 - 使用auto-fit代替固定列数，让第7个卡片居中
-  .indicators-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280rpx, 1fr));
-    gap: 24rpx;
-    justify-items: center;
-  }
-
-  // 对于平板，确保7个项目有更好的分布
-  .indicators-grid {
-    --auto-grid-min-size: 280rpx;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
-    grid-gap: 24rpx;
-    justify-content: center;
-  }
-
-  // 确保每个卡片都有相同的最小宽度
-  .indicator-card {
-    min-width: 280rpx;
-    width: 100%;
-    max-width: 320rpx;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .indicators-grid {
-    max-width: 1200px;
-    --auto-grid-min-size: 260rpx;
-  }
-
-  // 对于桌面端，7个卡片可以采用更均匀的分布
-  .indicators-grid {
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: auto auto;
-  }
-
-  // 重新排列第5-7个卡片，使布局更平衡
-  .indicators-grid > .indicator-card:nth-child(5) {
-    grid-column: 1;
-    grid-row: 2;
-  }
-  .indicators-grid > .indicator-card:nth-child(6) {
-    grid-column: 2;
-    grid-row: 2;
-  }
-  .indicators-grid > .indicator-card:nth-child(7) {
-    grid-column: 3;
-    grid-row: 2;
-    grid-column-end: 5; /* 让第7个卡片占据更宽的空间，平衡布局 */
-    max-width: none;
-  }
-
-  // 调整第7个卡片的内部布局，使其内容居中显示
-  .indicators-grid > .indicator-card:nth-child(7) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    text-align: center;
-  }
-
-  .indicators-grid > .indicator-card:nth-child(7) .indicator-info {
-    grid-column: 1 / -1;
-  }
-
-  .indicators-grid > .indicator-card:nth-child(7) .indicator-value-container {
-    grid-column: 1 / -1;
-    margin: 10rpx 0;
-  }
+  @apply bg-[#fff] rounded-16rpx p-20rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] mt-20rpx;
 }
 </style>
diff --git a/src/pages/weather/components/lineChart.vue b/src/pages/weather/components/lineChart.vue
new file mode 100644
index 0000000..b256408
--- /dev/null
+++ b/src/pages/weather/components/lineChart.vue
@@ -0,0 +1,169 @@
+<template>
+  <l-echart
+    ref="chartRef"
+    type="2d"
+    class="line-chart"
+  />
+</template>
+
+<script setup lang="ts">
+interface TimeSeriesData {
+  time: string
+  value: number
+}
+
+interface ChartData {
+  title: string
+  unit: string
+  color: string
+  data: TimeSeriesData[]
+}
+
+const props = defineProps<{
+  echarts: any
+  chartData: ChartData
+}>()
+
+const emit = defineEmits(['init'])
+
+const chartRef = ref<any>(null)
+let chart: any = null
+const chartOption = ref<any>({})
+
+// 初始化图表
+async function initChart() {
+  await nextTick()
+  if (!chartRef.value || !props.chartData.data.length)
+    return
+
+  try {
+    chart = await chartRef.value.init(props.echarts)
+    createOptions()
+    refreshChart()
+    emit('init', chart)
+  }
+  catch (error) {
+    console.error('Chart initialization error:', error)
+  }
+}
+
+// 刷新图表
+function refreshChart() {
+  if (!chart)
+    return
+  chart.setOption(chartOption.value, true)
+}
+
+// 创建图表配置
+function createOptions() {
+  const { title, unit, color, data } = props.chartData
+
+  chartOption.value = {
+    title: {
+      text: title,
+      left: 'center',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 'normal',
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const param = params[0]
+        return `${param.axisValue}： ${param.value} ${unit}`
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '3%',
+      bottom: '3%',
+      top: '20%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: data.map(item => item.time),
+      axisLabel: {
+        rotate: 45,
+        fontSize: 10,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: unit,
+      nameGap: 15,
+    },
+    series: [
+      {
+        data: data.map(item => item.value),
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: `${color}80`, // 80是透明度
+              },
+              {
+                offset: 1,
+                color: `${color}20`, // 20是透明度
+              },
+            ],
+          },
+        },
+      },
+    ],
+  }
+}
+
+// 监听数据变化
+watch(() => props.chartData, () => {
+  if (chart) {
+    createOptions()
+    refreshChart()
+  }
+  else {
+    initChart()
+  }
+}, { deep: true })
+
+// 组件挂载
+onMounted(() => {
+  initChart()
+})
+
+// 组件卸载
+onUnmounted(() => {
+  if (chart) {
+    chart.dispose()
+    chart = null
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  initChart,
+  refreshChart,
+})
+</script>
+
+<style lang="scss" scoped>
+.line-chart {
+  @apply w-full h-[300px];
+}
+</style>
diff --git a/src/pages/weather/weather.vue b/src/pages/weather/weather.vue
new file mode 100644
index 0000000..58305d1
--- /dev/null
+++ b/src/pages/weather/weather.vue
@@ -0,0 +1,269 @@
+<!--
+ * @Author: chris
+ * @Date: 2025-10-22 16:00:00
+ * @LastEditors: chris
+ * @LastEditTime: 2025-10-22 16:00:00
+-->
+<script setup lang="ts">
+const echarts = require('../../uni_modules/lime-echart_1.0.5/static/echarts.min2.js')
+
+import LineChart from './components/lineChart.vue'
+
+// 定义页面标题
+definePage({
+  navigationBarTitleText: '气象监测',
+})
+
+// 气象指标类型定义
+interface WeatherIndicator {
+  id: string
+  name: string
+  value: number
+  unit: string
+  color: string
+  description: string
+}
+
+// 时间序列数据类型
+interface TimeSeriesData {
+  time: string
+  value: number
+}
+
+// 模拟的气象指标数据
+const weatherIndicators: WeatherIndicator[] = [
+  { id: 'temperature', name: '温度', value: 28.5, unit: '°C', color: '#FF6B6B', description: '空气温度' },
+  { id: 'light', name: '光照', value: 850, unit: 'lux', color: '#FFD93D', description: '光照强度' },
+  { id: 'windSpeed', name: '风速', value: 3.2, unit: 'm/s', color: '#4ECDC4', description: '平均风速' },
+  { id: 'windDirection', name: '风向', value: 135, unit: '°', color: '#45B7D1', description: '风向角度' },
+  { id: 'rainfall', name: '降雨量', value: 0, unit: 'mm', color: '#6C5CE7', description: '累计降雨量' },
+]
+
+// 当前选中的指标
+const selectedIndicator = ref<string>('temperature')
+
+// 生成模拟的24小时时间序列数据
+function generateTimeSeriesData(indicatorId: string): TimeSeriesData[] {
+  const data: TimeSeriesData[] = []
+  const now = new Date()
+
+  // 根据不同指标设置不同的波动范围
+  let baseValue = 0
+  let min = 0
+  let max = 0
+
+  switch (indicatorId) {
+    case 'temperature':
+      baseValue = 28
+      min = 18
+      max = 35
+      break
+    case 'light':
+      baseValue = 800
+      min = 0
+      max = 1200
+      break
+    case 'windSpeed':
+      baseValue = 3.0
+      min = 0
+      max = 8.0
+      break
+    case 'windDirection':
+      baseValue = 135
+      min = 0
+      max = 360
+      break
+    case 'rainfall':
+      baseValue = 0
+      min = 0
+      max = 20
+      break
+  }
+
+  // 生成24小时的数据
+  for (let i = 23; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 60 * 60 * 1000)
+    const hour = time.getHours()
+    // 添加一些时间相关的波动
+    let timeFactor = 0
+
+    // 温度和光照有明显的昼夜变化
+    if (indicatorId === 'temperature') {
+      timeFactor = Math.sin(((hour - 6) / 24) * Math.PI * 2) * 0.3
+    }
+    else if (indicatorId === 'light') {
+      // 白天光照强，晚上光照弱
+      if (hour >= 6 && hour <= 18) {
+        timeFactor = Math.sin(((hour - 6) / 12) * Math.PI) * 0.8
+      }
+      else {
+        timeFactor = -0.9
+      }
+    }
+    else if (indicatorId === 'windDirection') {
+      // 风向变化更复杂，用随机波动
+      timeFactor = (Math.random() - 0.5) * 0.5
+    }
+    else if (indicatorId === 'rainfall') {
+      // 降雨是随机事件
+      timeFactor = Math.random() > 0.8 ? Math.random() * 0.5 : -0.1
+    }
+    else {
+      timeFactor = (Math.random() - 0.5) * 0.2
+    }
+
+    // 添加随机波动
+    const randomFactor = (Math.random() - 0.5) * 0.2
+    let value = baseValue * (1 + timeFactor + randomFactor)
+
+    // 确保值在合理范围内
+    value = Math.max(min, Math.min(max, value))
+
+    // 根据指标类型格式化值
+    if (indicatorId === 'temperature' || indicatorId === 'windSpeed') {
+      value = Number.parseFloat(value.toFixed(1))
+    }
+    else if (indicatorId === 'windDirection') {
+      value = Math.round(value)
+    }
+    else if (indicatorId === 'light') {
+      value = Math.round(value)
+    }
+    else {
+      value = Number.parseFloat(value.toFixed(1))
+    }
+
+    data.push({
+      time: `${hour.toString().padStart(2, '0')}:00`,
+      value,
+    })
+  }
+
+  return data
+};
+
+// 时间序列数据
+const timeSeriesData = ref<TimeSeriesData[]>([])
+
+// 图表数据
+const chartData = ref<any>({})
+
+// 切换选中的指标
+function handleIndicatorClick(indicatorId: string) {
+  selectedIndicator.value = indicatorId
+  updateChart()
+}
+
+// 更新图表
+function updateChart() {
+  const currentIndicator = weatherIndicators.find(ind => ind.id === selectedIndicator.value)
+  if (!currentIndicator)
+    return
+
+  timeSeriesData.value = generateTimeSeriesData(selectedIndicator.value)
+
+  chartData.value = {
+    title: `${currentIndicator.name} 24小时变化趋势`,
+    unit: currentIndicator.unit,
+    color: currentIndicator.color,
+    data: timeSeriesData.value,
+  }
+}
+
+// 页面加载时初始化数据
+onMounted(() => {
+  updateChart()
+})
+</script>
+
+<template>
+  <view class="weather-monitor-page">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <text class="header-title">气象监测数据</text>
+      <text class="header-subtitle">实时监测环境气象指标</text>
+    </view>
+
+    <!-- 气象指标卡片网格 -->
+    <view class="indicators-grid">
+      <view
+        v-for="indicator in weatherIndicators"
+        :key="indicator.id"
+        class="indicator-card"
+        :class="{ active: selectedIndicator === indicator.id }"
+        :style="{ borderColor: indicator.color }"
+        @click="handleIndicatorClick(indicator.id)"
+      >
+        <view class="indicator-name">
+          {{ indicator.name }}
+        </view>
+        <view class="indicator-value" :style="{ color: indicator.color }">
+          {{ indicator.value }}<span class="indicator-unit">{{ indicator.unit }}</span>
+        </view>
+        <view class="indicator-description">
+          {{ indicator.description }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 曲线图区域 -->
+    <view class="chart-container">
+      <line-chart
+        :echarts="echarts"
+        :chart-data="chartData"
+        :canvas-id="`weather-chart-${selectedIndicator}`"
+      />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.weather-monitor-page {
+  @apply p-20rpx bg-[#f8f8f8] min-h-100vh;
+}
+
+.page-header {
+  @apply text-center mb-30rpx;
+}
+
+.header-title {
+  @apply text-36rpx font-bold text-[#333];
+}
+
+.header-subtitle {
+  @apply text-24rpx text-[#666] mt-10rpx block;
+}
+
+.indicators-grid {
+  @apply grid grid-cols-[repeat(auto-fit,minmax(300rpx,1fr))] gap-20rpx justify-center mb-30rpx;
+}
+
+.indicator-card {
+  @apply bg-white px-20rpx py-16rpx rounded-16rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] border-l-[#e0e0e0] border-l-8rpx border-l-solid min-w-[280rpx] min-h-[120rpx] h-auto cursor-pointer transition-all duration-300 ease-in-out flex justify-center flex-col;
+}
+
+.indicator-card.active {
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  transform: translateY(-2rpx);
+}
+
+.indicator-name {
+  @apply text-26rpx color-[#666] mb-4rpx;
+}
+
+.indicator-value {
+  @apply text-34rpx font-bold mb-2rpx;
+}
+
+.indicator-unit {
+  @apply text-22rpx ml-4rpx;
+}
+
+.indicator-description {
+  @apply text-18rpx color-[#999] mt-4rpx;
+}
+
+.chart-container {
+  @apply bg-[#fff] rounded-16rpx p-20rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] mt-20rpx;
+}
+</style>