nongxiaoyu/pages/dashboard/index.vue

<template>
  <view class="dashboard-container">
    <!-- 顶部 TopBar -->
    <view class="top-bar">
      <text class="greeting">农事有序，心里有数</text>
      <text class="top-sub-guide">从今天的田间环境开始</text>
    </view>

    <!-- 田间环境/天气区域 (降级为扁平状态块) -->
    <view class="environmental-status-block" @click="fetchWeatherData">
      <view class="status-main">
        <view class="main-info">
          <text :class="weatherData.infos.weather == '' ? 'main-textN' : 'main-text' "> {{
  weatherData.infos.weather == ''
    ? '请点击获取环境数据'
    : `${weatherData.infos.temperature}° · ${weatherData.infos.weather}`
}}</text>
          <text class="fixed-subtitle">田间环境概览</text>
        </view>
        <view class="refresh-btn" :class="{ 'rotating': isLoadingWeather }" @click.stop="handleRefresh">
          <!-- <u-icon name="reload" :color="isLoadingWeather ? '#999' : '#3BB44A'" size="20"></u-icon> -->
		  <!-- <uni-icons type="reload" color='#3BB44A'  size="20"></uni-icons> -->
			<image src="/static/icons/reload.png" style="width:20px;height:20px;"></image>
        </view>
      </view>

      <view class="metrics-row">
        <view class="metric-item">
          <text class="label">湿度</text>
          <text class="value">{{ weatherData.infos.humidity }}%</text>
        </view>
        <view class="metric-item">
          <text class="label">风力</text>
          <text class="value">{{ weatherData.infos.wind_power_v2 }}</text>
        </view>
        <view class="metric-item">
          <text class="label">气压</text>
          <text class="value">{{ weatherData.infos.air_pressure }} hPa</text>
        </view>
      </view>
      
      <view class="update-time" v-if="weatherData.update_time">
        <text>更新时间：{{ weatherData.update_time }}</text>
      </view>
    </view>

    <!-- AI 主卡 -->
    <view class="card ai-card">
      <view class="ai-header">
        <view class="ai-pill">AI 农小禹</view>
        <text class="ai-subtitle">今天安排从这里开始</text>
      </view>
      <view class="ai-body">
        <text class="ai-title">{{ aiQuestion.title }}</text>
        <text class="ai-desc">问问 AI 农小禹，给你具体建议</text>
      </view>
      <view class="ai-footer">
        <view class="ai-cta">
          <u-button 
            type="primary" 
            color="#2F7D32"
            shape="round"
            :custom-style="{
              height: '60rpx',
              width: 'auto',
              minWidth: '200rpx',
              borderRadius: '30rpx',
              padding: '0 32rpx',
              fontSize: '28rpx',
              fontWeight: '600',
              margin: '0'
            }"
            @click="goToAI"
          >
            立即提问
            <u-icon name="arrow-right" color="white" size="16" style="margin-left: 8rpx;"></u-icon>
          </u-button>
        </view>
      </view>
      <!-- 玻璃感噪点纹理 -->
      <view class="ai-texture"></view>
    </view>

    <!-- 农资精选 -->
    <view class="card">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农资精选</text>
        </view>
        <view class="more-btn" @click="goToMall">
          <text>去农资</text>
          <u-icon name="arrow-right" color="#3BB44A" size="14"></u-icon>
        </view>
      </view>
      <view class="products-grid">
        <view 
          class="product-card" 
          v-for="(product, index) in products" 
          :key="index"
          @click="showProductDetail(product)"
        >
          <image 
            :src="product.image" 
            mode="aspectFill" 
            class="product-image"
            lazy-load
          ></image>
          <view class="product-info">
            <text class="product-title">{{ product.title }}</text>
            <text class="product-desc">{{ product.desc }}</text>
            <view class="price-row">
              <text class="price">¥{{ product.price }}</text>
              <text class="unit">/{{ product.unit }}</text>
            </view>
            <u-button 
              type="primary" 
              color="linear-gradient(135deg, #3BB44A, #66CC6A)"
              size="mini"
              shape="round"
            >
              了解更多
            </u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 农技推荐 -->
    <view class="card">
      <view class="card-header">
        <view class="title-section">
          <view class="title-line"></view>
          <text class="card-title">农技推荐</text>
        </view>
        <view class="more-btn" @click="goToKnowledge">
          <text>更多</text>
          <u-icon name="arrow-right" color="#3BB44A" size="14"></u-icon>
        </view>
      </view>
      <view class="articles-list">
        <view 
          class="article-card" 
          v-for="(article, index) in articles" 
          :key="index"
          @click="showArticleDetail(article)"
        >
          <view class="article-image-wrapper">
            <image 
              :src="article.image" 
              mode="aspectFill" 
              class="article-image"
              lazy-load
            ></image>
            <view class="article-tag">文章</view>
          </view>
          <view class="article-info">
            <text class="article-title">{{ article.title }}</text>
            <text class="article-source">{{ article.source }}</text>
            <view class="article-stats">
              <u-icon name="eye" color="#999" size="12"></u-icon>
              <text class="read-count">{{ article.readCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 位置权限使用说明弹窗 -->
	<!-- #ifndef MP-WEIXIN  -->
    <u-popup 
	ref="popup"
      :show="showLocationPermissionPopup" 
      mode="top" 
      round="20"
      :closeOnClickOverlay="false"
      :closeable="false"
      :safeAreaInsetTop="true"
	   @change="showChange"
    >
      <view class="location-permission-popup">
        <view class="permission-header">
          <view class="permission-icon">
            <u-icon name="map" color="#666" size="20"></u-icon>
          </view>
          <view class="permission-title">位置权限使用说明</view>
        </view>
        <view class="permission-content">
          为了向您展示当前所在地的天气信息，我们需要获取您的位置信息，用于查询并展示您当前位置的实时天气情况。
        </view>
      </view>
    </u-popup>
<!-- #endif -->
    <!-- 天气详情弹窗 -->
<!--    <u-popup 
      :show="showWeatherPopup" 
      mode="bottom" 
      round="20"
      @close="showWeatherPopup = false"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">今日农事详情</text>
          <u-icon name="close" color="#999" size="20" @click="showWeatherPopup = false"></u-icon>
        </view>
        <view class="weather-detail">
          <view class="detail-item">
            <text class="detail-label">天气状况</text>
            <text class="detail-value">{{ weatherData.weatherText }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">当前温度</text>
            <text class="detail-value">{{ weatherData.tempNow }}°C</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">湿度</text>
            <text class="detail-value">{{ weatherData.humidity }}%</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">风力</text>
            <text class="detail-value">{{ weatherData.windScale }}级</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">降水量</text>
            <text class="detail-value">{{ weatherData.precipMm }}mm</text>
          </view>
          <view class="advice-detail">
            <text class="advice-label">今日建议：</text>
            <text class="advice-content">{{ weatherData.adviceText }}</text>
          </view>
        </view>
        <u-button 
          type="primary" 
          color="linear-gradient(135deg, #3BB44A, #66CC6A)"
          shape="round"
          @click="askAIAboutWeather"
        >
          去问 AI
        </u-button>
      </view>
    </u-popup> -->
    <!-- 文章详情弹窗 -->
    <!-- <u-popup 
      :show="showArticlePopup" 
      mode="bottom" 
      round="20"
      @close="showArticlePopup = false"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">文章详情</text>
          <u-icon name="close" color="#999" size="20" @click="showArticlePopup = false"></u-icon>
        </view>
        <view class="article-detail" v-if="currentArticle">
          <text class="article-detail-title">{{ currentArticle.title }}</text>
          <text class="article-detail-time">{{ currentArticle.time }}</text>
          <view class="article-detail-content">
            <text class="content-paragraph">{{ currentArticle.content }}</text>
            <text class="content-subtitle">主要要点：</text>
            <view class="content-list">
              <text class="list-item" v-for="(item, index) in currentArticle.points" :key="index">
                • {{ item }}
              </text>
            </view>
          </view>
        </view>
        <u-button 
          type="primary" 
          color="linear-gradient(135deg, #3BB44A, #66CC6A)"
          shape="round"
          @click="askAIAboutArticle"
        >
          去问 AI
        </u-button>
      </view>
    </u-popup> -->
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getWeatherInfo, getLocation } from '@/api/services/weather.js'
import { getMallList } from '@/api/services/mall.js'
import { getTopArticles } from '@/api/services/knowledge.js'
import privacyUtil from '@/utils/privacy.js'

// 天气数据
const weatherData = reactive({
  infos: {
    weather: "",
    temperature: "--",
    humidity: "--",
    wind_power_v2: "--",
    air_pressure: "--"
  },
  update_time: "" // 更新时间
})

// 加载状态
const isLoadingWeather = ref(false)

const aiQuestions = [
  {
    title: '叶片发黄该从哪查？',
    recommend: '最近阴雨天多，管理要点？'
  },
  {
    title: '水稻分蘖期怎么管理？',
    recommend: '如何提高分蘖成穗率？'
  },
  {
    title: '玉米倒伏了怎么办？',
    recommend: '预防玉米倒伏的措施？'
  }
]

const aiQuestion = ref(aiQuestions[0])

// 商品列表数据
const products = ref([])

// 文章列表数据
const articles = ref([])

// 弹窗控制
const showWeatherPopup = ref(false)
const showArticlePopup = ref(false)
const currentArticle = ref(null)
const showLocationPermissionPopup = ref(false)

// 方法
const showTip = () => {
  uni.showToast({
    title: '建议先看今日农事，再去问 AI',
    icon: 'none',
    duration: 2000
  })
}

const showWeatherDetail = () => {
  showWeatherPopup.value = true
}

const showArticleDetail = (article) => {
  if (!article.id) {
    uni.showToast({
      title: '文章信息不完整',
      icon: 'none',
      duration: 2000
    })
    return;
  }
  
  // 跳转到农技详情页
  uni.navigateTo({
    url: `/pages/knowledge/detail?id=${article.id}`
  })
}

const showProductDetail = (product) => {
  if (!product.id) {
    uni.showToast({
      title: '商品信息不完整',
      icon: 'none',
      duration: 2000
    })
    return;
  }
  
  // 跳转到农资详情页
  uni.navigateTo({
    url: `/pages/service/mall-detail?id=${product.id}`
  })
}

const goToAI = () => {
  uni.switchTab({
  	url: '/pages/knowledge/ai-chat/index'
  });
}


const goToMall = () => {
  uni.switchTab({
    url: '/pages/service/mall'
  })
}

const goToKnowledge = () => {
  uni.switchTab({
    url: '/pages/knowledge/index'
  })
}

const askAIAboutWeather = () => {
  showWeatherPopup.value = false
  uni.navigateTo({
    url: '/pages/knowledge/ai-chat/index?question=' + encodeURIComponent('今日天气适宜哪些农事活动？')
  })
}

const askAIAboutArticle = () => {
  showArticlePopup.value = false
  if (currentArticle.value) {
    uni.navigateTo({
      url: '/pages/knowledge/ai-chat/index?question=' + encodeURIComponent('关于' + currentArticle.value.title + '有什么建议？')
    })
  }
}

const handleRefresh = () => {
  if (isLoadingWeather.value) {
    uni.showToast({
      title: '正在刷新中...',
      icon: 'none',
      duration: 1500
    });
    return;
  }
  fetchWeatherData(true);
}

/**
 * 显示位置权限说明弹窗
 */
const showLocationPermissionGuide = () => {
  showLocationPermissionPopup.value = true
}

const showChange= (e)=>{
	showLocationPermissionPopup.value = e.showLocationPermissionPopup
}

/**
 * 关闭位置权限说明弹窗
 */
const closeLocationPermissionPopup = () => {
  showLocationPermissionPopup.value = false
}

/**
 * 检查隐私协议同意状态
 * @returns {boolean} 是否已同意隐私协议
 */
const checkPrivacyAgreement = () => {
  return privacyUtil.checkAndRedirect()
}

/**
 * 获取实时天气数据
 */
const fetchWeatherData = async (showToast = false) => {
  // 首先检查隐私协议同意状态
  if (!checkPrivacyAgreement()) {
    return;
  }
  
  if (isLoadingWeather.value) {
    return;
  }
  
  // 如果是手动刷新，显示提示
  if (showToast) {
    uni.showToast({
      title: '正在刷新天气...',
      icon: 'loading',
      duration: 2000
    });
  }
  
  isLoadingWeather.value = true;
  
  try {
    // 1. 显示位置权限说明弹窗
    showLocationPermissionGuide();
    
    // 2. 获取当前位置（这会触发系统权限弹窗）
    const location = await getLocation();
    console.log('获取到位置信息：', location);
    
    // 3. 位置获取成功后关闭权限说明弹窗
    closeLocationPermissionPopup();
    
    // 4. 根据位置查询天气
    const weatherResult = await getWeatherInfo({
      latitude: location.latitude,
      longitude: location.longitude,
      type: 'now', // 查询实时天气
      added_fields: 'air' // 附加空气质量信息
    });
    
    console.log('天气查询结果：', weatherResult);
    
    // 5. 更新天气数据
    if (weatherResult && weatherResult.result && weatherResult.result.realtime) {
      const realtime = weatherResult.result.realtime;
      const infos = realtime[0].infos || {};
      
      weatherData.infos = {
        weather: infos.weather || '未知',
        temperature: infos.temperature !== undefined ? infos.temperature : '--',
        humidity: infos.humidity !== undefined ? infos.humidity : '--',
        wind_power_v2: infos.wind_power_v2 || '--',
        air_pressure: infos.air_pressure !== undefined ? infos.air_pressure : '--'
      };
      
      // 更新时间
      weatherData.update_time = realtime.update_time || '';
      
      console.log('天气数据更新成功：', weatherData);
      
      // 刷新成功提示
      if (showToast) {
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1500
        });
      }
    }
  } catch (error) {
    console.error('获取天气失败：', error);
    
    // 权限被拒绝或其他错误时也要关闭弹窗
    closeLocationPermissionPopup();
    
    uni.showToast({
        title: `${error}`,
        icon: 'none',
        duration: 2000
      })
    // 错误处理
    let errorMsg = '获取天气失败';
    if (error.errMsg) {
      if (error.errMsg.includes('auth deny')) {
        errorMsg = '定位权限被拒绝，请在设置中开启定位权限';
      } else if (error.errMsg.includes('timeout')) {
        errorMsg = '定位超时，请检查网络连接';
      }
    } else if (error.message) {
      errorMsg = error.message;
    }
    
    uni.showToast({
      title: errorMsg,
      icon: 'none',
      duration: 2000
    });
    
    // 设置默认值
    weatherData.infos = {
      weather: "暂无数据",
      temperature: "--",
      humidity: "--",
      wind_power_v2: "--",
      air_pressure: "--"
    };
  } finally {
    isLoadingWeather.value = false;
  }
}

