|
|
@@ -1,13 +1,951 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- 首页
|
|
|
- </view>
|
|
|
+ <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="showWeatherDetail">
|
|
|
+ <view class="status-main">
|
|
|
+ <view class="main-info">
|
|
|
+ <text class="main-text">{{ weatherData.infos.temperature }}° · {{ weatherData.infos.weather }}</text>
|
|
|
+ <text class="fixed-subtitle">田间环境概览</text>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- 天气详情弹窗 -->
|
|
|
+ <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 } from 'vue'
|
|
|
+
|
|
|
+// Mock 数据
|
|
|
+const weatherData = reactive({
|
|
|
+ infos: {
|
|
|
+ weather: "晴朗",
|
|
|
+ temperature: 28,
|
|
|
+ humidity: 65,
|
|
|
+ wind_power_v2: "3级",
|
|
|
+ air_pressure: 1008
|
|
|
+ },
|
|
|
+ update_time: "10:20" // 暗桩：保留字段供后续对接
|
|
|
+})
|
|
|
+
|
|
|
+const aiQuestions = [
|
|
|
+ {
|
|
|
+ title: '叶片发黄该从哪查？',
|
|
|
+ recommend: '最近阴雨天多，管理要点？'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '水稻分蘖期怎么管理？',
|
|
|
+ recommend: '如何提高分蘖成穗率？'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '玉米倒伏了怎么办？',
|
|
|
+ recommend: '预防玉米倒伏的措施？'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const aiQuestion = ref(aiQuestions[0])
|
|
|
+
|
|
|
+const products = ref([
|
|
|
+ {
|
|
|
+ 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 articles = ref([
|
|
|
+ {
|
|
|
+ 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: [
|
|
|
+ '测土配方，科学施肥',
|
|
|
+ '增加有机质，改良结构',
|
|
|
+ '酸碱度调理，平衡养分',
|
|
|
+ '生态修复，持久肥力'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 弹窗控制
|
|
|
+const showWeatherPopup = ref(false)
|
|
|
+const showArticlePopup = ref(false)
|
|
|
+const currentArticle = ref(null)
|
|
|
+
|
|
|
+// 方法
|
|
|
+const showTip = () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '建议先看今日农事，再去问 AI',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const showWeatherDetail = () => {
|
|
|
+ showWeatherPopup.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const showArticleDetail = (article) => {
|
|
|
+ currentArticle.value = article
|
|
|
+ showArticlePopup.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const showProductDetail = (product) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '后续接入商品详情',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const goToAI = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ 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 + '有什么建议？')
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less">
|
|
|
+<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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixed-subtitle {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #7A9086;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗样式
|
|
|
+.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;
|
|
|
+ }
|
|
|
|
|
|
-</style>
|
|
|
+ .content-list {
|
|
|
+ .list-item {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #2C3E50;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
