pest_uni/src/pages/index/components/monitor.vue

<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'

// 监控模块数据
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/weather',
  },
  {
    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="monitor-section">
    <!-- 模块网格 -->
    <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-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
@import '../variables.scss';

// 监控模块部分
.monitor-section {
  margin-bottom: 10px;
  // 模块行容器
  .module-row {
    // padding: 0 15px;
  }

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

  // 模块卡片 - 统一样式
  .module-card {
    padding: 20px 15px;
    margin: 7.5px 0;
    background-color: $card-bg-glass;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    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;
    }
  }

  // 模块图标容器 - 统一样式
  .module-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    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: 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: 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: 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: 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: 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: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .module-desc {
    font-size: 13px;
    color: $text-tertiary;
    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>