/**
 * 获取第一张图片地址
 * @param {string} swiperImages - 图片地址字符串，可能包含多个用逗号分隔的地址
 * @returns {string} - 返回第一张图片地址
 */
const getFirstImage = (swiperImages) => {
  if (!swiperImages) {
    return '/static/images/products/agriculture-tools.jpg';
  }
  
  // 如果包含逗号，说明有多张图片，取第一张
  if (swiperImages.includes(',')) {
    return swiperImages.split(',')[0].trim();
  }
  
  // 否则直接返回
  return swiperImages;
}

/**
 * 格式化阅读量显示
 * @param {number} count - 阅读量数字
 * @returns {string} - 格式化后的阅读量（如：1.2k）
 */
const formatReadCount = (count) => {
  if (!count || count === 0) return '0';
  if (count >= 1000) {
    return (count / 1000).toFixed(1) + 'k';
  }
  return count.toString();
}

/**
 * 获取推荐商品列表
 */
const fetchRecommendedProducts = async () => {
  // 首先检查隐私协议同意状态
  if (!checkPrivacyAgreement()) {
    return;
  }
  
  try {
    const result = await getMallList({
      isRecommended: 1, // 查询推荐商品
      pageNum: 1,
      pageSize: 4 // 只获取4个推荐商品
    });
    
    console.log('推荐商品查询结果：', result);
    
    if (result.data && result.data.rows && result.data.rows.length > 0) {
      // 映射后端数据到前端展示格式
      products.value = result.data.rows.map(item => ({
        id: item.id,
        title: item.name || item.title || '商品名称',
        desc: item.description || item.desc || '暂无描述',
        price: item.price || '0',
        unit: item.unit || '件',
        image: getFirstImage(item.swiperImages)
      }));
      
      console.log('推荐商品数据更新成功：', products.value);
    } else {
      // 如果没有推荐商品，使用默认数据
      console.log('暂无推荐商品，使用默认数据');
      setDefaultProducts();
    }
  } catch (error) {
    console.error('获取推荐商品失败：', error);
    // 失败时使用默认数据
    setDefaultProducts();
  }
}

