feiniao-farm-h5/src/views/old_mini/home/components/AgriculturalDynamics.vue

<template>
    <div class="agricultural-dynamics">
        <!-- 标题 -->
        <div class="title">农情动态</div>

        <!-- 标签页导航 -->
        <div class="tab-nav">
            <div 
                v-for="tab in tabs" 
                :key="tab.value" 
                class="tab-item" 
                :class="{ active: activeTab === tab.value }" 
                @click="activeTab = tab.value"
            >
                {{ tab.label }}
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 气象预警内容 -->
            <div v-if="activeTab === 'weather'" class="content-list">
                <div 
                    v-for="(item, index) in weatherList" 
                    :key="index" 
                    class="content-item"
                    @click="handleItem(item)"
                >
                    <div class="item-image">
                        <img :src="require('@/assets/img/home/banner.png')" :alt="item.alt" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">{{ item.text }}</div>
                        <div class="item-date">{{ item.date }}</div>
                    </div>
                </div>
            </div>

            <!-- 农事预警内容 -->
            <div v-if="activeTab === 'agricultural'" class="content-list">
                <div 
                    v-for="(item, index) in agriculturalList" 
                    :key="index" 
                    class="content-item"
                    @click="handleItem(item)"
                >
                    <div class="item-image">
                        <img :src="require('@/assets/img/home/banner.png')" :alt="item.alt" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">{{ item.text }}</div>
                        <div class="item-date">{{ item.date }}</div>
                    </div>
                </div>
            </div>

            <!-- 专家问答内容 -->
            <div v-if="activeTab === 'expert'" class="content-list expert-qa">
                <div 
                    v-for="(item, index) in expertQAList" 
                    :key="index" 
                    class="qa-item"
                    @click="handleItem(item)"
                >
                    <div class="question-header">
                        <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="">
                        <div class="question-title">{{ item.question }}</div>
                    </div>
                    <div class="expert-info">
                        <el-avatar
                            class="expert-avatar"
                            :size="16"
                            :src="item.expertAvatar"
                        />
                        <div class="expert-details">
                            <span class="expert-name">{{ item.expertName }}</span>
                            <span class="expert-title">{{ item.expertTitle }}</span>
                            <span class="qa-date">{{ item.date }}</span>
                        </div>
                    </div>
                    <div class="answer-content">
                        {{ item.answer }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const activeTab = ref("weather");

const tabs = [
    { label: "气象预警", value: "weather" },
    { label: "农事预警", value: "agricultural" },
    { label: "专家问答", value: "expert" }
];

// 气象预警数据
const weatherList = ref([
    {
        image: "@/assets/img/home/banner.png",
        alt: "气象预警",
        text: "周边5km出现了高温灼烧气象预警, 请注意某某防范!",
        date: "2022-11-12"
    },
    {
        image: "@/assets/img/home/banner.png",
        alt: "气象预警",
        text: "周边3km出现了暴雨预警, 请注意防范!",
        date: "2022-11-10"
    },
]);

// 农事预警数据
const agriculturalList = ref([
    {
        image: "@/assets/img/home/banner.png",
        alt: "农事预警",
        text: "建议进行病虫害防治, 注意观察作物生长情况",
        date: "2022-11-11"
    },
    {
        image: "@/assets/img/home/banner.png",
        alt: "农事预警",
        text: "土壤湿度偏低, 建议及时灌溉补充水分",
        date: "2022-11-09"
    },
]);

// 专家问答数据
const expertQAList = ref([
    {
        question: "怎么预估我的果园的今年荔枝的产量?",
        expertName: "高小波",
        expertTitle: "华南农业大学农业专家",
        expertAvatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        date: "2024.11.01",
        answer: "遇雨补喷: 选择在无风或微风天气进行, 以减少药物的漂移, 如果喷药后4小时内遇到雨水冲刷, 应重新..."
    },
    {
        question: "果树病虫害防治的最佳时间是什么时候?",
        expertName: "李教授",
        expertTitle: "中国农业大学植保专家",
        expertAvatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        date: "2024.10.28",
        answer: "春季萌芽前是防治病虫害的关键时期, 建议在3月下旬至4月上旬进行第一次全面喷药..."
    }
]);

const handleItem = (item) => {
    console.log(item);
    if(activeTab.value === 'expert'){
        router.push('/expert_detail')
    }else{
        router.push('/warning_detail')
    }
}
</script>

<style scoped lang="scss">
.agricultural-dynamics {
    padding: 0 10px;

    .title {
        font-size: 16px;
        font-weight: bold;
        color: #1D2129;
        margin-bottom: 16px;
    }

    .tab-nav {
        display: flex;
        margin-bottom: 16px;

        .tab-item {
            margin-right: 20px;
            padding-bottom: 6px;
            &.active {
                color: #2199F8;
                border-bottom: 2px solid #2199F8;
            }
        }
    }

    .content-area {
        .content-list {
            .content-item {
                display: flex;
                align-items: center;
                .item-image {
                    width: 114px;
                    height: 74px;
                    margin-right: 12px;
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                }

                .item-content {
                    flex: 1;

                    .item-text {
                        color: #1D2129;
                        margin-bottom: 10px;
                    }

                    .item-date {
                        color: #86909C;
                        font-size: 13px;
                    }
                }
            }
            .content-item + .content-item{
                margin-top: 12px;
            }

            // 专家问答样式
            &.expert-qa {
                .qa-item {
                    padding: 0 12px;

                    .question-header {
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                        gap: 8px;

                        .question-icon {
                            width: 20px;
                            height: 20px;
                        }

                        .question-title {
                            font-size: 16px;
                            font-weight: 600;
                        }
                    }

                    .expert-info {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        margin-bottom: 8px;
                        .expert-details {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 13px;
                            color: #666666;
                        }
                    }

                    .answer-content {
                        color: #333333;
                        .font-bold{
                            font-weight: 500;
                        }
        }
                }
                .qa-item + .qa-item{
                    margin-top: 16px;
                }
            }
        }
    }
}
</style>