pest_uni/src/pages/index/index.vue

<!--
 * @Author: chris
 * @Date: 2025-09-15 09:51:59
 * @LastEditors: chris
 * @LastEditTime: 2025-10-22 11:12:44
-->
<script setup>
import bug from '@/static/svg/bug.svg'
import jiankongyun from '@/static/svg/jiankongyun.svg'
import tianqiyujing from '@/static/svg/tianqiyujing.svg'
import turangshuishi from '@/static/svg/turangshuishi.svg'

definePage({
  style: {
    navigationBarTitleText: '主页',
  },
})

// 果园基本信息
const itemDict = {
  plantingArea: {
    svg: 'nongshi',
    text: '种植面积（亩）',
    value: 250,
  },
  terrain: {
    svg: 'dixing',
    text: '地形',
    value: '丘陵山地',
  },
  variety: {
    svg: 'dapengzhongmiaoguanli',
    text: '主要品种',
    value: '桂味',
  },
  plantingNum: {
    svg: 'shuguo',
    text: '种植荔枝（棵）',
    value: 8500,
  },
}

// 监控模块数据
const modules = [
  {
    id: 'pest',
    title: '虫情监控',
    icon: bug,
    desc: '实时监测果园病虫害情况',
    route: '/pages/pest/pest',
  },
  {
    id: 'soil',
    title: '土壤墒情',
    icon: turangshuishi,
    desc: '监测土壤湿度、养分等数据',
    route: '/pages/soil/soil',
  },
  {
    id: 'weather',
    title: '气象监测',
    icon: tianqiyujing,
    desc: '温度、湿度、光照等数据',
    route: '/pages/weather/index',
  },
  {
    id: 'drone',
    title: '无人机巡查',
    icon: jiankongyun,
    desc: '无人机航拍及数据分析',
    route: '/pages/drone/index',
  },
]

// 处理模块点击事件
function handleModuleClick(module) {
  // 在实际项目中，这里应该进行路由跳转
  console.log('跳转到:', module.route)
  // 由于页面可能不存在，先注释掉跳转
  uni.navigateTo({
    url: module.route,
  })
}
</script>

<template>
  <view class="home-page">
    <!-- 页面标题 -->
    <view class="home-title">
      <view class="title-container">
        <text class="title-text">荔枝园监控系统</text>
        <view class="title-accent" />
      </view>
    </view>

    <!-- 首页内容区域 -->
    <view class="home-content">
      <!-- 果园基本信息卡片 -->
      <view class="info-section">
        <wd-card hoverable :shadow="false" class="basic-card">
          <!-- 基本信息网格 -->
          <wd-grid :column="2" :border="false" :gutter="12">
            <wd-grid-item
              v-for="(item, key) in itemDict"
              :key="key"
              class="info-item-wrapper"
            >
              <view class="info-item">
                <text class="info-label">{{ item.text }}</text>
                <text class="info-value">{{ item.value }}</text>
              </view>
            </wd-grid-item>
          </wd-grid>
        </wd-card>
      </view>

      <!-- 监控模块区域 -->
      <view class="monitor-section">
        <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>
              </view>
            </view>
          </wd-grid-item>
        </wd-grid>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 主题颜色变量 - 简化统一的配色
$primary-color: #165dff; // 专业的蓝色
$bg-color: #f5f7fa; // 浅灰色背景
$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; // 简单的过渡效果

// 基础样式
.home-page {
  min-height: 100%;
  background-color: $bg-color;
}

// 标题样式
.home-title {
  background: linear-gradient(135deg, $primary-color, #4080ff);
  padding: 24px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba($primary-color, 0.25);

  // 添加微妙的背景纹理
  &::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);
  }

  .title-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .title-text {
    font-size: 24px;
    font-weight: 700;
    color: $card-bg;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
  }

  .title-accent {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    opacity: 0.8;
  }
}

// 内容区域
.home-content {
  padding-top: 15px;
  padding-bottom: 15px;
}

// .info-section,
// .monitor-section {
//   margin: 0 -15px;
// }

// 果园信息部分
.info-section {
  margin-bottom: 24px;
}

// 信息项包装器
.info-item-wrapper {
  height: 100%;
}

// 基本信息卡片样式
.basic-card {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  overflow: hidden;
}

// 信息项 - 统一样式
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding: 16px;
  height: 100%;
  min-height: 64px;
  justify-content: center;
  text-align: center;

  .info-label {
    font-size: 13px;
    color: $text-tertiary;
    margin-bottom: 6px;
  }

  .info-value {
    font-size: 18px;
    font-weight: 600;
    color: $primary-color;
  }
}

// 监控模块部分
.monitor-section {
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    display: block;
    padding-left: 15px;
  }

  // 模块项包装器
  .module-item-wrapper {
    height: 100%;
  }

  :deep(.module-item) {
    .wd-grid-item__content {
      padding: 0;
    }
  }

  // 模块卡片 - 统一样式
  .module-card {
    padding: 15px;
    background-color: $card-bg;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: $transition;
    overflow: hidden;
  }

  // 模块图标容器 - 统一样式
  .module-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    width: 56px;
    height: 56px;
    border-radius: 8px;

    &.module-pest {
      background-color: rgba(245, 87, 108, 0.08);
    }

    &.module-soil {
      background-color: rgba(82, 196, 26, 0.08);
    }

    &.module-weather {
      background-color: rgba(66, 153, 225, 0.08);
    }

    &.module-drone {
      background-color: rgba(255, 152, 0, 0.08);
    }
  }

  // 模块图标样式
  .module-icon {
    width: 28px;
    height: 28px;
  }

  // 模块信息样式
  .module-info {
    width: 100%;
  }

  .module-title {
    font-size: 15px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 4px;
    display: block;
  }

  .module-desc {
    font-size: 12px;
    color: $text-tertiary;
    line-height: 1.4;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>