/**
 * 设置默认商品数据
 */
const setDefaultProducts = () => {
  products.value = [
    {
      title: '优质玉米种子',
      desc: '高产抗病品种',
      price: '68',
      unit: '袋',
      image: '/static/images/products/corn-seeds-new.jpg'
    },
    {
      title: '有机肥料',
      desc: '纯天然环保',
      price: '128',
      unit: '袋',
      image: '/static/images/products/organic-fertilizer-new.jpg'
    },
    {
      title: '杀虫剂',
      desc: '广谱高效',
      price: '45',
      unit: '瓶',
      image: '/static/images/products/insecticide.jpg'
    },
    {
      title: '农用地膜',
      desc: '保湿保温',
      price: '89',
      unit: '卷',
      image: '/static/images/products/plastic-film.jpg'
    }
  ];
}

/**
 * 获取热门文章列表（根据阅读量）
 */
const fetchTopArticles = async () => {
  // 首先检查隐私协议同意状态
  if (!checkPrivacyAgreement()) {
    return;
  }
  
  try {
    const result = await getTopArticles();
    
    console.log('热门文章查询结果：', result);
    
    if (result.data && result.data.length > 0) {
      // 映射后端数据到前端展示格式
      articles.value = result.data.slice(0, 4).map(item => ({
        id: item.id,
        title: item.title || '文章标题',
        source: item.category || item.source || '农技知识',
        readCount: formatReadCount(item.viewCount || item.readCount || 0),
        image: getFirstImage(item.imageUrl) || '/static/images/rice-farming/rice-field1.jpg',
        time: item.createTime || item.publishTime || '',
        content: item.content || item.summary || '暂无内容',
        points: [] // 后端如果有要点字段可以映射
      }));
      
      console.log('热门文章数据更新成功：', articles.value);
    } else {
      // 如果没有热门文章，使用默认数据
      console.log('暂无热门文章，使用默认数据');
      setDefaultArticles();
    }
  } catch (error) {
    console.error('获取热门文章失败：', error);
    // 失败时使用默认数据
    setDefaultArticles();
  }
}

/**
 * 设置默认文章数据
 */
const setDefaultArticles = () => {
  articles.value = [
    {
      title: '春季水稻种植技术要点',
      source: '农技知识',
      readCount: '1.2k',
      image: '/static/images/rice-farming/rice-field1.jpg',
      time: '2024-03-15',
      content: '春季是水稻种植的关键时期，需要掌握以下技术要点。',
      points: []
    },
    {
      title: '玉米病虫害防治指南',
      source: '植保技术',
      readCount: '856',
      image: '/static/images/rice-farming/rice-field2.jpg',
      time: '2024-03-14',
      content: '玉米病虫害防治是确保产量的重要环节。',
      points: []
    },
    {
      title: '现代农业机械化作业规范',
      source: '农机管理',
      readCount: '2.1k',
      image: '/static/images/rice-farming/rice-field3.jpg',
      time: '2024-03-13',
      content: '提升农业机械化作业水平是现代农业发展的必然要求。',
      points: []
    },
    {
      title: '土壤肥力提升与改良方案',
      source: '土肥管理',
      readCount: '1.5k',
      image: '/static/images/rice-farming/rice-field4.jpg',
      time: '2024-03-12',
      content: '健康的土壤是丰收的基础。',
      points: []
    }
  ];
}

// 页面加载时检查隐私协议状态，只有同意后才获取数据
onMounted(() => {
  // 检查隐私协议同意状态
  if (checkPrivacyAgreement()) {
    // 直接加载数据，天气数据获取时会显示权限说明弹窗（该方案鸿蒙的安卓审核不通过，需要在用户自己点击获取天气的时候显示权限说明弹窗）
    // fetchWeatherData() 
    fetchRecommendedProducts()
    fetchTopArticles()
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 24rpx;
  background-color: #F6FDF9;
  min-height: 100vh;
}

// 顶部 TopBar
.top-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 12rpx;
  padding: 0 8rpx;

  .greeting {
    font-size: 32rpx;
    font-weight: 600;
    color: #1A3026;
    letter-spacing: 1rpx;
    line-height: 1.4;
  }

  .top-sub-guide {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 4rpx;
  }
}

// Card 基础样式（复用旧首页）
.card {
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04), 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
  margin-bottom: 24rpx;
  overflow: hidden;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 28rpx;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

    .title-section {
      display: flex;
      align-items: center;

      .title-line {
        width: 4rpx;
        height: 28rpx;
        border-radius: 0;
        background: linear-gradient(180deg, #3BB44A, #66CC6A);
        margin-right: 16rpx;
      }

      .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }

    .tag {
      background: linear-gradient(135deg, #3BB44A, #66CC6A);
      color: white;
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
    }

    .more-btn {
      display: flex;
      align-items: center;
      color: #3BB44A;
      font-size: 24rpx;

      text {
        margin-right: 6rpx;
      }
    }
  }
}

// 田间环境状态块 (降级为扁平化背景块)
.environmental-status-block {
  position: relative;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4FAF7 100%);
  border: 1rpx solid rgba(59, 180, 74, 0.08);
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  overflow: hidden;

  .status-main {
    display: flex;
    justify-content: space-between;
    // align-items: flex-end;
    margin-bottom: 20rpx;

    .main-info {
      display: flex;
      flex-direction: column;

      .main-text {
        font-size: 48rpx;
        font-weight: 800;
        color: #1A3026;
        line-height: 1;
      }
	  .main-textN{
		font-size: 30rpx;
		font-weight: 600;
		color: #1A3026;
		line-height: 1;
	  }

      .fixed-subtitle {
        font-size: 24rpx;
        color: #7A9086;
        margin-top: 8rpx;
      }
    }
    
    .refresh-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: rgba(59, 180, 74, 0.08);
      transition: all 0.3s ease;
      
      &:active {
        background: rgba(59, 180, 74, 0.15);
        transform: scale(0.95);
      }
      
      &.rotating {
        animation: rotate 1s linear infinite;
      }
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16rpx;
    border-top: 1rpx solid rgba(0, 0, 0, 0.03);

    .metric-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8rpx;

      .label {
        font-size: 22rpx;
        color: #8EAC9D;
      }

      .value {
        font-size: 24rpx;
        font-weight: 600;
        color: #2D4035;
      }
    }
  }
  
  .update-time {
    margin-top: 12rpx;
    text-align: right;
    
    text {
      font-size: 20rpx;
      color: #999;
    }
  }
}

// AI 主卡
.ai-card {
  position: relative;
  background: linear-gradient(135deg, rgba(59, 180, 74, 0.18), rgba(102, 204, 106, 0.10));
  border: 1rpx solid rgba(59, 180, 74, 0.08);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04), 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
  margin-bottom: 24rpx;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:active {
    transform: scale(0.99);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  }

  // 多层背景光斑效果 (底层氛围)
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 85% 25%, rgba(59, 180, 74, 0.22), transparent 60%),
      radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.14), transparent 55%);
    pointer-events: none;
    z-index: 1;
  }

  // 抽象 AI 设计母题层 (右侧增强设计感)
  &::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 80%;
    height: 140%;
    background: 
      radial-gradient(circle at 75% 35%, rgba(59, 180, 74, 0.06) 0%, transparent 45%),
      radial-gradient(circle at 85% 65%, rgba(76, 175, 80, 0.04) 0%, transparent 40%),
      radial-gradient(circle at 60% 85%, rgba(59, 180, 74, 0.03) 0%, transparent 50%);
    filter: blur(30rpx);
    pointer-events: none;
    z-index: 2;
  }

  .ai-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2rpx,
      rgba(255, 255, 255, 0.03) 2rpx,
      rgba(255, 255, 255, 0.03) 4rpx
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
  }

  .ai-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 32rpx 28rpx 16rpx;

    .ai-pill {
      background: #FFFFFF;
      color: #3BB44A;
      font-size: 24rpx;
      font-weight: 600;
      padding: 8rpx 24rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
      margin-bottom: 0;
    }

    .ai-subtitle {
      font-size: 28rpx;
      color: #5C6A70;
      font-weight: 500;
    }
  }

  .ai-body {
    position: relative;
    z-index: 3;
    padding: 12rpx 28rpx 20rpx;

    .ai-title {
      font-size: 40rpx;
      font-weight: 700;
      color: #2C3E50;
      line-height: 1.3;
      margin-bottom: 12rpx;
      display: block;
    }

    .ai-desc {
      font-size: 26rpx;
      color: rgba(44, 62, 80, 0.6);
      line-height: 1.4;
      display: block;
    }
  }

  .ai-footer {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    padding: 16rpx 28rpx 24rpx;

    .ai-cta {
      display: flex;
      align-items: center;
    }
  }
}

// 农资精选
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  padding: 16rpx;

  .product-card {
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);

    .product-image {
      width: 100%;
      height: 160rpx;
      background: #f5f5f5;
    }

    .product-info {
      padding: 16rpx;

      .product-title {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 6rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .product-desc {
        font-size: 22rpx;
        color: #8C9396;
        margin-bottom: 12rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price-row {
        display: flex;
        align-items: baseline;
        margin-bottom: 12rpx;

        .price {
          font-size: 32rpx;
          font-weight: 700;
          color: #3BB44A;
        }

        .unit {
          font-size: 22rpx;
          color: #8C9396;
          margin-left: 4rpx;
        }
      }
    }
  }
}

// 农技推荐
.articles-list {
  padding: 16rpx;

  .article-card {
    display: flex;
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 16rpx;

    .article-image-wrapper {
      position: relative;
      width: 200rpx;
      height: 140rpx;
      flex-shrink: 0;

      .article-image {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
      }

      .article-tag {
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        background: #2196F3;
        color: white;
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        border-radius: 6rpx;
      }
    }

    .article-info {
      flex: 1;
      padding: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .article-title {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 6rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .article-source {
        font-size: 22rpx;
        color: #8C9396;
        margin-bottom: 8rpx;
      }

      .article-stats {
        display: flex;
        align-items: center;

        .read-count {
          font-size: 22rpx;
          color: #999;
          margin-left: 6rpx;
        }
      }
    }
  }
}

// 弹窗样式
// 弹窗样式
.location-permission-popup {
  padding: 40rpx;
  // width: 600rpx;
  // background: white;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  // max-width: 90vw;
  .permission-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .permission-icon {
      margin-right: 16rpx;
      flex-shrink: 0;
    }

    .permission-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      flex: 1;
    }
  }

  .permission-content {
    font-size: 25rpx;
    color: #666;
    line-height: 1.6;
    text-align: left;
  }
}

.popup-content {
  padding: 32rpx;
  max-height: 80vh;
  overflow-y: auto;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #2C3E50;
    }
  }

  .weather-detail {
    margin-bottom: 32rpx;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);

      .detail-label {
        font-size: 26rpx;
        color: #8C9396;
      }

      .detail-value {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
      }
    }

    .advice-detail {
      margin-top: 24rpx;
      padding: 20rpx;
      background: rgba(59, 180, 74, 0.05);
      border-radius: 16rpx;

      .advice-label {
        font-size: 26rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 8rpx;
      }

      .advice-content {
        font-size: 26rpx;
        color: #2C3E50;
        line-height: 1.4;
      }
    }
  }

  .article-detail {
    margin-bottom: 32rpx;

    .article-detail-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #2C3E50;
      margin-bottom: 12rpx;
    }

    .article-detail-time {
      font-size: 22rpx;
      color: #8C9396;
      margin-bottom: 24rpx;
    }

    .article-detail-content {
      .content-paragraph {
        font-size: 26rpx;
        color: #2C3E50;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }

      .content-subtitle {
        font-size: 28rpx;
        font-weight: 600;
        color: #2C3E50;
        margin-bottom: 12rpx;
      }

      .content-list {
        .list-item {
          font-size: 26rpx;
          color: #2C3E50;
          line-height: 1.5;
          margin-bottom: 8rpx;
        }
      }
    }
  }
}

// 旋转动画
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>